@ukic/web-components 2.9.0 → 2.10.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +27 -6
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +14 -22
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +4 -1
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +2 -0
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +1 -1
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +2 -2
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/arrow-dropdown.svg +3 -0
- package/dist/collection/components/ic-button/ic-button.css +20 -1
- package/dist/collection/components/ic-button/ic-button.js +53 -2
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.js +14 -22
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js +60 -2
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js.map +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js +4 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +19 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +1 -0
- package/dist/collection/components/ic-text-field/ic-text-field.js +2 -2
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +27 -3
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-button2.js +23 -3
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-menu2.js +14 -22
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +4 -1
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-popover-menu.js +3 -1
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-select.js +1 -1
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-text-field2.js +2 -2
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-tooltip2.js +7 -3
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +1 -1
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/core/core.css +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-ee97e2a5.entry.js → p-1338c9df.entry.js} +2 -2
- package/dist/core/p-1338c9df.entry.js.map +1 -0
- package/dist/core/{p-7f887c1e.entry.js → p-4d413a72.entry.js} +2 -2
- package/dist/core/p-4d413a72.entry.js.map +1 -0
- package/dist/core/{p-e278242f.entry.js → p-592c783e.entry.js} +2 -2
- package/dist/core/p-592c783e.entry.js.map +1 -0
- package/dist/core/p-776232f4.entry.js +2 -0
- package/dist/core/p-776232f4.entry.js.map +1 -0
- package/dist/core/p-85026377.entry.js +2 -0
- package/dist/core/p-85026377.entry.js.map +1 -0
- package/dist/core/{p-02159742.entry.js → p-a46130c8.entry.js} +2 -2
- package/dist/core/{p-02159742.entry.js.map → p-a46130c8.entry.js.map} +1 -1
- package/dist/core/p-a908e7a9.entry.js +2 -0
- package/dist/core/p-a908e7a9.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/ic-button_3.entry.js +27 -6
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +14 -22
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +4 -1
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +3 -1
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +1 -1
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +2 -2
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +1 -1
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-button/ic-button.d.ts +8 -0
- package/dist/types/components/ic-menu/ic-menu.d.ts +1 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +5 -0
- package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +4 -0
- package/dist/types/components.d.ts +36 -0
- package/dist/types/interface.d.ts +3 -0
- package/hydrate/index.js +55 -34
- package/package.json +6 -4
- package/vscode-data.json +8 -0
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.e2e.js +0 -57
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.e2e.js.map +0 -1
- package/dist/collection/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.js +0 -31
- package/dist/collection/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.e2e.js +0 -117
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.e2e.js.map +0 -1
- package/dist/collection/components/ic-alert/test/a11y/ic-alert.test.a11y.js +0 -11
- package/dist/collection/components/ic-alert/test/a11y/ic-alert.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.e2e.js +0 -16
- package/dist/collection/components/ic-alert/test/basic/ic-alert.e2e.js.map +0 -1
- package/dist/collection/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.js +0 -28
- package/dist/collection/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.js +0 -68
- package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.js.map +0 -1
- package/dist/collection/components/ic-badge/test/a11y/ic-badge.test.a11y.js +0 -16
- package/dist/collection/components/ic-badge/test/a11y/ic-badge.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.js +0 -11
- package/dist/collection/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-toast/test/a11y/ic-toast.test.a11y.js +0 -16
- package/dist/collection/components/ic-toast/test/a11y/ic-toast.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-toast/test/basic/ic-toast.e2e.js +0 -82
- package/dist/collection/components/ic-toast/test/basic/ic-toast.e2e.js.map +0 -1
- package/dist/core/p-6bc431b2.entry.js +0 -2
- package/dist/core/p-6bc431b2.entry.js.map +0 -1
- package/dist/core/p-7f887c1e.entry.js.map +0 -1
- package/dist/core/p-988991d3.entry.js +0 -2
- package/dist/core/p-988991d3.entry.js.map +0 -1
- package/dist/core/p-ca178add.entry.js +0 -2
- package/dist/core/p-ca178add.entry.js.map +0 -1
- package/dist/core/p-e278242f.entry.js.map +0 -1
- package/dist/core/p-ee97e2a5.entry.js.map +0 -1
- package/dist/types/components/ic-accordion-group/test/a11y/ic-accordion-group.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-alert/test/a11y/ic-alert.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-badge/test/a11y/ic-badge.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-classification-banner/test/a11y/ic-classification-banner.test.a11y.d.ts +0 -1
- package/dist/types/components/ic-toast/test/a11y/ic-toast.test.a11y.d.ts +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icSelectCss","inputIds","Select","this","hasSetDefaultValue","inheritedAttributes","initialOptionsEmpty","inputId","menuId","searchableMenuItemSelected","ungroupedOptions","handleRetry","ev","detail","keyPressed","_a","searchableSelectElement","focus","blurredBecauseButtonPressed","retryButtonClick","icRetryLoad","emit","value","hiddenInputValue","emitIcChange","searchable","clearTimeout","debounceIcChange","window","setTimeout","icChange","currDebounce","emitImmediateIcChange","deduplicateOptions","options","uniqueValues","dedupedOptions","dedupedChildren","forEach","option","children","child","includes","console","warn","label","push","modifiedParent","Object","assign","setOptionsValuesFromLabels","length","map","setUngroupedOptions","event","setTextColor","nativeSelectElement","selectedIndex","className","setMenuChange","open","getLabelFromValue","uniqueOptions","getFilteredChildMenuOptions","getFilteredMenuOptions","includeDescriptionsInSearch","searchableSelectInputValue","searchMatchPosition","pressedCharacters","newOption","handleNativeSelectChange","icOptionSelect","handleCustomSelectChange","emptyOptionListText","currValue","inputValueToFilter","getValueFromLabel","ariaActiveDescendant","optionId","handleMenuChange","handleFocusIndicatorDisplay","handleMenuKeyPress","cancelBubble","handleCharacterKeyDown","key","handleMenuValueChange","focusIndicator","el","shadowRoot","querySelector","classList","add","remove","handleMouseDown","preventDefault","isExternalFiltering","disableFilter","handleClick","menu","filteredOptions","hasTimedOut","loading","noOptions","handleClickOpen","handleExpandIconMouseDown","disabled","handleClear","stopPropagation","timeoutTimer","icClear","customSelectElement","characterKeyPressTimer","handleFilter","handleNativeSelectKeyDown","handleKeyDown","isArrowKey","handleKeyboardOpen","handleClearButtonFocus","clearButtonFocused","handleClearButtonBlur","retryButton","relatedTarget","isGrouped","newFilteredOptions","menuOptionsFiltered","includeGroupTitlesInSearch","indexOf","noChildOptionsWhenFiltered","triggerLoading","loadingLabel","timeout","loadingErrorLabel","timedOut","find","handleSearchableSelectInput","target","icInput","debounceAriaLiveUpdate","updateSearchableSelectResultAriaLive","searchableSelectResultsStatusEl","innerText","getDefaultValue","onFocus","icFocus","onBlur","tagName","isSearchableAndNoFocusedInternalElements","Array","from","querySelectorAll","clearButton","icBlur","onTimeoutBlur","handleFormReset","initialValue","debounce","loadingHandler","newValue","watchOptionsHandler","setDefaultValue","debounceChangedHandler","updateOnChangeDebounce","valueChangedHandler","disconnectedCallback","removeFormResetListener","componentWillLoad","inheritAttributes","IC_INHERITED_ARIA","removeDisabledFalse","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","setFocus","debounceAria","render","small","size","fullWidth","helperText","hideLabel","name","placeholder","readonly","required","showClearButton","validationStatus","validationText","renderHiddenInput","invalid","IcInformationStatus","Error","describedBy","getInputDescribedByText","hasValidationStatus","trim","h","Host","class","for","ref","anchorEl","isMobileOrTablet","onChange","id","onKeyDown","form","selected","role","autocomplete","onInput","onClick","formaction","formenctype","formmethod","formnovalidate","formtarget","innerHTML","Clear","variant","appearance","IcThemeForegroundEnum","Light","Dark","onMouseDown","Expand","undefined","inputEl","inputLabel","selectOnEnter","onMenuStateChange","onMenuOptionSelect","onMenuKeyPress","onMenuValueChange","onUngroupedOptionsSet","onRetryButtonClicked","parentEl","activationType","ariaLiveMode","status","message"],"sources":["src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","src/components/ic-select/ic-select.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --input-width: Width of the input field\n * @prop --ic-z-index-menu: z-index of select menu\n */\n\n:host {\n display: block;\n position: relative;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\nic-input-component-container:hover {\n --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n --border-color: var(--ic-action-dark-active);\n\n color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n --border-color: var(--ic-architectural-400);\n\n color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n visibility: visible;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n visibility: hidden;\n transition: visibility 0s;\n}\n\nic-input-label {\n margin-bottom: var(--ic-space-xs) !important;\n}\n\nselect {\n border: 0;\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n color: var(--ic-color-primary-text);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n height: 100%;\n padding-left: 0.375rem;\n appearance: none;\n background-repeat: no-repeat;\n background-position: right 0.375rem center;\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n color: var(--ic-architectural-200);\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n border: 0;\n outline: 0;\n}\n\nselect:not([disabled]) {\n cursor: pointer;\n}\n\n.select-container {\n width: 100%;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.select-input {\n width: 100%;\n height: 100%;\n padding: 0 0.375rem;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: space-between;\n background: none;\n border: none;\n}\n\n.select-input:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(:not(.disabled)) ic-input-component-container:hover .select-input {\n background-color: var(--ic-architectural-white);\n}\n\n.select-input[disabled] {\n pointer-events: none;\n}\n\n:host(.searchable) .select-input {\n cursor: auto;\n}\n\n.searchable-select-container {\n align-items: center;\n display: flex;\n width: 100%;\n position: relative;\n}\n\n.expand-icon {\n height: var(--ic-space-lg);\n padding-left: var(--ic-space-xs);\n color: var(--ic-action-dark);\n}\n\n.expand-icon > svg {\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.disabled) .expand-icon,\n:host(.disabled) .expand-icon > svg > path {\n color: var(--ic-architectural-200);\n}\n\n:host(.searchable) .expand-icon {\n padding-left: var(--ic-space-xxs);\n height: 2.25rem;\n}\n\n:host(.searchable) .expand-icon > svg {\n height: 2.25rem;\n padding: 0 0.375rem;\n}\n\n:host(.searchable:not(.disabled)) .expand-icon > svg {\n cursor: pointer;\n}\n\n.expand-icon-open {\n color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n color: var(--ic-action-dark);\n}\n\n.expand-icon-open,\n:host(.searchable) .expand-icon-open {\n transform: rotateX(180deg);\n}\n\n:host(.disabled) .value-text,\n.placeholder {\n color: var(--ic-color-tertiary-text);\n}\n\n.select-input-end {\n display: flex;\n align-items: center;\n}\n\n.clear-button-container {\n display: flex;\n gap: var(--ic-space-xxs);\n padding-left: 2.375rem;\n}\n\n:host(.small) .clear-button-container {\n padding-left: 1.875rem;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-architectural-400);\n margin: var(--ic-space-xxs) 0;\n border-radius: var(--ic-space-1px);\n height: var(--ic-space-lg);\n}\n\n:host(.small) .divider {\n height: var(--ic-space-md);\n}\n\n.clear-button {\n position: absolute;\n right: 2.75rem;\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus {\n background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);\n border-radius: 0.25rem;\n}\n\n.clear-button:focus * {\n fill: white;\n}\n\n.searchable-select-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n h,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n getInputDescribedByText,\n getLabelFromValue,\n hasValidationStatus,\n inheritAttributes,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n isMobileOrTablet,\n getFilteredMenuOptions,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcThemeForegroundEnum,\n IcMenuOption,\n IcSearchMatchPositions,\n IcValueEventDetail,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcOptionSelectEventDetail } from \"../ic-menu/ic-menu.types\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-select\",\n styleUrl: \"ic-select.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Select {\n private anchorEl: HTMLElement;\n private blurredBecauseButtonPressed: boolean;\n private characterKeyPressTimer: number;\n private clearButton: HTMLIcButtonElement;\n private customSelectElement: HTMLButtonElement;\n private debounceAria: number;\n private hasSetDefaultValue = false;\n private hasTimedOut: boolean;\n private inheritedAttributes: { [k: string]: unknown } = {};\n private initialOptionsEmpty = false;\n private inputId = `ic-select-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuId = `${this.inputId}-menu`;\n private nativeSelectElement: HTMLSelectElement;\n private retryButtonClick: boolean;\n private searchableMenuItemSelected: boolean = false;\n private searchableSelectElement: HTMLInputElement;\n private timeoutTimer: number;\n private ungroupedOptions: IcMenuOption[] = [];\n\n @Element() el!: HTMLIcSelectElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() debounceIcChange: number;\n @State() hiddenInputValue: string;\n @State() noOptions: IcMenuOption[] = null;\n @State() open: boolean = false;\n @State() pressedCharacters: string = \"\";\n @State() searchableSelectInputValue: string = null;\n\n /**\n * @deprecated This prop should not be used anymore.\n */\n @Prop() charactersUntilSuggestions?: number = 0;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /**\n * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.\n */\n @Prop() disableFilter?: boolean = false;\n\n /**\n * The text displayed when there are no options in the option list.\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * The <form> element to associate the select with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.\n * This prop should only be used with searchable select and will only be applied if searchable is true.\n */\n @Prop() formaction?: string;\n\n /**\n * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.\n */\n @Prop() formenctype?: string;\n\n /**\n * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.\n */\n @Prop() formmethod?: string;\n\n /**\n * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.\n */\n @Prop() formnovalidate?: boolean;\n\n /**\n * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.\n * This prop should only be used with searchable select and will only be applied if searchable is true.\n */\n @Prop() formtarget?: string;\n\n /**\n * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.\n */\n @Prop() includeDescriptionsInSearch?: boolean = false;\n\n /**\n * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.\n */\n @Prop() includeGroupTitlesInSearch?: boolean = false;\n\n /**\n * The label for the select.\n */\n @Prop() label!: string;\n\n /**\n * The message displayed when external loading times out.\n */\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /**\n * The message displayed whilst the options are being loaded externally.\n */\n @Prop() loadingLabel?: string = \"Loading...\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name?: string = this.inputId;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder?: string = \"Select an option\";\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * If `true`, the select will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.\n */\n @Prop() searchable?: boolean = false;\n\n /**\n * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.\n */\n @Prop() searchMatchPosition?: IcSearchMatchPositions = \"anywhere\";\n\n /**\n * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.\n */\n @Prop() selectOnEnter?: boolean = false;\n\n /**\n * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.\n */\n @Prop() showClearButton?: boolean = false;\n\n /**\n * The size of the select component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * If using external filtering, set a timeout for when loading takes too long.\n */\n @Prop() timeout?: number;\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText?: string = \"\";\n\n /**\n * If `true`, the loading state will be triggered when fetching options asyncronously.\n */\n @Prop({ mutable: true }) loading?: boolean = false;\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n newValue && this.triggerLoading();\n }\n\n /**\n * The possible selection options.\n */\n @Prop() options?: IcMenuOption[] = [];\n @State() filteredOptions: IcMenuOption[] = this.options;\n @State() uniqueOptions: IcMenuOption[] = this.options;\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n if (!this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (this.isExternalFiltering()) {\n if (this.options.length > 0) {\n this.setOptionsValuesFromLabels();\n this.noOptions = null;\n this.uniqueOptions = this.deduplicateOptions(this.options);\n this.filteredOptions = this.uniqueOptions;\n } else {\n this.noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n this.uniqueOptions = this.noOptions;\n this.filteredOptions = this.noOptions;\n }\n this.updateSearchableSelectResultAriaLive();\n this.setDefaultValue();\n } else {\n this.setOptionsValuesFromLabels();\n this.uniqueOptions = this.deduplicateOptions(this.options);\n this.filteredOptions = this.uniqueOptions;\n if (this.initialOptionsEmpty) {\n this.setDefaultValue();\n this.initialOptionsEmpty = false;\n }\n }\n } else {\n if (!this.searchable) this.options = this.noOptions;\n }\n }\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce?: number = 0;\n @State() currDebounce = this.debounce;\n\n @Watch(\"debounce\")\n debounceChangedHandler(newValue: number): void {\n this.updateOnChangeDebounce(newValue);\n }\n\n /**\n * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.\n */\n @Prop({ mutable: true }) value?: string;\n @State() initialValue = this.value;\n @State() inputValueToFilter = this.value;\n @State() currValue = this.value;\n\n @Watch(\"value\")\n valueChangedHandler(): void {\n if (this.value !== this.currValue) {\n this.currValue = this.value;\n }\n\n if (this.searchable) {\n this.searchableSelectInputValue =\n this.getLabelFromValue(this.currValue) || this.currValue;\n }\n }\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the value changes.\n */\n @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the clear button is clicked.\n */\n @Event() icClear!: EventEmitter<void>;\n\n /**\n * Emitted when the select gains focus.\n */\n @Event() icFocus!: EventEmitter<void>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when an option is highlighted within the menu.\n * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the 'retry loading' button is clicked for a searchable variant.\n */\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"tabindex\",\n \"title\",\n ]);\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.setOptionsValuesFromLabels();\n\n addFormResetListener(this.el, this.handleFormReset);\n\n if (!this.options.length) {\n this.initialOptionsEmpty = true;\n this.noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n this.uniqueOptions = this.noOptions;\n this.filteredOptions = this.noOptions;\n } else {\n this.setDefaultValue();\n this.uniqueOptions = this.deduplicateOptions(this.options);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Select\"\n );\n\n if (this.loading) {\n this.triggerLoading();\n }\n this.hiddenInputValue = this.searchable && this.currValue;\n }\n\n componentDidRender(): void {\n if (this.nativeSelectElement && !this.disabled) {\n this.setTextColor();\n }\n }\n\n /**\n * Sets focus on the input box.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.nativeSelectElement) {\n this.nativeSelectElement.focus();\n } else if (this.customSelectElement) {\n this.customSelectElement.focus();\n } else if (this.searchableSelectElement) {\n this.searchableSelectElement.focus();\n }\n }\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n if (ev.detail.keyPressed) this.searchableSelectElement?.focus();\n this.blurredBecauseButtonPressed = true;\n this.retryButtonClick = true;\n this.hasSetDefaultValue = true;\n this.icRetryLoad.emit({ value: this.hiddenInputValue });\n };\n\n private updateOnChangeDebounce(newValue: number) {\n if (this.currDebounce !== newValue) {\n this.currDebounce = newValue;\n }\n }\n\n private emitIcChange = (value: string) => {\n if (!this.searchable) {\n this.value = value;\n }\n\n clearTimeout(this.debounceIcChange);\n this.debounceIcChange = window.setTimeout(() => {\n this.icChange.emit({ value: value });\n }, this.currDebounce);\n };\n\n private emitImmediateIcChange = (value: string) => {\n this.value = value;\n clearTimeout(this.debounceIcChange);\n this.icChange.emit({ value: value });\n };\n\n /**\n * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn\n * @param options array of IcMenuOptions\n * @returns a new options object, with all entries possessing a duplicate 'value' field removed\n */\n private deduplicateOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n const uniqueValues: string[] = [];\n const dedupedOptions: IcMenuOption[] = [];\n let dedupedChildren: IcMenuOption[];\n\n options.forEach((option: IcMenuOption) => {\n if (option.children) {\n //If an option has children, we will loop through them\n dedupedChildren = [];\n option.children.forEach((child) => {\n if (uniqueValues.includes(child.value)) {\n console.warn(\n `ic-select with label ${this.label} was populated with duplicate option (value: ${child.value}) which has been removed.`\n );\n } else {\n uniqueValues.push(child.value);\n dedupedChildren.push(child);\n }\n });\n // construct a modified option, inserting the deduplicated children alongside the original information\n const modifiedParent: IcMenuOption = {\n ...option,\n children: dedupedChildren,\n };\n dedupedOptions.push(modifiedParent);\n } else {\n // If an option does not have children, assess to see if it's value has been included already\n if (uniqueValues.includes(option.value)) {\n console.warn(\n `ic-select with label ${this.label} was populated with duplicate option (value: ${option.value}) which has been removed.`\n );\n } else {\n uniqueValues.push(option.value);\n dedupedOptions.push(option);\n }\n }\n });\n return dedupedOptions;\n };\n\n /**\n * Loop through options array and for all options with no value, infer it from the label\n */\n private setOptionsValuesFromLabels = (): void => {\n if (this.options.length > 0 && this.options.map) {\n this.options.map((option) => {\n if (!option.value) {\n option.value = option.label;\n }\n });\n }\n };\n\n private setUngroupedOptions = (event: CustomEvent): void => {\n this.ungroupedOptions = event.detail.options;\n };\n\n private setTextColor = (): void => {\n if (this.nativeSelectElement.selectedIndex === 0) {\n this.nativeSelectElement.className = \"placeholder\";\n } else {\n this.nativeSelectElement.className = \"select-option-selected\";\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n }\n };\n\n private getLabelFromValue = (value: string): string | undefined => {\n return getLabelFromValue(value, this.uniqueOptions);\n };\n\n private getFilteredChildMenuOptions = (option: IcMenuOption) => {\n let children = option.children;\n\n if (this.searchable) {\n children = getFilteredMenuOptions(\n option.children,\n this.includeDescriptionsInSearch,\n this.searchableSelectInputValue,\n this.searchMatchPosition\n );\n } else {\n children = getFilteredMenuOptions(\n option.children,\n false,\n this.pressedCharacters,\n \"start\"\n );\n }\n\n const newOption = { ...option };\n newOption.children = children;\n return newOption;\n };\n\n private handleNativeSelectChange = (): void => {\n this.icOptionSelect.emit({ value: this.nativeSelectElement.value });\n this.emitImmediateIcChange(this.nativeSelectElement.value);\n this.setTextColor();\n };\n\n private handleCustomSelectChange = (event: CustomEvent): void => {\n if (this.searchable && event.detail.label === this.emptyOptionListText) {\n this.searchableSelectElement.focus();\n return;\n }\n\n if (this.searchable) {\n this.value = event.detail.value;\n this.searchableMenuItemSelected = true;\n\n // After editing the input, if selecting the same option as before, set the input value to label again\n if (this.value === this.currValue) {\n this.searchableSelectInputValue = this.getLabelFromValue(this.value);\n }\n\n this.inputValueToFilter = null;\n this.hiddenInputValue = this.getValueFromLabel(\n this.searchableSelectInputValue\n );\n }\n\n this.ariaActiveDescendant = event.detail.optionId;\n this.icOptionSelect.emit({ value: event.detail.value });\n this.emitIcChange(event.detail.value);\n };\n\n private handleMenuChange = (event: CustomEvent): void => {\n this.open = event.detail.open;\n this.pressedCharacters = \"\";\n\n this.searchable && this.handleFocusIndicatorDisplay();\n };\n\n // clears the debounce delay when navigating the menu with arrow keys etc\n // to prevent delay in change event, which should only occur when typing in input\n private handleMenuKeyPress = (ev: CustomEvent): void => {\n ev.cancelBubble = true;\n this.handleCharacterKeyDown(ev.detail.key);\n };\n\n private handleMenuValueChange = (ev: CustomEvent): void => {\n this.value = ev.detail.value;\n };\n\n private handleFocusIndicatorDisplay = () => {\n const focusIndicator = this.el.shadowRoot.querySelector(\".focus-indicator\");\n\n if (this.open) {\n focusIndicator.classList.add(\"focus-indicator-enabled\");\n } else {\n focusIndicator.classList.remove(\"focus-indicator-enabled\");\n }\n };\n\n private handleMouseDown = (event: Event): void => {\n if (!this.open) {\n event.preventDefault();\n }\n };\n\n private isExternalFiltering = (): boolean =>\n this.searchable && this.disableFilter;\n\n private handleClick = (event: MouseEvent): void => {\n if (!this.open) {\n if (this.isExternalFiltering()) {\n this.menu.options = this.filteredOptions;\n } else if (\n !this.hasTimedOut &&\n !this.loading &&\n !this.noOptions?.length &&\n (!this.searchable || this.searchableMenuItemSelected)\n ) {\n this.noOptions = null;\n this.menu.options = this.uniqueOptions;\n }\n }\n\n if (event.detail !== 0) {\n this.menu.handleClickOpen();\n }\n };\n\n private handleExpandIconMouseDown = (event: MouseEvent) => {\n if (!this.disabled) {\n event.preventDefault();\n this.searchableSelectElement.focus();\n this.handleClick(event);\n }\n };\n\n private handleClear = (event: Event): void => {\n event.stopPropagation();\n this.hasTimedOut = false;\n clearTimeout(this.timeoutTimer);\n this.noOptions = null;\n this.emitImmediateIcChange(null);\n this.icClear.emit();\n\n if (this.searchable) {\n this.searchableSelectElement.value = null;\n this.searchableSelectInputValue = null;\n this.filteredOptions = this.uniqueOptions;\n this.hiddenInputValue = null;\n this.searchableSelectElement.focus();\n } else {\n this.customSelectElement.focus();\n }\n };\n\n private handleCharacterKeyDown = (key: string) => {\n // Only close menu when space is pressed if not being used alongside character keys to quickly select options\n if (\n this.open &&\n key === \" \" &&\n this.pressedCharacters.length === 0 &&\n !this.hasTimedOut &&\n !this.loading\n ) {\n this.setMenuChange(false);\n }\n\n if (key.length === 1 && !this.searchable) {\n window.clearTimeout(this.characterKeyPressTimer);\n this.characterKeyPressTimer = window.setTimeout(\n () => (this.pressedCharacters = \"\"),\n 1000\n );\n\n this.pressedCharacters += key;\n this.handleFilter();\n\n if (!this.noOptions) {\n this.emitImmediateIcChange(this.filteredOptions[0].value);\n }\n } else {\n this.pressedCharacters = \"\";\n }\n };\n\n private handleNativeSelectKeyDown = (event: KeyboardEvent) => {\n if ((event.key !== \"Escape\" && event.key !== \"Tab\") || this.open) {\n event.cancelBubble = true;\n }\n this.handleCharacterKeyDown(event.key);\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if ((event.key !== \"Escape\" && event.key !== \"Tab\") || this.open) {\n event.cancelBubble = true;\n }\n const isArrowKey = event.key === \"ArrowDown\" || event.key === \"ArrowUp\";\n\n if (!this.open) {\n if (this.isExternalFiltering() && (event.key === \"Enter\" || isArrowKey)) {\n this.menu.options = this.filteredOptions;\n } else {\n if (!this.hasTimedOut) {\n this.noOptions = null;\n this.menu.options = this.uniqueOptions;\n }\n }\n }\n\n if (this.open && event.key === \"Enter\") {\n this.setMenuChange(false);\n } else {\n if (!(isArrowKey && this.noOptions !== null)) {\n if (!(event.key === \" \" && this.pressedCharacters.length > 0)) {\n // Keyboard events get passed onto ic-menu\n this.menu.handleKeyboardOpen(event);\n }\n this.handleCharacterKeyDown(event.key);\n }\n }\n };\n\n private handleClearButtonFocus = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleClearButtonBlur = (ev: FocusEvent): void => {\n const retryButton = this.menu?.querySelector(\"#retry-button\");\n if (\n !(\n this.searchableSelectElement &&\n ev.relatedTarget === this.searchableSelectElement\n ) &&\n !(retryButton && ev.relatedTarget === retryButton)\n ) {\n this.setMenuChange(false);\n this.handleFocusIndicatorDisplay();\n }\n this.clearButtonFocused = false;\n };\n\n private handleFilter = (): void => {\n const options = this.deduplicateOptions(\n this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions\n );\n\n let isGrouped = false;\n let newFilteredOptions: IcMenuOption[] = [];\n\n options.map((option) => {\n if (option.children) isGrouped = true;\n });\n\n let menuOptionsFiltered: IcMenuOption[];\n\n if (this.searchable) {\n menuOptionsFiltered = getFilteredMenuOptions(\n options,\n this.includeDescriptionsInSearch,\n this.inputValueToFilter,\n this.searchMatchPosition\n );\n this.searchableMenuItemSelected = false;\n } else {\n menuOptionsFiltered = getFilteredMenuOptions(\n options,\n false,\n this.pressedCharacters,\n \"start\"\n );\n }\n\n if (\n !isGrouped &&\n menuOptionsFiltered[0]?.label !== this.emptyOptionListText\n ) {\n newFilteredOptions = menuOptionsFiltered;\n } else if (isGrouped) {\n options.map((option) => {\n if (this.includeGroupTitlesInSearch) {\n if (menuOptionsFiltered.indexOf(option) !== -1) {\n newFilteredOptions.push(option);\n } else {\n newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n }\n } else {\n newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n }\n });\n }\n\n let noChildOptionsWhenFiltered = false;\n\n if (isGrouped) {\n noChildOptionsWhenFiltered = true;\n newFilteredOptions.map((option) => {\n if (option.children.length > 0) {\n noChildOptionsWhenFiltered = false;\n }\n });\n }\n\n if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {\n this.noOptions = null;\n this.filteredOptions = newFilteredOptions;\n } else {\n this.noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n this.filteredOptions = this.noOptions;\n }\n };\n\n /**\n * Put the select component into loading state.\n * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message\n */\n private triggerLoading = () => {\n this.hasTimedOut = false;\n this.noOptions = [{ label: this.loadingLabel, value: \"\", loading: true }];\n if (this.filteredOptions !== this.noOptions && this.searchable) {\n this.filteredOptions = this.noOptions;\n } else if (this.uniqueOptions !== this.noOptions && !this.searchable) {\n this.uniqueOptions = this.noOptions;\n }\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.loading = false;\n this.hasTimedOut = true;\n this.noOptions = [\n { label: this.loadingErrorLabel, value: \"\", timedOut: true },\n ];\n this.filteredOptions = this.noOptions;\n if (!this.searchable) this.uniqueOptions = this.noOptions;\n }, this.timeout);\n }\n };\n\n private getValueFromLabel = (label: string): string | undefined => {\n return this.uniqueOptions.find((option) => option.label === label)?.value;\n };\n\n private handleSearchableSelectInput = (event: Event): void => {\n this.searchableSelectInputValue = (event.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.searchableSelectInputValue });\n this.emitIcChange(this.searchableSelectInputValue);\n\n this.hiddenInputValue = this.searchableSelectInputValue;\n this.inputValueToFilter = this.searchableSelectInputValue;\n this.setMenuChange(true);\n\n if (!this.disableFilter) {\n this.handleFilter();\n this.debounceAriaLiveUpdate();\n }\n };\n\n private updateSearchableSelectResultAriaLive = (): void => {\n const searchableSelectResultsStatusEl = this.el.shadowRoot.querySelector(\n \".searchable-select-results-status\"\n ) as HTMLDivElement;\n\n if (searchableSelectResultsStatusEl) {\n if (this.noOptions !== null) {\n searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchableSelectResultsStatusEl.innerText = \"\";\n }\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAria);\n\n window.setTimeout(() => {\n this.updateSearchableSelectResultAriaLive();\n }, 800);\n }\n\n private getDefaultValue = (value: string): string | null =>\n this.getLabelFromValue(value) || value || null;\n\n private setDefaultValue() {\n if (!this.hasSetDefaultValue && this.currValue) {\n this.searchableSelectInputValue = this.getDefaultValue(this.currValue);\n this.initialValue = this.currValue;\n this.hasSetDefaultValue = true;\n }\n }\n\n private onFocus = (): void => {\n this.icFocus.emit();\n };\n\n private onBlur = (event: FocusEvent): void => {\n const target = event.relatedTarget as HTMLElement;\n if (\n target !== null &&\n target.tagName === \"UL\" &&\n target.className.includes(\"menu\")\n ) {\n return;\n }\n\n const retryButton = this.menu?.querySelector(\"#retry-button\");\n const isSearchableAndNoFocusedInternalElements =\n this.searchable &&\n event.relatedTarget !== this.menu &&\n !Array.from(this.menu.querySelectorAll(\"[role='option']\")).includes(\n event.relatedTarget as Element\n ) &&\n !(this.clearButton && event.relatedTarget === this.clearButton) &&\n !(retryButton && event.relatedTarget === retryButton);\n\n if (isSearchableAndNoFocusedInternalElements) {\n if (!this.retryButtonClick) {\n this.setMenuChange(false);\n }\n this.handleFocusIndicatorDisplay();\n }\n\n this.retryButtonClick = false;\n this.icBlur.emit();\n };\n\n private onTimeoutBlur = (ev: CustomEvent) => {\n if (\n (ev.detail.ev as FocusEvent).relatedTarget !==\n this.searchableSelectElement &&\n !this.blurredBecauseButtonPressed\n ) {\n this.setMenuChange(false);\n this.handleFocusIndicatorDisplay();\n this.icBlur.emit();\n }\n this.blurredBecauseButtonPressed = false;\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n if (this.searchable) {\n this.searchableSelectInputValue = this.getDefaultValue(this.value);\n this.hiddenInputValue = this.value;\n }\n };\n\n render() {\n const {\n small,\n size,\n disabled,\n fullWidth,\n helperText,\n hideLabel,\n label,\n menuId,\n name,\n options,\n placeholder,\n readonly,\n required,\n searchable,\n showClearButton,\n validationStatus,\n validationText,\n currValue,\n } = this;\n\n renderHiddenInput(\n true,\n this.el,\n name,\n this.searchable ? this.hiddenInputValue : currValue,\n disabled\n );\n\n const invalid =\n validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n const describedBy = getInputDescribedByText(\n this.inputId,\n helperText !== \"\",\n hasValidationStatus(this.validationStatus, this.disabled)\n ).trim();\n\n return (\n <Host\n class={{\n disabled: disabled,\n searchable: searchable,\n small: small || size === \"small\",\n \"full-width\": fullWidth,\n }}\n onBlur={this.onBlur}\n >\n <ic-input-container readonly={readonly}>\n {!hideLabel && (\n <ic-input-label\n for={this.inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n readonly={readonly}\n ></ic-input-label>\n )}\n <ic-input-component-container\n ref={(el) => (this.anchorEl = el)}\n class={{ \"menu-open\": this.open }}\n small={small || size === \"small\"}\n fullWidth={fullWidth}\n disabled={disabled}\n readonly={readonly}\n validationStatus={validationStatus}\n >\n {readonly ? (\n <ic-typography>\n <p>{this.getLabelFromValue(currValue)}</p>\n </ic-typography>\n ) : isMobileOrTablet() ? (\n <select\n ref={(el) => (this.nativeSelectElement = el)}\n disabled={disabled}\n onChange={this.handleNativeSelectChange}\n required={required}\n id={this.inputId}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyDown={this.handleNativeSelectKeyDown}\n form={this.form}\n {...this.inheritedAttributes}\n >\n <option value=\"\" selected disabled={!showClearButton}>\n {placeholder}\n </option>\n {options.map((option) => {\n if (option.children) {\n return (\n <optgroup label={option.label}>\n {option.children.map((option) => (\n <option\n value={option.value}\n disabled={option.disabled}\n selected={option.value === currValue}\n >\n {option.label}\n </option>\n ))}\n </optgroup>\n );\n } else {\n return (\n <option\n value={option.value}\n disabled={option.disabled}\n selected={option.value === currValue}\n >\n {option.label}\n </option>\n );\n }\n })}\n </select>\n ) : searchable ? (\n <div class=\"searchable-select-container\">\n <input\n class=\"select-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n aria-label={label}\n aria-describedby={describedBy}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-autocomplete=\"list\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-invalid={invalid}\n aria-required={required ? \"true\" : \"false\"}\n aria-controls={menuId}\n ref={(el) => (this.searchableSelectElement = el)}\n id={this.inputId}\n value={this.searchableSelectInputValue}\n placeholder={placeholder}\n disabled={disabled}\n onInput={this.handleSearchableSelectInput}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n form={this.form}\n formaction={this.formaction}\n formenctype={this.formenctype}\n formmethod={this.formmethod}\n formnovalidate={this.formnovalidate}\n formtarget={this.formtarget}\n ></input>\n {this.searchableSelectInputValue &&\n (showClearButton || searchable) && (\n <div class=\"clear-button-container\">\n <ic-button\n id=\"clear-button\"\n ref={(el) => (this.clearButton = el)}\n aria-label={\n this.searchableSelectInputValue && currValue === null\n ? \"Clear input\"\n : \"Clear selection\"\n }\n class=\"clear-button\"\n innerHTML={Clear}\n onClick={this.handleClear}\n onFocus={this.handleClearButtonFocus}\n onBlur={this.handleClearButtonBlur}\n size={size}\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n )}\n <span\n onMouseDown={this.handleExpandIconMouseDown}\n class={{\n \"expand-icon\": true,\n \"expand-icon-open\": this.open,\n \"expand-icon-filled\": !(\n currValue == null || currValue === \"\"\n ),\n }}\n innerHTML={Expand}\n aria-hidden=\"true\"\n />\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"searchable-select-results-status\"\n ></div>\n </div>\n ) : (\n <div class=\"select-container\">\n <button\n class=\"select-input\"\n ref={(el) => (this.customSelectElement = el)}\n id={this.inputId}\n aria-label={`${label}, ${\n this.getLabelFromValue(currValue) || placeholder\n }${required ? \", required\" : \"\"}`}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-owns={menuId}\n aria-controls={menuId}\n disabled={disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.handleClick}\n onMouseDown={this.handleMouseDown}\n onKeyDown={this.handleKeyDown}\n >\n <ic-typography\n variant=\"body\"\n class={{\n \"value-text\": true,\n placeholder:\n this.getLabelFromValue(currValue) === undefined,\n }}\n >\n <p>{this.getLabelFromValue(currValue) || placeholder}</p>\n </ic-typography>\n <div class=\"select-input-end\">\n {currValue && showClearButton && (\n <div class=\"divider\"></div>\n )}\n <span\n class={{\n \"expand-icon\": true,\n \"expand-icon-open\": this.open,\n \"expand-icon-filled\": !(\n currValue == null || currValue === \"\"\n ),\n }}\n innerHTML={Expand}\n aria-hidden=\"true\"\n />\n </div>\n </button>\n {currValue && showClearButton && (\n <ic-button\n id=\"clear-button\"\n aria-label=\"Clear selection\"\n class=\"clear-button\"\n innerHTML={Clear}\n onClick={this.handleClear}\n onFocus={this.handleClearButtonFocus}\n onBlur={this.handleClearButtonBlur}\n size={size}\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n )}\n </div>\n )}\n </ic-input-component-container>\n {!isMobileOrTablet() && (\n <ic-menu\n class={{\n \"no-results\":\n this.loading ||\n this.hasTimedOut ||\n (this.noOptions !== null &&\n this.noOptions[0] &&\n this.noOptions[0].label === this.emptyOptionListText),\n }}\n ref={(el) => (this.menu = el)}\n inputEl={\n searchable\n ? this.searchableSelectElement\n : this.customSelectElement\n }\n inputLabel={label}\n anchorEl={this.anchorEl}\n small={small || size === \"small\"}\n menuId={menuId}\n open={this.open}\n options={searchable ? this.filteredOptions : this.uniqueOptions}\n value={currValue}\n fullWidth={fullWidth}\n selectOnEnter={this.selectOnEnter}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionSelect={this.handleCustomSelectChange}\n onMenuKeyPress={this.handleMenuKeyPress}\n onMenuValueChange={this.handleMenuValueChange}\n onUngroupedOptionsSet={this.setUngroupedOptions}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n onTimeoutBlur={this.onTimeoutBlur}\n activationType={\n this.searchable || this.selectOnEnter ? \"manual\" : \"automatic\"\n }\n ></ic-menu>\n )}\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n class={{ \"menu-open\": this.open }}\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n for={this.inputId}\n ></ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icPageHeaderCss","PageHeader","this","resizeObserver","resizeObserverCallback","reverseOrder","isSlotUsed","el","applyReverseOrder","runResizeObserver","ResizeObserver","observe","currSize","getCurrentDeviceSize","deviceSize","actionArea","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","appendActionContent","reverse","forEach","btn","append","areButtonsReversed","DEVICE_SIZES","S","XL","disconnectedCallback","disconnect","componentWillLoad","Array","from","querySelectorAll","componentDidLoad","checkResizeObserver","render","small","size","border","heading","subheading","aligned","sticky","stickyDesktopOnly","h","Host","class","fullHeight","name","variant"],"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-page-header: z-index of page-header\n */\n\n:host {\n display: block;\n z-index: var(--ic-z-index-page-header);\n}\n\n:host(.sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n}\n\nheader {\n background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n border-bottom: var(--ic-border-default);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 19rem;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n row-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading.small {\n margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 0.5rem;\n margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n display: none;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n\n max-width: 20rem;\n }\n\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .title-area {\n min-width: 0;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n private resizeObserver: ResizeObserver = null;\n\n @Element() el: HTMLIcPageHeaderElement;\n\n @State() actionContent: Node[];\n @State() areButtonsReversed: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n /**\n * The alignment of the page header.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * If `true`, a border will be displayed along the bottom of the page header.\n */\n @Prop() border?: boolean = true;\n\n /**\n * The title to render on the page header.\n */\n @Prop() heading?: string;\n\n /**\n * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n */\n @Prop() reverseOrder?: boolean = false;\n\n /**\n * The size of the page header component.\n */\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /**\n * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n */\n @Prop() small?: boolean = false;\n\n /**\n * If `true`, the page header will be sticky at all breakpoints.\n */\n @Prop() sticky?: boolean = false;\n\n /**\n * If `true`, the page header will only be sticky for viewport widths of 992px and above.\n */\n @Prop() stickyDesktopOnly?: boolean = false;\n\n /**\n * The subtitle to render on the page header.\n */\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n const appendActionContent = () => {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string | Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n };\n\n if (\n (this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed) ||\n (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed)\n ) {\n appendActionContent();\n }\n };\n\n render() {\n const {\n small,\n size,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n } = this;\n\n return (\n <Host\n class={{\n [\"sticky\"]: sticky,\n [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n }}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={small || size === \"small\" ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div>\n <slot name=\"subheading\">\n {subheading && (\n <ic-typography\n variant=\"body\"\n class={{\n [\"subheading\"]: true,\n [\"small\"]: small || size === \"small\",\n }}\n >\n {subheading}\n </ic-typography>\n )}\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") ||\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav aria-label=\"navigation-landmark-page-header\">\n <ic-horizontal-scroll>\n <ul class=\"tabs-slot\">\n <slot name=\"tabs\" />\n </ul>\n </ic-horizontal-scroll>\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as e,H as i,g as o}from"./p-52e063d3.js";import{z as s,d as n}from"./p-95a864bf.js";import{c as a}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const r='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const l=class{constructor(e){t(this,e);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(t===null||t===undefined){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const e=t.target;return e.id!==this.anchor&&e.tagName!=="IC-MENU-ITEM"&&e.tagName!=="IC-MENU-GROUP"&&e.tagName!=="IC-POPOVER-MENU"};this.closeMenu=()=>{var t;this.open=false;(t=this.anchorEl)===null||t===void 0?void 0:t.focus()};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector("ul");const e=s(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(n(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=a(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=n(this.submenuId)?1:0;setTimeout(this.setButtonFocus,50)}else{if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}}disconnectedCallback(){if(this.popperInstance!==undefined){this.popperInstance.destroy()}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=s(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.hasSubMenu&&t.detail.label!=="Back"){this.closeMenu()}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,true);this.setButtonFocus();break;case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,false);this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":if(this.open){this.closeMenu();this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}render(){return e(i,{class:{open:this.open}},e("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},e("div",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},n(this.submenuId)&&e("div",null,e("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},e("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},e("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"}))),e("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),e("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu","aria-owns":n(this.submenuId)?`ic-popover-submenu-back-button-${this.submenuLevel}`:false,"aria-controls":n(this.submenuId)?`ic-popover-submenu-back-button-${this.submenuLevel}`:false},e("slot",null)))))}static get delegatesFocus(){return true}get el(){return o(this)}static get watchers(){return{open:["watchOpenHandler"]}}};l.style=r;export{l as ic_popover_menu};
|
2
|
-
//# sourceMappingURL=p-988991d3.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","undefined","submenuId","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","target","id","tagName","closeMenu","open","anchorEl","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","initPopperJS","popperInstance","createPopper","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","hasSubMenu","label","handleSubmenuChange","childEl","submenuTriggerFor","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","render","h","Host","class","menu","tabindex","ref","onClick","slot","viewBox","fill","xmlns","d","variant","role"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n color: var(--ic-color-tertiary-text);\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel: number = 1;\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n }\n\n disconnectedCallback(): void {\n if (this.popperInstance !== undefined) {\n this.popperInstance.destroy();\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent): void {\n if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n this.closeMenu();\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(this.currentFocus, true);\n this.setButtonFocus();\n break;\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(this.currentFocus, false);\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n if (this.open) {\n this.closeMenu();\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (anchor === null || anchor === undefined) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const target = ev.target as HTMLElement;\n return (\n target.id !== this.anchor &&\n target.tagName !== \"IC-MENU-ITEM\" &&\n target.tagName !== \"IC-MENU-GROUP\" &&\n target.tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n private closeMenu = () => {\n this.open = false;\n this.anchorEl?.focus();\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n };\n\n render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <div\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <div>\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </div>\n )}\n <ul\n class=\"button\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n aria-owns={\n isPropDefined(this.submenuId)\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n aria-controls={\n isPropDefined(this.submenuId)\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n >\n <slot></slot>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,f as e,h as o,H as a,g as r}from"./p-52e063d3.js";import{x as n,w as s,j as c,k as l,i as h,d,a as u}from"./p-95a864bf.js";import{I as b}from"./p-26b7b18f.js";import{c as p}from"./p-68a5aaff.js";const v='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;position:relative;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover{cursor:pointer}.button:focus,:host .button:focus,:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.white-background) .button{--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n --ic-action-default-bg-active-no-alpha\n );background-color:var(--ic-architectural-white)}:host(.white-background.dark) .button{--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:hover:focus{background-color:var(--button-default-hover);border-color:var(--button-default-hover)}:host(.button-variant-primary:not(.light)) .button:hover:focus{color:var(--ic-architectural-white)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary) .button:active:focus{background-color:var(--button-default-active)}:host(.button-variant-primary) .button:active{background-color:var(--button-default-active)}:host(.button-variant-primary:not(.light)) .button:active{color:var(--ic-architectural-white)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus),:host(.button-variant-secondary) .button:hover:focus{background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus),:host(.button-variant-secondary) .button:active:focus,:host(.button-variant-secondary) .button:active{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus),:host(.button-variant-tertiary) .button:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary) .button:active:focus,:host(.button-variant-tertiary) .button:active,:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus),:host(.button-variant-destructive) .button:hover:focus{background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive) .button:active:focus,:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.button-size-small.button-variant-icon) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}@media (forced-colors: active){.button{border:0.125rem solid transparent}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}';var f=undefined&&undefined.__rest||function(t,i){var e={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&i.indexOf(o)<0)e[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(i.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))e[o[a]]=t[o[a]]}return e};let m=0;const g=class{constructor(o){t(this,o);this.icBlur=i(this,"icBlur",7);this.icFocus=i(this,"icFocus",7);this.buttonIdNum=m++;this.hasTooltip=false;this.inheritedAttributes={};this.describedByEl=null;this.describedById=null;this.mutationObserver=null;this.hostMutationObserver=null;this.setViewBox=()=>{let t;if(this.hasLeftIconSlot()){t=this.el.querySelector(`[slot="left-icon"]`)}else if(this.hasRightIconSlot()){t=this.el.querySelector(`[slot="right-icon"]`)}else{t=null}return t};this.handleClick=()=>{if((this.el.type==="submit"||this.el.type==="reset")&&!!this.el.closest("FORM")){this.handleHiddenFormButtonClick(this.el.closest("FORM"))}};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.loadingWidth=()=>{if(this.loading){this.el.style.setProperty("--min-width",`${this.el.getBoundingClientRect().width}px`)}};this.mutationCallback=()=>{this.describedByContent=this.describedByEl.innerText};this.hostMutationCallback=t=>{let i=false;t.forEach((({attributeName:t})=>{const e=this.el.getAttribute(t);if(t==="title")this.title=e;else if(t==="aria-label")this.ariaLabel=e;if(n.includes(t)){this.inheritedAttributes[t]=e;i=true}}));if(i){e(this)}};this.setHasTooltip=()=>{this.hasTooltip=!this.disableTooltip&&(!!this.title||this.variant==="icon")};this.ariaLabel=null;this.describedByContent=null;this.title=null;this.appearance="default";this.ariaControlsId=undefined;this.ariaOwnsId=undefined;this.disabled=false;this.disableTooltip=false;this.download=false;this.form=undefined;this.formaction=undefined;this.formenctype=undefined;this.formmethod=undefined;this.formnovalidate=undefined;this.formtarget=undefined;this.fullWidth=false;this.href=undefined;this.hreflang=undefined;this.loading=false;this.referrerpolicy=undefined;this.rel=undefined;this.size="default";this.target=undefined;this.tooltipPlacement="bottom";this.transparentBackground=true;this.type="button";this.variant="primary"}disconnectedCallback(){if(this.mutationObserver!==null&&this.mutationObserver!==undefined){this.mutationObserver.disconnect()}if(this.hostMutationObserver!==null&&this.hostMutationObserver!==undefined){this.hostMutationObserver.disconnect()}}componentWillUpdate(){this.loadingWidth();this.setHasTooltip()}componentWillLoad(){const t=s(this.el,[...n,"title"]);const{title:i,"aria-label":e}=t,o=f(t,["title","aria-label"]);this.title=i;this.ariaLabel=e;this.inheritedAttributes=o;c(this.disabled,this.el);this.el.setAttribute("exportparts","button");const a=this.el.id;this.id=a!==undefined?a:null;this.setHasTooltip();if(!this.hasTooltip){const t=this.inheritedAttributes["aria-describedby"];if(t!==undefined){this.describedById=t;const i=this.el.parentElement.querySelector(`#${t}`);if(i!==undefined&&i!==null){this.describedByContent=i.innerText;this.describedByEl=i}}}}componentDidLoad(){this.updateTheme();if(typeof MutationObserver!=="undefined"){if(this.describedById){this.mutationObserver=new MutationObserver(this.mutationCallback);this.mutationObserver.observe(this.describedByEl,{characterData:true,childList:true,subtree:true})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}}componentWillRender(){var t;(t=this.setViewBox())===null||t===void 0?void 0:t.setAttribute("viewBox","0 0 24 24")}handleHostClick(t){if(this.disabled||this.loading){t.stopImmediatePropagation()}}themeChangeHandler(t){const i=t.detail;this.updateTheme(i.mode)}async setFocus(){if(this.buttonEl){this.buttonEl.focus()}}hasIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);return t!==null}hasLeftIconSlot(){const t=this.el.querySelector(`[slot="left-icon"]`);return t!==null}hasRightIconSlot(){const t=this.el.querySelector(`[slot="right-icon"]`);return t!==null}handleHiddenFormButtonClick(t){const i=document.createElement("button");i.setAttribute("type",this.el.type);i.style.display="none";t.appendChild(i);i.click();i.remove()}updateTheme(t=null){const i=l(this.el,t||null);if(i!==b.Default){this.appearance=i}}render(){const t=this.href&&"a"||"button";const{title:i,ariaLabel:e,inheritedAttributes:r}=this;const n=t==="button"?{type:this.type,disabled:this.disabled,form:this.form,formaction:this.formaction,formenctype:this.formenctype,formmethod:this.formmethod,formnovalidate:this.formnovalidate,formtarget:this.formtarget}:{download:this.download!==false?this.download:null,href:this.href,rel:this.rel,target:this.target,referrerpolicy:this.referrerpolicy,hreflang:this.hreflang};let s=null;let c=null;if(this.hasTooltip){c=this.id!==null?`ic-button-with-tooltip-${this.id}`:`ic-button-with-tooltip-${this.buttonIdNum}`;s=`ic-tooltip-${c}`}else{s=this.describedById}const l=()=>o(t,Object.assign({class:"button","aria-disabled":this.loading||this.disabled?"true":null,"aria-label":this.loading?"Loading":e},n,r,{onFocus:this.onFocus,onBlur:this.onBlur,ref:t=>this.buttonEl=t,"aria-describedby":s,part:"button"}),this.hasIconSlot()&&!this.loading&&o("div",{class:"icon-container"},o("slot",{name:"icon"})),this.hasLeftIconSlot()&&!this.loading&&o("div",{class:"icon-container"},o("slot",{name:"left-icon"})),this.loading?o("div",{class:"loading-container"},o("ic-loading-indicator",{type:"linear",appearance:this.variant==="primary"||this.variant==="destructive"||this.appearance===b.Dark||this.appearance===b.Light?"light":"dark"})):o("slot",null),this.hasRightIconSlot()&&!this.loading&&o("div",{class:"icon-container"},o("slot",{name:"right-icon"})));return o(a,{class:{["disabled"]:this.disabled&&!this.loading,[`button-variant-${this.variant}`]:true,[`button-size-${this.size}`]:true,["loading"]:this.loading,["dark"]:this.appearance===b.Dark,["light"]:this.appearance===b.Light,["full-width"]:this.fullWidth,["with-badge"]:h(this.el,"badge"),["white-background"]:this.variant==="secondary"&&!this.transparentBackground&&this.appearance!=="light"},onClick:this.handleClick,"aria-owns":this.ariaOwnsId,"aria-controls":this.ariaControlsId},this.hasTooltip&&o("ic-tooltip",{id:s,label:i||e,target:c,placement:this.tooltipPlacement,silent:this.variant==="icon"&&!!i},o(l,null)),h(this.el,"badge")&&o("slot",{name:"badge"}),!this.hasTooltip&&o(l,null),this.describedByContent&&o("span",{id:s,class:"ic-button-describedby"},this.describedByContent))}static get delegatesFocus(){return true}get el(){return r(this)}};g.style=v;const y='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size="small"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size="default"]){--circular-diameter:5rem}:host([size="large"]){--circular-diameter:7.5rem}:host([size="icon"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--outer-color);stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;color:var(--ic-status-info)}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}';const x=class{constructor(i){t(this,i);this.updateCircularProgressMeter=()=>{if(!this.indeterminate){this.circularMeter.style.setProperty("--progress-value",String(this.progress))}};this.getLabel=(t,i)=>new Promise((()=>{this.interval=setInterval((()=>{if(t<this.labelList.length-1){t++}else{t=0}i(this.labelList[t])}),this.labelDuration)}));this.getLabelVariant=()=>{var t;let i="h4";const e=(t=this.outerElement)===null||t===void 0?void 0:t.offsetWidth;if(this.size==="small"||this.type==="circular"&&e<60){i="label"}else if(this.size==="large"||this.type==="circular"&&e>=120){i="h2"}return i};this.setCircleLineWidth=()=>{const{offsetWidth:t}=this.outerElement;const i=this.el.classList.contains("compact-step-progress-indicator")?40:0;const e=this.el.classList.contains("toast-dismiss-timer")?20:0;if(t||i||e){this.circularLineWidth=(i||e||t)*.1;this.circularDiameter=i||e||t;this.outerElement.style.setProperty("--circular-line-width",`${this.circularLineWidth}px`)}};this.setLinearDeterminateWidth=()=>{if(!this.innerElement)return;const t=Math.min(this.max,Math.max(this.min,this.progress));const i=(t-this.min)/(this.max-this.min);this.showSecond=i>.5;if(this.showSecond){this.innerElement.classList.remove("clip")}else{this.innerElement.classList.add("clip")}this.innerElement.style.setProperty("--linear-width",`${i*100}%`)};this.calcOuterClass=()=>{let t=`ic-loading-${this.type}-outer`;t+=this.indeterminate?" indeterminate":" determinate";return t};this.updateLabel=()=>{if(d(this.label)){this.labelList=this.label.split("/");const t=0;this.indicatorLabel=this.labelList[t];if(this.labelList.length>1){this.getLabel(t,(t=>{this.indicatorLabel=t}))}}};this.setCircleXY=()=>{if(this.circularDiameter>0){const t=this.circularDiameter/2;const i=t;const e=t;const o=t-this.circularLineWidth/2;this.setDashSteps(o);return{x:i,y:e,r:o}}return{x:0,y:0,r:0}};this.setDashSteps=t=>{const i=2*Math.PI*t;const e=Math.min(Math.max(this.progress,this.min),this.max);const o=-1-(e-this.min)/(this.max-this.min);this.circularMeter.style.setProperty("--stroke-dasharray",`${i}px`);if(!this.indeterminate){this.circularMeter.style.setProperty("--circular-steps-max",String(this.max));this.circularMeter.style.setProperty("--stroke-dashoffset",`${o*i}px`)}};this.circularDiameter=undefined;this.circularLineWidth=undefined;this.indeterminate=undefined;this.indicatorLabel=undefined;this.showSecond=false;this.appearance="dark";this.description="Loading";this.fullWidth=false;this.innerLabel=undefined;this.labelDuration=8e3;this.max=100;this.min=0;this.size="default";this.type="circular";this.label=undefined;this.progress=undefined}watchPropHandler(){this.updateLabel()}watchProgressHandler(){if(this.type==="circular"){this.updateCircularProgressMeter()}}disconnectedCallback(){clearInterval(this.interval)}componentWillLoad(){this.indeterminate=this.progress===undefined;this.updateLabel();this.el.setAttribute("exportparts","ic-loading-container")}componentDidLoad(){if(this.type==="circular"){this.setCircleLineWidth();this.circularMeter=this.el.shadowRoot.querySelector(".ic-loading-circular-svg circle:nth-child(2)");this.updateCircularProgressMeter()}if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}componentWillUpdate(){this.indeterminate=this.progress===undefined}componentDidUpdate(){if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}render(){const{appearance:t,label:i,description:e,size:r,fullWidth:n,innerLabel:s}=this;const{x:c,y:l,r:h}=this.setCircleXY();return o(a,{class:{["light"]:t===b.Light,["label"]:!!i,["full-width"]:n,["inner-label"]:!!s}},o("div",{class:"ic-loading-container",part:"ic-loading-container"},o("div",{ref:t=>this.outerElement=t,class:this.calcOuterClass(),role:"progressbar","aria-labelledby":this.label&&this.size!=="icon"&&"ic-loading-label","aria-label":e,"aria-valuenow":this.progress,"aria-valuemin":this.min,"aria-valuemax":this.max},o("div",{ref:t=>this.innerElement=t,class:`ic-loading-${this.type}-inner`},this.innerLabel&&this.innerLabel!==undefined&&this.size==="small"&&o("ic-typography",{variant:"subtitle-small",class:"inner-text"},this.innerLabel),this.type==="circular"&&o("svg",{class:"ic-loading-circular-svg",viewBox:`0 0 ${this.circularDiameter||0} ${this.circularDiameter||0}`},o("circle",{cx:`${c}`,cy:`${l}`,r:`${h}`}),o("circle",{cx:`${c}`,cy:`${l}`,r:`${h}`})))),i&&r!=="icon"&&o("ic-typography",{id:"ic-loading-label",class:"ic-loading-label",role:"status",variant:this.getLabelVariant()},o("p",null,this.indicatorLabel))))}get el(){return r(this)}static get watchers(){return{label:["watchPropHandler"],progress:["watchProgressHandler"]}}};x.style=y;const w='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-architectural-40);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:"";border:var(--ic-border-width) solid var(--ic-architectural-40);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.on-dialog) .ic-tooltip-container{transform:translate(\n var(--tooltip-translate-x),\n var(--tooltip-translate-y)\n ) !important}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-hc-border)}}';const k=class{constructor(i){t(this,i);this.delayedHideEvents=["mouseleave"];this.dialogOverflow=false;this.instantHideEvents=["focusout"];this.mouseOverTool=false;this.persistTooltip=false;this.onDialog=false;this.showEvents=this.disableHover?["click"]:["mouseenter","focusin"];this.getTooltipTranslate=t=>{const i=this.el.children[0].getBoundingClientRect();let e;let o;switch(this.placement){case"bottom":e=i.left-t.left-.5*i.width;o=i.bottom-t.top;break;case"bottom-start":e=i.left-t.left;o=i.bottom-t.top;break;case"bottom-end":e=i.right-t.right;o=i.bottom-t.top;break;case"top":e=i.left-t.left-.5*i.width;o=i.top-t.bottom;break;case"top-start":e=i.left-t.left;o=i.top-t.bottom;break;case"top-end":e=i.right-t.right;o=i.top-t.bottom;break;case"left":case"left-start":e=i.right-t.right-i.width;o=i.bottom-t.top-i.height;break;case"left-end":e=i.right-t.right-i.width;o=i.top-t.bottom+i.height;break;case"right":case"right-start":e=i.left-t.left+i.width;o=i.bottom-t.top-i.height;break;case"right-end":e=i.left-t.left+i.width;o=i.top-t.bottom+i.height;break}if(this.dialogOverflow&&e<0){if(this.placement.includes("top")||this.placement.includes("bottom")){this.toolTip.style.setProperty("--tooltip-arrow-translate",`${e}px`);e=i.left-t.left}if(this.placement.includes("left")){this.placement="right";e=i.left-t.left+i.width}}this.toolTip.style.setProperty("--tooltip-translate-x",`${e}px`);this.toolTip.style.setProperty("--tooltip-translate-y",`${o}px`)};this.show=()=>{this.toolTip.setAttribute("data-show","");if(this.onDialog){this.el.classList.add("on-dialog");const t=this.icDialogEl.shadowRoot.querySelector("dialog").getBoundingClientRect();this.getTooltipTranslate(t)}this.popperInstance=p(this.el,this.toolTip,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,10]}},{name:"arrow",options:{element:this.arrow}},{name:"eventListeners",options:{scroll:false,resize:false}}]})};this.hide=()=>{this.toolTip.removeAttribute("data-show");this.persistTooltip=false};this.checkCloseTooltip=()=>{setTimeout((()=>{if(!this.mouseOverTool&&!this.persistTooltip){this.hide()}}),100)};this.mouseEnterTooltip=()=>{this.mouseOverTool=true};this.mouseLeaveTooltip=()=>{this.mouseOverTool=false;this.checkCloseTooltip()};this.handleKeyDown=t=>{if(t.key==="Escape"&&!this.persistTooltip){this.hide()}};this.manageEventListeners=t=>{const i=t==="add"?"addEventListener":"removeEventListener";this.showEvents.forEach((t=>{this.el[i](t,this.show);if(this.toolTip!==undefined){this.toolTip[i](t,this.mouseEnterTooltip)}}));if(!this.persistTooltip){this.instantHideEvents.forEach((t=>{this.el[i](t,this.hide)}))}this.delayedHideEvents.forEach((t=>{this.el[i](t,this.checkCloseTooltip);if(this.toolTip!==undefined){this.toolTip[i](t,this.mouseLeaveTooltip)}}));document[i]("keydown",this.handleKeyDown)};this.disableHover=false;this.maxLines=undefined;this.placement="bottom";this.silent=false;this.target=undefined;this.label=undefined}disconnectedCallback(){this.manageEventListeners("remove");if(this.popperInstance!==undefined){this.popperInstance.destroy()}}componentDidLoad(){var t;this.manageEventListeners("add");this.icDialogEl=this.el.closest("ic-dialog");this.dialogOverflow=((t=this.icDialogEl)===null||t===void 0?void 0:t.getAttribute("data-overflow"))==="true";this.onDialog=this.icDialogEl!==null;u([{prop:this.label,propName:"label"}],"Tooltip")}componentDidRender(){const t=this.el.shadowRoot.querySelector(".ic-tooltip-container > ic-typography");this.maxLines>0&&t.setAttribute("style",`--truncation-max-lines: ${this.maxLines}`)}async displayTooltip(t,i){this.persistTooltip=i;t?this.show():this.hide()}render(){const{label:t,maxLines:i,silent:e}=this;return o(a,{class:{"ic-tooltip":true}},o("div",{ref:t=>this.toolTip=t,role:"tooltip",class:"ic-tooltip-container","aria-hidden":e},o("ic-typography",{maxLines:i,variant:"caption"},t),o("div",{ref:t=>this.arrow=t,class:"ic-tooltip-arrow"})),o("slot",null))}get el(){return r(this)}};k.style=w;export{g as ic_button,x as ic_loading_indicator,k as ic_tooltip};
|
2
|
-
//# sourceMappingURL=p-ca178add.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icButtonCss","buttonIds","Button","this","buttonIdNum","hasTooltip","inheritedAttributes","describedByEl","describedById","mutationObserver","hostMutationObserver","setViewBox","iconEl","hasLeftIconSlot","el","querySelector","hasRightIconSlot","handleClick","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","loadingWidth","loading","style","setProperty","getBoundingClientRect","width","mutationCallback","describedByContent","innerText","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","title","ariaLabel","IC_INHERITED_ARIA","includes","forceUpdate","setHasTooltip","disableTooltip","variant","disconnectedCallback","undefined","disconnect","componentWillUpdate","componentWillLoad","allInheritedAttributes","inheritAttributes","restInheritedAttributes","__rest","removeDisabledFalse","disabled","setAttribute","id","parentElement","componentDidLoad","updateTheme","MutationObserver","observe","characterData","childList","subtree","attributes","componentWillRender","_a","handleHostClick","event","stopImmediatePropagation","themeChangeHandler","ev","theme","detail","mode","setFocus","buttonEl","focus","hasIconSlot","form","hiddenFormButton","document","createElement","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","render","TagType","href","buttonAttrs","formaction","formenctype","formmethod","formnovalidate","formtarget","download","rel","target","referrerpolicy","hreflang","describedBy","buttonId","ButtonContent","h","Object","assign","class","ref","part","name","Dark","Light","Host","size","fullWidth","isSlotUsed","transparentBackground","onClick","ariaOwnsId","ariaControlsId","label","placement","tooltipPlacement","silent","icLoadingIndicatorCss","LoadingIndicator","updateCircularProgressMeter","indeterminate","circularMeter","String","progress","getLabel","labelIndex","setLabel","Promise","interval","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","offsetWidth","setCircleLineWidth","compactStepCircularLineWidth","classList","contains","toastDismissTimerCircularLineWidth","circularLineWidth","circularDiameter","setLinearDeterminateWidth","innerElement","Math","min","max","proportion","showSecond","add","calcOuterClass","cls","updateLabel","isPropDefined","split","indicatorLabel","setCircleXY","r","x","y","nextRadius","setDashSteps","radius","dashArray","PI","watchPropHandler","watchProgressHandler","clearInterval","shadowRoot","Number","componentDidUpdate","description","innerLabel","role","viewBox","cx","cy","icTooltipCss","Tooltip","delayedHideEvents","dialogOverflow","instantHideEvents","mouseOverTool","persistTooltip","onDialog","showEvents","disableHover","getTooltipTranslate","dialogEl","child","children","tooltipX","tooltipY","left","bottom","top","right","height","toolTip","show","icDialogEl","popperInstance","createPopper","modifiers","options","offset","element","arrow","scroll","resize","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","manageEventListeners","action","method","destroy","onComponentRequiredPropUndefined","prop","propName","componentDidRender","typographyEl","maxLines","displayTooltip"],"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --min-width: Minimum width of the button.\n* @prop --height: The height of the button.\n*/\n\n:host {\n display: inline-block;\n position: relative;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 0.875rem;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: var(--min-width, 6.25rem);\n display: inline-flex;\n gap: var(--ic-space-xs);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n:host(.with-badge) .button {\n border-radius: 0.2188rem;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus,\n:host(.light) .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.white-background) .button {\n --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);\n --button-default-background-active: var(\n --ic-action-default-bg-active-no-alpha\n );\n\n background-color: var(--ic-architectural-white);\n}\n\n:host(.white-background.dark) .button {\n --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);\n --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);\n}\n\n:host(.button-variant-primary.light) .button {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n color: var(--ic-architectural-white);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:hover:focus {\n background-color: var(--button-default-hover);\n border-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary:not(.light)) .button:hover:focus {\n color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary) .button:active:focus {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary) .button:active {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary:not(.light)) .button:active {\n color: var(--ic-architectural-white);\n}\n\n:host(.button-variant-primary.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n border: var(--ic-border-width) solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus),\n:host(.button-variant-secondary) .button:hover:focus {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus),\n:host(.button-variant-secondary) .button:active:focus,\n:host(.button-variant-secondary) .button:active {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus),\n:host(.button-variant-tertiary) .button:hover:focus {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary) .button:active:focus,\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n color: var(--button-default);\n min-width: 0;\n gap: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n}\n\n:host(.button-variant-icon) .icon-container {\n width: var(--ic-space-lg) !important;\n height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n color: var(--ic-architectural-white);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus),\n:host(.button-variant-destructive) .button:hover:focus {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive) .button:active:focus,\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n height: var(--height, 2.5rem);\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--height, var(--ic-space-xl));\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--height, var(--ic-space-xxl));\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n height: var(--height, var(--ic-space-xl));\n width: var(--ic-space-xl);\n padding: 0.375rem;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n height: var(--height, var(--ic-space-lg));\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n height: var(--height, 2.5rem);\n width: 2.5rem;\n padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n width: 100%;\n}\n\nic-loading-indicator {\n --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/* Icons */\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n::slotted(:not(ic-badge)) {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 1.25rem;\n --icon-width: 1.25rem;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 1rem;\n --icon-width: 1rem;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 0.875rem;\n --icon-width: 0.875rem;\n}\n\n:host(.popout-menu-button) .button {\n height: var(--height);\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .button {\n border: 0.125rem solid transparent;\n }\n}\n\n/** Pagination **/\n\n:host(.flip) ::slotted(svg) {\n transform: scaleX(-1);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n} from \"@stencil/core\";\n\nimport {\n getThemeFromContext,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcSizes,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip: boolean = false;\n private id: string;\n private inheritedAttributes: { [k: string]: unknown } = {};\n private describedByEl: HTMLElement = null;\n private describedById: string = null;\n private mutationObserver: MutationObserver = null;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel: string = null;\n @State() describedByContent: string = null;\n @State() title: string = null;\n\n /**\n * The appearance of the button, e.g. dark, light, or the default.\n */\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaControlsId: string | boolean;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwnsId: string | boolean;\n\n /**\n * If `true`, the button will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n */\n @Prop() disableTooltip?: boolean = false;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * The <form> element to associate the button with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n */\n @Prop() formaction?: string;\n\n /**\n * The way the submitted form data is encoded.\n */\n @Prop() formenctype?: string;\n\n /**\n * The HTTP method used to submit the form.\n */\n @Prop() formmethod?: string;\n\n /**\n * If `true`, the form will not be validated when submitted.\n */\n @Prop() formnovalidate?: boolean;\n\n /**\n * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * If `true`, the button will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The URL that the link points to. This will render the button as an \"a\" tag.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * If `true`, the button will be in loading state.\n */\n @Prop() loading?: boolean = false;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The size of the button to be displayed.\n */\n @Prop() size?: IcSizes = \"default\";\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * The position of the tooltip in relation to the button.\n */\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n\n /**\n * If `true`, the secondary variant of button will have a transparent background rather than white.\n */\n @Prop() transparentBackground?: boolean = true;\n\n /**\n * The type of the button.\n */\n @Prop() type?: IcButtonTypes = \"button\";\n\n /**\n * The variant of the button to be displayed.\n */\n @Prop() variant?: IcButtonVariants = \"primary\";\n\n /**\n * Emitted when button has blur\n */\n @Event() icBlur!: EventEmitter<void>;\n\n /**\n * Emitted when button has focus\n */\n @Event() icFocus!: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.mutationObserver !== null && this.mutationObserver !== undefined) {\n this.mutationObserver.disconnect();\n }\n if (\n this.hostMutationObserver !== null &&\n this.hostMutationObserver !== undefined\n ) {\n this.hostMutationObserver.disconnect();\n }\n }\n\n componentWillUpdate(): void {\n this.loadingWidth();\n this.setHasTooltip();\n }\n\n componentWillLoad(): void {\n const allInheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n ]);\n\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = allInheritedAttributes;\n\n this.title = title as string;\n this.ariaLabel = ariaLabel as string;\n this.inheritedAttributes = restInheritedAttributes;\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.setHasTooltip();\n\n if (!this.hasTooltip) {\n const describedById = this.inheritedAttributes[\n \"aria-describedby\"\n ] as string;\n if (describedById !== undefined) {\n this.describedById = describedById;\n const el = this.el.parentElement.querySelector(\n `#${describedById}`\n ) as HTMLElement;\n if (el !== undefined && el !== null) {\n this.describedByContent = el.innerText;\n this.describedByEl = el;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n\n if (typeof MutationObserver !== \"undefined\") {\n if (this.describedById) {\n this.mutationObserver = new MutationObserver(this.mutationCallback);\n this.mutationObserver.observe(this.describedByEl, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n this.hostMutationObserver = new MutationObserver(\n this.hostMutationCallback\n );\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n }\n\n componentWillRender(): void {\n this.setViewBox()?.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled || this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /**\n * Sets focus on the native `button`.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n return iconEl !== null;\n }\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"left-icon\"]`);\n return iconEl !== null;\n }\n\n private hasRightIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"right-icon\"]`);\n return iconEl !== null;\n }\n\n private setViewBox = () => {\n let iconEl;\n if (this.hasLeftIconSlot()) {\n iconEl = this.el.querySelector(`[slot=\"left-icon\"]`);\n } else if (this.hasRightIconSlot()) {\n iconEl = this.el.querySelector(`[slot=\"right-icon\"]`);\n } else {\n iconEl = null;\n }\n return iconEl;\n };\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private loadingWidth = () => {\n if (this.loading) {\n this.el.style.setProperty(\n \"--min-width\",\n `${this.el.getBoundingClientRect().width}px`\n );\n }\n };\n\n // triggered when text content of sibling element in light DOM changes\n private mutationCallback = (): void => {\n this.describedByContent = this.describedByEl.innerText;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n const attribute = this.el.getAttribute(attributeName);\n if (attributeName === \"title\") this.title = attribute;\n else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setHasTooltip = (): void => {\n this.hasTooltip =\n !this.disableTooltip && (!!this.title || this.variant === \"icon\");\n };\n\n render() {\n const TagType = (this.href && \"a\") || \"button\";\n const { title, ariaLabel, inheritedAttributes } = this;\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n } else {\n describedBy = this.describedById;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading || this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...inheritedAttributes}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n aria-describedby={describedBy}\n part=\"button\"\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.hasLeftIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" ||\n this.variant === \"destructive\" ||\n this.appearance === IcThemeForegroundEnum.Dark ||\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n {this.hasRightIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"right-icon\" />\n </div>\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n [\"with-badge\"]: isSlotUsed(this.el, \"badge\"),\n [\"white-background\"]:\n this.variant === \"secondary\" &&\n !this.transparentBackground &&\n this.appearance !== \"light\",\n }}\n onClick={this.handleClick}\n aria-owns={this.ariaOwnsId}\n aria-controls={this.ariaControlsId}\n >\n {this.hasTooltip && (\n <ic-tooltip\n id={describedBy}\n label={title || ariaLabel}\n target={buttonId}\n placement={this.tooltipPlacement}\n silent={this.variant === \"icon\" && !!title}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!this.hasTooltip && <ButtonContent />}\n {this.describedByContent && (\n <span id={describedBy} class=\"ic-button-describedby\">\n {this.describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n","@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --circular-diameter: Diameter of the circular-indicator\n */\n\n display: block;\n\n --linear-border-radius: 0.25rem;\n --inner-color: var(--ic-action-default);\n --outer-color: var(--ic-architectural-100);\n --label-color: var(--ic-color-primary-text);\n --margin: none;\n --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.light) {\n --inner-color: var(--ic-architectural-white);\n --outer-color: var(--ic-architectural-800);\n --label-color: var(--ic-architectural-white);\n}\n\n.ic-loading-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([size=\"small\"]) {\n --circular-diameter: 2.5rem;\n --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n --circular-diameter: 5rem;\n}\n\n:host([size=\"large\"]) {\n --circular-diameter: 7.5rem;\n}\n\n:host([size=\"icon\"]) {\n display: inline-block;\n\n --margin: var(--ic-space-xxxs);\n --circular-diameter: 1.25rem;\n}\n\n:host(.label) {\n --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n white-space: nowrap;\n color: var(--label-color);\n margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n height: var(--circular-diameter);\n width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n animation: circular-animation 1s linear;\n animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n background-color: var(--outer-color);\n height: var(--linear-line-height);\n width: 100%;\n border-radius: var(--linear-border-radius);\n overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n position: relative;\n height: 100%;\n background-color: var(--inner-color);\n border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n transition: width 0.5s;\n width: var(--linear-width);\n}\n\n:host(.full-width) {\n --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n 0% {\n width: 0%;\n left: -1%;\n }\n\n 25% {\n width: 0%;\n left: -1%;\n }\n\n 50% {\n width: 101%;\n left: -1%;\n }\n\n 75% {\n width: 0%;\n left: 101%;\n }\n\n 100% {\n width: 0%;\n left: 101%;\n }\n}\n\n.ic-loading-circular-svg {\n position: relative;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: var(--outer-color);\n stroke-width: var(--circular-line-width);\n stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n --circular-indeterminate: calc(\n (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n );\n\n stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host(.inner-label) .ic-loading-circular-inner {\n display: grid;\n}\n\n:host(.inner-label) .ic-loading-circular-svg,\n.inner-text {\n grid-column: 1;\n grid-row: 1;\n}\n\n:host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--ic-space-lg);\n height: inherit;\n overflow: hidden;\n margin: auto;\n color: var(--ic-status-info);\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n color: var(--ic-color-tertiary-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .indeterminate > .ic-loading-circular-inner {\n forced-color-adjust: none;\n }\n\n .ic-loading-linear-outer {\n border: var(--ic-hc-border);\n }\n\n .ic-loading-linear-inner {\n background-color: canvastext;\n }\n\n .ic-loading-circular-svg circle {\n stroke: Background;\n }\n\n .ic-loading-circular-svg circle:nth-child(2) {\n stroke: canvastext;\n }\n\n :host(.not-required.compact-step-progress-indicator)\n .ic-loading-circular-svg\n circle:nth-child(2) {\n stroke: GrayText;\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n IcLoadingCircleXYR,\n IcLoadingSizes,\n IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n private circularMeter: SVGCircleElement;\n private innerElement?: HTMLDivElement;\n private interval: ReturnType<typeof setInterval>;\n private labelList: string[];\n private outerElement?: HTMLDivElement;\n\n @Element() el: HTMLIcLoadingIndicatorElement;\n\n @State() circularDiameter: number;\n @State() circularLineWidth: number;\n @State() indeterminate: boolean;\n @State() indicatorLabel: string;\n @State() showSecond: boolean = false;\n\n /**\n * The appearance of the loading indicator, e.g. dark or light.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /**\n * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n */\n @Prop() description?: string = \"Loading\";\n\n /**\n * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n */\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /**\n * @internal The step number of a compact step, managed by ic-step.\n */\n @Prop() innerLabel?: number;\n\n /**\n * The time in milliseconds before the label changes.\n */\n @Prop() labelDuration?: number = 8000;\n\n /**\n * The maximum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n */\n @Prop() max?: number = 100;\n\n /**\n * The minimum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n */\n @Prop() min?: number = 0;\n\n /**\n * The size of the loading indicator.\n */\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n /**\n * The type of indicator, either linear or circular.\n */\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n /**\n * The label to be displayed beneath the loading indicator.\n * Display a changing label by separating multiple messages with forward slashes.\n */\n @Prop() label?: string;\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n /**\n * The current amount of progress made.\n * If not provided, component acts as an indeterminate loading indicator.\n */\n @Prop() progress?: number;\n\n @Watch(\"progress\")\n watchProgressHandler(): void {\n if (this.type === \"circular\") {\n this.updateCircularProgressMeter();\n }\n }\n\n disconnectedCallback(): void {\n clearInterval(this.interval);\n }\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n this.el.setAttribute(\"exportparts\", \"ic-loading-container\");\n }\n\n componentDidLoad(): void {\n if (this.type === \"circular\") {\n this.setCircleLineWidth();\n this.circularMeter = this.el.shadowRoot.querySelector(\n \".ic-loading-circular-svg circle:nth-child(2)\"\n );\n this.updateCircularProgressMeter();\n }\n\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0 && this.type === \"linear\") {\n this.setLinearDeterminateWidth();\n }\n }\n\n private updateCircularProgressMeter = () => {\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--progress-value\",\n String(this.progress)\n );\n }\n };\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n this.interval = setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = () => {\n let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n variant = \"label\";\n } else if (\n this.size === \"large\" ||\n (this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const { offsetWidth: width } = this.outerElement;\n\n const compactStepCircularLineWidth = this.el.classList.contains(\n \"compact-step-progress-indicator\"\n )\n ? 40\n : 0;\n const toastDismissTimerCircularLineWidth = this.el.classList.contains(\n \"toast-dismiss-timer\"\n )\n ? 20\n : 0;\n\n if (\n width ||\n compactStepCircularLineWidth ||\n toastDismissTimerCircularLineWidth\n ) {\n this.circularLineWidth =\n (compactStepCircularLineWidth ||\n toastDismissTimerCircularLineWidth ||\n width) * 0.1;\n this.circularDiameter =\n compactStepCircularLineWidth ||\n toastDismissTimerCircularLineWidth ||\n width;\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${this.circularLineWidth}px`\n );\n }\n };\n\n private setLinearDeterminateWidth = () => {\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n const progress = Math.min(this.max, Math.max(this.min, this.progress));\n const proportion = (progress - this.min) / (this.max - this.min);\n this.showSecond = proportion > 0.5;\n if (this.showSecond) {\n this.innerElement.classList.remove(\"clip\");\n } else {\n this.innerElement.classList.add(\"clip\");\n }\n this.innerElement.style.setProperty(\n \"--linear-width\",\n `${proportion * 100}%`\n );\n };\n\n private calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (isPropDefined(this.label)) {\n this.labelList = this.label.split(\"/\");\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n };\n\n private setCircleXY = (): IcLoadingCircleXYR => {\n if (this.circularDiameter > 0) {\n const r = this.circularDiameter / 2;\n const x = r;\n const y = r;\n const nextRadius = r - this.circularLineWidth / 2;\n this.setDashSteps(nextRadius);\n\n return { x, y, r: nextRadius };\n }\n return { x: 0, y: 0, r: 0 };\n };\n\n private setDashSteps = (radius: number) => {\n const dashArray = 2 * Math.PI * radius;\n const progress = Math.min(Math.max(this.progress, this.min), this.max);\n const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n this.circularMeter.style.setProperty(\n \"--stroke-dasharray\",\n `${dashArray}px`\n );\n\n if (!this.indeterminate) {\n this.circularMeter.style.setProperty(\n \"--circular-steps-max\",\n String(this.max)\n );\n this.circularMeter.style.setProperty(\n \"--stroke-dashoffset\",\n `${proportion * dashArray}px`\n );\n }\n };\n\n render() {\n const { appearance, label, description, size, fullWidth, innerLabel } =\n this;\n const { x, y, r } = this.setCircleXY();\n\n return (\n <Host\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"label\"]: !!label,\n [\"full-width\"]: fullWidth,\n [\"inner-label\"]: !!innerLabel,\n }}\n >\n <div class=\"ic-loading-container\" part=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.innerLabel &&\n this.innerLabel !== undefined &&\n this.size === \"small\" && (\n <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n {this.innerLabel}\n </ic-typography>\n )}\n {this.type === \"circular\" && (\n <svg\n class=\"ic-loading-circular-svg\"\n viewBox={`0 0 ${this.circularDiameter || 0} ${\n this.circularDiameter || 0\n }`}\n >\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n </svg>\n )}\n </div>\n </div>\n {label && size !== \"icon\" && (\n <ic-typography\n id=\"ic-loading-label\"\n class=\"ic-loading-label\"\n role=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-tooltip: z-index of tooltip\n */\n\n:host(.ic-tooltip) .ic-tooltip-container {\n background-color: var(--ic-architectural-800);\n color: #ffff;\n text-align: center;\n padding: var(--ic-space-xxxs) var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n border: var(--ic-border-width) solid var(--ic-architectural-40);\n position: absolute;\n max-width: 20rem;\n display: none;\n z-index: var(--ic-z-index-tooltip);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container {\n display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n .ic-tooltip-container[data-show] {\n display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n position: absolute;\n background: inherit;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n visibility: hidden;\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n visibility: visible;\n content: \"\";\n border: var(--ic-border-width) solid var(--ic-architectural-40);\n width: 100%;\n height: 100%;\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n display: block;\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow {\n height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n left: 0;\n top: var(--ic-space-xxxs);\n border-top: 0;\n transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow {\n top: calc(-1 * var(--ic-space-xxs));\n height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n left: 0;\n top: var(--ic-space-1px);\n border-bottom: 0;\n transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow {\n width: var(--ic-space-xxxs);\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n border-left: 0;\n top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow {\n width: var(--ic-space-xxxs);\n left: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n border-right: 0;\n top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.on-dialog) .ic-tooltip-container {\n transform: translate(\n var(--tooltip-translate-x),\n var(--tooltip-translate-y)\n ) !important;\n}\n\n@media screen and (max-width: 576px) {\n :host(.ic-tooltip) .ic-tooltip-container {\n max-width: 18.875rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(.ic-tooltip) .ic-tooltip-container,\n :host(.ic-tooltip) .ic-tooltip-arrow::before {\n border: var(--ic-hc-border);\n }\n}\n","import { Component, Element, Host, Prop, h, Method } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-tooltip\",\n styleUrl: \"ic-tooltip.css\",\n shadow: true,\n})\nexport class Tooltip {\n private arrow: HTMLDivElement;\n private delayedHideEvents = [\"mouseleave\"];\n private dialogOverflow = false;\n private icDialogEl: HTMLIcDialogElement;\n private instantHideEvents = [\"focusout\"];\n private mouseOverTool: boolean = false;\n private persistTooltip = false;\n private popperInstance: Instance;\n private onDialog: boolean = false;\n private showEvents = this.disableHover\n ? [\"click\"]\n : [\"mouseenter\", \"focusin\"];\n private toolTip: HTMLDivElement;\n\n @Element() el: HTMLIcTooltipElement;\n\n /**\n * If `true`, the tooltip will not be displayed on hover, it will require a click.\n */\n @Prop() disableHover?: boolean = false;\n\n /**\n * The number of lines to display before truncating the text.\n */\n @Prop() maxLines?: number;\n\n /**\n * The position of the tooltip in relation to the parent element.\n */\n @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n /**\n * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n */\n @Prop() silent?: boolean = false;\n\n /**\n * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n */\n @Prop({ reflect: true }) target?: string;\n\n /**\n * The text to display on the tooltip.\n */\n @Prop() label!: string;\n\n disconnectedCallback(): void {\n this.manageEventListeners(\"remove\");\n if (this.popperInstance !== undefined) {\n this.popperInstance.destroy();\n }\n }\n\n componentDidLoad(): void {\n this.manageEventListeners(\"add\");\n\n this.icDialogEl = this.el.closest(\"ic-dialog\");\n this.dialogOverflow =\n this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n this.onDialog = this.icDialogEl !== null;\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tooltip\"\n );\n }\n\n componentDidRender(): void {\n const typographyEl = this.el.shadowRoot.querySelector(\n \".ic-tooltip-container > ic-typography\"\n );\n this.maxLines > 0 &&\n typographyEl.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.maxLines}`\n );\n }\n /**\n * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n * @param show Whether to show or hide the tooltip\n * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n */\n @Method()\n async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n this.persistTooltip = persistTooltip;\n show ? this.show() : this.hide();\n }\n\n private getTooltipTranslate = (dialogEl: DOMRect) => {\n const child = this.el.children[0].getBoundingClientRect();\n let tooltipX;\n let tooltipY;\n switch (this.placement) {\n case \"bottom\":\n tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n tooltipY = child.bottom - dialogEl.top;\n break;\n case \"bottom-start\":\n tooltipX = child.left - dialogEl.left;\n tooltipY = child.bottom - dialogEl.top;\n break;\n case \"bottom-end\":\n tooltipX = child.right - dialogEl.right;\n tooltipY = child.bottom - dialogEl.top;\n break;\n case \"top\":\n tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n tooltipY = child.top - dialogEl.bottom;\n break;\n case \"top-start\":\n tooltipX = child.left - dialogEl.left;\n tooltipY = child.top - dialogEl.bottom;\n break;\n case \"top-end\":\n tooltipX = child.right - dialogEl.right;\n tooltipY = child.top - dialogEl.bottom;\n break;\n case \"left\":\n case \"left-start\":\n tooltipX = child.right - dialogEl.right - child.width;\n tooltipY = child.bottom - dialogEl.top - child.height;\n break;\n case \"left-end\":\n tooltipX = child.right - dialogEl.right - child.width;\n tooltipY = child.top - dialogEl.bottom + child.height;\n break;\n case \"right\":\n case \"right-start\":\n tooltipX = child.left - dialogEl.left + child.width;\n tooltipY = child.bottom - dialogEl.top - child.height;\n break;\n case \"right-end\":\n tooltipX = child.left - dialogEl.left + child.width;\n tooltipY = child.top - dialogEl.bottom + child.height;\n break;\n }\n if (this.dialogOverflow && tooltipX < 0) {\n if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n this.toolTip.style.setProperty(\n \"--tooltip-arrow-translate\",\n `${tooltipX}px`\n );\n tooltipX = child.left - dialogEl.left;\n }\n if (this.placement.includes(\"left\")) {\n this.placement = \"right\";\n tooltipX = child.left - dialogEl.left + child.width;\n }\n }\n\n this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n };\n\n private show = () => {\n this.toolTip.setAttribute(\"data-show\", \"\");\n\n if (this.onDialog) {\n this.el.classList.add(\"on-dialog\");\n const dialogEl = this.icDialogEl.shadowRoot\n .querySelector(\"dialog\")\n .getBoundingClientRect();\n\n this.getTooltipTranslate(dialogEl);\n }\n\n this.popperInstance = createPopper(this.el, this.toolTip, {\n placement: this.placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 10],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: this.arrow,\n },\n },\n {\n name: \"eventListeners\",\n options: { scroll: false, resize: false },\n },\n ],\n });\n };\n\n private hide = () => {\n this.toolTip.removeAttribute(\"data-show\");\n this.persistTooltip = false;\n };\n\n private checkCloseTooltip = () => {\n setTimeout(() => {\n if (!this.mouseOverTool && !this.persistTooltip) {\n this.hide();\n }\n }, 100);\n };\n\n private mouseEnterTooltip = () => {\n this.mouseOverTool = true;\n };\n\n private mouseLeaveTooltip = () => {\n this.mouseOverTool = false;\n this.checkCloseTooltip();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && !this.persistTooltip) {\n this.hide();\n }\n };\n\n private manageEventListeners = (action: \"add\" | \"remove\") => {\n const method =\n action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n this.showEvents.forEach((event) => {\n this.el[method](event, this.show);\n if (this.toolTip !== undefined) {\n this.toolTip[method](event, this.mouseEnterTooltip);\n }\n });\n\n if (!this.persistTooltip) {\n this.instantHideEvents.forEach((event) => {\n this.el[method](event, this.hide);\n });\n }\n\n this.delayedHideEvents.forEach((event) => {\n this.el[method](event, this.checkCloseTooltip);\n if (this.toolTip !== undefined) {\n this.toolTip[method](event, this.mouseLeaveTooltip);\n }\n });\n\n document[method](\"keydown\", this.handleKeyDown);\n };\n\n render() {\n const { label, maxLines, silent } = this;\n return (\n <Host class={{ \"ic-tooltip\": true }}>\n <div\n ref={(el) => (this.toolTip = el as HTMLDivElement)}\n role=\"tooltip\"\n class=\"ic-tooltip-container\"\n aria-hidden={silent}\n >\n <ic-typography maxLines={maxLines} variant=\"caption\">\n {label}\n </ic-typography>\n <div\n ref={(el) => (this.arrow = el as HTMLDivElement)}\n class=\"ic-tooltip-arrow\"\n ></div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|