1	<?php
2
3	declare(strict_types=1);
4
5	namespace Drupal\display_builder\Plugin\display_builder\Island;
6
7	use Drupal\breakpoint\BreakpointManager;
8	use Drupal\Core\Extension\ModuleExtensionList;
9	use Drupal\Core\Extension\ThemeExtensionList;
10	use Drupal\Core\Form\FormStateInterface;
11	use Drupal\Core\StringTranslation\TranslatableMarkup;
12	use Drupal\display_builder\Attribute\Island;
13	use Drupal\display_builder\InstanceInterface;
14	use Drupal\display_builder\IslandConfigurationFormInterface;
15	use Drupal\display_builder\IslandConfigurationFormTrait;
16	use Drupal\display_builder\IslandPluginBase;
17	use Drupal\display_builder\IslandType;
18	use Symfony\Component\DependencyInjection\ContainerInterface;
19
20	/**
21	* Island plugin implementation.
22	*/
23	#[Island(
24	id: 'viewport',
25	label: new TranslatableMarkup('Viewport switcher'),
26	description: new TranslatableMarkup('Change main region width according to breakpoints.'),
27	type: IslandType::Button,
28	modules: ['breakpoint'],
29	default_region: 'end',
30	)]
31	class ViewportSwitcher extends IslandPluginBase implements IslandConfigurationFormInterface {
32
33	use IslandConfigurationFormTrait;
34
35	private const HIDE_PROVIDER = ['toolbar'];
36
37	/**
38	* The module list extension service.
39	*/
40	protected ThemeExtensionList $themeList;
41
42	/**
43	* The module list extension service.
44	*/
45	protected ModuleExtensionList $moduleList;
46
47	/**
48	* The breakpoint manager.
49	*/
50	protected BreakpointManager $breakpointManager;
51
52	/**
53	* {@inheritdoc}
54	*/
55	public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
56	$instance = parent::create($container, $configuration, $plugin_id, $plugin_definition);
57	$instance->themeList = $container->get('extension.list.theme');
58	$instance->moduleList = $container->get('extension.list.module');
59	$instance->breakpointManager = $container->get('breakpoint.manager');
60
61	return $instance;
62	}
63
64	/**
65	* {@inheritdoc}
66	*/
67	public function defaultConfiguration(): array {
68	return [
69	'exclude' => [],
70	'format' => 'default',
71	];
72	}
73
74	/**
75	* {@inheritdoc}
76	*/
77	public function buildConfigurationForm(array $form, FormStateInterface $form_state): array {
78	$configuration = $this->getConfiguration();
79
80	$form['format'] = [
81	'#type' => 'select',
82	'#title' => $this->t('Selector format'),
83	'#description' => $this->t('Choose the appearance of the selector. Normal select or a compact dropdown menu.'),
84	'#options' => [
85	'default' => $this->t('Default'),
86	'compact' => $this->t('Compact'),
87	],
88	'#default_value' => $configuration['format'],
89	];
90
91	$form['exclude'] = [
92	'#type' => 'checkboxes',
93	'#title' => $this->t('Exclude providers'),
94	'#options' => $this->getProvidersOptions($this->t('breakpoint'), $this->t('breakpoints')),
95	'#default_value' => $configuration['exclude'],
96	];
97
98	return $form;
99	}
100
101	/**
102	* {@inheritdoc}
103	*/
104	public function configurationSummary(): array {
105	$configuration = $this->getConfiguration();
106	$summary = [];
107
108	$exclude = \array_filter($configuration['exclude'] ?? []);
109
110	$summary[] = $this->t('Excluded providers: @exclude', [
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
112	]);
113
114	$summary[] = $this->t('Format: @format', [
115	'@format' => $configuration['format'] ?? 'default',
116	]);
117
118	return $summary;
119	}
120
121	/**
122	* {@inheritdoc}
123	*/
124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;
188	}
189
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}
225
226	/**
227	* Get the definitions list which is used by a few methods.
228	*
229	* @return array
230	*   Breakpoints plugin definitions as associative arrays.
231	*/
232	public function getDefinitions(): array {
233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}
248
249	/**
250	* Get width and max width from media query.
251	*
252	* @param string $query
253	*   The media query from the breakpoint definition.
254	*
255	* @return ?string
256	*   The width with its unit (120px, 13em, 100vh...). Null is no width found.
257	*/
258	protected function getMaxWidthValueFromMediaQuery(string $query): ?string {
259	if (\str_contains($query, 'not ')) {
260	// Queries with negated expression(s) are not supported.
261	return NULL;
262	}
263	// Look for max-width: 1250px or max-width: 1250 px.
264	\preg_match('/max-width:\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
265
266	if (\count($matches) > 2) {
267	return $matches[1] . $matches[2];
268	}
269	// Looking for width <= 1250px or <= 1250 px.
270	\preg_match('/width\s*<=\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
271
272	if (\count($matches) > 1) {
273	return $matches[1];
274	}
275
276	// @todo Currently only supports queries with max-width or width <= using
277	// px, em, vh units.
278	// Does not support min-width, percentage units, or complex/combined media
279	// queries.
280	return NULL;
281	}
282
283	/**
284	* Get providers options for select input.
285	*
286	* @param string|TranslatableMarkup $singular
287	*   Singular label of the plugins.
288	* @param string|TranslatableMarkup $plural
289	*   Plural label of the plugins.
290	*
291	* @return array
292	*   An associative array with extension ID as key and extension description
293	*   as value.
294	*/
295	protected function getProvidersOptions(string|TranslatableMarkup $singular = 'definition', string|TranslatableMarkup $plural = 'definitions'): array {
296	$options = [];
297
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
299	$params = [
300	'@name' => $provider['name'],
301	'@type' => $provider['type'],
302	'@count' => $provider['count'],
303	'@singular' => $singular,
304	'@plural' => $plural,
305	];
306	$options[$provider_id] = $this->formatPlural($provider['count'], '@name (@type, @count @singular)', '@name (@type, @count @plural)', $params);
307	}
308
309	return $options;
310	}
311
312	/**
313	* Get all providers.
314	*
315	* @param array $definitions
316	*   Plugin definitions.
317	*
318	* @return array
319	*   Drupal extension definitions, keyed by extension ID
320	*/
321	protected function getProviders(array $definitions): array {
322	$themes = $this->themeList->getAllInstalledInfo();
323	$modules = $this->moduleList->getAllInstalledInfo();
324	$providers = [];
325
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
334	$providers[$provider_id] = $provider;
335	}
336
337	return $providers;
338	}
339
340	}

