@ionic/core
Version:
Base components for Ionic
1,397 lines • 95.4 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
'use strict';
var index = require('./index-BiQyIvoc.js');
var config = require('./config-CjUbvdPW.js');
var slotMutationController = require('./slot-mutation-controller-B2OfJEBH.js');
var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
var validity = require('./validity-BpS37YFM.js');
var helpers = require('./helpers-Cqr69qxA.js');
var hardwareBackButton = require('./overlays-CLld3axA.js');
var dir = require('./dir-zwDPRE5K.js');
var index$2 = require('./index-B4ONUQRp.js');
var theme = require('./theme-Bw0rpaNN.js');
var watchOptions = require('./watch-options-CviOsrTS.js');
var index$1 = require('./index-wOmugbdg.js');
var ionicGlobal = require('./ionic-global-48ceLiJ6.js');
var overlayControlLabel = require('./overlay-control-label-D2sdL2O8.js');
var selectOptionRender = require('./select-option-render-CzyhrkOu.js');
require('./framework-delegate-JbKIVMzR.js');
require('./gesture-controller-CeJslptU.js');
const selectIosCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--select-text-media-height:1.5em;--select-text-media-width:1.5em;--select-text-gap:12px;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}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{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}.select-text{-ms-flex:1;flex:1;min-width:2ch;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-text>*+*{-webkit-margin-start:var(--select-text-gap);margin-inline-start:var(--select-text-gap)}.select-text img,.select-text ion-img,.select-text ion-icon,.select-text ion-thumbnail,.select-text ion-avatar{border-radius:var(--select-text-media-border-radius);width:var(--select-text-media-width);height:var(--select-text-media-height);border-width:var(--select-text-media-border-width);border-style:var(--select-text-media-border-style);border-color:var(--select-text-media-border-color)}.select-wrapper{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-control{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:inherit;justify-content:inherit;min-width:0}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:0;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}:host(.skip-label-transition) .label-text-wrapper{-webkit-transition:none;transition:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:100000;flex-shrink:100000;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-control,:host(.select-label-placement-floating) .select-control{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:0}:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:var(--placeholder-opacity)}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.select-start,.select-end{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px}.select-icon{width:1.125rem;height:1.125rem;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.select-disabled){opacity:0.3}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
const selectMdCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--select-text-media-height:1.5em;--select-text-media-width:1.5em;--select-text-gap:12px;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}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{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}.select-text{-ms-flex:1;flex:1;min-width:2ch;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-text>*+*{-webkit-margin-start:var(--select-text-gap);margin-inline-start:var(--select-text-gap)}.select-text img,.select-text ion-img,.select-text ion-icon,.select-text ion-thumbnail,.select-text ion-avatar{border-radius:var(--select-text-media-border-radius);width:var(--select-text-media-width);height:var(--select-text-media-height);border-width:var(--select-text-media-border-width);border-style:var(--select-text-media-border-style);border-color:var(--select-text-media-border-color)}.select-wrapper{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-control{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:inherit;justify-content:inherit;min-width:0}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:0;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}:host(.skip-label-transition) .label-text-wrapper{-webkit-transition:none;transition:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:100000;flex-shrink:100000;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-control,:host(.select-label-placement-floating) .select-control{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:0}:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:var(--placeholder-opacity)}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.select-start,.select-end{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.select-fill-solid){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-solid) .select-wrapper{border-bottom:var(--border-width) var(--border-style) var(--border-color)}:host(.select-expanded.select-fill-solid.ion-valid),:host(.has-focus.select-fill-solid.ion-valid),:host(.select-fill-solid.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-bottom{border-top:none}@media (any-hover: hover){:host(.select-fill-solid:hover){--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-solid.select-expanded),:host(.select-fill-solid.has-focus){--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}:host(.label-floating.select-fill-solid) .label-text-wrapper{max-width:calc(100% / 0.75)}:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-fill-outline){--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;--internal-start-container-adjustment:0px;--internal-start-end-container-width:0px;min-height:56px}:host(.select-fill-outline.select-shape-round){--border-radius:28px;--padding-start:32px;--padding-end:32px}:host(.has-focus.select-fill-outline.ion-valid),:host(.select-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}@media (any-hover: hover){:host(.select-fill-outline:hover){--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-outline.select-expanded),:host(.select-fill-outline.has-focus){--border-width:var(--highlight-height);--border-color:var(--highlight-color)}:host(.select-fill-outline) .select-bottom{border-top:none}:host(.select-fill-outline) .select-wrapper{border-bottom:none}:host(.select-ltr.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-fill-outline.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-fill-outline.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper{position:absolute;max-width:100%}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.select-fill-outline) .select-control{position:relative}:host(.label-floating.select-fill-outline) .label-text-wrapper{-webkit-transform:translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);transform:translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% + var(--internal-start-end-container-width) - 8px) / 0.75)}:host(.select-fill-outline.select-label-placement-stacked) select,:host(.select-fill-outline.select-label-placement-floating) select{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}:host(.select-fill-outline) .select-outline-container{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-end{pointer-events:none}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-notch,:host(.select-fill-outline) .select-outline-end{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.select-fill-outline) .select-outline-notch{max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .notch-spacer{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none}:host(.select-fill-outline) .select-outline-start{-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);width:calc(var(--padding-start) - 4px)}:host(.select-fill-outline) .select-outline-end{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}:host(.label-floating.select-fill-outline) .select-outline-notch{border-top:none}:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon{color:var(--highlight-color)}:host{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px}:host(.select-label-placement-floating.select-expanded) .label-text-wrapper,:host(.select-label-placement-floating.has-focus) .label-text-wrapper,:host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,:host(.select-label-placement-stacked.has-focus) .label-text-wrapper{color:var(--highlight-color)}:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,:host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,:host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper{color:var(--highlight-color)}.select-highlight{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.select-highlight{inset-inline-start:0}:host(.select-expanded) .select-highlight,:host(.has-focus) .select-highlight{-webkit-transform:scale(1);transform:scale(1)}:host(.in-item) .select-highlight{bottom:0}:host(.in-item) .select-highlight{inset-inline-start:0}.select-icon{width:0.8125rem;-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);color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded:not(.has-expanded-icon)) .select-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.in-item.select-expanded) .select-wrapper .select-icon,:host(.in-item.has-focus) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded) .select-wrapper .select-icon,:host(.has-focus.ion-valid) .select-wrapper .select-icon,:host(.ion-touched.ion-invalid) .select-wrapper .select-icon,:host(.has-focus) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-shape-round){--border-radius:16px}:host(.select-disabled){opacity:0.38}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}`;
const Select = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.ionChange = index.createEvent(this, "ionChange", 7);
this.ionCancel = index.createEvent(this, "ionCancel", 7);
this.ionDismiss = index.createEvent(this, "ionDismiss", 7);
this.ionFocus = index.createEvent(this, "ionFocus", 7);
this.ionBlur = index.createEvent(this, "ionBlur", 7);
this.ionStyle = index.createEvent(this, "ionStyle", 7);
this.inputId = `ion-sel-${selectIds++}`;
this.helperTextId = `${this.inputId}-helper-text`;
this.errorTextId = `${this.inputId}-error-text`;
this.inheritedAttributes = {};
this.customHTMLEnabled = index.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
this.isExpanded = false;
/**
* The `hasFocus` state ensures the focus class is
* added regardless of how the element is focused.
* The `ion-focused` class only applies when focused
* via tabbing, not by clicking.
* The `has-focus` logic was added to ensure the class
* is applied in both cases.
*/
this.hasFocus = false;
/**
* Track validation state for proper aria-live announcements.
*/
this.isInvalid = false;
/**
* The text to display on the cancel button.
*/
this.cancelText = 'Cancel';
/**
* If `true`, the user cannot interact with the select.
*/
this.disabled = false;
/**
* The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
*/
this.interface = 'alert';
/**
* Any additional options that the `alert`, `action-sheet` or `popover` interface
* can take. See the [ion-alert docs](./alert), the
* [ion-action-sheet docs](./action-sheet), the
* [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
* create options for each interface.
*
* Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
*/
this.interfaceOptions = {};
/**
* Where to place the label relative to the select.
* `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
* `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
* `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.
* `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
* `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
* When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
*/
this.labelPlacement = 'start';
/**
* If `true`, the select can accept multiple values.
*/
this.multiple = false;
/**
* The name of the control, which is submitted with the form data.
*/
this.name = this.inputId;
/**
* The text to display on the ok button.
*/
this.okText = 'OK';
/**
* If true, screen readers will announce it as a required field. This property
* works only for accessibility purposes, it will not prevent the form from
* submitting if the value is invalid.
*/
this.required = false;
this.onClick = (ev) => {
const slotted = slotMutationController.getSlottedClickContent(ev, this.el);
/**
* Interactive slotted content, such as a button or a checkbox, handles its
* own click, so it should not open the select as well. Any other slotted
* content is decorative and behaves the same as clicking the select
* itself.
*/
if (slotted !== null) {
const interactive = ev.target.closest(INTERACTIVE_SLOTTED_CONTENT);
if (interactive !== null && slotted.contains(interactive)) {
return;
}
}
this.setFocus();
this.open(ev);
};
this.onFocus = () => {
this.hasFocus = true;
this.ionFocus.emit();
};
this.onBlur = () => {
this.hasFocus = false;
this.ionBlur.emit();
};
/**
* Stops propagation for re-dispatched clicks (when already expanded) to
* prevent double-click events. Allows initial button clicks (from keyboard
* or mouse) and slotted content clicks to propagate so event delegation
* works for parent handlers.
*/
this.onLabelClick = (ev) => {
if (ev.target === this.focusEl && this.isExpanded) {
ev.stopPropagation();
}
};
}
styleChanged() {
this.emitStyle();
}
setValue(value) {
if (this.isValueEqual(this.value, value)) {
return;
}
this.value = value;
this.ionChange.emit({ value });
}
isValueEqual(currentValue, newValue) {
if (this.multiple) {
const currentArr = Array.isArray(currentValue) ? currentValue : [];
const newArr = Array.isArray(newValue) ? newValue : [];
if (currentArr.length !== newArr.length) {
return false;
}
// Multiset compare: each new value must match a distinct current value.
// A plain `every(isOptionSelected)` would accept ['a','a'] as equal to
// ['a','b'] when both 'a' and 'b' map to options whose values overlap.
const remaining = currentArr.slice();
return newArr.every((val) => {
const idx = remaining.findIndex((c) => compareWithUtils.compareOptions(c, val, this.compareWith));
if (idx === -1) {
return false;
}
remaining.splice(idx, 1);
return true;
});
}
if (currentValue == null && newValue == null) {
return true;
}
if (currentValue == null || newValue == null) {
return false;
}
return compareWithUtils.compareOptions(currentValue, newValue, this.compareWith);
}
async connectedCallback() {
const { el } = this;
this.slotMutationController = slotMutationController.createSlotMutationController(el, ['label', 'start', 'end'], () => {
this.startEndContainerController?.calculateContainerWidths();
index.forceUpdate(this);
});
this.notchController = slotMutationController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
this.startEndContainerController = slotMutationController.createStartEndContainerController(el, () => this.startContainerEl, () => this.endContainerEl, () => {
return ionicGlobal.getIonMode(this) === 'md' && this.fill === 'outline';
});
this.startEndContainerController.calculateContainerWidths();
this.clickController = slotMutationController.createClickController(el);
this.updateOverlayOptions();
this.emitStyle();
this.mutationO = watchOptions.watchForOptions(this.el, 'ion-select-option', async () => {
this.updateOverlayOptions();
/**
* We need to re-render the component
* because one of the new ion-select-option
* elements may match the value. In this case,
* the rendered selected text should be updated.
*/
index.forceUpdate(this);
});
// Watch for class changes to update validation state.
if (typeof MutationObserver !== 'undefined') {
this.validationObserver = new MutationObserver(() => {
const newIsInvalid = validity.checkInvalidState(this.el);
if (this.isInvalid !== newIsInvalid) {
this.isInvalid = newIsInvalid;
/**
* Screen readers tend to announce changes
* to `aria-describedby` when the attribute
* is changed during a blur event for a
* native form control.
* However, the announcement can be spotty
* when using a non-native form control
* and `forceUpdate()`.
* This is due to `forceUpdate()` internally
* rescheduling the DOM update to a lower
* priority queue regardless if it's called
* inside a Promise or not, thus causing
* the screen reader to potentially miss the
* change.
* By using a State variable inside a Promise,
* it guarantees a re-render immediately at
* a higher priority.
*/
Promise.resolve().then(() => {
this.hintTextId = this.getHintTextId();
});
}
});
this.validationObserver.observe(el, {
attributes: true,
attributeFilter: ['class'],
});
}
// Always set initial state
this.isInvalid = validity.checkInvalidState(this.el);
}
componentWillLoad() {
this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
this.hintTextId = this.getHintTextId();
}
componentDidLoad() {
/**
* If any of the conditions that trigger the styleChanged callback
* are met on component load, it is possible the event emitted
* prior to a parent web component registering an event listener.
*
* To ensure the parent web component receives the event, we
* emit the style event again after the component has loaded.
*
* This is often seen in Angular with the `dist` output target.
*/
this.emitStyle();
}
disconnectedCallback() {
if (this.mutationO) {
this.mutationO.disconnect();
this.mutationO = undefined;
}
if (this.slotMutationController) {
this.slotMutationController.destroy();
this.slotMutationController = undefined;
}
if (this.notchController) {
this.notchController.destroy();
this.notchController = undefined;
}
if (this.startEndContainerController) {
this.startEndContainerController.destroy();
this.startEndContainerController = undefined;
}
// Clean up validation observer to prevent memory leaks.
if (this.validationObserver) {
this.validationObserver.disconnect();
this.validationObserver = undefined;
}
}
/**
* Open the select overlay. The overlay is either an alert, action sheet, or popover,
* depending on the `interface` property on the `ion-select`.
*
* @param event The user interface event that called the open.
*/
async open(event) {
if (this.disabled || this.isExpanded) {
return undefined;
}
this.isExpanded = true;
const overlay = (this.overlay = await this.createOverlay(event));
// Add logic to scroll selected item into view before presenting
const scrollSelectedIntoView = () => {
const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
if (indexOfSelected > -1) {
const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
if (selectedItem) {
/**
* Browsers such as Firefox do not
* correctly delegate focus when manually
* focusing an element with delegatesFocus.
* We work around this by manually focusing
* the interactive element.
* ion-radio and ion-checkbox are the only
* elements that ion-select-popover uses, so
* we only need to worry about those two components
* when focusing.
*/
const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
if (interactiveEl) {
selectedItem.scrollIntoView({ block: 'nearest' });
// Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
// and removing `ion-focused` style
interactiveEl.setFocus();
}
helpers.focusVisibleElement(selectedItem);
}
}
else {
/**
* If no value is set then focus the first enabled option.
*/
const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
if (firstEnabledOption) {
/**
* Focus the option for the same reason as we do above.
*
* Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
* and removing `ion-focused` style
*/
firstEnabledOption.setFocus();
helpers.focusVisibleElement(firstEnabledOption.closest('ion-item'));
}
}
};
// For modals and popovers, we can scroll before they're visible
if (this.interface === 'modal') {
overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
}
else if (this.interface === 'popover') {
overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
}
else {
/**
* For alerts and action sheets, we need to wait a frame after willPresent
* because these overlays don't have their content in the DOM immediately
* when willPresent fires. By waiting a frame, we ensure the content is
* rendered and can be properly scrolled into view.
*/
const scrollAfterRender = () => {
requestAnimationFrame(() => {
scrollSelectedIntoView();
});
};
if (this.interface === 'alert') {
overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
}
else if (this.interface === 'action-sheet') {
overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
}
}
overlay.onDidDismiss().then(() => {
this.overlay = undefined;
this.isExpanded = false;
this.ionDismiss.emit();
this.setFocus();
});
await overlay.present();
return overlay;
}
createOverlay(ev) {
let selectInterface = this.interface;
if (selectInterface === 'action-sheet' && this.multiple) {
index.printIonWarning(`[ion-select] - Interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
selectInterface = 'alert';
}
if (selectInterface === 'popover' && !ev) {
index.printIonWarning(`[ion-select] - Interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
selectInterface = 'alert';
}
if (selectInterface === 'action-sheet') {
return this.openActionSheet();
}
if (selectInterface === 'popover') {
return this.openPopover(ev);
}
if (selectInterface === 'modal') {
return this.openModal();
}
return this.openAlert();
}
updateOverlayOptions() {
const overlay = this.overlay;
if (!overlay) {
return;
}
const childOpts = this.childOpts;
const value = this.value;
switch (this.interface) {
case 'action-sheet':
overlay.buttons = this.createActionSheetButtons(childOpts, value);
break;
case 'popover':
const popover = overlay.querySelector('ion-select-popover');
if (popover) {
popover.options = this.createOverlaySelectOptions(childOpts, value);
}
break;
case 'modal':
const modal = overlay.querySelector('ion-select-modal');
if (modal) {
modal.options = this.createOverlaySelectOptions(childOpts, value);
}
break;
case 'alert':
const inputType = this.multiple ? 'checkbox' : 'radio';
overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
break;
}
}
createActionSheetButtons(data, selectValue) {
const actionSheetButtons = data.map((option) => {
const value = getOptionValue(option);
// Remove hydrated before copying over classes
const copyClasses = Array.from(option.classList)
.filter((cls) => cls !== 'hydrated')
.join(' ');
const optClass = `${OPTION_CLASS} ${copyClasses}`;
const isSelected = compareWithUtils.isOptionSelected(selectValue, value, this.compareWith);
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
return {
text: content ?? '',
cssClass: optClass,
disabled: option.disabled,
handler: () => {
this.setValue(value);
},
htmlAttributes: {
'aria-checked': isSelected ? 'true' : 'false',
role: 'radio',
},
startContent,
endContent,
description: option.description,
};
});
// Add "cancel" button
actionSheetButtons.push({
text: this.cancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit();
},
});
return actionSheetButtons;
}
createAlertInputs(data, inputType, selectValue) {
const alertInputs = data.map((option) => {
const value = getOptionValue(option);
// Remove hydrated before copying over classes
const copyClasses = Array.from(option.classList)
.filter((cls) => cls !== 'hydrated')
.join(' ');
const optClass = `${OPTION_CLASS} ${copyClasses}`;
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
return {
type: inputType,
cssClass: optClass,
label: content ?? '',
value,
checked: compareWithUtils.isOptionSelected(selectValue, value, this.compareWith),
disabled: option.disabled,
startContent,
endContent,
description: option.description,
labelPlacement: option.labelPlacement,
justify: option.justify,
};
});
return alertInputs;
}
createOverlaySelectOptions(data, selectValue) {
const popoverOptions = data.map((option) => {
const value = getOptionValue(option);
// Remove hydrated before copying over classes
const copyClasses = Array.from(option.classList)
.filter((cls) => cls !== 'hydrated')
.join(' ');
const optClass = `${OPTION_CLASS} ${copyClasses}`;
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
return {
text: content ?? '',
cssClass: optClass,
value,
checked: compareWithUtils.isOptionSelected(selectValue, value, this.compareWith),
disabled: option.disabled,
handler: (selected) => {
this.setValue(selected);
if (!this.multiple) {
this.close();
}
},
startContent,
endContent,
description: option.description,
labelPlacement: option.labelPlacement,
justify: option.justify,
};
});
return popoverOptions;
}
async openPopover(ev) {
const { fill, labelPlacement } = this;
const interfaceOptions = this.interfaceOptions;
const mode = ionicGlobal.getIonMode(this);
const showBackdrop = mode === 'md' ? false : true;
const multiple = this.multiple;
const value = this.value;
let event = ev;
let size = 'auto';
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
/**
* The popover should take up the full width
* when using a fill in MD mode or if the
* label is floating/stacked.
*/
if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
size = 'cover';
/**
* Otherwise the popover
* should be positioned relative
* to the native element.
*/
}
else {
event = {
...ev,
detail: {
ionShadowTarget: this.nativeWrapperEl,
},
};
}
const options = this.createOverlaySelectOptions(this.childOpts, value);
const hasRichContent = options.some((opt) => Boolean(opt.startContent) || Boolean(opt.endContent) || Boolean(opt.description));
const popoverOpts = {
mode,
event,
alignment: 'center',
size,
showBackdrop,
...interfaceOptions,
component: 'ion-select-popover',
cssClass: [
'select-popover',
hasRichContent ? 'select-popover-rich-content' : undefined,
interfaceOptions.cssClass,
],
componentProps: {
header: interfaceOptions.header,
subHeader: interfaceOptions.subHeader,
message: interfaceOptions.message,
multiple,
value,
options,
},
};
return hardwareBackButton.popoverController.create(popoverOpts);
}
async openActionSheet() {
const mode = ionicGlobal.getIonMode(this);
const interfaceOptions = this.interfaceOptions;
const actionSheetOpts = {
mode,
...interfaceOptions,
buttons: this.createActionSheetButtons(this.childOpts, this.value),
cssClass: ['select-action-sheet', interfaceOptions.cssClass],
};
return hardwareBackButton.actionSheetController.create(actionSheetOpts);
}
async openAlert() {
const interfaceOptions = this.interfaceOptions;
const inputType = this.multiple ? 'checkbox' : 'radio';
const mode = ionicGlobal.getIonMode(this);
const alertOpts = {
mode,
...interfaceOptions,
header: interfaceOptions.header ? interfaceOptions.header : this.labelText,
inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
buttons: [
{
text: this.cancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit();
},
},
{
text: this.okText,
handler: (selectedValues) => {
this.setValue(selectedValues);
},
},
],
cssClass: [
'select-alert',
interfaceOptions.cssClass,
this.multiple ? 'multiple-select-alert' : 'single-select-alert',
],
};
return hardwareBackButton.alertController.create(alertOpts);
}
openModal() {
const { multiple, value, interfaceOptions } = this;
const mode = ionicGlobal.getIonMode(this);
const modalOpts = {
...interfaceOptions,
mode,
cssClass: ['select-modal', interfaceOptions.cssClass],
component: 'ion-select-modal',
componentProps: {
header: interfaceOptions.header,
cancelText: this.cancelText,
multiple,
value,
options: this.createOverlaySelectOptions(this.childOpts, value),
},
};
return hardwareBackButton.modalController.create(modalOpts);
}
/**
* Close the select interface.
*/
close() {
if (!this.overlay) {
return Promise.resolve(false);
}
return this.overlay.dismiss();
}
hasValue() {
return this.getText() !== '';
}
get childOpts() {
return Array.from(this.el.querySelectorAll('ion-select-option'));
}
/**
* Returns any plaintext associated with
* the label (either prop or slot).
* Note: This will not return any custom
* HTML. Use the `hasLabel` getter if you
* want to know if any slotted label content
* was passed.
*/
get labelText() {
const { label } = this;
if (label !== undefined) {
return label;
}
const { labelSlot } = this;
if (labelSlot !== null) {
return labelSlot.textContent;
}
return;
}
/**
* Returns the text to display in the select based on the selected value.
*
* @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
* @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
*/
getText(useHTML = false) {
const selectedText = this.selectedText;
if (selectedText != null && selectedText !== '') {
return selectedText;
}
return generateText(this.childOpts, this.value, this.compareWith, useHTML);
}
setFocus() {
if (this.focusEl) {
this.focusEl.focus();
}
}
emitStyle() {
const { disabled } = this;
const style = {
'interactive-disabled': disabled,
};
this.ionStyle.emit(style);
}
/**
* The label wrapping the slots has no `for` attribute, so the browser
* forwards a click on slotted content to the label's first labelable
* descendant, the internal button. That forwarded click bubbles back out of
* the shadow root targeting the host, where it would be emitted a second
* time and open the select. The controller swallows it during the capture
* phase, leaving the click on the slotted content itself alone so slotted
* links, checkboxes and buttons keep their default behavior.
*/
onClickCapture(ev) {
this.clickController?.handleClickCapture(ev);
}
renderLabel() {
const { label } = this;
return (index.h("div", { class: {
'label-text-wrapper': true,
'label-text-wrapper-hidden': !this.hasLabel,
}, part: "label" }, label === undefined ? index.h("slot", { name: "label" }) : index.h("div", { class: "label-text" }, label)));
}
componentDidRender() {
this.notchController?.calculateNotchWidth();
this.startEndContainerController?.calculateContainerWidths();
}
/**
* Gets any content passed into the `label` slot,
* not the <slot> definition.
*/
get labelSlot() {
return this.el.querySelector('[slot="label"]');
}
/**
* Returns `true` if label content is provided
* either by a prop or a content. If you want
* to get the plaintext value of the label use
* the `labelText` getter instead.
*/
get hasLabel() {
return this.label !== undefined || this.labelSlot !== null;
}
/**
* Renders the outline border with a notch for the label.
*/
renderOutlineContainer() {
return (index.h("div", { class: "select-outline-container" }, index.h("div", { class: "select-outline-start" }), index.h("div", { class: {
'select-outline-notch': true,
'select-outline-notch-hidden': !this.hasLabel,
} }, index.h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), index.h("div", { class: "select-outline-end" })));
}
/**
* Wraps text nodes in the select text with span elements
* so spacing can be added between elements without
* changing the display to prevent losing the ellipses
* behavior.
*
* Only wraps when the string contains HTML elements
* alongside text.
*/
wrapSelectTextNodes(html) {
const temp = document.createElement('div');
temp.innerHTML = html;
const hasElements = Array.from(temp.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
// Return the plain text
if (!hasElements) {
return html;
}
Array.from(temp.childNodes).forEach((node) => {
if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
const text = node.textContent;
/**
* Split comma separator from the text content
* e.g., ", Bacon" becomes ", " text node + <span>Bacon</span>.
*/
const commaMatch = text.match(/^(,\s*)(.*)/);
if (commaMatch) {
const commaNode = document.createTextNode(commaMatch[1]);
const wrapper = document.createElement('span');
wrapper.textContent = commaMatch[2];
node.parentNode?.replaceChild(wrapper, node);
wrapper.parentNode?.insertBefore(commaNode, wrapper);
return;
}
const wrapper = document.createElement('span');
node.parentNode?.replaceChild(wrapper, node);
wrapper.appendChild(node);
}
});
return temp.innerHTML;
}
/**
* Renders either the placeholder
* or the selected values based on
* the state of the select.
*/
renderSelectText() {
const { placeholder } = this;
const displayValue = this.getText(true);
let addPlaceholderClass = false;
let selectText = displayValue;
if (selectText === '' && placeholder !== undefined) {
selectText = placeholder;
addPlaceholderClass = true;
}
const selectTextClasses = {
'select-text': true,
'select-placeholder': addPlaceholderClass,
};
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
if (this.customHTMLEnabled) {
const wrapped = this.wrapSelectTextNodes(selectText);
return index.h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: wrapped });
}
return (index.h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
}
/**
* Renders the chevron icon
* next to the select text.
*/
renderSelectIcon() {
const mode = ionicGlobal.getIonMode(this);
const { isExpanded, toggleIcon, expandedIcon } = this;
let icon;
if (isExpanded && expandedIcon !== undefined) {
icon = expandedIcon;
}
else {
const defaultIcon = mode === 'ios' ? index$1.chevronExpand : index$1.caretDownSharp;
icon = toggleIcon ?? defaultIcon;
}
return index.h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
}
get ariaLabel() {
const { placeholder, inheritedAttributes } = this;
// Get the plain text from the selected text
const displayValue = this.getText();
// The aria label should be preferred over visible text if both are specified
const definedLabel = inheritedAttributes['aria-label'] ?? this.labelText;
/**
* If developer has specified a placeholder
* and there is nothing selected, the selectText
* should have the placeholder value.
*/
let renderedLabel = displayValue;
if (renderedLabel === '' && placeholder !== undefined) {
renderedLabel = placeholder;
}
/**
* If there is a developer-defined label,
* then we need to concatenate the developer label
* string with the current current value.
* The label for the control should be read
* before the values of the control.
*/
if (definedLabel !== undefined) {
renderedLabel = renderedLabel === '' ? definedLabel : `${definedLabel}, ${renderedLabel}`;
}
return renderedLabel;
}
renderListbox() {
const { disabled, inputId, isExpanded, required } = this;
return (index.h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
}
getHintTextId() {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
if (isInvalid && errorText) {
return errorTextId;
}
if (helperText) {
return helperTextId;
}
return undefined;
}
/**
* Renders the helper text or error text values
*/
renderHintText() {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
return [
index.h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
index.h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
];
}
/**
* Responsible for rendering helper text, and error text. This element
* should only be rendered if hint text is set.
*/
renderBottomContent() {
const { helperText, errorText } = this;
/**
* undefined and empty string values should
* be treated as not having helper/error text.
*/
const hasHintText = !!helperText || !!errorText;
if (!hasHintText) {
return;
}
return (index.h("div", { class: "select-bottom", part: "bottom" }, this.renderHintText()));
}
render() {
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
const mode = ionicGlobal.getIonMode(this);
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
const inItem = theme.hostContext('ion-item', this.el);
const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
const hasValue = this.hasValue();
const hasOutlineFill = mode === 'md' && fill === 'outline';
helpers.renderHiddenInput(true, el, name, parseValue(value), disabled);
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
return (index.h(index.Host, { key: 'c1949b8a58c5bde1cc7627d3b32c54bcb46a4752', onClick: this.onClick, class: theme.createColorClasses(this.color, {
[mode]: true,
'in-item': inItem,
'in-item-color': theme.hostContext('ion-item.ion-color', el),
'select-disabled': disabled,
'select-expanded': isExpanded,
'has-expanded-icon': expandedIcon !== undefined,
'has-value': hasValue,
'label-floating': labelShouldFloat,
'has-placeholder': placeholder !== undefined,
'has-focus': hasFocus,
// TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
'ion-focusable': true,
[`select-${rtl}`]: true,
[`select-fill-${fill}`]: fill !== undefined,
[`select-justify-${justify}`]: justifyEnabled,
[`select-shape-${shape}`]: shape !== undefined,
[`select-label-placement-${labelPlacement}`]: true,
}) }, index.h("label", { key: 'af4521a3679d9e4e08511e205f53663d8d5b6701', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), index.h("div", { key: '73e13f28ed4c2b0e9115f3d1b86934b84f8c5bc0', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, index.h("slot", { key: 'ce88e5bbb15a4cde6a5f8580a35d7099e315e9e6', name: "start" })), index.h("div", { key: 'd1557c3d0ff41f5070a27b719fbfaf18eafa9052', class: "select-control", part: "control" }, this.renderLabel(), index.h("div", { key: 'bcd03ac6c6d72ab76a4344069d83c29a2cdaabf0', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), index.h("div", { key: '9be05035c1efb5c332a0044c81e032215c81278b', class: "select-end", part: "end", ref: (el) => (this.endContainerEl = el) }, hasFloatingOrStackedLabel && this.renderSelectIcon(), index.h("slot", { key: '551ab0cf3594805caaf14f36197f9cc56b9ee46a', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'dd500fb4ae7d91d1733fec521dac9baaef6654a0', class: "select-highlight" })), this.renderBottomContent()));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"disabled": [{
"styleChanged": 0
}],
"isExpanded": [{
"styleChanged": 0
}],
"placeholder": [{
"styleChanged": 0
}],
"value": [{
"styleChanged": 0
}]
}; }
};
const getOptionValue = (el) => {
const value = el.value;
return value === undefined ? el.textContent || '' : value;
};
const parseValue = (value) => {
if (value == null) {
return undefined;
}
if (Array.isArray(value)) {
return value.join(',');
}
return value.toString();
};
const generateText = (opts, value, compareWith, useHTML = false) => {
if (value === undefined) {
return '';
}
if (Array.isArray(value)) {
return value
.map((v) => textForValue(opts, v, compareWith, useHTML))
.filter((opt) => opt !== null)
.join(', ');
}
else {
return textForValue(opts, value, compareWith, useHTML) || '';
}
};
/**
* Returns the display text for a given value from the list of options.
* When `useHTML` is true, returns sanitized HTML for the select text.
* When `useHTML` is false, returns plain text for aria-label and other
* text-only contexts.
*
* @param opts - The list of ion-select-option elements.
* @param value - The value to find the matching option for.
* @param compareWith - Custom comparison function or property name.
* @param useHTML - If true, returns HTML string. If false, returns plain text.
*/
const textForValue = (opts, value, compareWith, useHTML = false) => {
const selectOpt = opts.find((opt) => {
return compareWithUtils.compareOptions(value, getOptionValue(opt), compareWith);
});
const customHTMLEnabled = index.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
if (!selectOpt) {
return null;
}
// Return sanitized HTML for the select text
if (customHTMLEnabled && useHTML) {
return getOptionContent(selectOpt, undefined, true);
}
/**
* Every text-only context reads only the default slot, so the start
* and end slots stay out of the `aria-label` and the overlay labels.
* Both config paths derive that text through the same helper, so they
* cannot disagree about what an option's text is. `null` marks an
* option with no text, which is dropped from the joined text of a
* `multiple` select rather than joined in as an empty entry.
*/
return getDefaultSlotPlainText(selectOpt) || null;
};
/**
* Trims whitespace from all text nodes within a DOM tree.
* This prevents invisible layout shifts and unwanted gaps between
* elements when HTML content is injected via innerHTML or cloneNode,
* as browsers preserve whitespace (tabs, newlines, spaces) from
* the original source markup.
*
* @param node The root node to start trimming text nodes from.
*/
const trimTextNodes = (node) => {
node.childNodes.forEach((child) => {
if (child.nodeType === Node.TEXT_NODE) {
child.textContent = child.textContent?.trim() || '';
}
else if (child.nodeType === Node.ELEMENT_NODE) {
trimTextNodes(child);
}
});
};
/**
* Extracts and clones content from an `ion-select-option` element
* for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
*
* @param option - The `ion-select-option` element to extract content from.
* @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
* @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
* @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
* div element containing cloned child nodes. Returns `null` if no matching
* content is found.
*/
const getOptionContent = (option, slotName, useHTML = false) => {
let nodes;
if (slotName) {
// Named slot: get elements with matching slot attribute
nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
}
else {
// Default slot: get nodes without a slot attribute
const defaultSlot = getOptionDefaultSlot(option) || [];
nodes = defaultSlot.filter((node) => {
/**
* Exclude whitespace-only text nodes (newline noise between
* markup elements). Element nodes are always kept, even when
* their textContent is empty (e.g. <svg>, <img>).
*/
if (node.nodeType === Node.TEXT_NODE) {
return node.textContent?.trim().length !== 0;
}
return true;
});
}
if (nodes.length === 0) {
return null;
}
/**
* Return plain text if no elements are found. This reads the option the
* same way the non-custom-HTML path does, so the two do not disagree
* about what an option's text is.
*/
if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
return getDefaultSlotPlainText(option) || null;
}
/**
* Mirror known custom-element properties (e.g. ion-icon's `icon`)
* onto attributes before cloning. Frameworks like Vue set these as
* DOM properties, which `cloneNode` doesn't copy, so without this
* step the cloned overlay copy renders without the prop's value.
*/
nodes.forEach((n) => {
if (n.nodeType === Node.ELEMENT_NODE) {
index$2.reflectPropertiesToAttributes(n);
}
});
// Clone each node into a temporary container
const container = document.createElement('div');
nodes.forEach((n) => {
const clone = n.cloneNode(true);
if (clone.nodeType === Node.TEXT_NODE) {
clone.textContent = clone.textContent?.trim() || '';
}
else {
trimTextNodes(clone);
}
container.appendChild(clone);
});
/**
* Sanitize the cloned DOM in place. Trusted attributes (size, color,
* shape, etc.) are preserved; event handlers, javascript: URLs, and
* blocked tags are stripped.
*/
index$2.sanitizeDOMTree(container);
if (useHTML) {
return container.innerHTML.trim() || null;
}
return container;
};
/**
* Returns the child nodes that belong to the default slot of an
* option element, excluding any nodes that are assigned to named
* slots.
*
* @param option - The `ion-select-option` element to extract default-slot nodes from.
* @returns An array of default slot nodes, or `null` if none are found.
*/
const getOptionDefaultSlot = (option) => {
const defaultSlotNodes = Array.from(option.childNodes).filter((node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
return !node.hasAttribute('slot');
}
return node.nodeType === Node.TEXT_NODE;
});
if (defaultSlotNodes.length === 0) {
return null;
}
return defaultSlotNodes;
};
/**
* Concatenates the text a node renders, skipping the subtrees of tags
* whose contents the browser never paints (`script`, `style`, and the
* rest of `blockedTags`). `textContent` includes those, so reading it
* directly would put stylesheet or script source into the select text
* and the `aria-label`.
*
* @param node - The node to read text from.
* @returns The node's rendered text.
*/
const getRenderedTextContent = (node) => {
if (node.nodeType === Node.TEXT_NODE) {
return node.textContent ?? '';
}
if (node.nodeType !== Node.ELEMENT_NODE) {
return '';
}
if (index$2.blockedTags.includes(node.tagName.toLowerCase())) {
return '';
}
return Array.from(node.childNodes)
.map((child) => getRenderedTextContent(child))
.join('');
};
/**
* Extracts plain text from only the default slot of an option,
* excluding content assigned to named slots (start/end). Text is
* concatenated with no separator and collapsible whitespace is
* collapsed, approximating how the browser renders the option.
* NBSP is not collapsible, so it is preserved.
*
* @param option - The `ion-select-option` element to read text from.
* @returns The option's default slot text.
*/
const getDefaultSlotPlainText = (option) => {
const text = (getOptionDefaultSlot(option) ?? []).map((node) => getRenderedTextContent(node)).join('');
return text.replace(/[ \t\n\r\f]+/g, ' ').replace(/^[ \t\n\r\f]+|[ \t\n\r\f]+$/g, '');
};
/**
* Extracts the rich content from an `ion-select-option`.
* When `customHTMLEnabled` is `false`, only the plain text from the
* default slot is read and the start and end slots are skipped.
*
* @param option - The `ion-select-option` element to extract content from.
* @param customHTMLEnabled - Whether custom HTML rendering is enabled
* via the `innerHTMLTemplatesEnabled` config.
*/
const extractOptionContent = (option, customHTMLEnabled) => {
if (!customHTMLEnabled) {
return {
content: getDefaultSlotPlainText(option),
startContent: undefined,
endContent: undefined,
};
}
return {
content: getOptionContent(option),
startContent: getOptionContent(option, 'start') ?? undefined,
endContent: getOptionContent(option, 'end') ?? undefined,
};
};
let selectIds = 0;
const OPTION_CLASS = 'select-interface-option';
/**
* Slotted content that handles its own click, so clicking it should not also
* open the select.
*
* This deliberately does not reuse `focusableQueryString`. That selector
* answers whether an element can take focus right now, which is a different
* question: an ion-radio outside a radio group carries tabindex="-1" from the
* group's roving tabindex, and disabled controls are excluded, yet both still
* handle their own clicks.
*/
const INTERACTIVE_SLOTTED_CONTENT = [
'a[href]',
'button',
'input[type="checkbox"]',
'input[type="radio"]',
'ion-button',
'ion-checkbox',
'ion-radio',
'ion-toggle',
'[tabindex]:not([tabindex^="-"])',
/**
* Covers the remaining Ionic controls. The tags above are still listed
* because ion-checkbox and ion-radio only carry this class when they are
* outside an item, so a select inside an item would lose the match.
*/
'.ion-focusable',
].join(', ');
Select.style = {
ios: selectIosCss(),
md: selectMdCss()
};
const selectOptionCss = () => `:host{display:none}`;
const SelectOption = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.inputId = `ion-selopt-${selectOptionIds++}`;
/**
* If `true`, the user cannot interact with the select option.
*/
this.disabled = false;
}
render() {
return index.h(index.Host, { key: '01275b5a613c4b065b24e0d939f611f6ed1fc9ee', role: "option", id: this.inputId, class: ionicGlobal.getIonMode(this) });
}
get el() { return index.getElement(this); }
};
let selectOptionIds = 0;
SelectOption.style = selectOptionCss();
const selectPopoverIosCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-popover-ios,.alert-radio-label-has-rich-content.sc-ion-select-popover-ios,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-ios,.select-option-label-has-rich-content.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-popover-ios,.alert-radio-label-has-rich-content.sc-ion-select-popover-ios,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-ios,.select-option-content.sc-ion-select-popover-ios{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-popover-ios,.alert-checkbox-label-text.sc-ion-select-popover-ios,.alert-radio-label-text.sc-ion-select-popover-ios,.select-option-label-text.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-popover-ios{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-popover-ios:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-popover-ios::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-popover-ios [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-ios::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-ios [part~="label"],.select-option-content.sc-ion-select-popover-ios{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-popover-ios>ion-avatar.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>ion-img.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>ion-thumbnail.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>img.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>svg.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-avatar.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-img.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-thumbnail.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>img.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>svg.sc-ion-select-popover-ios{width:44px;height:44px}.select-option-start.sc-ion-select-popover-ios>ion-icon.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-icon.sc-ion-select-popover-ios{font-size:28px}.action-sheet-button-label-text.sc-ion-select-popover-ios{-ms-flex-pack:center;justify-content:center}.select-option-has-rich-content.sc-ion-select-popover-ios{-webkit-padding-end:16px;padding-inline-end:16px}.sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}`;
const selectPopoverMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-popover-md,.alert-radio-label-has-rich-content.sc-ion-select-popover-md,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-md,.select-option-label-has-rich-content.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-popover-md,.alert-radio-label-has-rich-content.sc-ion-select-popover-md,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-md,.select-option-content.sc-ion-select-popover-md{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-popover-md,.alert-checkbox-label-text.sc-ion-select-popover-md,.alert-radio-label-text.sc-ion-select-popover-md,.select-option-label-text.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-popover-md{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-popover-md:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-popover-md::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-popover-md [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-md::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-md [part~="label"],.select-option-content.sc-ion-select-popover-md{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-popover-md>ion-avatar.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-avatar.sc-ion-select-popover-md{width:40px;height:40px}.select-option-start.sc-ion-select-popover-md>ion-icon.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-icon.sc-ion-select-popover-md{font-size:24px}.select-option-start.sc-ion-select-popover-md>ion-img.sc-ion-select-popover-md,.select-option-start.sc-ion-select-popover-md>img.sc-ion-select-popover-md,.select-option-start.sc-ion-select-popover-md>svg.sc-ion-select-popover-md,.select-option-start.sc-ion-select-popover-md>ion-thumbnail.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-img.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>img.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>svg.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-thumbnail.sc-ion-select-popover-md{width:56px;height:56px}.select-option-start.sc-ion-select-popover-md>video.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>video.sc-ion-select-popover-md{width:114px;height:56px}.sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="container"]{display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
const SelectPopover = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
// Tracks the option that received Enter-keydown so keyup only
// dismisses when the press started on the same option. Prevents
// Enter on the triggering ion-select from auto-dismissing.
this.pendingEnterTarget = null;
/**
* An array of options for the popover
*/
this.options = [];
}
findOptionFromEvent(ev) {
const { options } = this;
return options.find((o) => o.value === ev.target.value);
}
/**
* When an option is selected we need to get the value(s)
* of the selected option(s) and return it in the option
* handler
*/
callOptionHandler(ev) {
const option = this.findOptionFromEvent(ev);
const values = this.getValues(ev);
if (option?.handler) {
hardwareBackButton.safeCall(option.handler, values);
}
}
/**
* Dismisses the host popover that the `ion-select-popover`
* is rendered within.
*/
dismissParentPopover() {
const popover = this.el.closest('ion-popover');
if (popover) {
popover.dismiss();
}
}
setChecked(ev) {
const { multiple } = this;
const option = this.findOptionFromEvent(ev);
// this is a popover with checkboxes (multiple value select)
// we need to set the checked value for this option
if (multiple && option) {
option.checked = ev.detail.checked;
}
}
getValues(ev) {
const { multiple, options } = this;
if (multiple) {
// this is a popover with checkboxes (multiple value select)
// return an array of all the checked values
return options.filter((o) => o.checked).map((o) => o.value);
}
// this is a popover with radio buttons (single value select)
// return the value that was clicked, otherwise undefined
const option = this.findOptionFromEvent(ev);
return option ? option.value : undefined;
}
renderOptions(options) {
const { multiple } = this;
switch (multiple) {
case true:
return this.renderCheckboxOptions(options);
default:
return this.renderRadioOptions(options);
}
}
renderCheckboxOptions(options) {
const mode = ionicGlobal.getIonMode(this);
return options.map((option, index$1) => {
/**
* Cast to `SelectOverlayOption` to access rich content
* fields (`startContent`, `endContent`, `description`)
* that are passed through from `ion-select` but not
* part of the public `SelectPopoverOption` interface.
*/
const richOption = option;
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
const optionLabelOptions = {
id: `popover-option-${index$1}`,
label: richOption.text,
startContent: richOption.startContent,
endContent: richOption.endContent,
description: richOption.description,
};
const defaultLabelPlacement = overlayControlLabel.getOverlayLabelPlacement(mode, 'checkbox');
const defaultJustify = overlayControlLabel.getOverlayLabelJustify(mode, 'checkbox');
return (index.h("ion-item", {
// TODO FW-4784
disabled: option.disabled, class: {
// TODO FW-4784
'item-checkbox-checked': option.checked,
...theme.getClassMap(option.cssClass),
}
}, index.h("ion-checkbox", { class: {
'select-option-has-rich-content': hasRichContent,
}, value: option.value, disabled: option.disabled, checked: option.checked, justify: richOption.justify ?? defaultJustify, labelPlacement: richOption.labelPlacement ?? defaultLabelPlacement, onIonChange: (ev) => {
this.setChecked(ev);
this.callOptionHandler(ev);
// TODO FW-4784
index.forceUpdate(this);
} }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
});
}
renderRadioOptions(options) {
const mode = ionicGlobal.getIonMode(this);
const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index$1) => {
/**
* Cast to `SelectOverlayOption` to access rich content
* fields (`startContent`, `endContent`, `description`)
* that are passed through from `ion-select` but not
* part of the public `SelectPopoverOption` interface.
*/
const richOption = option;
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
const optionLabelOptions = {
id: `popover-option-${index$1}`,
label: richOption.text,
startContent: richOption.startContent,
endContent: richOption.endContent,
description: richOption.description,
};
return (index.h("ion-item", {
// TODO FW-4784
disabled: option.disabled, class: {
// TODO FW-4784
'item-radio-checked': option.value === checked,
...theme.getClassMap(option.cssClass),
}
}, index.h("ion-radio", { class: {
'select-option-has-rich-content': hasRichContent,
}, value: option.value, disabled: option.disabled, justify: richOption.justify ?? overlayControlLabel.getOverlayLabelJustify(mode, 'radio'), labelPlacement: richOption.labelPlacement ?? overlayControlLabel.getOverlayLabelPlacement(mode, 'radio'), onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
if (ev.key === 'Enter' && !ev.repeat) {
this.pendingEnterTarget = ev.currentTarget;
}
}, onKeyUp: (ev) => {
if (ev.key === ' ') {
// Space selects and dismisses in one press.
this.dismissParentPopover();
}
else if (ev.key === 'Enter') {
const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
this.pendingEnterTarget = null;
if (shouldDismiss) {
this.dismissParentPopover();
}
}
} }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
})));
}
render() {
const { header, message, options, subHeader } = this;
const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
return (index.h(index.Host, { key: '4b4ac4a4b6523147e7c1f5e29dd8043867f2baea', class: ionicGlobal.getIonMode(this) }, index.h("ion-list", { key: 'f700d3dc3ce68c20a4d981164b29262564097fb4' }, header !== undefined && index.h("ion-list-header", { key: '196bcd7963f13ef8bc46231545eee4cb8d526f5e' }, header), hasSubHeaderOrMessage && (index.h("ion-item", { key: 'bb108e0aa2409997df35f52cb67e58e55e0fd630' }, index.h("ion-label", { key: '59e8d9196ff976f3835766662654c0f085e58ec3', class: "ion-text-wrap" }, subHeader !== undefined && index.h("h3", { key: '532f75d7c129ffadca4e6cbb619a4427aaede65c' }, subHeader), message !== undefined && index.h("p", { key: 'fc42c91594b9001e983cb5e4176fc4c9bff0f708' }, message)))), this.renderOptions(options))));
}
get el() { return index.getElement(this); }
};
SelectPopover.style = {
ios: selectPopoverIosCss(),
md: selectPopoverMdCss()
};
exports.ion_select = Select;
exports.ion_select_option = SelectOption;
exports.ion_select_popover = SelectPopover;