@ukic/web-components 2.34.0 → 2.35.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +16 -3
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +21 -18
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +11 -3
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +2 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +2 -2
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/ic-accordion/ic-accordion.stories.js +635 -0
- package/dist/collection/components/ic-alert/ic-alert.stories.js +257 -0
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.stories.js +162 -0
- package/dist/collection/components/ic-badge/ic-badge.stories.js +1082 -0
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.stories.js +502 -0
- package/dist/collection/components/ic-button/ic-button.stories.js +2218 -0
- package/dist/collection/components/ic-card/ic-card.stories.js +1034 -0
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +687 -0
- package/dist/collection/components/ic-chip/ic-chip.stories.js +670 -0
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.stories.js +131 -0
- package/dist/collection/components/ic-data-entity/ic-data-entity.stories.js +487 -0
- package/dist/collection/components/ic-dialog/ic-dialog.js +16 -3
- package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.stories.js +1256 -0
- package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js +27 -7
- package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js.map +1 -1
- package/dist/collection/components/ic-empty-state/ic-empty-state.stories.js +397 -0
- package/dist/collection/components/ic-footer/ic-footer.stories.js +383 -0
- package/dist/collection/components/ic-hero/ic-hero.stories.js +489 -0
- package/dist/collection/components/ic-link/ic-link.stories.js +114 -0
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.stories.js +416 -0
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +7 -35
- package/dist/collection/components/ic-page-header/ic-page-header.stories.js +557 -0
- package/dist/collection/components/ic-pagination/ic-pagination.stories.js +125 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.stories.js +486 -0
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +21 -18
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js +450 -0
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js +4 -1
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.css +2 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +16 -2
- package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +2 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.stories.js +591 -0
- package/dist/collection/components/ic-section-container/ic-section-container.stories.js +62 -0
- package/dist/collection/components/ic-select/ic-select-searchable.stories.js +953 -0
- package/dist/collection/components/ic-select/ic-select-single.stories.js +780 -0
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.stories.js +2526 -0
- package/dist/collection/components/ic-skeleton/ic-skeleton.stories.js +141 -0
- package/dist/collection/components/ic-status-tag/ic-status-tag.stories.js +161 -0
- package/dist/collection/components/ic-stepper/ic-stepper.stories.js +327 -0
- package/dist/collection/components/ic-switch/ic-switch.stories.js +171 -0
- package/dist/collection/components/ic-tab-context/ic-tabs.stories.js +388 -0
- package/dist/collection/components/ic-text-field/ic-text-field.stories.js +1083 -0
- package/dist/collection/components/ic-theme/ic-theme.stories.js +171 -0
- package/dist/collection/components/ic-toast/ic-toast.js +2 -2
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
- package/dist/collection/components/ic-toast/ic-toast.stories.js +413 -0
- package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js +3 -3
- package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.stories.js +537 -0
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.stories.js +610 -0
- package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js +356 -0
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js +1083 -0
- package/dist/collection/components/ic-typography/ic-typography.stories.js +437 -0
- package/dist/collection/patterns/top-nav-content-footer.stories.js +109 -0
- package/dist/collection/patterns/z-index.stories.js +474 -0
- package/dist/components/ic-dialog.js +16 -3
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-navigation-item.js +1 -1
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-radio-group.js +21 -18
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +12 -4
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +2 -1
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-toast.js +2 -2
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-3e8023ff.entry.js +2 -0
- package/dist/core/p-3e8023ff.entry.js.map +1 -0
- package/dist/core/p-a32016ff.entry.js +2 -0
- package/dist/core/p-a32016ff.entry.js.map +1 -0
- package/dist/core/{p-7e8a4abd.entry.js → p-bfaa257c.entry.js} +2 -2
- package/dist/core/{p-7e8a4abd.entry.js.map → p-bfaa257c.entry.js.map} +1 -1
- package/dist/core/p-e1ab5945.entry.js +2 -0
- package/dist/core/p-e1ab5945.entry.js.map +1 -0
- package/dist/core/p-e668390c.entry.js +2 -0
- package/dist/core/p-e668390c.entry.js.map +1 -0
- package/dist/core/{p-2cd1a601.entry.js → p-f4382f1f.entry.js} +2 -2
- package/dist/core/p-f4382f1f.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/ic-dialog.entry.js +16 -3
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +1 -1
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +21 -18
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +11 -3
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +2 -1
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-toast.entry.js +2 -2
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-dialog/ic-dialog.d.ts +1 -0
- package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +1 -1
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +1 -0
- package/hydrate/index.js +54 -29
- package/package.json +15 -11
- package/dist/core/p-2cd1a601.entry.js.map +0 -1
- package/dist/core/p-922036e8.entry.js +0 -2
- package/dist/core/p-922036e8.entry.js.map +0 -1
- package/dist/core/p-afa78488.entry.js +0 -2
- package/dist/core/p-afa78488.entry.js.map +0 -1
- package/dist/core/p-dfb3e76e.entry.js +0 -2
- package/dist/core/p-dfb3e76e.entry.js.map +0 -1
- package/dist/core/p-f4a29c16.entry.js +0 -2
- package/dist/core/p-f4a29c16.entry.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","handleMenuCloseFromMenuChange","focusInput","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","watchDisabledHandler","removeDisabledFalse","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","disconnectedCallback","remove","componentWillLoad","small","size","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","componentWillRender","handleKeyDown","keyEv","event","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","hasSuggestedSearch","menuOpen","menuRendered","labelValue","renderHiddenInput","h","Host","class","search","fullwidth","onFocus","onBlur","ref","ariaExpanded","role","autoFocus","inputmode","debounce","slot","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","searchIcon","Default","activationType","autoFocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of search bar menu\n */\n\n:host(.search) {\n --divider-height: 1.5rem;\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n}\n\n:host(.search.small) {\n --divider-height: 1rem;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n:host(.search) .disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/* CLEAR */\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\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.clear-button:active {\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.clear-button:active * {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-focus-blue) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-action-dark-active);\n height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * 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 Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcThemeForegroundEnum,\n IcMenuOption,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl: HTMLElement;\n private assistiveHintEl: HTMLSpanElement = null;\n private debounceAriaLive: number;\n private hasTimedOut = false;\n private inputEl: HTMLIcTextFieldElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit: boolean = false;\n private prevNoOption: boolean = false;\n private retryButtonClick: boolean = false;\n private retryViaKeyPress: boolean;\n private timeoutTimer: number;\n private truncateValue = false;\n private searchSubmitButton: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() highlightedValue: string;\n @State() open: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() showClearButton: boolean = false;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n */\n @Prop() charactersUntilSuggestion: number = 2;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n */\n @Prop() disableFilter?: boolean = false;\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\n /**\n * The text displayed when there are no options in the option list.\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * If `true`, the search bar will be focused when component loaded.\n */\n @Prop() focusOnLoad?: boolean = false;\n\n /**\n * Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\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 * The hint text for the hidden assistive description element.\n */\n @Prop() hintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /**\n * The label for the search bar.\n */\n @Prop() label!: string;\n\n /**\n * The custom name for the label field to correspond with the IcMenuOption type.\n */\n @Prop() labelField?: string = \"label\";\n\n /**\n * Trigger loading state when fetching options asynchronously\n */\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /**\n * Change the message displayed when external loading times out.\n */\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /**\n * Change 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 display.\n */\n @Prop() placeholder?: string = \"Search\";\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * If `true`, the search bar will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n */\n @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n /**\n * The size of the search bar 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 value of the search will have its spelling and grammar checked.\n */\n @Prop() spellcheck: 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 custom name for the value field to correspond with the IcMenuOption type.\n */\n @Prop() valueField?: string = \"value\";\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n @State() filteredOptions: IcMenuOption[] = [];\n\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /**\n * The suggested search options.\n */\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableFilter && !this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n !this.preLoad &&\n (this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ]);\n this.preLoad = true;\n }\n }\n this.debounceAriaLiveUpdate();\n }\n\n /**\n * The value of the search input.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n )\n ) {\n this.inputEl.value = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when value is cleared with clear button\n */\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" ||\n keyboardEvent.code === \"Enter\" ||\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n\n const noOptions = [\n { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n ];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n };\n\n /**\n * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.\n */\n @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n /**\n * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.\n */\n @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icInputFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /**\n * Emitted when option is highlighted within the menu\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the state of the menu changes (i.e. open or close)\n */\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /**\n * @internal - Emitted when blur is invoked from clear button\n */\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /**\n * Emitted when the 'retry loading' button is clicked\n */\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the search value has been submitted\n */\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /**\n * @internal - Emitted when blur is invoked from search submit button\n */\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n /**\n * Emitted when blur is invoked from ic-search-bar\n */\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /**\n * Emitted when focus is invoked from ic-search-bar\n */\n @Event() icSearchBarFocus: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.small) {\n this.size = \"small\";\n }\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableFilter) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n\n if (this.inputEl !== undefined) {\n this.anchorEl = this.inputEl.shadowRoot.querySelector(\n \"ic-input-component-container\"\n );\n }\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n @Listen(\"icKeydown\", {})\n handleKeyDown(ev: CustomEvent): void {\n const keyEv: KeyboardEvent = ev.detail.event;\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(keyEv);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit || this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /**\n * Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n if (this.inputEl) {\n this.inputEl.setFocus();\n }\n }\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n this.highlightedValue && (this.value = this.highlightedValue);\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (ev: CustomEvent) => {\n const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n optionValue && (this.highlightedValue = optionValue);\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n };\n\n private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.handleMenuCloseFromMenuChange(true);\n if (ev.detail.focusInput === undefined || ev.detail.focusInput) {\n this.el.setFocus();\n }\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (\n this.open &&\n this.options &&\n nextFocus !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick || this.retryViaKeyPress) {\n this.inputEl.setFocus();\n }\n\n this.handleShowClearButton(false);\n this.handleMenuCloseFromMenuChange(false);\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n };\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n this.menuCloseFromMenuChangeEvent = fromEvent;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot\n .querySelector(\"ic-text-field\")\n ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.hintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (searchResultsStatusEl) {\n if (\n !this.open ||\n this.value === \"\" ||\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 || this.disableFilter;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined || this.value === null || this.value === \"\";\n const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n return (\n valueNotSet ||\n valueLengthLess ||\n this.disabled ||\n this.hadNoOptions() ||\n this.hasTimedOut ||\n this.loading\n );\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText ||\n filteredOption[this.labelField] === this.loadingErrorLabel ||\n filteredOption[this.labelField] === this.loadingLabel\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered =\n menuOpen && value.length >= this.charactersUntilSuggestion;\n\n const labelValue = getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n );\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n search: true,\n fullwidth: fullWidth,\n disabled,\n small: size === \"small\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-text-field\n ref={(el) => (this.inputEl = el)}\n inputId={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledMode && !readonly}\n readonly={readonly}\n size={size}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n value={options && !!labelValue ? labelValue : value}\n placeholder={placeholder}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : \"\"}\n aria-describedby={describedById}\n aria-owns={menuRendered ? menuId : undefined}\n aria-controls={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n ariaExpanded={options.length > 0 ? `${menuOpen}` : undefined}\n ariaActiveDescendant={ariaActiveDescendant}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={options.length > 0 ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n debounce={this.debounce}\n >\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n slot=\"clear-button\"\n >\n <ic-button\n id=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\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 <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n slot=\"search-submit-button\"\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: !!small,\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.searchSubmitFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Default\n }\n ></ic-button>\n </div>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n slot=\"menu\"\n >\n {menuRendered && (\n <ic-menu\n class={{\n \"no-results\":\n this.hadNoOptions() ||\n (filteredOptions.length === 1 &&\n (filteredOptions[0][this.labelField] ===\n this.loadingLabel ||\n filteredOptions[0][this.labelField] ===\n this.loadingErrorLabel)),\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autoFocusOnSelected={false}\n searchMode={this.searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n small={size === \"small\"}\n fullWidth={fullWidth}\n menuId={menuId}\n open={!!menuRendered}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n value={value}\n labelField={this.labelField}\n valueField={this.valueField}\n ></ic-menu>\n )}\n </div>\n </ic-text-field>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as i,h as t,H as a,g as r}from"./p-6b5e91e2.js";import{r as o,n as c,i as n,m as s,a as d,e as l}from"./p-d41c847e.js";import"./p-26b7b18f.js";const h='/*! 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:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display="static"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host(.disabled){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-architectural-white);border:var(--ic-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:var(--ic-architectural-white);box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}';const p="additional-field";const u="ic-text-field";const b=class{constructor(t){e(this,t);this.icCheck=i(this,"icCheck",7);this.radioOptionSelect=i(this,"radioOptionSelect",7);this.icSelectedChange=i(this,"icSelectedChange",7);this.defaultRadioValue="";this.hasAdditionalField=false;this.skipFocus=false;this.handleClick=()=>{if(!this.disabled){if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){this.value=this.el.querySelector(u).value||this.defaultRadioValue}this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}};this.swallowClick=e=>{e.stopPropagation()};this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.additionalFieldDisplay="static";this.disabled=false;this.dynamicText="This selection requires additional answers";this.form=undefined;this.formaction=undefined;this.formenctype=undefined;this.formmethod=undefined;this.formnovalidate=undefined;this.formtarget=undefined;this.groupLabel=undefined;this.label=undefined;this.name=undefined;this.value=undefined;this.selected=false;this.initiallySelected=this.selected}watchDisabledHandler(){o(this.disabled,this.el)}watchSelectedHandler(){this.icSelectedChange.emit()}disconnectedCallback(){c(this.el,this.handleFormReset)}componentWillLoad(){if(n(this.el,p)){this.hasAdditionalField=true;const e=this.el.querySelector(u);if(e)e.hiddenInput=false}this.defaultRadioValue=this.value;s(this.el,this.handleFormReset);o(this.disabled,this.el)}componentDidLoad(){d([{prop:this.value,propName:"value"}],"Radio Option")}componentWillRender(){const e=n(this.el,p);if(e&&!this.hasAdditionalField){this.hasAdditionalField=true;const e=this.el.querySelector(u);if(e)e.hiddenInput=false}else if(!e&&this.hasAdditionalField){this.hasAdditionalField=false}}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.el.querySelector(u);if(!this.selected||this.disabled){e===null||e===void 0?void 0:e.setAttribute("disabled","")}else{e===null||e===void 0?void 0:e.removeAttribute("disabled")}}}textfieldValueHandler(e){if(this.selected){this.value=e.detail.value||this.defaultRadioValue;this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}e.stopImmediatePropagation()}async setFocus(){var e;(e=this.radioElement)===null||e===void 0?void 0:e.focus()}async setTabIndex(e){this.radioElement.tabIndex=e}render(){const{additionalFieldDisplay:e,disabled:i,dynamicText:r,form:o,formaction:c,formenctype:n,formmethod:s,formnovalidate:d,formtarget:h,groupLabel:u,handleClick:b,hasAdditionalField:m,label:f,name:v,selected:k,swallowClick:g,value:y}=this;const x=`ic-radio-option-${l(f)||y}-${u}`;return t(a,{onClick:b,class:{disabled:i}},t("div",{class:{["container"]:true,disabled:i}},t("div",null,t("input",{role:"radio",tabindex:k?"0":"-1",type:"radio",name:v,id:x,value:y,disabled:i?true:null,checked:k,ref:e=>this.radioElement=e,form:o,formaction:c,formenctype:n,formmethod:s,formnovalidate:d,formtarget:h}),t("span",{class:"checkmark"})),t("ic-typography",{class:"radio-label",variant:"body"},t("label",{htmlFor:x},f))),m&&t("div",{onClick:g,class:{"dynamic-container":true,hidden:e==="dynamic"&&!k}},e==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,e==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text"},r)),t("div",{class:{"additional-field-wrapper":e==="static"}},t("slot",{name:p})))))}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"],selected:["watchSelectedHandler"]}}};b.style=h;export{b as ic_radio_option};
|
2
|
-
//# sourceMappingURL=p-922036e8.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icRadioOptionCss","ADDITIONAL_FIELD","TEXT_FIELD_SELECTOR","RadioOption","this","defaultRadioValue","hasAdditionalField","skipFocus","handleClick","disabled","radioElement","focus","value","el","querySelector","icCheck","emit","radioOptionSelect","swallowClick","event","stopPropagation","handleFormReset","selected","initiallySelected","watchDisabledHandler","removeDisabledFalse","watchSelectedHandler","icSelectedChange","disconnectedCallback","removeFormResetListener","componentWillLoad","isSlotUsed","textField","hiddenInput","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentWillRender","hasSlot","componentDidRender","additionalFieldDisplay","textfield","setAttribute","removeAttribute","textfieldValueHandler","detail","stopImmediatePropagation","setFocus","_a","setTabIndex","tabIndex","render","dynamicText","form","formaction","formenctype","formmethod","formnovalidate","formtarget","groupLabel","label","name","id","isPropDefined","h","Host","onClick","class","role","tabindex","type","checked","ref","variant","htmlFor","hidden"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled */\n:host(.disabled) {\n color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-default);\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-border-width) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n background-color: var(--ic-architectural-white);\n border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n background-color: var(--ic-architectural-white);\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-action-default);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\nconst TEXT_FIELD_SELECTOR = \"ic-text-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The text to be displayed when dynamic.\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the radio with.\n */\n @Prop() form?: string;\n\n /**\n * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio'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 radio's form owner.\n */\n @Prop() formtarget?: string;\n\n /**\n * The group label for the radio option.\n */\n @Prop() groupLabel: string;\n\n /**\n * The label for the radio option.\n */\n @Prop() label?: string;\n\n /**\n * The name for the radio option.\n */\n @Prop() name: string;\n\n /**\n * The value for the radio option.\n */\n @Prop({ mutable: true }) value!: string;\n\n /**\n * If `true`, the radio option will be displayed in a selected state.\n */\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /**\n * Emitted when the radio option is selected.\n */\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n /**\n * @deprecated This event should not be used anymore. Use icCheck instead.\n */\n @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the radio option is selected or deselected.\n */\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);\n if (textField) textField.hiddenInput = false;\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = isSlotUsed(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);\n if (textField) textField.hiddenInput = false;\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(TEXT_FIELD_SELECTOR);\n if (!this.selected || this.disabled) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value || this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n this.radioOptionSelect.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /**\n * Sets focus on the radio option.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /**\n * @internal Sets the tabIndex of the radio option.\n */\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement.tabIndex = value;\n }\n\n private handleClick = () => {\n if (!this.disabled) {\n if (this.skipFocus === false) {\n this.radioElement.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n this.value =\n this.el.querySelector(TEXT_FIELD_SELECTOR).value ||\n this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n\n this.radioOptionSelect.emit({\n value: this.value,\n });\n }\n };\n\n private swallowClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n groupLabel,\n handleClick,\n hasAdditionalField,\n label,\n name,\n selected,\n swallowClick,\n value,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n return (\n <Host onClick={handleClick} class={{ disabled }}>\n <div class={{ [\"container\"]: true, disabled }}>\n <div>\n <input\n role=\"radio\"\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n formaction={formaction}\n formenctype={formenctype}\n formmethod={formmethod}\n formnovalidate={formnovalidate}\n formtarget={formtarget}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n\n {hasAdditionalField && (\n <div\n onClick={swallowClick}\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as a}from"./p-6b5e91e2.js";import{c as o}from"./p-f074ef5b.js";import{j as n,e as r,i as h,a as l}from"./p-d41c847e.js";import"./p-26b7b18f.js";const d='/*! 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{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0}:host(.fade-in){opacity:1}:host(.disable-height-constraint){background:none;justify-content:unset;align-items:unset}.dialog.disable-height-constraint{max-height:none;position:relative}.dialog.disable-height-constraint .content-area{overflow-y:visible}@media (prefers-reduced-motion: no-preference){:host{transition:opacity var(--ic-easing-transition-slow)}.dialog{transform:translateY(-3rem);transition:transform 1000s}:host(.fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}}:host(.hidden){display:none}.dialog{background-color:var(--ic-architectural-white);color:var(--ic-architectural-black);border:var(--ic-border-default);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) 0 var(--ic-space-md);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:visible}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs);padding:0 var(--ic-space-md)}.heading{overflow-wrap:break-word}.close-icon{margin-left:auto}.content-area{-ms-overflow-style:none;scrollbar-width:none;padding:0 var(--ic-space-md);margin:0;overflow-y:auto}.content-area::-webkit-scrollbar{display:none}#dialog-content{margin-bottom:var(--ic-space-sm)}#dialog-content ::slotted(ic-typography){overflow-wrap:break-word}#dialog-content ::slotted(*){position:relative}.status-alert{margin-bottom:var(--ic-space-xs)}.dialog-controls{margin-top:auto;padding:var(--ic-space-xs) var(--ic-space-md) 0;display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}.backdrop{overflow-y:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);padding-top:16px;padding-bottom:16px}@media (min-width: 800px){:host([size="large"]) .dialog:not(.disable-width-constraint)>.content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;transform:translateY(-5rem);max-width:none;max-height:none;box-sizing:border-box}.backdrop{padding:0}.dialog.disable-height-constraint{height:auto;min-height:100vh}}@media (max-width: 364px){.triple-button{flex-direction:column;gap:var(--ic-space-xs)}.dialog-control-button{width:unset}}';const c=class{constructor(s){t(this,s);this.icDialogCancelled=i(this,"icDialogCancelled",7);this.icDialogClosed=i(this,"icDialogClosed",7);this.icDialogConfirmed=i(this,"icDialogConfirmed",7);this.icDialogOpened=i(this,"icDialogOpened",7);this.DATA_GETS_FOCUS="data-gets-focus";this.DATA_GETS_FOCUS_SELECTOR="[data-gets-focus]";this.DIALOG_CONTROLS="dialog-controls";this.dialogHeight=0;this.focusedElementIndex=0;this.IC_TEXT_FIELD="IC-TEXT-FIELD";this.IC_ACCORDION="IC-ACCORDION";this.IC_ACCORDION_GROUP="IC-ACCORDION-GROUP";this.resizeObserver=null;this.dialogOpened=()=>{var t;this.dialogRendered=true;if(this.disableHeightConstraint){this.dialogEl.show()}else{(t=this.dialogEl)===null||t===void 0?void 0:t.showModal()}setTimeout((()=>{this.fadeIn=true;if(this.disableHeightConstraint&&this.backdropEl.scrollTop!==0){this.backdropEl.scrollTop=0}}),10);setTimeout((()=>{this.setInitialFocus();n(this.runResizeObserver)}),75);setTimeout((()=>{this.getFocusedElementIndex();this.icDialogOpened.emit()}),80)};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=window.setTimeout(this.resizeObserverCallback,80)}));this.resizeObserver.observe(this.dialogEl)};this.resizeObserverCallback=()=>{if(this.dialogEl.clientHeight!==this.dialogHeight){this.dialogHeight=this.dialogEl.clientHeight}};this.refreshInteractiveElementsOnSlotChange=()=>{this.contentArea=this.el.shadowRoot.querySelector("#dialog-content slot");this.contentArea.addEventListener("slotchange",this.getInteractiveElements)};this.removeSlotChangeListener=()=>{if(this.contentArea){this.contentArea.removeEventListener("slotchange",this.getInteractiveElements)}};this.setInitialFocus=()=>{this.sourceElement=document.activeElement;let t;if(this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR)!==null){t=this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR)}else{t=this.el.shadowRoot.querySelector(this.DATA_GETS_FOCUS_SELECTOR)}if(t.tagName===this.IC_TEXT_FIELD){t.setFocus()}else if(t.tagName===this.IC_ACCORDION_GROUP){t.setFocus()}else if(t.tagName===this.IC_ACCORDION){t.setFocus()}else{t.focus({preventScroll:this.disableHeightConstraint?true:false})}};this.getFocusedElementIndex=()=>{for(let t=0;t<this.interactiveElementList.length;t++){if(this.interactiveElementList[t]===(this.el.shadowRoot.activeElement||document.activeElement)){this.focusedElementIndex=t}}};this.setAlertVariant=()=>{if(r(this.status)&&this.status!==null){const t=this.el.shadowRoot.querySelector("ic-alert");t.setAttribute("variant",this.status)}};this.closeIconClick=()=>{this.open=false};this.getInteractiveElements=()=>{this.interactiveElementList=Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));const t=Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]), \n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, \n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button, \n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`));if(t.length>0){if(t[0].slot!==this.DIALOG_CONTROLS){t[0].setAttribute(this.DATA_GETS_FOCUS,"")}else if(!this.destructive){t[t.length-1].setAttribute(this.DATA_GETS_FOCUS,"")}}for(let i=0;i<t.length;i++){this.interactiveElementList.splice(1+i,0,t[i])}};this.getNextFocusEl=t=>this.interactiveElementList[t];this.focusNextInteractiveElement=t=>{this.getFocusedElementIndex();this.setFocusIndexBasedOnShiftKey(t);this.loopNextFocusIndexIfLastElement();let i=this.getNextFocusEl(this.focusedElementIndex);const e=getComputedStyle(i).visibility==="hidden"||i.tagName===this.IC_ACCORDION_GROUP&&i.hasAttribute("single-expansion");if(i.tagName===this.IC_TEXT_FIELD){i.setFocus()}else{if(e){this.setFocusIndexBasedOnShiftKey(t);this.loopNextFocusIndexIfLastElement();i=this.getNextFocusEl(this.focusedElementIndex)}if(i.tagName===this.IC_ACCORDION_GROUP){i.setFocus()}else if(i.tagName===this.IC_ACCORDION){i.setFocus()}else{i.focus()}}};this.setButtonOnClick=()=>{var t,i,e;if(this.buttons){this.buttonOnclick0=new Function((t=this.buttonProps[0])===null||t===void 0?void 0:t.onclick);this.buttonOnclick1=new Function((i=this.buttonProps[1])===null||i===void 0?void 0:i.onclick);this.buttonOnclick2=new Function((e=this.buttonProps[2])===null||e===void 0?void 0:e.onclick)}};this.getButtonOnclick=t=>{if(t===0){return this.buttonOnclick0()}else if(t===1){return this.buttonOnclick1()}else{return this.buttonOnclick2()}};this.getButtonVariant=t=>{const i=this.destructive?"destructive":"primary";if(this.buttonProps.length===1){return i}else if(this.buttonProps.length===2){if(t===0){return"tertiary"}else{return i}}else{if(t===2){return i}else{return"secondary"}}};this.renderDialog=()=>{const{alertHeading:t,alertMessage:i,buttons:s,buttonProps:a,size:n,heading:r,label:l,status:d,destructive:c,dismissLabel:u,hideCloseButton:m}=this;return e("dialog",{class:{["dialog"]:true,[`${n}`]:true,["disable-height-constraint"]:this.disableHeightConstraint,["disable-width-constraint"]:this.disableWidthConstraint},"aria-labelledby":"dialog-label dialog-heading","aria-describedby":"dialog-alert dialog-content",ref:t=>this.dialogEl=t},e("div",{class:"heading-area"},e("div",{class:"heading-content"},e("div",{class:"label"},e("slot",{name:"label"},e("ic-typography",{variant:"label",id:"dialog-label"},l))),e("div",{class:"heading"},e("slot",{name:"heading"},e("ic-typography",{variant:"h4",id:"dialog-heading"},r)))),!m&&e("ic-button",{class:"close-icon",variant:"icon",innerHTML:o,"aria-label":u,onClick:this.closeIconClick,"data-gets-focus":c||!s?"":null})),e("div",{class:"content-area"},h(this.el,"alert")?e("slot",{name:"alert"}):d&&e("ic-alert",{variant:d,heading:t,message:i,"title-above":true,class:"status-alert",id:"dialog-alert"}),e("div",{id:"dialog-content"},e("slot",null))),(s||h(this.el,this.DIALOG_CONTROLS))&&e("div",{class:{[this.DIALOG_CONTROLS]:true,["triple-button"]:a.length===3}},e("slot",{name:this.DIALOG_CONTROLS},!h(this.el,this.DIALOG_CONTROLS)&&a.map(((t,i)=>{if(i>2){return}else{return e("ic-button",{variant:this.getButtonVariant(i),onClick:()=>this.getButtonOnclick(i),class:"dialog-control-button","full-width":a.length===3,"data-gets-focus":this.getButtonVariant(i)==="primary"?"":null},t.label)}})))))};this.dialogRendered=false;this.fadeIn=false;this.alertHeading=undefined;this.alertMessage=undefined;this.buttons=true;this.closeOnBackdropClick=true;this.destructive=false;this.dismissLabel="Dismiss";this.disableHeightConstraint=false;this.disableWidthConstraint=false;this.hideCloseButton=false;this.heading=undefined;this.label=undefined;this.open=undefined;this.size="small";this.status=undefined;this.buttonProps=[{label:"Cancel",onclick:"this.cancelDialog();"},{label:"Confirm",onclick:"this.confirmDialog();"}]}watchOpenHandler(){if(this.open){this.dialogOpened()}else{this.fadeIn=false;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}setTimeout((()=>{var t;this.dialogRendered=false;this.dialogEl.close();(t=this.sourceElement)===null||t===void 0?void 0:t.focus();this.dialogHeight=0;this.icDialogClosed.emit()}),80)}}watchPropHandler(){this.setButtonOnClick()}disconnectedCallback(){this.removeSlotChangeListener()}componentWillLoad(){if(this.buttonProps.length){this.setButtonOnClick()}}componentDidLoad(){this.getInteractiveElements();this.setAlertVariant();this.refreshInteractiveElementsOnSlotChange();if(this.open){this.dialogOpened()}!h(this.el,"heading")&&l([{prop:this.heading,propName:"heading"}],"Dialog")}componentDidRender(){if(getComputedStyle(this.el).display!=="none"&&this.disableHeightConstraint){document.body.style.overflow="hidden"}else{document.body.style.overflow="auto"}}handleKeyboard(t){if(this.dialogRendered){switch(t.key){case"Tab":t.preventDefault();this.focusNextInteractiveElement(t.shiftKey);break;case"Escape":if(!t.repeat){this.open=false}t.stopImmediatePropagation();break}}}handleClick(t){const i=this.el.shadowRoot.querySelector("dialog");if(this.closeOnBackdropClick&&t.composedPath().indexOf(i)<=0){const i=this.dialogEl.getBoundingClientRect();const e=i.top<=t.clientY&&t.clientY<=i.top+i.height&&i.left<=t.clientX&&t.clientX<=i.left+i.width;if(!e){this.open=false}}}async showDialog(){this.open=true}async hideDialog(){this.open=false}async cancelDialog(){this.icDialogCancelled.emit();this.open=false}async confirmDialog(){this.icDialogConfirmed.emit()}loopNextFocusIndexIfLastElement(){if(this.focusedElementIndex>this.interactiveElementList.length-1)this.focusedElementIndex=0;else if(this.focusedElementIndex<0){this.focusedElementIndex=this.interactiveElementList.length-1}}setFocusIndexBasedOnShiftKey(t){if(t){this.focusedElementIndex-=1}else{this.focusedElementIndex+=1}}render(){return e(s,{class:{["hidden"]:!this.dialogRendered,["fade-in"]:this.fadeIn,["disable-height-constraint"]:this.disableHeightConstraint}},this.disableHeightConstraint?e("div",{class:"backdrop",ref:t=>this.backdropEl=t},this.renderDialog()):this.renderDialog())}get el(){return a(this)}static get watchers(){return{open:["watchOpenHandler"],buttonProps:["watchPropHandler"]}}};c.style=d;export{c as ic_dialog};
|
2
|
-
//# sourceMappingURL=p-afa78488.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icDialogCss","Dialog","this","DATA_GETS_FOCUS","DATA_GETS_FOCUS_SELECTOR","DIALOG_CONTROLS","dialogHeight","focusedElementIndex","IC_TEXT_FIELD","IC_ACCORDION","IC_ACCORDION_GROUP","resizeObserver","dialogOpened","dialogRendered","disableHeightConstraint","dialogEl","show","_a","showModal","setTimeout","fadeIn","backdropEl","scrollTop","setInitialFocus","checkResizeObserver","runResizeObserver","getFocusedElementIndex","icDialogOpened","emit","ResizeObserver","clearTimeout","resizeTimeout","window","resizeObserverCallback","observe","clientHeight","refreshInteractiveElementsOnSlotChange","contentArea","el","shadowRoot","querySelector","addEventListener","getInteractiveElements","removeSlotChangeListener","removeEventListener","sourceElement","document","activeElement","focusedElement","tagName","setFocus","focus","preventScroll","i","interactiveElementList","length","setAlertVariant","isPropDefined","status","alert","setAttribute","closeIconClick","open","Array","from","querySelectorAll","slottedInteractiveElements","slot","destructive","splice","getNextFocusEl","focusNextInteractiveElement","shiftKey","setFocusIndexBasedOnShiftKey","loopNextFocusIndexIfLastElement","nextFocusEl","isHidden","getComputedStyle","visibility","hasAttribute","setButtonOnClick","buttons","buttonOnclick0","Function","buttonProps","onclick","buttonOnclick1","_b","buttonOnclick2","_c","getButtonOnclick","index","getButtonVariant","mainVariant","renderDialog","alertHeading","alertMessage","size","heading","label","dismissLabel","hideCloseButton","h","class","disableWidthConstraint","ref","name","variant","id","innerHTML","closeIcon","onClick","isSlotUsed","message","map","props","undefined","watchOpenHandler","disconnect","close","icDialogClosed","watchPropHandler","disconnectedCallback","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","display","body","style","overflow","handleKeyboard","ev","key","preventDefault","repeat","stopImmediatePropagation","handleClick","dialogElement","closeOnBackdropClick","composedPath","indexOf","rect","getBoundingClientRect","isInDialog","top","clientY","height","left","clientX","width","showDialog","hideDialog","cancelDialog","icDialogCancelled","confirmDialog","icDialogConfirmed","render","Host"],"sources":["src/components/ic-dialog/ic-dialog.css?tag=ic-dialog&encapsulation=shadow","src/components/ic-dialog/ic-dialog.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-dialog: z-index of dialog \n */\n\n:host {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n opacity: 0;\n}\n\n:host(.fade-in) {\n opacity: 1;\n}\n\n:host(.disable-height-constraint) {\n background: none;\n justify-content: unset;\n align-items: unset;\n}\n\n.dialog.disable-height-constraint {\n max-height: none;\n position: relative;\n}\n\n.dialog.disable-height-constraint .content-area {\n overflow-y: visible;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host {\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n .dialog {\n transform: translateY(-3rem);\n transition: transform 1000s;\n }\n\n :host(.fade-in) .dialog {\n transform: translateY(0);\n transition: transform var(--ic-easing-transition-slow);\n }\n}\n\n:host(.hidden) {\n display: none;\n}\n\n.dialog {\n background-color: var(--ic-architectural-white);\n color: var(--ic-architectural-black);\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n padding: var(--ic-space-xs) 0 var(--ic-space-md);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: visible;\n}\n\n.small {\n width: 50%;\n max-width: 25rem;\n min-height: 11rem;\n max-height: 70vh;\n}\n\n.medium {\n width: 70vw;\n max-width: 44rem;\n min-height: 12.5rem;\n max-height: 70vh;\n}\n\n.large {\n width: 90vw;\n max-width: 62.5rem;\n min-height: 12.5rem;\n max-height: 90vh;\n}\n\n.heading-area {\n display: flex;\n margin-bottom: var(--ic-space-xs);\n padding: 0 var(--ic-space-md);\n}\n\n.heading {\n overflow-wrap: break-word;\n}\n\n.close-icon {\n margin-left: auto;\n}\n\n.content-area {\n -ms-overflow-style: none;\n scrollbar-width: none;\n padding: 0 var(--ic-space-md);\n margin: 0;\n overflow-y: auto;\n}\n\n.content-area::-webkit-scrollbar {\n display: none;\n}\n\n#dialog-content {\n margin-bottom: var(--ic-space-sm);\n}\n\n#dialog-content ::slotted(ic-typography) {\n overflow-wrap: break-word;\n}\n\n#dialog-content ::slotted(*) {\n position: relative;\n}\n\n.status-alert {\n margin-bottom: var(--ic-space-xs);\n}\n\n.dialog-controls {\n margin-top: auto;\n padding: var(--ic-space-xs) var(--ic-space-md) 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--ic-space-md);\n}\n\n.dialog-control-button {\n width: fit-content;\n}\n\n.backdrop {\n overflow-y: auto;\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n padding-top: 16px;\n padding-bottom: 16px;\n}\n\n@media (min-width: 800px) {\n :host([size=\"large\"]) .dialog:not(.disable-width-constraint) > .content-area {\n width: 75%;\n }\n}\n\n@media (max-width: 576px) {\n .dialog {\n width: 100vw;\n height: 100vh;\n transform: translateY(-5rem);\n max-width: none;\n max-height: none;\n box-sizing: border-box;\n }\n\n .backdrop {\n padding: 0;\n }\n\n .dialog.disable-height-constraint {\n height: auto;\n min-height: 100vh;\n }\n}\n\n@media (max-width: 364px) {\n .triple-button {\n flex-direction: column;\n gap: var(--ic-space-xs);\n }\n\n .dialog-control-button {\n width: unset;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Method,\n Listen,\n Watch,\n h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n isSlotUsed,\n checkResizeObserver,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n tag: \"ic-dialog\",\n styleUrl: \"ic-dialog.css\",\n shadow: true,\n})\nexport class Dialog {\n private backdropEl: HTMLDivElement;\n private contentArea: HTMLSlotElement;\n private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n private DATA_GETS_FOCUS_SELECTOR: string = \"[data-gets-focus]\";\n private DIALOG_CONTROLS: string = \"dialog-controls\";\n private dialogEl: HTMLDialogElement;\n private dialogHeight: number = 0;\n private focusedElementIndex = 0;\n private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n private IC_ACCORDION: string = \"IC-ACCORDION\";\n private IC_ACCORDION_GROUP: string = \"IC-ACCORDION-GROUP\";\n private interactiveElementList: HTMLElement[];\n private resizeObserver: ResizeObserver = null;\n private resizeTimeout: number;\n private sourceElement: HTMLElement;\n\n /* eslint-disable */\n\n private buttonOnclick0: Function;\n private buttonOnclick1: Function;\n private buttonOnclick2: Function;\n\n /* eslint-enable */\n\n @Element() el: HTMLIcDialogElement;\n\n @State() dialogRendered: boolean = false;\n @State() fadeIn: boolean = false;\n\n /**\n * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.\n */\n @Prop() alertHeading?: string;\n\n /**\n * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.\n */\n @Prop() alertMessage?: string;\n\n /**\n * If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls.\n */\n @Prop() buttons?: boolean = true;\n\n /**\n * If set to `false`, the dialog will not close when the backdrop is clicked.\n */\n @Prop() closeOnBackdropClick?: boolean = true;\n\n /**\n * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.\n */\n @Prop() destructive?: boolean = false;\n\n /**\n * Sets the dismiss label tooltip and aria label.\n */\n @Prop() dismissLabel?: string = \"Dismiss\";\n\n /**\n * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\n * This prop also prevents popover elements from being cut off within the content area.\n */\n @Prop() disableHeightConstraint?: boolean = false;\n\n /**\n * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.\n */\n @Prop() disableWidthConstraint?: boolean = false;\n\n /**\n * If `true`, the close button will not be displayed.\n */\n @Prop() hideCloseButton?: boolean = false;\n\n /**\n * Sets the heading for the dialog.\n */\n @Prop() heading: string;\n\n /**\n * Sets the optional label for the dialog which appears above the heading.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the dialog 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 this.dialogOpened();\n } else {\n this.fadeIn = false;\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n setTimeout(() => {\n this.dialogRendered = false;\n this.dialogEl.close();\n this.sourceElement?.focus();\n this.dialogHeight = 0;\n this.icDialogClosed.emit();\n }, 80);\n }\n }\n\n /**\n * Sets the maximum and minimum height and width for the dialog.\n */\n @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n /**\n * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.\n */\n @Prop() status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\";\n\n /**\n * Sets the label and onclick functions for default buttons.\n */\n @Prop() buttonProps?: { label: string; onclick: string }[] = [\n {\n label: \"Cancel\",\n onclick: \"this.cancelDialog();\",\n },\n { label: \"Confirm\", onclick: \"this.confirmDialog();\" },\n ];\n\n @Watch(\"buttonProps\")\n watchPropHandler(): void {\n this.setButtonOnClick();\n }\n\n /**\n * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n */\n @Event() icDialogCancelled: EventEmitter<void>;\n\n /**\n * Emitted when dialog has closed.\n */\n @Event() icDialogClosed: EventEmitter<void>;\n\n /**\n * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n */\n @Event() icDialogConfirmed: EventEmitter<void>;\n\n /**\n * Emitted when dialog has opened.\n */\n @Event() icDialogOpened: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.removeSlotChangeListener();\n }\n\n componentWillLoad(): void {\n if (this.buttonProps.length) {\n this.setButtonOnClick();\n }\n }\n\n componentDidLoad(): void {\n this.getInteractiveElements();\n this.setAlertVariant();\n\n this.refreshInteractiveElementsOnSlotChange();\n\n if (this.open) {\n this.dialogOpened();\n }\n\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Dialog\"\n );\n }\n\n componentDidRender(): void {\n if (\n getComputedStyle(this.el).display !== \"none\" &&\n this.disableHeightConstraint\n ) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"auto\";\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.dialogRendered) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.focusNextInteractiveElement(ev.shiftKey);\n break;\n case \"Escape\":\n if (!ev.repeat) {\n this.open = false;\n }\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"click\", {})\n handleClick(ev: MouseEvent): void {\n const dialogElement = this.el.shadowRoot.querySelector(\"dialog\");\n if (\n this.closeOnBackdropClick &&\n ev.composedPath().indexOf(dialogElement) <= 0\n ) {\n const rect = this.dialogEl.getBoundingClientRect();\n const isInDialog =\n rect.top <= ev.clientY &&\n ev.clientY <= rect.top + rect.height &&\n rect.left <= ev.clientX &&\n ev.clientX <= rect.left + rect.width;\n if (!isInDialog) {\n this.open = false;\n }\n }\n }\n\n /**\n * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.\n */\n @Method()\n async showDialog(): Promise<void> {\n this.open = true;\n }\n\n /**\n * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.\n */\n @Method()\n async hideDialog(): Promise<void> {\n this.open = false;\n }\n\n /**\n * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n */\n @Method()\n async cancelDialog(): Promise<void> {\n this.icDialogCancelled.emit();\n this.open = false;\n }\n\n /**\n * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n */\n @Method()\n async confirmDialog(): Promise<void> {\n this.icDialogConfirmed.emit();\n }\n\n private dialogOpened = () => {\n this.dialogRendered = true;\n\n if (this.disableHeightConstraint) {\n this.dialogEl.show();\n } else {\n this.dialogEl?.showModal();\n }\n\n setTimeout(() => {\n this.fadeIn = true;\n\n /**\n * This is required to set scroll back to top if:\n * - dialog content goes below the fold\n * - is closed using cancel or confirm and reopened.\n *\n * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.\n */\n if (this.disableHeightConstraint && this.backdropEl.scrollTop !== 0) {\n this.backdropEl.scrollTop = 0;\n }\n }, 10);\n\n setTimeout(() => {\n this.setInitialFocus();\n checkResizeObserver(this.runResizeObserver);\n }, 75);\n\n setTimeout(() => {\n this.getFocusedElementIndex();\n this.icDialogOpened.emit();\n }, 80);\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n });\n this.resizeObserver.observe(this.dialogEl);\n };\n\n private resizeObserverCallback = () => {\n if (this.dialogEl.clientHeight !== this.dialogHeight) {\n this.dialogHeight = this.dialogEl.clientHeight;\n }\n };\n\n private refreshInteractiveElementsOnSlotChange = () => {\n this.contentArea = this.el.shadowRoot.querySelector(\"#dialog-content slot\");\n\n this.contentArea.addEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n };\n\n private removeSlotChangeListener = () => {\n if (this.contentArea) {\n this.contentArea.removeEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n }\n };\n\n private setInitialFocus = () => {\n this.sourceElement = document.activeElement as HTMLElement;\n\n let focusedElement;\n\n if (this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR) !== null) {\n focusedElement = this.el.querySelector(\n this.DATA_GETS_FOCUS_SELECTOR\n ) as HTMLElement;\n } else {\n focusedElement = this.el.shadowRoot.querySelector(\n this.DATA_GETS_FOCUS_SELECTOR\n ) as HTMLElement;\n }\n if (focusedElement.tagName === this.IC_TEXT_FIELD) {\n (focusedElement as HTMLIcTextFieldElement).setFocus();\n } else if (focusedElement.tagName === this.IC_ACCORDION_GROUP) {\n (focusedElement as HTMLIcAccordionGroupElement).setFocus();\n } else if (focusedElement.tagName === this.IC_ACCORDION) {\n (focusedElement as HTMLIcAccordionElement).setFocus();\n } else {\n focusedElement.focus({\n preventScroll: this.disableHeightConstraint ? true : false,\n });\n }\n };\n\n private getFocusedElementIndex = () => {\n for (let i = 0; i < this.interactiveElementList.length; i++) {\n if (\n (this.interactiveElementList[i] as HTMLElement) ===\n (this.el.shadowRoot.activeElement || document.activeElement)\n ) {\n this.focusedElementIndex = i;\n }\n }\n };\n\n private setAlertVariant = () => {\n if (isPropDefined(this.status) && this.status !== null) {\n const alert = this.el.shadowRoot.querySelector(\"ic-alert\");\n alert.setAttribute(\"variant\", this.status);\n }\n };\n\n private closeIconClick = () => {\n this.open = false;\n };\n\n private getInteractiveElements = () => {\n this.interactiveElementList = Array.from(\n this.el.shadowRoot.querySelectorAll(\"ic-button\")\n );\n const slottedInteractiveElements = Array.from(\n this.el.querySelectorAll(\n `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), \n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, \n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button, \n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`\n )\n );\n if (slottedInteractiveElements.length > 0) {\n if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n } else if (!this.destructive) {\n slottedInteractiveElements[\n slottedInteractiveElements.length - 1\n ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n }\n }\n for (let i = 0; i < slottedInteractiveElements.length; i++) {\n this.interactiveElementList.splice(\n 1 + i,\n 0,\n slottedInteractiveElements[i] as HTMLElement\n );\n }\n };\n\n private getNextFocusEl = (focusedElementIndex: number) =>\n this.interactiveElementList[focusedElementIndex];\n\n private focusNextInteractiveElement = (shiftKey: boolean) => {\n this.getFocusedElementIndex();\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n\n const isHidden =\n getComputedStyle(nextFocusEl).visibility === \"hidden\" ||\n (nextFocusEl.tagName === this.IC_ACCORDION_GROUP &&\n nextFocusEl.hasAttribute(\"single-expansion\"));\n\n if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {\n (nextFocusEl as HTMLIcTextFieldElement).setFocus();\n } else {\n if (isHidden) {\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n }\n if (nextFocusEl.tagName === this.IC_ACCORDION_GROUP) {\n (nextFocusEl as HTMLIcAccordionGroupElement).setFocus();\n } else if (nextFocusEl.tagName === this.IC_ACCORDION) {\n (nextFocusEl as HTMLIcAccordionElement).setFocus();\n } else {\n (nextFocusEl as HTMLElement).focus();\n }\n }\n };\n\n private setButtonOnClick = () => {\n if (this.buttons) {\n this.buttonOnclick0 = new Function(this.buttonProps[0]?.onclick);\n this.buttonOnclick1 = new Function(this.buttonProps[1]?.onclick);\n this.buttonOnclick2 = new Function(this.buttonProps[2]?.onclick);\n }\n };\n\n private getButtonOnclick = (index: number) => {\n if (index === 0) {\n return this.buttonOnclick0();\n } else if (index === 1) {\n return this.buttonOnclick1();\n } else {\n return this.buttonOnclick2();\n }\n };\n\n private getButtonVariant = (index: number) => {\n const mainVariant = this.destructive ? \"destructive\" : \"primary\";\n if (this.buttonProps.length === 1) {\n return mainVariant;\n } else if (this.buttonProps.length === 2) {\n if (index === 0) {\n return \"tertiary\";\n } else {\n return mainVariant;\n }\n } else {\n if (index === 2) {\n return mainVariant;\n } else {\n return \"secondary\";\n }\n }\n };\n\n private loopNextFocusIndexIfLastElement() {\n if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n this.focusedElementIndex = 0;\n else if (this.focusedElementIndex < 0) {\n this.focusedElementIndex = this.interactiveElementList.length - 1;\n }\n }\n\n private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n if (shiftKey) {\n this.focusedElementIndex -= 1;\n } else {\n this.focusedElementIndex += 1;\n }\n }\n\n private renderDialog = () => {\n const {\n alertHeading,\n alertMessage,\n buttons,\n buttonProps,\n size,\n heading,\n label,\n status,\n destructive,\n dismissLabel,\n hideCloseButton,\n } = this;\n\n return (\n <dialog\n class={{\n [\"dialog\"]: true,\n [`${size}`]: true,\n [\"disable-height-constraint\"]: this.disableHeightConstraint,\n [\"disable-width-constraint\"]: this.disableWidthConstraint,\n }}\n aria-labelledby=\"dialog-label dialog-heading\"\n aria-describedby=\"dialog-alert dialog-content\"\n ref={(el) => (this.dialogEl = el)}\n >\n <div class=\"heading-area\">\n <div class=\"heading-content\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography variant=\"label\" id=\"dialog-label\">\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" id=\"dialog-heading\">\n {heading}\n </ic-typography>\n </slot>\n </div>\n </div>\n {!hideCloseButton && (\n <ic-button\n class=\"close-icon\"\n variant=\"icon\"\n innerHTML={closeIcon}\n aria-label={dismissLabel}\n onClick={this.closeIconClick}\n data-gets-focus={destructive || !buttons ? \"\" : null}\n ></ic-button>\n )}\n </div>\n <div class=\"content-area\">\n {isSlotUsed(this.el, \"alert\") ? (\n <slot name=\"alert\"></slot>\n ) : (\n status && (\n <ic-alert\n variant={status}\n heading={alertHeading}\n message={alertMessage}\n title-above\n class=\"status-alert\"\n id=\"dialog-alert\"\n ></ic-alert>\n )\n )}\n <div id=\"dialog-content\">\n <slot></slot>\n </div>\n </div>\n {(buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (\n <div\n class={{\n [this.DIALOG_CONTROLS]: true,\n [\"triple-button\"]: buttonProps.length === 3,\n }}\n >\n <slot name={this.DIALOG_CONTROLS}>\n {!isSlotUsed(this.el, this.DIALOG_CONTROLS) &&\n buttonProps.map((props, index) => {\n if (index > 2) {\n return;\n } else {\n return (\n <ic-button\n variant={this.getButtonVariant(index)}\n onClick={() => this.getButtonOnclick(index)}\n class=\"dialog-control-button\"\n full-width={buttonProps.length === 3}\n data-gets-focus={\n this.getButtonVariant(index) === \"primary\" ? \"\" : null\n }\n >\n {props.label}\n </ic-button>\n );\n }\n })}\n </slot>\n </div>\n )}\n </dialog>\n );\n };\n\n render() {\n return (\n <Host\n class={{\n [\"hidden\"]: !this.dialogRendered,\n [\"fade-in\"]: this.fadeIn,\n [\"disable-height-constraint\"]: this.disableHeightConstraint,\n }}\n >\n {this.disableHeightConstraint ? (\n <div class=\"backdrop\" ref={(el) => (this.backdropEl = el)}>\n {this.renderDialog()}\n </div>\n ) : (\n this.renderDialog()\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,c as t,h as e,f as a,H as o,g as n}from"./p-6b5e91e2.js";import{g as s,i as r,D as d,d as c,f as l,z as v}from"./p-d41c847e.js";import{C as h}from"./p-3b185c32.js";import{O as m}from"./p-426ec638.js";import"./p-26b7b18f.js";const g='/*! 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}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:0.25rem}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:var(--ic-space-lg);width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 56px);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding-top:var(--ic-space-md) !important;padding-bottom:var(--ic-space-md) !important;text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-primary-text)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}';const p=class{constructor(o){i(this,o);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.isInitialRender=true;this.hostMutationObserver=null;this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.ARIA_LABEL_STRING="aria-label";this.displayDefaultNavigationItem=(i,t,a,o,n,s,d)=>{const c=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const l=this.expandable&&e("div",{class:{svg:true},innerHTML:h});const v=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"},e("slot",{name:"icon"}),r(this.el,"badge")&&e("slot",{name:"badge"}));if(i!==""){return e("a",{href:i,target:a,rel:o,hreflang:t,referrerPolicy:n,download:s!==false?s:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-label":this.ariaLabel?this.ariaLabel:null},v,e("ic-typography",{variant:c},d),e("div",{class:"chevron-container"},l),a==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:m}))}return e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i},v,e("ic-typography",{variant:c},d),l)};this.topNavResizedHandler=({detail:i})=>{var t;const{size:e}=i;if(e!==this.deviceSize){this.deviceSize=e;this.inTopNavSideMenu=e<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||d.L)}};this.sideNavExpandHandler=({detail:i})=>{const{sideNavExpanded:t,sideNavMobile:e}=i;this.sideNavExpanded=t;this.isSideNavMobile=e;this.sideNavToggleTooltip(!(t||e))};this.handleBlur=({relatedTarget:i})=>{if(i===null||i.tagName!=="IC-NAVIGATION-ITEM"){this.childBlur.emit()}};this.handleClick=()=>{this.navItemClicked.emit()};this.hostMutationCallback=i=>{let t=false;i.forEach((({attributeName:i})=>{if(i===this.ARIA_LABEL_STRING){this.ariaLabel=this.el.getAttribute(i);t=true}}));if(t){a(this)}};this.generateTooltipLabel=()=>{if(this.label){return this.label}if(this.navigationSlot){return this.navigationSlot.textContent}if(this.el.children[0]){return this.el.children[0].textContent}return""};this.renderNavigationItemContent=()=>{if(this.label){return this.displayDefaultNavigationItem(this.href,this.hreflang,this.target,this.rel,this.referrerpolicy,this.download,this.label)}if(this.navigationSlot){return e("slot",{name:"navigation-item"})}return e("slot",null)};this.sideNavToggleTooltip=i=>{const t=this.el.shadowRoot.querySelector("ic-tooltip");const e="tooltip-navigation-item-side-nav-collapsed";let a;if(t){if(i){t.displayTooltip(false);a=setTimeout((()=>{t.classList.add(e)}),this.ANIMATION_DURATION)}else{clearTimeout(a);t.classList.remove(e)}}};this.deviceSize=d.XL;this.focusStyle=c();this.inTopNavSideMenu=false;this.isSideNavMobile=false;this.isTopNavChild=false;this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.ariaLabel="";this.collapsedIconLabel=false;this.displayNavigationTooltip=false;this.download=false;this.expandable=false;this.href="";this.hreflang=undefined;this.label=undefined;this.rel=undefined;this.referrerpolicy=undefined;this.selected=false;this.target=undefined}disconnectedCallback(){var i;if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}(i=this.hostMutationObserver)===null||i===void 0?void 0:i.disconnect()}componentWillLoad(){var i,t;const{navType:e,parent:a}=v(this.el);this.navigationType=e;this.parentEl=a;this.deviceSize=l();this.sideNavExpanded=((i=this.parentEl)===null||i===void 0?void 0:i.classList.contains("sm-expanded"))||((t=this.parentEl)===null||t===void 0?void 0:t.classList.contains("xs-menu-open"));if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler);if(this.el.parentElement.tagName==="IC-NAVIGATION-GROUP")this.isTopNavChild=true;if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}if(this.el.hasAttribute(this.ARIA_LABEL_STRING)){this.ariaLabel=this.el.getAttribute(this.ARIA_LABEL_STRING)}}componentDidLoad(){this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}componentDidUpdate(){this.isInitialRender=false}themeChangeHandler({detail:i}){this.focusStyle=i.mode}async setFocus(){var i;(i=this.itemEl)===null||i===void 0?void 0:i.focus()}render(){const{inTopNavSideMenu:i,isTopNavChild:t,selected:a}=this;return e(o,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!i&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:t&&!i&&a,[this.focusStyle]:!i&&!t||this.navigationType==="side"&&t,["navigation-item-selected"]:!t&&a,["navigation-item-side-menu"]:i,["navigation-item-side-menu-selected"]:i&&a,["navigation-item-top-nav-child"]:t&&!i,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile,["expandable"]:this.expandable},onBlur:t&&!i?this.handleBlur:null,onClick:this.handleClick,"aria-current":a?"page":null,role:"listitem"},e("ic-tooltip",{label:this.generateTooltipLabel(),target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:this.displayNavigationTooltip&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},this.renderNavigationItemContent()))}static get delegatesFocus(){return true}get el(){return n(this)}};p.style=g;export{p as ic_navigation_item};
|
2
|
-
//# sourceMappingURL=p-dfb3e76e.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icNavigationItemCss","NavigationItem","this","isInitialRender","hostMutationObserver","ANIMATION_DURATION","parseInt","getCssProperty","ARIA_LABEL_STRING","displayDefaultNavigationItem","href","hreflang","target","rel","referrerpolicy","download","label","variant","isTopNavChild","inTopNavSideMenu","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","isSlotUsed","referrerPolicy","ref","itemEl","part","ariaLabel","OpenInNew","tabindex","topNavResizedHandler","detail","size","deviceSize","_a","parentEl","customMobileBreakpoint","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","sideNavToggleTooltip","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","showTooltip","tooltip","shadowRoot","collapsedClass","timer","displayTooltip","setTimeout","classList","add","clearTimeout","remove","XL","getThemeForegroundColor","disconnectedCallback","navigationType","removeEventListener","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","contains","_b","addEventListener","parentElement","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","themeChangeHandler","focusStyle","mode","setFocus","focus","render","selected","Host","displayNavigationTooltip","collapsedIconLabel","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n display: block;\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-page-header,\n .navigation-item-side-menu\n )\n )\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-top-nav-child,\n .navigation-item-side-menu,\n .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected\n )\n )\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: 0.25rem;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: var(--ic-space-lg);\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted(*) {\n margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 56px);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding-top: var(--ic-space-md) !important;\n padding-bottom: var(--ic-space-md) !important;\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(\n :not(\n .navigation-item-side-nav-collapsed\n ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label\n )\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n .link,\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n\n@media (forced-colors: active) {\n .open-in-new-icon svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCssProperty,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getNavItemParentDetails,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement;\n private isInitialRender: boolean = true;\n private itemEl: HTMLElement;\n private hostMutationObserver: MutationObserver = null;\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n private ARIA_LABEL_STRING = \"aria-label\";\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() inTopNavSideMenu: boolean = false;\n @State() isSideNavMobile: boolean = false;\n @State() isTopNavChild: boolean = false;\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n @State() ariaLabel: string = \"\";\n\n /**\n * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n */\n @Prop() collapsedIconLabel: boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be displayed within a tooltip.\n */\n @Prop() displayNavigationTooltip: 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 * @internal If `true`, the navigation item will be expandable.\n */\n @Prop() expandable: boolean = false;\n\n /**\n * The destination of the navigation item.\n */\n @Prop() href: string = \"\";\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label of the navigation item.\n */\n @Prop() label: string;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * If `true`, the navigation item will be set in a selected state.\n */\n @Prop() selected: boolean = false;\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 * @internal - Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal - Emitted when navigation item clicked.\n */\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n this.sideNavExpanded =\n this.parentEl?.classList.contains(\"sm-expanded\") ||\n this.parentEl?.classList.contains(\"xs-menu-open\");\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n if (this.el.parentElement.tagName === \"IC-NAVIGATION-GROUP\")\n this.isTopNavChild = true;\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n }\n\n if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING);\n }\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n this.focusStyle = detail.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.itemEl?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string | boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-label={this.ariaLabel ? this.ariaLabel : null}\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint || DEVICE_SIZES.L);\n }\n };\n\n private sideNavExpandHandler = ({\n detail,\n }: CustomEvent<IcExpandedDetail>): void => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));\n };\n\n private handleBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n relatedTarget === null ||\n (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n ) {\n this.childBlur.emit();\n }\n };\n\n private handleClick = () => {\n this.navItemClicked.emit();\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 if (attributeName === this.ARIA_LABEL_STRING) {\n this.ariaLabel = this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent;\n }\n\n if (this.el.children[0]) {\n return this.el.children[0].textContent;\n }\n\n return \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (this.label) {\n return this.displayDefaultNavigationItem(\n this.href,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download,\n this.label\n );\n }\n\n if (this.navigationSlot) {\n return <slot name=\"navigation-item\"></slot>;\n }\n return <slot></slot>;\n };\n\n // Displays tooltip only once the collapsing animation is finished\n private sideNavToggleTooltip = (showTooltip: boolean) => {\n const tooltip = this.el.shadowRoot.querySelector(\"ic-tooltip\");\n const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n let timer;\n\n if (tooltip) {\n if (showTooltip) {\n tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n timer = setTimeout(() => {\n tooltip.classList.add(collapsedClass);\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n tooltip.classList.remove(collapsedClass);\n }\n }\n };\n\n render() {\n const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) ||\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n this.displayNavigationTooltip && this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as o}from"./p-6b5e91e2.js";import{i as a,r as n,j as r,a as h,p as l,t as d}from"./p-d41c847e.js";import"./p-26b7b18f.js";const c='/*! 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}ic-input-label.error{color:var(--ic-status-error)}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}:host(.small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}';const p=class{constructor(e){t(this,e);this.icChange=i(this,"icChange",7);this.resizeObserver=null;this.ADDITIONAL_FIELD="additional-field";this.RADIO_HORIZONTAL="horizontal";this.RADIO_VERTICAL="vertical";this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.checkOrientation()}));this.resizeObserver.observe(this.el)};this.handleKeyDown=t=>{switch(t.key){case"ArrowDown":case"ArrowRight":this.radioOptions[this.getNextItemToSelect(this.selectedChild,true)].click();t.preventDefault();break;case"ArrowUp":case"ArrowLeft":this.radioOptions[this.getNextItemToSelect(this.selectedChild,false)].click();t.preventDefault()}};this.getNextItemToSelect=(t,i)=>{const e=this.radioOptions.length-1;if(t<1){t=0}let s=i?t+1:t-1;if(s<0){s=e}else if(s>e){s=0}if(this.radioOptions[s].disabled){s=this.getNextItemToSelect(s,i)}return s};this.addSlotChangeListener=()=>{this.radioContainer.addEventListener("slotchange",this.setRadioOptions)};this.setFirstRadioOptionTabIndex=t=>{this.radioOptions[0].setTabIndex(t)};this.setRadioOptions=()=>{this.selectedChild=-1;this.checkedValue="";this.radioOptions=Array.from(this.el.querySelectorAll("ic-radio-option"));if(this.radioOptions.length>0){this.radioOptions.forEach(((t,i)=>{if(!t.selected){t.selected=this.checkedValue===t.value}t.name=this.name;t.groupLabel=this.label;if(t.selected){this.selectedChild=i;this.checkedValue=t.value}if(this.disabled){t.disabled=true}}));this.setFirstRadioOptionTabIndex(this.selectedChild>0?-1:0);if(this.initialOrientation===this.RADIO_HORIZONTAL&&this.radioOptions!==undefined&&(this.radioOptions.length>2||this.radioOptions.length===2&&(a(this.radioOptions[0],this.ADDITIONAL_FIELD)||a(this.radioOptions[1],this.ADDITIONAL_FIELD)))){this.currentOrientation=this.RADIO_VERTICAL}}};this.checkedValue="";this.currentOrientation=undefined;this.initialOrientation=undefined;this.selectedChild=-1;this.disabled=false;this.helperText=undefined;this.hideLabel=false;this.label=undefined;this.name=undefined;this.orientation="vertical";this.required=false;this.size="default";this.small=false;this.validationStatus="";this.validationText=""}watchDisabledHandler(t){this.radioOptions.forEach((i=>i.disabled=t));n(this.disabled,this.el)}orientationChangeHandler(){this.initialOrientation=this.orientation;this.checkOrientation()}disconnectedCallback(){var t,i;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect();(i=this.radioContainer)===null||i===void 0?void 0:i.removeEventListener("slotchange",this.setRadioOptions)}componentWillLoad(){n(this.disabled,this.el);this.orientationChangeHandler();this.currentOrientation=this.initialOrientation}componentDidLoad(){this.setRadioOptions();r(this.runResizeObserver);this.addSlotChangeListener();h([{prop:this.label,propName:"label"},{prop:this.name,propName:"name"}],"Radio Group")}selectHandler({detail:t,target:i}){var e;this.checkedValue=t.value;const s=i;this.icChange.emit({value:this.checkedValue,selectedOption:{radio:s,textFieldValue:(e=s===null||s===void 0?void 0:s.querySelector("ic-text-field"))===null||e===void 0?void 0:e.value}});if(this.radioOptions!==undefined){this.radioOptions.forEach(((t,i)=>{t.selected=s===t;if(t.selected){this.selectedChild=i}}));this.setFirstRadioOptionTabIndex(this.selectedChild>0?-1:0)}}changeHandler(){const t=this.radioOptions.findIndex((t=>t.selected));if(t<0){this.setFirstRadioOptionTabIndex(0);this.selectedChild=t}}checkOrientation(){var t,i;if(this.initialOrientation===this.RADIO_HORIZONTAL){let e=0;if(Array.isArray(this.radioOptions)&&this.radioOptions.length>0){this.radioOptions.forEach((({clientWidth:t},i,s)=>{e+=t;if(i<s.length-1)e+=40}))}else{e=0}if(this.initialOrientation==this.RADIO_HORIZONTAL){if(this.radioOptions!==undefined&&(this.radioOptions.length>2||this.radioOptions.length===2&&(a(this.radioOptions[0],this.ADDITIONAL_FIELD)||a(this.radioOptions[1],this.ADDITIONAL_FIELD)))){this.currentOrientation=this.RADIO_VERTICAL}else{if(e>=((t=this.radioContainer)===null||t===void 0?void 0:t.clientWidth)){this.currentOrientation=this.RADIO_VERTICAL}else if(e<((i=this.radioContainer)===null||i===void 0?void 0:i.clientWidth)){this.currentOrientation=this.RADIO_HORIZONTAL}}}}}render(){l(true,this.el,this.name,this.checkedValue,this.disabled);return e(s,{onKeyDown:this.handleKeyDown,class:{small:this.small||this.size==="small"}},e("div",{role:"radiogroup","aria-label":`${this.label}${this.required?", required":""}`},!this.hideLabel&&e("ic-input-label",{class:{[`${this.validationStatus}`]:true},label:this.label,helperText:this.helperText,required:this.required,disabled:this.disabled}),e("div",{class:{"radio-buttons-container":true,horizontal:this.currentOrientation===this.RADIO_HORIZONTAL},ref:t=>this.radioContainer=t},e("slot",null))),d(this.validationStatus,this.disabled)&&e("ic-input-validation",{ariaLiveMode:"polite",status:this.validationStatus,message:this.validationText}))}get el(){return o(this)}static get watchers(){return{disabled:["watchDisabledHandler"],orientation:["orientationChangeHandler"]}}};p.style=c;export{p as ic_radio_group};
|
2
|
-
//# sourceMappingURL=p-f4a29c16.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icRadioGroupCss","RadioGroup","this","resizeObserver","ADDITIONAL_FIELD","RADIO_HORIZONTAL","RADIO_VERTICAL","runResizeObserver","ResizeObserver","checkOrientation","observe","el","handleKeyDown","event","key","radioOptions","getNextItemToSelect","selectedChild","click","preventDefault","currentItem","movingDown","numRadios","length","nextItem","disabled","addSlotChangeListener","radioContainer","addEventListener","setRadioOptions","setFirstRadioOptionTabIndex","value","setTabIndex","checkedValue","Array","from","querySelectorAll","forEach","radioOption","index","selected","name","groupLabel","label","initialOrientation","undefined","isSlotUsed","currentOrientation","watchDisabledHandler","newValue","removeDisabledFalse","orientationChangeHandler","orientation","disconnectedCallback","_a","disconnect","_b","removeEventListener","componentWillLoad","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","selectHandler","detail","target","selectedOption","icChange","emit","radio","textFieldValue","querySelector","changeHandler","findIndex","totalWidth","isArray","clientWidth","i","arr","render","renderHiddenInput","h","Host","onKeyDown","class","small","size","role","required","hideLabel","validationStatus","helperText","horizontal","ref","hasValidationStatus","ariaLiveMode","status","message","validationText"],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderHiddenInput,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\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 * The label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the radio group 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 * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * The validation text - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = detail.value;\n const selectedOption = target as HTMLIcRadioOptionElement;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.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 = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n class={{ small: this.small || this.size === \"small\" }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"+JAAA,MAAMA,EAAkB,yhG,MCiCXC,EAAU,M,4DAGbC,KAAAC,eAAiC,KACjCD,KAAAE,iBAAmB,mBACnBF,KAAAG,iBAAkC,aAClCH,KAAAI,eAAgC,WAiJhCJ,KAAAK,kBAAoB,KAC1BL,KAAKC,eAAiB,IAAIK,gBAAe,KACvCN,KAAKO,kBAAkB,IAGzBP,KAAKC,eAAeO,QAAQR,KAAKS,GAAG,EAmC9BT,KAAAU,cAAiBC,IACvB,OAAQA,EAAMC,KACZ,IAAK,YACL,IAAK,aACHZ,KAAKa,aACHb,KAAKc,oBAAoBd,KAAKe,cAAe,OAC7CC,QACFL,EAAMM,iBACN,MACF,IAAK,UACL,IAAK,YACHjB,KAAKa,aACHb,KAAKc,oBAAoBd,KAAKe,cAAe,QAC7CC,QACFL,EAAMM,iB,EAIJjB,KAAAc,oBAAsB,CAC5BI,EACAC,KAEA,MAAMC,EAAYpB,KAAKa,aAAaQ,OAAS,EAE7C,GAAIH,EAAc,EAAG,CACnBA,EAAc,C,CAGhB,IAAII,EAAWH,EAAaD,EAAc,EAAIA,EAAc,EAG5D,GAAII,EAAW,EAAG,CAChBA,EAAWF,C,MACN,GAAIE,EAAWF,EAAW,CAC/BE,EAAW,C,CAIb,GAAItB,KAAKa,aAAaS,GAAUC,SAAU,CACxCD,EAAWtB,KAAKc,oBAAoBQ,EAAUH,E,CAGhD,OAAOG,CAAQ,EAGTtB,KAAAwB,sBAAwB,KAC9BxB,KAAKyB,eAAeC,iBAAiB,aAAc1B,KAAK2B,gBAAgB,EAGlE3B,KAAA4B,4BAA+BC,IACrC7B,KAAKa,aAAa,GAAGiB,YAAYD,EAAM,EAGjC7B,KAAA2B,gBAAkB,KACxB3B,KAAKe,eAAiB,EACtBf,KAAK+B,aAAe,GACpB/B,KAAKa,aAAemB,MAAMC,KAAKjC,KAAKS,GAAGyB,iBAAiB,oBACxD,GAAIlC,KAAKa,aAAaQ,OAAS,EAAG,CAChCrB,KAAKa,aAAasB,SAAQ,CAACC,EAAaC,KACtC,IAAKD,EAAYE,SAAU,CACzBF,EAAYE,SAAWtC,KAAK+B,eAAiBK,EAAYP,K,CAE3DO,EAAYG,KAAOvC,KAAKuC,KACxBH,EAAYI,WAAaxC,KAAKyC,MAC9B,GAAIL,EAAYE,SAAU,CACxBtC,KAAKe,cAAgBsB,EACrBrC,KAAK+B,aAAeK,EAAYP,K,CAElC,GAAI7B,KAAKuB,SAAU,CACjBa,EAAYb,SAAW,I,KAG3BvB,KAAK4B,4BAA4B5B,KAAKe,cAAgB,GAAK,EAAI,GAE/D,GACEf,KAAK0C,qBAAuB1C,KAAKG,kBACjCH,KAAKa,eAAiB8B,YACrB3C,KAAKa,aAAaQ,OAAS,GACzBrB,KAAKa,aAAaQ,SAAW,IAC3BuB,EAAW5C,KAAKa,aAAa,GAAIb,KAAKE,mBACrC0C,EAAW5C,KAAKa,aAAa,GAAIb,KAAKE,oBAC5C,CACAF,KAAK6C,mBAAqB7C,KAAKI,c,sBAvQL,G,wFAGE,E,cAKN,M,yCAkBC,M,0DAeQ,W,cAKT,M,UAKI,U,WAKN,M,sBAK6B,G,oBAItB,E,CAtDjC,oBAAA0C,CAAqBC,GACnB/C,KAAKa,aAAasB,SACfC,GAAiBA,EAAYb,SAAWwB,IAE3CC,EAAoBhD,KAAKuB,SAAUvB,KAAKS,G,CAqD1C,wBAAAwC,GACEjD,KAAK0C,mBAAqB1C,KAAKkD,YAC/BlD,KAAKO,kB,CAQP,oBAAA4C,G,SACEC,EAAApD,KAAKC,kBAAc,MAAAmD,SAAA,SAAAA,EAAEC,cACrBC,EAAAtD,KAAKyB,kBAAc,MAAA6B,SAAA,SAAAA,EAAEC,oBACnB,aACAvD,KAAK2B,gB,CAIT,iBAAA6B,GACER,EAAoBhD,KAAKuB,SAAUvB,KAAKS,IAExCT,KAAKiD,2BACLjD,KAAK6C,mBAAqB7C,KAAK0C,kB,CAGjC,gBAAAe,GACEzD,KAAK2B,kBACL+B,EAAoB1D,KAAKK,mBACzBL,KAAKwB,wBAELmC,EACE,CACE,CAAEC,KAAM5D,KAAKyC,MAAOoB,SAAU,SAC9B,CAAED,KAAM5D,KAAKuC,KAAMsB,SAAU,SAE/B,c,CAKJ,aAAAC,EAAcC,OAAEA,EAAMC,OAAEA,I,MACtBhE,KAAK+B,aAAegC,EAAOlC,MAC3B,MAAMoC,EAAiBD,EACvBhE,KAAKkE,SAASC,KAAK,CACjBtC,MAAO7B,KAAK+B,aACZkC,eAAgB,CACdG,MAAOH,EACPI,gBAAgBjB,EAAAa,IAAc,MAAdA,SAAc,SAAdA,EAAgBK,cAAc,oBAAgB,MAAAlB,SAAA,SAAAA,EAAEvB,SAIpE,GAAI7B,KAAKa,eAAiB8B,UAAW,CACnC3C,KAAKa,aAAasB,SAAQ,CAACC,EAAaC,KACtCD,EAAYE,SAAW2B,IAAmB7B,EAC1C,GAAIA,EAAYE,SAAU,CACxBtC,KAAKe,cAAgBsB,C,KAGzBrC,KAAK4B,4BAA4B5B,KAAKe,cAAgB,GAAK,EAAI,E,EAKnE,aAAAwD,GACE,MAAMN,EAAiBjE,KAAKa,aAAa2D,WACtCpC,GAAgBA,EAAYE,WAE/B,GAAI2B,EAAiB,EAAG,CACtBjE,KAAK4B,4BAA4B,GACjC5B,KAAKe,cAAgBkD,C,EAYjB,gBAAA1D,G,QACN,GAAIP,KAAK0C,qBAAuB1C,KAAKG,iBAAkB,CACrD,IAAIsE,EAAa,EACjB,GAAIzC,MAAM0C,QAAQ1E,KAAKa,eAAiBb,KAAKa,aAAaQ,OAAS,EAAG,CACpErB,KAAKa,aAAasB,SAAQ,EAAGwC,eAAeC,EAAGC,KAC7CJ,GAAcE,EACd,GAAIC,EAAIC,EAAIxD,OAAS,EAAGoD,GAAc,EAAE,G,KAErC,CACLA,EAAa,C,CAGf,GAAIzE,KAAK0C,oBAAsB1C,KAAKG,iBAAkB,CACpD,GACEH,KAAKa,eAAiB8B,YACrB3C,KAAKa,aAAaQ,OAAS,GACzBrB,KAAKa,aAAaQ,SAAW,IAC3BuB,EAAW5C,KAAKa,aAAa,GAAIb,KAAKE,mBACrC0C,EAAW5C,KAAKa,aAAa,GAAIb,KAAKE,oBAC5C,CACAF,KAAK6C,mBAAqB7C,KAAKI,c,KAC1B,CACL,GAAIqE,KAAcrB,EAAApD,KAAKyB,kBAAc,MAAA2B,SAAA,SAAAA,EAAEuB,aAAa,CAClD3E,KAAK6C,mBAAqB7C,KAAKI,c,MAC1B,GAAIqE,IAAanB,EAAAtD,KAAKyB,kBAAc,MAAA6B,SAAA,SAAAA,EAAEqB,aAAa,CACxD3E,KAAK6C,mBAAqB7C,KAAKG,gB,KA8FzC,MAAA2E,GACEC,EACE,KACA/E,KAAKS,GACLT,KAAKuC,KACLvC,KAAK+B,aACL/B,KAAKuB,UAGP,OACEyD,EAACC,EAAI,CACHC,UAAWlF,KAAKU,cAChByE,MAAO,CAAEC,MAAOpF,KAAKoF,OAASpF,KAAKqF,OAAS,UAE5CL,EAAA,OACEM,KAAK,aAAY,aACL,GAAGtF,KAAKyC,QAAQzC,KAAKuF,SAAW,aAAe,OAEzDvF,KAAKwF,WACLR,EAAA,kBACEG,MAAO,CAAE,CAAC,GAAGnF,KAAKyF,oBAAqB,MACvChD,MAAOzC,KAAKyC,MACZiD,WAAY1F,KAAK0F,WACjBH,SAAUvF,KAAKuF,SACfhE,SAAUvB,KAAKuB,WAGnByD,EAAA,OACEG,MAAO,CACL,0BAA2B,KAC3BQ,WAAY3F,KAAK6C,qBAAuB7C,KAAKG,kBAE/CyF,IAAMnF,GAAQT,KAAKyB,eAAiBhB,GAEpCuE,EAAA,eAGHa,EAAoB7F,KAAKyF,iBAAkBzF,KAAKuB,WAC/CyD,EAAA,uBACEc,aAAa,SACbC,OAAQ/F,KAAKyF,iBACbO,QAAShG,KAAKiG,iB"}
|