---

Paths

Below are the source code lines that represent each code path as identified by Xdebug. Please note a path is not necessarily coterminous with a line, a line may contain multiple paths and therefore show up more than once. Please also be aware that some paths may include implicit rather than explicit branches, e.g. an if statement always has an else as part of its logical flow even if you didn't write one.

ViewportSwitcher->build

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
187	return $select;

124	public function build(InstanceInterface $builder, array $data = [], array $options = []): array {
125	$configuration = $this->getConfiguration();
126	$definitions = $this->getDefinitions();
127
128	$groups = [];
129
130	foreach ($definitions as $definition) {
130	foreach ($definitions as $definition) {
131	if (!isset($definition['group'])) {
132	continue;
133	}
134	$groups[$definition['group']] = $definition['group'];
135	}
136
137	$options = $data = [];
138	$items = [
139	[
140	'title' => $this->t('Fluid'),
141	'class' => 'active',
142	],
143	[
144	'divider' => TRUE,
145	],
146	];
147
148	foreach ($groups as $group_id => $label) {
148	foreach ($groups as $group_id => $label) {
149	$points = $this->breakpointManager->getBreakpointsByGroup($group_id);
150
151	foreach ($points as $point_id => $point) {
152	$query = $point->getMediaQuery();
153	$width = $this->getMaxWidthValueFromMediaQuery($query);
154
155	if (!$width) {
156	continue;
157	}
158	$point_label = $point->getLabel();
159	$options[$label][$point_id] = $point_label;
160	$items[] = [
161	'title' => $point_label,
162	'value' => $point_id,
163	];
164	$data[$point_id] = $width;
165	}
166	}
167
168	$select = [
169	'#type' => 'component',
170	'#component' => 'display_builder:select',
171	'#attached' => [
172	'library' => ['display_builder/viewport_switcher'],
173	],
174	'#props' => [
175	'options' => $options,
176	'icon' => 'window',
177	'empty_option' => $this->t('Fluid'),
178	],
179	'#attributes' => [
180	'style' => 'display: inline-block;',
181	'data-points' => \json_encode($data),
182	'data-island-action' => 'viewport',
183	],
184	];
185
186	if ($configuration['format'] !== 'compact') {
190	unset($select['#attributes']['style']);
191	$select['#props']['icon'] = NULL;
192
193	$button = $this->buildButton('', NULL, 'display', $this->t('Switch viewport of this display'));
194	$button['#attributes']['class'] = ['switch-viewport-btn'];
195
196	return [
197	'#type' => 'component',
198	'#component' => 'display_builder:dropdown',
199	'#slots' => [
200	'button' => $button,
201	'content' => [
202	'#type' => 'component',
203	'#component' => 'display_builder:menu',
204	'#props' => [
205	'items' => $items,
206	],
207	'#attributes' => [
208	'class' => ['viewport-menu', 'db-background'],
209	'data-points' => \json_encode($data),
210	],
211	],
212	],
213	'#props' => [
214	'tooltip' => $this->t('Switch viewport'),
215	],
216	'#attributes' => [
217	'class' => ['switch-viewport'],
218	'data-island-action' => 'viewport',
219	],
220	'#attached' => [
221	'library' => ['display_builder/viewport_switcher'],
222	],
223	];
224	}

ViewportSwitcher->buildConfigurationForm

77	public function buildConfigurationForm(array $form, FormStateInterface $form_state): array {
78	$configuration = $this->getConfiguration();
79
80	$form['format'] = [
81	'#type' => 'select',
82	'#title' => $this->t('Selector format'),
83	'#description' => $this->t('Choose the appearance of the selector. Normal select or a compact dropdown menu.'),
84	'#options' => [
85	'default' => $this->t('Default'),
86	'compact' => $this->t('Compact'),
87	],
88	'#default_value' => $configuration['format'],
89	];
90
91	$form['exclude'] = [
92	'#type' => 'checkboxes',
93	'#title' => $this->t('Exclude providers'),
94	'#options' => $this->getProvidersOptions($this->t('breakpoint'), $this->t('breakpoints')),
95	'#default_value' => $configuration['exclude'],
96	];
97
98	return $form;
99	}

ViewportSwitcher->configurationSummary

105	$configuration = $this->getConfiguration();
106	$summary = [];
107
108	$exclude = \array_filter($configuration['exclude'] ?? []);
109
110	$summary[] = $this->t('Excluded providers: @exclude', [
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
112	]);
113
114	$summary[] = $this->t('Format: @format', [
115	'@format' => $configuration['format'] ?? 'default',
116	]);
117
118	return $summary;
119	}

105	$configuration = $this->getConfiguration();
106	$summary = [];
107
108	$exclude = \array_filter($configuration['exclude'] ?? []);
109
110	$summary[] = $this->t('Excluded providers: @exclude', [
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
111	'@exclude' => ($exclude = \array_filter($configuration['exclude'] ?? [])) ? \implode(', ', $exclude) : $this->t('None'),
112	]);
113
114	$summary[] = $this->t('Format: @format', [
115	'@format' => $configuration['format'] ?? 'default',
116	]);
117
118	return $summary;
119	}

ViewportSwitcher->create

55	public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
56	$instance = parent::create($container, $configuration, $plugin_id, $plugin_definition);
57	$instance->themeList = $container->get('extension.list.theme');
58	$instance->moduleList = $container->get('extension.list.module');
59	$instance->breakpointManager = $container->get('breakpoint.manager');
60
61	return $instance;
62	}

