1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as getIonMode } from './ionic-global.js';
|
6 | import { f as focusElement, l as findItemLabel, d as getAriaLabel, e as renderHiddenInput } from './helpers.js';
|
7 | import { c as popoverController, b as actionSheetController, a as alertController } from './overlays.js';
|
8 | import { h as hostContext } from './theme.js';
|
9 | import { d as defineCustomElement$g } from './action-sheet.js';
|
10 | import { d as defineCustomElement$f } from './alert.js';
|
11 | import { d as defineCustomElement$e } from './backdrop.js';
|
12 | import { d as defineCustomElement$d } from './checkbox.js';
|
13 | import { d as defineCustomElement$c } from './icon.js';
|
14 | import { d as defineCustomElement$b } from './item.js';
|
15 | import { d as defineCustomElement$a } from './label.js';
|
16 | import { d as defineCustomElement$9 } from './list.js';
|
17 | import { d as defineCustomElement$8 } from './list-header.js';
|
18 | import { d as defineCustomElement$7 } from './note.js';
|
19 | import { d as defineCustomElement$6 } from './popover.js';
|
20 | import { d as defineCustomElement$5 } from './radio.js';
|
21 | import { d as defineCustomElement$4 } from './radio-group.js';
|
22 | import { d as defineCustomElement$3 } from './ripple-effect.js';
|
23 | import { d as defineCustomElement$2 } from './select-popover.js';
|
24 |
|
25 | const watchForOptions = (containerEl, tagName, onChange) => {
|
26 |
|
27 | if (typeof MutationObserver === 'undefined') {
|
28 | return;
|
29 | }
|
30 | const mutation = new MutationObserver(mutationList => {
|
31 | onChange(getSelectedOption(mutationList, tagName));
|
32 | });
|
33 | mutation.observe(containerEl, {
|
34 | childList: true,
|
35 | subtree: true
|
36 | });
|
37 | return mutation;
|
38 | };
|
39 | const getSelectedOption = (mutationList, tagName) => {
|
40 | let newOption;
|
41 | mutationList.forEach(mut => {
|
42 |
|
43 | for (let i = 0; i < mut.addedNodes.length; i++) {
|
44 | newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
|
45 | }
|
46 | });
|
47 | return newOption;
|
48 | };
|
49 | const findCheckedOption = (el, tagName) => {
|
50 | if (el.nodeType !== 1) {
|
51 | return undefined;
|
52 | }
|
53 | const options = (el.tagName === tagName.toUpperCase())
|
54 | ? [el]
|
55 | : Array.from(el.querySelectorAll(tagName));
|
56 | return options.find((o) => o.value === el.value);
|
57 | };
|
58 |
|
59 | const selectIosCss = ":host{--placeholder-color:currentColor;--placeholder-opacity:0.33;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);overflow:hidden;z-index:2}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static;max-width:45%}:host(.select-disabled){opacity:0.4;pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{position:relative}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-icon-inner{left:5px;top:50%;margin-top:-2px;position:absolute;width:0;height:0;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;color:currentColor;pointer-events:none}[dir=rtl] .select-icon-inner,:host-context([dir=rtl]) .select-icon-inner{left:unset;right:unset;right:5px}:host{--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:20px}.select-icon{width:12px;height:18px;opacity:0.33}";
|
60 |
|
61 | const selectMdCss = ":host{--placeholder-color:currentColor;--placeholder-opacity:0.33;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);overflow:hidden;z-index:2}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static;max-width:45%}:host(.select-disabled){opacity:0.4;pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{position:relative}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-icon-inner{left:5px;top:50%;margin-top:-2px;position:absolute;width:0;height:0;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;color:currentColor;pointer-events:none}[dir=rtl] .select-icon-inner,:host-context([dir=rtl]) .select-icon-inner{left:unset;right:unset;right:5px}:host{--padding-top:10px;--padding-end:0;--padding-bottom:10px;--padding-start:16px}.select-icon{width:19px;height:19px;-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:0.55}:host-context(.item-label-stacked) .select-icon,:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,:host-context(.item-label-floating.item-fill-outline){-webkit-transform:translate3d(0, -9px, 0);transform:translate3d(0, -9px, 0)}:host-context(.item-has-focus) .select-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host-context(.item-has-focus.item-label-stacked) .select-icon,:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon{-webkit-transform:translate3d(0, -9px, 0) rotate(180deg);transform:translate3d(0, -9px, 0) rotate(180deg)}:host-context(ion-item.ion-focused) .select-icon,:host-context(.item-has-focus) .select-icon{color:var(--highlight-color-focused);opacity:1}";
|
62 |
|
63 | const Select = proxyCustomElement(class extends HTMLElement {
|
64 | constructor() {
|
65 | super();
|
66 | this.__registerHost();
|
67 | this.__attachShadow();
|
68 | this.ionChange = createEvent(this, "ionChange", 7);
|
69 | this.ionCancel = createEvent(this, "ionCancel", 7);
|
70 | this.ionFocus = createEvent(this, "ionFocus", 7);
|
71 | this.ionBlur = createEvent(this, "ionBlur", 7);
|
72 | this.ionStyle = createEvent(this, "ionStyle", 7);
|
73 | this.inputId = `ion-sel-${selectIds++}`;
|
74 | this.didInit = false;
|
75 | this.isExpanded = false;
|
76 | |
77 |
|
78 |
|
79 | this.disabled = false;
|
80 | |
81 |
|
82 |
|
83 | this.cancelText = 'Cancel';
|
84 | |
85 |
|
86 |
|
87 | this.okText = 'OK';
|
88 | |
89 |
|
90 |
|
91 | this.name = this.inputId;
|
92 | |
93 |
|
94 |
|
95 | this.multiple = false;
|
96 | |
97 |
|
98 |
|
99 | this.interface = 'alert';
|
100 | |
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 | this.interfaceOptions = {};
|
110 | this.onClick = (ev) => {
|
111 | this.setFocus();
|
112 | this.open(ev);
|
113 | };
|
114 | this.onFocus = () => {
|
115 | this.ionFocus.emit();
|
116 | };
|
117 | this.onBlur = () => {
|
118 | this.ionBlur.emit();
|
119 | };
|
120 | }
|
121 | styleChanged() {
|
122 | this.emitStyle();
|
123 | }
|
124 | valueChanged() {
|
125 | this.emitStyle();
|
126 | if (this.didInit) {
|
127 | this.ionChange.emit({
|
128 | value: this.value,
|
129 | });
|
130 | }
|
131 | }
|
132 | async connectedCallback() {
|
133 | this.updateOverlayOptions();
|
134 | this.emitStyle();
|
135 | this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
|
136 | this.updateOverlayOptions();
|
137 | });
|
138 | }
|
139 | disconnectedCallback() {
|
140 | if (this.mutationO) {
|
141 | this.mutationO.disconnect();
|
142 | this.mutationO = undefined;
|
143 | }
|
144 | }
|
145 | componentDidLoad() {
|
146 | this.didInit = true;
|
147 | }
|
148 | |
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 | async open(event) {
|
155 | if (this.disabled || this.isExpanded) {
|
156 | return undefined;
|
157 | }
|
158 | const overlay = this.overlay = await this.createOverlay(event);
|
159 | this.isExpanded = true;
|
160 | overlay.onDidDismiss().then(() => {
|
161 | this.overlay = undefined;
|
162 | this.isExpanded = false;
|
163 | this.setFocus();
|
164 | });
|
165 | await overlay.present();
|
166 |
|
167 | if (this.interface === 'popover') {
|
168 | let indexOfSelected = this.childOpts.map(o => o.value).indexOf(this.value);
|
169 | indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0;
|
170 | const selectedEl = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
|
171 | if (selectedEl) {
|
172 | focusElement(selectedEl);
|
173 | }
|
174 | }
|
175 | return overlay;
|
176 | }
|
177 | createOverlay(ev) {
|
178 | let selectInterface = this.interface;
|
179 | if (selectInterface === 'action-sheet' && this.multiple) {
|
180 | console.warn(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
|
181 | selectInterface = 'alert';
|
182 | }
|
183 | if (selectInterface === 'popover' && !ev) {
|
184 | console.warn(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
|
185 | selectInterface = 'alert';
|
186 | }
|
187 | if (selectInterface === 'action-sheet') {
|
188 | return this.openActionSheet();
|
189 | }
|
190 | if (selectInterface === 'popover') {
|
191 | return this.openPopover(ev);
|
192 | }
|
193 | return this.openAlert();
|
194 | }
|
195 | updateOverlayOptions() {
|
196 | const overlay = this.overlay;
|
197 | if (!overlay) {
|
198 | return;
|
199 | }
|
200 | const childOpts = this.childOpts;
|
201 | const value = this.value;
|
202 | switch (this.interface) {
|
203 | case 'action-sheet':
|
204 | overlay.buttons = this.createActionSheetButtons(childOpts, value);
|
205 | break;
|
206 | case 'popover':
|
207 | const popover = overlay.querySelector('ion-select-popover');
|
208 | if (popover) {
|
209 | popover.options = this.createPopoverOptions(childOpts, value);
|
210 | }
|
211 | break;
|
212 | case 'alert':
|
213 | const inputType = (this.multiple ? 'checkbox' : 'radio');
|
214 | overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
|
215 | break;
|
216 | }
|
217 | }
|
218 | createActionSheetButtons(data, selectValue) {
|
219 | const actionSheetButtons = data.map(option => {
|
220 | const value = getOptionValue(option);
|
221 |
|
222 | const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
|
223 | const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
224 | return {
|
225 | role: (isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : ''),
|
226 | text: option.textContent,
|
227 | cssClass: optClass,
|
228 | handler: () => {
|
229 | this.value = value;
|
230 | }
|
231 | };
|
232 | });
|
233 |
|
234 | actionSheetButtons.push({
|
235 | text: this.cancelText,
|
236 | role: 'cancel',
|
237 | handler: () => {
|
238 | this.ionCancel.emit();
|
239 | }
|
240 | });
|
241 | return actionSheetButtons;
|
242 | }
|
243 | createAlertInputs(data, inputType, selectValue) {
|
244 | const alertInputs = data.map(option => {
|
245 | const value = getOptionValue(option);
|
246 |
|
247 | const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
|
248 | const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
249 | return {
|
250 | type: inputType,
|
251 | cssClass: optClass,
|
252 | label: option.textContent || '',
|
253 | value,
|
254 | checked: isOptionSelected(selectValue, value, this.compareWith),
|
255 | disabled: option.disabled
|
256 | };
|
257 | });
|
258 | return alertInputs;
|
259 | }
|
260 | createPopoverOptions(data, selectValue) {
|
261 | const popoverOptions = data.map(option => {
|
262 | const value = getOptionValue(option);
|
263 |
|
264 | const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
|
265 | const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
266 | return {
|
267 | text: option.textContent || '',
|
268 | cssClass: optClass,
|
269 | value,
|
270 | checked: isOptionSelected(selectValue, value, this.compareWith),
|
271 | disabled: option.disabled,
|
272 | handler: (selected) => {
|
273 | this.value = selected;
|
274 | if (!this.multiple) {
|
275 | this.close();
|
276 | }
|
277 | }
|
278 | };
|
279 | });
|
280 | return popoverOptions;
|
281 | }
|
282 | async openPopover(ev) {
|
283 | const interfaceOptions = this.interfaceOptions;
|
284 | const mode = getIonMode(this);
|
285 | const showBackdrop = mode === 'md' ? false : true;
|
286 | const multiple = this.multiple;
|
287 | const value = this.value;
|
288 | let event = ev;
|
289 | let size = 'auto';
|
290 | const item = this.el.closest('ion-item');
|
291 |
|
292 |
|
293 |
|
294 | if (item && (item.classList.contains('item-label-floating') || item.classList.contains('item-label-stacked'))) {
|
295 | event = Object.assign(Object.assign({}, ev), { detail: {
|
296 | ionShadowTarget: item
|
297 | } });
|
298 | size = 'cover';
|
299 | }
|
300 | const popoverOpts = Object.assign(Object.assign({ mode,
|
301 | event, alignment: 'center', size,
|
302 | showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
|
303 | header: interfaceOptions.header,
|
304 | subHeader: interfaceOptions.subHeader,
|
305 | message: interfaceOptions.message,
|
306 | multiple,
|
307 | value,
|
308 | options: this.createPopoverOptions(this.childOpts, value)
|
309 | } });
|
310 | return popoverController.create(popoverOpts);
|
311 | }
|
312 | async openActionSheet() {
|
313 | const mode = getIonMode(this);
|
314 | const interfaceOptions = this.interfaceOptions;
|
315 | const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
|
316 | return actionSheetController.create(actionSheetOpts);
|
317 | }
|
318 | async openAlert() {
|
319 | const label = this.getLabel();
|
320 | const labelText = (label) ? label.textContent : null;
|
321 | const interfaceOptions = this.interfaceOptions;
|
322 | const inputType = (this.multiple ? 'checkbox' : 'radio');
|
323 | const mode = getIonMode(this);
|
324 | const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
|
325 | {
|
326 | text: this.cancelText,
|
327 | role: 'cancel',
|
328 | handler: () => {
|
329 | this.ionCancel.emit();
|
330 | }
|
331 | },
|
332 | {
|
333 | text: this.okText,
|
334 | handler: (selectedValues) => {
|
335 | this.value = selectedValues;
|
336 | }
|
337 | }
|
338 | ], cssClass: ['select-alert', interfaceOptions.cssClass,
|
339 | (this.multiple ? 'multiple-select-alert' : 'single-select-alert')] });
|
340 | return alertController.create(alertOpts);
|
341 | }
|
342 | |
343 |
|
344 |
|
345 | close() {
|
346 |
|
347 | if (!this.overlay) {
|
348 | return Promise.resolve(false);
|
349 | }
|
350 | return this.overlay.dismiss();
|
351 | }
|
352 | getLabel() {
|
353 | return findItemLabel(this.el);
|
354 | }
|
355 | hasValue() {
|
356 | return this.getText() !== '';
|
357 | }
|
358 | get childOpts() {
|
359 | return Array.from(this.el.querySelectorAll('ion-select-option'));
|
360 | }
|
361 | getText() {
|
362 | const selectedText = this.selectedText;
|
363 | if (selectedText != null && selectedText !== '') {
|
364 | return selectedText;
|
365 | }
|
366 | return generateText(this.childOpts, this.value, this.compareWith);
|
367 | }
|
368 | setFocus() {
|
369 | if (this.focusEl) {
|
370 | this.focusEl.focus();
|
371 | }
|
372 | }
|
373 | emitStyle() {
|
374 | this.ionStyle.emit({
|
375 | 'interactive': true,
|
376 | 'interactive-disabled': this.disabled,
|
377 | 'select': true,
|
378 | 'select-disabled': this.disabled,
|
379 | 'has-placeholder': this.placeholder !== undefined,
|
380 | 'has-value': this.hasValue(),
|
381 | 'has-focus': this.isExpanded,
|
382 | });
|
383 | }
|
384 | render() {
|
385 | const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
|
386 | const mode = getIonMode(this);
|
387 | const { labelText, labelId } = getAriaLabel(el, inputId);
|
388 | renderHiddenInput(true, el, name, parseValue(value), disabled);
|
389 | const displayValue = this.getText();
|
390 | let addPlaceholderClass = false;
|
391 | let selectText = displayValue;
|
392 | if (selectText === '' && placeholder !== undefined) {
|
393 | selectText = placeholder;
|
394 | addPlaceholderClass = true;
|
395 | }
|
396 | const selectTextClasses = {
|
397 | 'select-text': true,
|
398 | 'select-placeholder': addPlaceholderClass
|
399 | };
|
400 | const textPart = addPlaceholderClass ? 'placeholder' : 'text';
|
401 |
|
402 |
|
403 |
|
404 |
|
405 | const displayLabel = labelText !== undefined
|
406 | ? (selectText !== '' ? `${selectText}, ${labelText}` : labelText)
|
407 | : selectText;
|
408 | return (h(Host, { onClick: this.onClick, role: "button", "aria-haspopup": "listbox", "aria-disabled": disabled ? 'true' : null, "aria-label": displayLabel, class: {
|
409 | [mode]: true,
|
410 | 'in-item': hostContext('ion-item', el),
|
411 | 'select-disabled': disabled,
|
412 | 'select-expanded': isExpanded
|
413 | } }, h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText), h("div", { class: "select-icon", role: "presentation", part: "icon" }, h("div", { class: "select-icon-inner" })), h("label", { id: labelId }, displayLabel), h("button", { type: "button", disabled: disabled, id: inputId, "aria-labelledby": labelId, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl => this.focusEl = focusEl) })));
|
414 | }
|
415 | get el() { return this; }
|
416 | static get watchers() { return {
|
417 | "disabled": ["styleChanged"],
|
418 | "placeholder": ["styleChanged"],
|
419 | "isExpanded": ["styleChanged"],
|
420 | "value": ["valueChanged"]
|
421 | }; }
|
422 | static get style() { return {
|
423 | ios: selectIosCss,
|
424 | md: selectMdCss
|
425 | }; }
|
426 | }, [33, "ion-select", {
|
427 | "disabled": [4],
|
428 | "cancelText": [1, "cancel-text"],
|
429 | "okText": [1, "ok-text"],
|
430 | "placeholder": [1],
|
431 | "name": [1],
|
432 | "selectedText": [1, "selected-text"],
|
433 | "multiple": [4],
|
434 | "interface": [1],
|
435 | "interfaceOptions": [8, "interface-options"],
|
436 | "compareWith": [1, "compare-with"],
|
437 | "value": [1032],
|
438 | "isExpanded": [32],
|
439 | "open": [64]
|
440 | }]);
|
441 | const isOptionSelected = (currentValue, compareValue, compareWith) => {
|
442 | if (currentValue === undefined) {
|
443 | return false;
|
444 | }
|
445 | if (Array.isArray(currentValue)) {
|
446 | return currentValue.some(val => compareOptions(val, compareValue, compareWith));
|
447 | }
|
448 | else {
|
449 | return compareOptions(currentValue, compareValue, compareWith);
|
450 | }
|
451 | };
|
452 | const getOptionValue = (el) => {
|
453 | const value = el.value;
|
454 | return (value === undefined)
|
455 | ? el.textContent || ''
|
456 | : value;
|
457 | };
|
458 | const parseValue = (value) => {
|
459 | if (value == null) {
|
460 | return undefined;
|
461 | }
|
462 | if (Array.isArray(value)) {
|
463 | return value.join(',');
|
464 | }
|
465 | return value.toString();
|
466 | };
|
467 | const compareOptions = (currentValue, compareValue, compareWith) => {
|
468 | if (typeof compareWith === 'function') {
|
469 | return compareWith(currentValue, compareValue);
|
470 | }
|
471 | else if (typeof compareWith === 'string') {
|
472 | return currentValue[compareWith] === compareValue[compareWith];
|
473 | }
|
474 | else {
|
475 | return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
|
476 | }
|
477 | };
|
478 | const generateText = (opts, value, compareWith) => {
|
479 | if (value === undefined) {
|
480 | return '';
|
481 | }
|
482 | if (Array.isArray(value)) {
|
483 | return value
|
484 | .map(v => textForValue(opts, v, compareWith))
|
485 | .filter(opt => opt !== null)
|
486 | .join(', ');
|
487 | }
|
488 | else {
|
489 | return textForValue(opts, value, compareWith) || '';
|
490 | }
|
491 | };
|
492 | const textForValue = (opts, value, compareWith) => {
|
493 | const selectOpt = opts.find(opt => {
|
494 | return compareOptions(getOptionValue(opt), value, compareWith);
|
495 | });
|
496 | return selectOpt
|
497 | ? selectOpt.textContent
|
498 | : null;
|
499 | };
|
500 | let selectIds = 0;
|
501 | const OPTION_CLASS = 'select-interface-option';
|
502 | function defineCustomElement$1() {
|
503 | if (typeof customElements === "undefined") {
|
504 | return;
|
505 | }
|
506 | const components = ["ion-select", "ion-action-sheet", "ion-alert", "ion-backdrop", "ion-checkbox", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-list-header", "ion-note", "ion-popover", "ion-radio", "ion-radio-group", "ion-ripple-effect", "ion-select-popover"];
|
507 | components.forEach(tagName => { switch (tagName) {
|
508 | case "ion-select":
|
509 | if (!customElements.get(tagName)) {
|
510 | customElements.define(tagName, Select);
|
511 | }
|
512 | break;
|
513 | case "ion-action-sheet":
|
514 | if (!customElements.get(tagName)) {
|
515 | defineCustomElement$g();
|
516 | }
|
517 | break;
|
518 | case "ion-alert":
|
519 | if (!customElements.get(tagName)) {
|
520 | defineCustomElement$f();
|
521 | }
|
522 | break;
|
523 | case "ion-backdrop":
|
524 | if (!customElements.get(tagName)) {
|
525 | defineCustomElement$e();
|
526 | }
|
527 | break;
|
528 | case "ion-checkbox":
|
529 | if (!customElements.get(tagName)) {
|
530 | defineCustomElement$d();
|
531 | }
|
532 | break;
|
533 | case "ion-icon":
|
534 | if (!customElements.get(tagName)) {
|
535 | defineCustomElement$c();
|
536 | }
|
537 | break;
|
538 | case "ion-item":
|
539 | if (!customElements.get(tagName)) {
|
540 | defineCustomElement$b();
|
541 | }
|
542 | break;
|
543 | case "ion-label":
|
544 | if (!customElements.get(tagName)) {
|
545 | defineCustomElement$a();
|
546 | }
|
547 | break;
|
548 | case "ion-list":
|
549 | if (!customElements.get(tagName)) {
|
550 | defineCustomElement$9();
|
551 | }
|
552 | break;
|
553 | case "ion-list-header":
|
554 | if (!customElements.get(tagName)) {
|
555 | defineCustomElement$8();
|
556 | }
|
557 | break;
|
558 | case "ion-note":
|
559 | if (!customElements.get(tagName)) {
|
560 | defineCustomElement$7();
|
561 | }
|
562 | break;
|
563 | case "ion-popover":
|
564 | if (!customElements.get(tagName)) {
|
565 | defineCustomElement$6();
|
566 | }
|
567 | break;
|
568 | case "ion-radio":
|
569 | if (!customElements.get(tagName)) {
|
570 | defineCustomElement$5();
|
571 | }
|
572 | break;
|
573 | case "ion-radio-group":
|
574 | if (!customElements.get(tagName)) {
|
575 | defineCustomElement$4();
|
576 | }
|
577 | break;
|
578 | case "ion-ripple-effect":
|
579 | if (!customElements.get(tagName)) {
|
580 | defineCustomElement$3();
|
581 | }
|
582 | break;
|
583 | case "ion-select-popover":
|
584 | if (!customElements.get(tagName)) {
|
585 | defineCustomElement$2();
|
586 | }
|
587 | break;
|
588 | } });
|
589 | }
|
590 |
|
591 | const IonSelect = Select;
|
592 | const defineCustomElement = defineCustomElement$1;
|
593 |
|
594 | export { IonSelect, defineCustomElement };
|