ViewportSwitcher->defaultConfiguration

69	'exclude' => [],
70	'format' => 'default',
71	];
72	}

ViewportSwitcher->getDefinitions

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

233	$definitions = $this->breakpointManager->getDefinitions();
234
235	foreach ($definitions as $definition_id => $definition) {
235	foreach ($definitions as $definition_id => $definition) {
236	if (isset($definition['provider']) && \in_array($definition['provider'], self::HIDE_PROVIDER, TRUE)) {
237	unset($definitions[$definition_id]);
238	}
239
240	// Exclude definitions with not supported media queries.
241	if (!$this->getMaxWidthValueFromMediaQuery($definition['mediaQuery'])) {
242	unset($definitions[$definition_id]);
243	}
244	}
245
246	return $definitions;
247	}

ViewportSwitcher->getMaxWidthValueFromMediaQuery

258	protected function getMaxWidthValueFromMediaQuery(string $query): ?string {
259	if (\str_contains($query, 'not ')) {
261	return NULL;

258	protected function getMaxWidthValueFromMediaQuery(string $query): ?string {
259	if (\str_contains($query, 'not ')) {
264	\preg_match('/max-width:\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
265
266	if (\count($matches) > 2) {
267	return $matches[1] . $matches[2];

258	protected function getMaxWidthValueFromMediaQuery(string $query): ?string {
259	if (\str_contains($query, 'not ')) {
264	\preg_match('/max-width:\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
265
266	if (\count($matches) > 2) {
270	\preg_match('/width\s*<=\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
271
272	if (\count($matches) > 1) {
273	return $matches[1];

258	protected function getMaxWidthValueFromMediaQuery(string $query): ?string {
259	if (\str_contains($query, 'not ')) {
264	\preg_match('/max-width:\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
265
266	if (\count($matches) > 2) {
270	\preg_match('/width\s*<=\s*([0-9]+)\s*([A-Za-z]+)/', $query, $matches);
271
272	if (\count($matches) > 1) {
280	return NULL;
281	}

ViewportSwitcher->getProviders

321	protected function getProviders(array $definitions): array {
322	$themes = $this->themeList->getAllInstalledInfo();
323	$modules = $this->moduleList->getAllInstalledInfo();
324	$providers = [];
325
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
334	$providers[$provider_id] = $provider;
335	}
336
337	return $providers;
338	}

321	protected function getProviders(array $definitions): array {
322	$themes = $this->themeList->getAllInstalledInfo();
323	$modules = $this->moduleList->getAllInstalledInfo();
324	$providers = [];
325
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
334	$providers[$provider_id] = $provider;
335	}
336
337	return $providers;
338	}

321	protected function getProviders(array $definitions): array {
322	$themes = $this->themeList->getAllInstalledInfo();
323	$modules = $this->moduleList->getAllInstalledInfo();
324	$providers = [];
325
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
334	$providers[$provider_id] = $provider;
335	}
336
337	return $providers;
338	}

321	protected function getProviders(array $definitions): array {
322	$themes = $this->themeList->getAllInstalledInfo();
323	$modules = $this->moduleList->getAllInstalledInfo();
324	$providers = [];
325
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
334	$providers[$provider_id] = $provider;
335	}
336
337	return $providers;
338	}

321	protected function getProviders(array $definitions): array {
322	$themes = $this->themeList->getAllInstalledInfo();
323	$modules = $this->moduleList->getAllInstalledInfo();
324	$providers = [];
325
326	foreach ($definitions as $definition) {
326	foreach ($definitions as $definition) {
327	$provider_id = $definition['provider'];
328	$provider = $themes[$provider_id] ?? $modules[$provider_id] ?? NULL;
329
330	if (!$provider) {
331	continue;
332	}
333	$provider['count'] = isset($providers[$provider_id]) ? ($providers[$provider_id]['count']) + 1 : 1;
334	$providers[$provider_id] = $provider;
335	}
336
337	return $providers;
338	}

ViewportSwitcher->getProvidersOptions

295	protected function getProvidersOptions(string|TranslatableMarkup $singular = 'definition', string|TranslatableMarkup $plural = 'definitions'): array {
296	$options = [];
297
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
299	$params = [
300	'@name' => $provider['name'],
301	'@type' => $provider['type'],
302	'@count' => $provider['count'],
303	'@singular' => $singular,
304	'@plural' => $plural,
305	];
306	$options[$provider_id] = $this->formatPlural($provider['count'], '@name (@type, @count @singular)', '@name (@type, @count @plural)', $params);
307	}
308
309	return $options;
310	}

295	protected function getProvidersOptions(string|TranslatableMarkup $singular = 'definition', string|TranslatableMarkup $plural = 'definitions'): array {
296	$options = [];
297
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
299	$params = [
300	'@name' => $provider['name'],
301	'@type' => $provider['type'],
302	'@count' => $provider['count'],
303	'@singular' => $singular,
304	'@plural' => $plural,
305	];
306	$options[$provider_id] = $this->formatPlural($provider['count'], '@name (@type, @count @singular)', '@name (@type, @count @plural)', $params);
307	}
308
309	return $options;
310	}

295	protected function getProvidersOptions(string|TranslatableMarkup $singular = 'definition', string|TranslatableMarkup $plural = 'definitions'): array {
296	$options = [];
297
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
298	foreach ($this->getProviders($this->getDefinitions()) as $provider_id => $provider) {
299	$params = [
300	'@name' => $provider['name'],
301	'@type' => $provider['type'],
302	'@count' => $provider['count'],
303	'@singular' => $singular,
304	'@plural' => $plural,
305	];
306	$options[$provider_id] = $this->formatPlural($provider['count'], '@name (@type, @count @singular)', '@name (@type, @count @plural)', $params);
307	}
308
309	return $options;
310	}