npm - @ukic/web-components - Versions diffs - 2.0.0-alpha.125 → 2.0.0 - Mend

@ukic/web-components 2.0.0-alpha.125 → 2.0.0

Files changed (572) hide show

package/dist/core/{p-b70f2538.entry.js.map → p-21025b10.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=shadow","src/components/ic-menu/ic-menu.tsx"],"names":["icInputComponentContainerCss","InputComponentContainer","[object Object]","dense","validationStatus","disabled","readonly","multiLine","fullWidth","dark","validationInline","this","hasValidationStatus","h","Host","class","focus-indicator","isSlotUsed","host","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","ungroupedOptions","preventClickOpen","handleMenuChange","open","focusInput","popperInstance","destroy","menuChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","optionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","arrowBehaviour","event","preventDefault","setHighlightedOption","highlightedIndex","optionHighlighted","options","undefined","autoSetInputValueKeyboardOpen","findIndex","option","isSearchableSelect","_a","tagName","key","keyboardNav","target","id","manSetInputValueKeyboardOpen","highlightedOptionIndex","menuOptionId","index","Array","from","shadowRoot","querySelectorAll","isSearchBar","parentEl","preventIncorrectTabOrder","focusFromSearchKeypress","setInputValue","setFocus","handleOptionClick","label","dataset","handleBlur","relatedTarget","menu","contains","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","description","getSortedOptions","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","displayOption","focused-option","initialOptionsListRender","last-recommended-option","disabled-option","role","tabindex","aria-label","aria-selected","aria-disabled","onClick","onBlur","onMouseDown","data-value","data-label","variant","aria-hidden","Check","optionsHeight","forEach","clientHeight","classList","add","onComponentRequiredPropUndefined","prop","propName","inputLabel","createPopper","anchorEl","placement","modifiers","offset","fallbackPlacements","rootBoundary","inputValueInOptions","some","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","full-width","no-focus","aria-activedescendant","_b","ref","el","onKeyDown","onKeyUp","childOption"],"mappings":"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","sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n /\n\n display: flex;\n border: 1px solid var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 40px;\n width: var(--input-width, 320px);\n padding: 1px;\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n position: relative;\n fill: var(--ic-architectural-400);\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: 1px dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-space-xxxs) solid var(--ic-status-error);\n padding: 0;\n}\n\nic-input-component-container.warning {\n border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n padding: 0;\n}\n\nic-input-component-container.success {\n border: var(--ic-space-xxxs) solid var(--ic-status-success);\n padding: 0;\n}\n\nic-input-component-container.dense {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 7px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.dense .icon-container {\n margin-top: 6px;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -5px;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 6px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n}\n\nic-input-component-container:hover {\n border-color: var(--ic-action-dark-hover);\n color: var(--ic-action-dark-hover);\n\n --expand-icon-hover: var(--ic-action-dark-hover);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -2px;\n padding: 2px;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n /\n disabled\n /\n @Prop() disabled: boolean = false;\n /\n readonly\n /\n @Prop() readonly: boolean = false;\n /\n validationStatus\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n dense\n /\n @Prop() dense: boolean = false;\n /\n multiLine\n /\n @Prop() multiLine: boolean = false;\n /\n validationInline\n /\n @Prop() validationInline: boolean = false;\n\n /\n Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n /\n @Prop() dark?: boolean = false;\n\n /\n If true then fill width of container\n /\n @Prop() fullWidth: boolean = false;\n\n @Element() host: HTMLIcInputComponentContainerElement;\n\n render() {\n const {\n dense,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n return (\n <Host\n class={{\n [\"dense\"]: dense,\n [validationStatus]: hasValidationStatus,\n [\"disabled\"]: disabled,\n [\"readonly\"]: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark,\n }}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark,\n }}\n >\n {isSlotUsed(this.host, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n","ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-input-container\",\n styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n /\n disabled\n /\n @Prop() disabled?: boolean = false;\n\n /\n readonly\n /\n @Prop() readonly?: boolean = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n [\"component-container\"]: true,\n [\"disabled\"]: this.disabled,\n [\"readonly\"]: this.readonly,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n@media (prefers-reduced-motion: no-preference) {\n :host([open]) .menu {\n transition: max-height var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n max-height: 0;\n width: var(--input-width, 320px);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popup-menu);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu {\n text-decoration: none;\n list-style-type: none;\n border: 1px solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n max-height: 0;\n overflow-y: hidden;\n}\n\n.menu-scroll {\n overflow-y: auto;\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host([open]) {\n max-height: none;\n display: block;\n}\n\n:host([open]) .menu {\n visibility: visible;\n max-height: 322px;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\n.option {\n padding: 8px 7px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([dense]) .option {\n padding: 4px 7px;\n}\n\n.option:last-child {\n border-radius: 0 0 1px 1px;\n}\n\n.option:first-child {\n border-radius: 1px 1px 0 0;\n}\n\n.option:not(.disabled-option):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n outline: none;\n}\n\n.option:not(.disabled-option) .option-description {\n color: var(--ic-color-secondary-text);\n}\n\n.option-text-container {\n pointer-events: none;\n}\n\n.check-icon {\n height: 24px;\n margin-left: 8px;\n pointer-events: none;\n}\n\n.focused-option .check-icon {\n fill: white;\n}\n\n.option-group-title {\n padding: 24px 7px 8px;\n color: var(--ic-color-tertiary-text);\n}\n\n:host([dense]) .option-group-title {\n padding: 12px 7px 4px;\n}\n\n.last-recommended-option {\n border-bottom: 1px solid var(--ic-architectural-400);\n}\n\n.disabled-option {\n color: var(--ic-architectural-200);\n cursor: default;\n pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n background-color: var(--ic-focus-blue) !important;\n color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n background-color: transparent;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Method,\n Listen,\n State,\n Watch,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport { IcActivationTypes, IcMenuOption } from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcOptionSelectEventDetail,\n IcMenuChangeEventDetail,\n IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\n\n@Component({\n tag: \"ic-menu\",\n styleUrl: \"ic-menu.css\",\n shadow: true,\n})\nexport class Menu {\n @Element() host: HTMLIcMenuElement;\n\n /*\n Specify whether the menu is open.\n /\n @Prop({ reflect: true }) open!: boolean;\n\n /\n Provide the possible selection options.\n /\n @Prop() options!: IcMenuOption[];\n\n /\n Specify whether dense styling is to be applied to the element.\n /\n @Prop({ reflect: true }) dense?: boolean = false;\n\n /\n Id of the menu.\n /\n @Prop() menuId!: string;\n\n /\n The value of the currently selected option.\n /\n @Prop() value!: string;\n\n /\n Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n Reference to the input element.\n /\n @Prop() inputEl!: HTMLElement;\n\n /\n @internal - set if ic-menu is nested inside another component\n /\n @Prop() parentEl?: HTMLElement;\n\n /\n Label for the input element.\n /\n @Prop() inputLabel!: string;\n\n /\n Reference to an anchor element the menu will position itself from when rendered.\n /\n @Prop() anchorEl!: HTMLElement;\n\n /\n If true then fill width of container\n /\n @Prop() fullWidth: boolean = false;\n\n /\n @internal If true, autofocus on selected item when menu is open\n /\n @Prop() autoFocusOnSelected: boolean = true;\n\n @State() keyboardNav: boolean = false;\n @State() optionHighlighted: string;\n @State() focusFromSearchKeypress: boolean = false;\n @State() initialOptionsListRender: boolean = false;\n @State() preventIncorrectTabOrder: boolean = false;\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n this.ungroupedOptions = [];\n this.loadUngroupedOptions();\n }\n\n /\n Emitted when an option is selected.\n /\n @Event() optionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n /\n Emitted when state of menu changes (i.e. open or close).\n /\n @Event() menuChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n /\n Emitted when an option has been highlighted\n /\n @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n @Listen(\"icClear\", { target: \"document\" })\n handleClearListener(): void {\n this.optionHighlighted = \"\";\n }\n\n @Listen(\"icSubmitSearch\", { target: \"document\" })\n handleSubmitSearch(): void {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.setInputValue(highlightedOptionIndex);\n }\n\n private menu: HTMLUListElement;\n private ungroupedOptions: IcMenuOption[] = [];\n private popperInstance: PopperInstance;\n\n // Prevents menu re-opening immediately after it is closed on blur when clicking input\n private preventClickOpen: boolean = false;\n\n private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n if (!open) this.popperInstance.destroy();\n this.menuChange.emit({ open, focusInput });\n\n if (!open && focusInput !== false) {\n this.inputEl.focus();\n this.preventClickOpen = false;\n }\n };\n\n private setNextOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex + 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex + 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n optionId: this.getOptionId(this.ungroupedOptions[0].value),\n });\n }\n };\n\n private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex - 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[this.ungroupedOptions.length - 1].value\n ),\n });\n }\n };\n\n /\n If menu is opened with the mouse, emit menuChange custom event.\n /\n @Method()\n async handleClickOpen(): Promise<void> {\n if (!this.preventClickOpen) {\n this.menuChange.emit({ open: !this.open });\n this.keyboardNav = false;\n }\n this.preventClickOpen = false;\n }\n\n /\n Used alongside activationType\n * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n * @param {KeyboardEvent} event - keyboard event\n /\n @Method()\n async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n this.keyboardNav = false;\n\n if (this.activationType === \"automatic\") {\n this.autoSetInputValueKeyboardOpen(event);\n } else {\n this.keyboardNav = true;\n this.manSetInputValueKeyboardOpen(event);\n }\n }\n\n /\n @internal Used to highlight the first option in the menu.\n */\n @Method()\n async handleSetFirstOption(): Promise<void> {\n this.setHighlightedOption(0);\n }\n\n private arrowBehaviour = (event: KeyboardEvent): void => {\n event.preventDefault();\n this.handleMenuChange(true);\n };\n\n private setHighlightedOption = (highlightedIndex: number): void => {\n this.optionHighlighted = this.options[highlightedIndex].value \|\| undefined;\n };\n\n private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl?.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setNextOptionValue(selectedOptionIndex);\n break;\n case \"ArrowUp\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setPreviousOptionValue(selectedOptionIndex);\n break;\n case \" \":\n case \"Enter\":\n if ((event.target as HTMLElement).id !== \"clear-button\") {\n this.handleMenuChange(true);\n }\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.menuOptionId.emit({ optionId: undefined });\n\n const getOptionId = (index: number): string =>\n Array.from(this.host.shadowRoot.querySelectorAll(\"li\"))[index].id;\n\n const isSearchBar = this.parentEl.tagName === \"IC-SEARCH-BAR\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.arrowBehaviour(event);\n if (highlightedOptionIndex < this.options.length - 1) {\n this.setHighlightedOption(highlightedOptionIndex + 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex + 1),\n });\n } else {\n this.setHighlightedOption(0);\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \"ArrowUp\":\n this.arrowBehaviour(event);\n if (\n highlightedOptionIndex <= 0 \|\|\n highlightedOptionIndex > this.options.length + 1\n ) {\n this.setHighlightedOption(this.options.length - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(this.options.length - 1),\n });\n } else {\n this.setHighlightedOption(highlightedOptionIndex - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex - 1),\n });\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \" \":\n case \"Enter\":\n event.preventDefault();\n this.setInputValue(highlightedOptionIndex);\n break;\n case \"Escape\":\n this.handleMenuChange(false);\n this.menuOptionId.emit({ optionId: undefined });\n break;\n case \"Shift\":\n case \"Tab\":\n this.preventIncorrectTabOrder = true;\n break;\n case \"Backspace\":\n if (isSearchBar) {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n default:\n if (isSearchBar && event.key !== \"Tab\") {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n }\n };\n\n private setInputValue = (highlightedOptionIndex: number) => {\n if (this.options[highlightedOptionIndex]) {\n this.optionSelect.emit({\n value: this.options[highlightedOptionIndex]?.value,\n });\n this.optionHighlighted = undefined;\n this.menuOptionId.emit({ optionId: undefined });\n }\n this.handleMenuChange(false);\n };\n\n private handleOptionClick = (event: Event): void => {\n const { value, label } = (event.target as HTMLLIElement).dataset;\n this.optionSelect.emit({ value, label });\n this.handleMenuChange(false);\n };\n\n private handleBlur = (event: FocusEvent): void => {\n if (event.relatedTarget !== this.inputEl) {\n if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n this.handleMenuChange(false, false);\n }\n } else {\n this.handleMenuChange(false);\n this.preventClickOpen = true;\n }\n };\n\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.autoSetValueOnMenuKeyDown(event);\n }\n };\n\n private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n event.cancelBubble = true;\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n this.setPreviousOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"ArrowDown\":\n event.preventDefault();\n this.setNextOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"Home\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n });\n this.keyboardNav = true;\n break;\n case \"End\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n });\n this.keyboardNav = true;\n break;\n case \" \":\n case \"Enter\":\n case \"Escape\":\n this.handleMenuChange(false);\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n case \"Shift\":\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private handleMenuKeyUp = (event: KeyboardEvent): void => {\n if (event.key === \"Tab\" && event.shiftKey) {\n this.preventClickOpen = false;\n }\n };\n\n private getOptionId = (value: string): string => {\n return `${this.menuId}-${value}`;\n };\n\n private getOptionAriaLabel = (\n option: IcMenuOption,\n parentOption: IcMenuOption\n ): string => {\n let ariaLabel = option.label;\n\n if (option.description) {\n ariaLabel = `${ariaLabel}, ${option.description}`;\n }\n\n if (parentOption) {\n return `${ariaLabel}, ${parentOption.label} group`;\n } else {\n return ariaLabel;\n }\n };\n\n private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n return options.sort((optionA, optionB) =>\n optionA.recommended && !optionB.recommended ? -1 : 0\n );\n };\n\n private isManualMode = this.activationType === \"manual\";\n\n private scrollToSelected = (menu: HTMLUListElement) => {\n const selectedOption = menu.querySelector(\n \".option[aria-selected]\"\n ) as HTMLElement;\n\n if (selectedOption) {\n const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n if (\n elTop > menu.scrollTop + menu.offsetHeight \|\|\n elTop < menu.scrollTop + menu.offsetHeight\n ) {\n menu.scrollTop = selectedOption.offsetTop;\n }\n selectedOption.focus();\n }\n };\n\n private loadUngroupedOptions = () => {\n if (this.options.length > 0) {\n this.options.map((option) => {\n if (option.children) {\n option.children.map(\n (option) => !option.disabled && this.ungroupedOptions.push(option)\n );\n } else if (!option.disabled) {\n this.ungroupedOptions.push(option);\n }\n });\n }\n this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n };\n\n connectedCallback(): void {\n if (this.parentEl?.tagName === \"IC-SEARCH-BAR\") {\n this.setHighlightedOption(0);\n this.initialOptionsListRender = true;\n }\n }\n\n componentWillLoad(): void {\n this.loadUngroupedOptions();\n }\n\n componentDidLoad(): void {\n let optionsHeight = 0;\n this.host.shadowRoot\n .querySelectorAll(\".option\")\n .forEach((option) => (optionsHeight += option.clientHeight));\n if (optionsHeight > 320) {\n this.menu.classList.add(\"menu-scroll\");\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.open, propName: \"open\" },\n { prop: this.options, propName: \"options\" },\n { prop: this.menuId, propName: \"menu-id\" },\n { prop: this.inputLabel, propName: \"input-label\" },\n //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n ],\n \"Menu\"\n );\n }\n\n componentDidRender(): void {\n if (this.open) {\n this.popperInstance = createPopper(this.anchorEl, this.host, {\n placement: \"bottom\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 7],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n }\n\n componentDidUpdate(): void {\n const inputValueInOptions: boolean = this.options.some(\n (option) => option.value === this.value\n );\n\n const optionHighlightedIsSet =\n this.optionHighlighted !== null &&\n this.optionHighlighted !== undefined &&\n this.optionHighlighted !== \"\";\n\n if (this.open && this.options.length !== 0) {\n if (\n this.value &&\n this.keyboardNav &&\n inputValueInOptions &&\n this.autoFocusOnSelected\n ) {\n this.scrollToSelected(this.menu);\n } else if (\n this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n this.inputEl.tagName !== \"INPUT\"\n ) {\n this.menu.focus();\n } else if (\n optionHighlightedIsSet &&\n !this.focusFromSearchKeypress &&\n !this.preventIncorrectTabOrder\n ) {\n const highlightedEl = this.host.shadowRoot.querySelector(\n `li[data-value=\"${this.optionHighlighted}\"]`\n ) as HTMLElement;\n\n if (highlightedEl) {\n highlightedEl.focus();\n }\n }\n }\n }\n\n private displayOption = (\n option: IcMenuOption,\n index?: number,\n parentOption?: IcMenuOption\n ): HTMLLIElement => {\n const { open, value } = this;\n\n return (\n <li\n id={this.getOptionId(option.value)}\n class={{\n option: true,\n \"focused-option\": this.isManualMode\n ? (this.keyboardNav \|\| this.initialOptionsListRender) &&\n option.value === this.optionHighlighted\n : this.keyboardNav && option.value === value,\n \"last-recommended-option\":\n option.recommended &&\n this.options[index + 1] &&\n !this.options[index + 1].recommended,\n \"disabled-option\": option.disabled,\n }}\n role=\"option\"\n tabindex={\n open &&\n (option.value === value \|\| option.value === this.optionHighlighted) &&\n this.keyboardNav\n ? \"0\"\n : \"-1\"\n }\n aria-label={this.getOptionAriaLabel(option, parentOption)}\n aria-selected={option.value === value}\n aria-disabled={option.disabled ? \"true\" : \"false\"}\n onClick={this.handleOptionClick}\n onBlur={this.handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n data-value={option.value}\n data-label={option.label}\n >\n <div class=\"option-text-container\">\n <ic-typography variant=\"body\" aria-hidden=\"true\">\n <p>{option.label}</p>\n </ic-typography>\n {option.description && (\n <ic-typography\n id={`${this.getOptionId(option.value)}-description`}\n class=\"option-description\"\n variant=\"caption\"\n aria-hidden=\"true\"\n >\n <p>{option.description}</p>\n </ic-typography>\n )}\n </div>\n {option.value === value &&\n this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n <span class=\"check-icon\" innerHTML={Check} />\n )}\n </li>\n );\n };\n\n render() {\n const { inputLabel, options, menuId, value, fullWidth } = this;\n\n return (\n <Host\n class={{\n \"full-width\": fullWidth,\n \"no-focus\": this.inputEl?.tagName === \"INPUT\",\n }}\n >\n {options.length !== 0 && (\n <ul\n id={menuId}\n class=\"menu\"\n role=\"listbox\"\n aria-label={inputLabel}\n aria-activedescendant={\n value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n }\n tabindex={\n open && !this.keyboardNav && this.inputEl?.tagName !== \"INPUT\"\n ? \"0\"\n : \"-1\"\n }\n ref={(el) => (this.menu = el)}\n onKeyDown={this.handleMenuKeyDown}\n onKeyUp={this.handleMenuKeyUp}\n onBlur={this.handleBlur}\n >\n {this.getSortedOptions(options).map((option, index) => {\n if (option.children) {\n if (option.children.length > 0) {\n return (\n <div>\n <ic-typography\n class=\"option-group-title\"\n role=\"presentation\"\n variant=\"subtitle-small\"\n >\n <p>{option.label}</p>\n </ic-typography>\n {option.children.map((childOption) =>\n this.displayOption(childOption, index, option)\n )}\n </div>\n );\n } else {\n return null;\n }\n } else {\n return this.displayOption(option, index);\n }\n })}\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=shadow","src/components/ic-menu/ic-menu.tsx"],"names":["icInputComponentContainerCss","InputComponentContainer","[object Object]","small","validationStatus","disabled","readonly","multiLine","fullWidth","dark","validationInline","this","hasValidationStatus","h","Host","class","focus-indicator","isSlotUsed","host","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","ungroupedOptions","preventClickOpen","handleMenuChange","open","focusInput","popperInstance","destroy","menuChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","optionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","arrowBehaviour","event","preventDefault","setHighlightedOption","highlightedIndex","optionHighlighted","options","undefined","autoSetInputValueKeyboardOpen","findIndex","option","isSearchableSelect","_a","tagName","key","keyboardNav","target","id","manSetInputValueKeyboardOpen","highlightedOptionIndex","menuOptionId","index","Array","from","shadowRoot","querySelectorAll","isSearchBar","parentEl","preventIncorrectTabOrder","focusFromSearchKeypress","setInputValue","setFocus","handleOptionClick","label","dataset","handleBlur","relatedTarget","menu","contains","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","description","getSortedOptions","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","displayOption","focused-option","initialOptionsListRender","last-recommended-option","disabled-option","role","tabindex","aria-label","aria-selected","aria-disabled","onClick","onBlur","onMouseDown","data-value","data-label","variant","aria-hidden","Check","optionsHeight","forEach","clientHeight","classList","add","onComponentRequiredPropUndefined","prop","propName","inputLabel","createPopper","anchorEl","placement","modifiers","offset","fallbackPlacements","rootBoundary","inputValueInOptions","some","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","full-width","no-focus","aria-activedescendant","_b","ref","el","onKeyDown","onKeyUp","childOption"],"mappings":"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","sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n /\n\n display: flex;\n border: 1px solid var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 40px;\n width: var(--input-width, 320px);\n padding: 1px;\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n position: relative;\n fill: var(--ic-architectural-400);\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: 1px dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-space-xxxs) solid var(--ic-status-error);\n padding: 0;\n}\n\nic-input-component-container.warning {\n border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n padding: 0;\n}\n\nic-input-component-container.success {\n border: var(--ic-space-xxxs) solid var(--ic-status-success);\n padding: 0;\n}\n\nic-input-component-container.small {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 7px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n margin-top: 6px;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -5px;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 6px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n}\n\nic-input-component-container:hover {\n border-color: var(--ic-action-dark-hover);\n color: var(--ic-action-dark-hover);\n\n --expand-icon-hover: var(--ic-action-dark-hover);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -2px;\n padding: 2px;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n /\n disabled\n /\n @Prop() disabled: boolean = false;\n /\n readonly\n /\n @Prop() readonly: boolean = false;\n /\n validationStatus\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n small\n /\n @Prop() small: boolean = false;\n /\n multiLine\n /\n @Prop() multiLine: boolean = false;\n /\n validationInline\n /\n @Prop() validationInline: boolean = false;\n\n /\n Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n /\n @Prop() dark?: boolean = false;\n\n /\n If true then fill width of container\n /\n @Prop() fullWidth: boolean = false;\n\n @Element() host: HTMLIcInputComponentContainerElement;\n\n render() {\n const {\n small,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n return (\n <Host\n class={{\n [\"small\"]: small,\n [validationStatus]: hasValidationStatus,\n [\"disabled\"]: disabled,\n [\"readonly\"]: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark,\n }}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark,\n }}\n >\n {isSlotUsed(this.host, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n","ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-input-container\",\n styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n /\n disabled\n /\n @Prop() disabled?: boolean = false;\n\n /\n readonly\n /\n @Prop() readonly?: boolean = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n [\"component-container\"]: true,\n [\"disabled\"]: this.disabled,\n [\"readonly\"]: this.readonly,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n@media (prefers-reduced-motion: no-preference) {\n :host([open]) .menu {\n transition: max-height var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n max-height: 0;\n width: var(--input-width, 320px);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popup-menu);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu {\n text-decoration: none;\n list-style-type: none;\n border: 1px solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n max-height: 0;\n overflow-y: hidden;\n}\n\n.menu-scroll {\n overflow-y: auto;\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host([open]) {\n max-height: none;\n display: block;\n}\n\n:host([open]) .menu {\n visibility: visible;\n max-height: 322px;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\n.option {\n padding: 8px 7px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([small]) .option {\n padding: 4px 7px;\n}\n\n.option:last-child {\n border-radius: 0 0 1px 1px;\n}\n\n.option:first-child {\n border-radius: 1px 1px 0 0;\n}\n\n.option:not(.disabled-option):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n outline: none;\n}\n\n.option:not(.disabled-option) .option-description {\n color: var(--ic-color-secondary-text);\n}\n\n.option-text-container {\n pointer-events: none;\n}\n\n.check-icon {\n height: 24px;\n margin-left: 8px;\n pointer-events: none;\n}\n\n.focused-option .check-icon {\n fill: white;\n}\n\n.option-group-title {\n padding: 24px 7px 8px;\n color: var(--ic-color-tertiary-text);\n}\n\n:host([small]) .option-group-title {\n padding: 12px 7px 4px;\n}\n\n.last-recommended-option {\n border-bottom: 1px solid var(--ic-architectural-400);\n}\n\n.disabled-option {\n color: var(--ic-architectural-200);\n cursor: default;\n pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n background-color: var(--ic-focus-blue) !important;\n color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n background-color: transparent;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Method,\n Listen,\n State,\n Watch,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport { IcActivationTypes, IcMenuOption } from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcOptionSelectEventDetail,\n IcMenuChangeEventDetail,\n IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\n\n@Component({\n tag: \"ic-menu\",\n styleUrl: \"ic-menu.css\",\n shadow: true,\n})\nexport class Menu {\n @Element() host: HTMLIcMenuElement;\n\n /*\n Specify whether the menu is open.\n /\n @Prop({ reflect: true }) open!: boolean;\n\n /\n Provide the possible selection options.\n /\n @Prop() options!: IcMenuOption[];\n\n /\n Specify whether small styling is to be applied to the element.\n /\n @Prop({ reflect: true }) small?: boolean = false;\n\n /\n Id of the menu.\n /\n @Prop() menuId!: string;\n\n /\n The value of the currently selected option.\n /\n @Prop() value!: string;\n\n /\n Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n /\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /\n Reference to the input element.\n /\n @Prop() inputEl!: HTMLElement;\n\n /\n @internal - set if ic-menu is nested inside another component\n /\n @Prop() parentEl?: HTMLElement;\n\n /\n Label for the input element.\n /\n @Prop() inputLabel!: string;\n\n /\n Reference to an anchor element the menu will position itself from when rendered.\n /\n @Prop() anchorEl!: HTMLElement;\n\n /\n If true then fill width of container\n /\n @Prop() fullWidth: boolean = false;\n\n /\n @internal If true, autofocus on selected item when menu is open\n /\n @Prop() autoFocusOnSelected: boolean = true;\n\n @State() keyboardNav: boolean = false;\n @State() optionHighlighted: string;\n @State() focusFromSearchKeypress: boolean = false;\n @State() initialOptionsListRender: boolean = false;\n @State() preventIncorrectTabOrder: boolean = false;\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n this.ungroupedOptions = [];\n this.loadUngroupedOptions();\n }\n\n /\n Emitted when an option is selected.\n /\n @Event() optionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n /\n Emitted when state of menu changes (i.e. open or close).\n /\n @Event() menuChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n /\n Emitted when an option has been highlighted\n /\n @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n @Listen(\"icClear\", { target: \"document\" })\n handleClearListener(): void {\n this.optionHighlighted = \"\";\n }\n\n @Listen(\"icSubmitSearch\", { target: \"document\" })\n handleSubmitSearch(): void {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.setInputValue(highlightedOptionIndex);\n }\n\n private menu: HTMLUListElement;\n private ungroupedOptions: IcMenuOption[] = [];\n private popperInstance: PopperInstance;\n\n // Prevents menu re-opening immediately after it is closed on blur when clicking input\n private preventClickOpen: boolean = false;\n\n private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n if (!open) this.popperInstance.destroy();\n this.menuChange.emit({ open, focusInput });\n\n if (!open && focusInput !== false) {\n this.inputEl.focus();\n this.preventClickOpen = false;\n }\n };\n\n private setNextOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex + 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex + 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n optionId: this.getOptionId(this.ungroupedOptions[0].value),\n });\n }\n };\n\n private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex - 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[this.ungroupedOptions.length - 1].value\n ),\n });\n }\n };\n\n /\n If menu is opened with the mouse, emit menuChange custom event.\n /\n @Method()\n async handleClickOpen(): Promise<void> {\n if (!this.preventClickOpen) {\n this.menuChange.emit({ open: !this.open });\n this.keyboardNav = false;\n }\n this.preventClickOpen = false;\n }\n\n /\n Used alongside activationType\n * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n * @param {KeyboardEvent} event - keyboard event\n /\n @Method()\n async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n this.keyboardNav = false;\n\n if (this.activationType === \"automatic\") {\n this.autoSetInputValueKeyboardOpen(event);\n } else {\n this.keyboardNav = true;\n this.manSetInputValueKeyboardOpen(event);\n }\n }\n\n /\n @internal Used to highlight the first option in the menu.\n */\n @Method()\n async handleSetFirstOption(): Promise<void> {\n this.setHighlightedOption(0);\n }\n\n private arrowBehaviour = (event: KeyboardEvent): void => {\n event.preventDefault();\n this.handleMenuChange(true);\n };\n\n private setHighlightedOption = (highlightedIndex: number): void => {\n this.optionHighlighted = this.options[highlightedIndex].value \|\| undefined;\n };\n\n private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl?.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setNextOptionValue(selectedOptionIndex);\n break;\n case \"ArrowUp\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setPreviousOptionValue(selectedOptionIndex);\n break;\n case \" \":\n case \"Enter\":\n if ((event.target as HTMLElement).id !== \"clear-button\") {\n this.handleMenuChange(true);\n }\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.menuOptionId.emit({ optionId: undefined });\n\n const getOptionId = (index: number): string =>\n Array.from(this.host.shadowRoot.querySelectorAll(\"li\"))[index].id;\n\n const isSearchBar = this.parentEl.tagName === \"IC-SEARCH-BAR\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.arrowBehaviour(event);\n if (highlightedOptionIndex < this.options.length - 1) {\n this.setHighlightedOption(highlightedOptionIndex + 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex + 1),\n });\n } else {\n this.setHighlightedOption(0);\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \"ArrowUp\":\n this.arrowBehaviour(event);\n if (\n highlightedOptionIndex <= 0 \|\|\n highlightedOptionIndex > this.options.length + 1\n ) {\n this.setHighlightedOption(this.options.length - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(this.options.length - 1),\n });\n } else {\n this.setHighlightedOption(highlightedOptionIndex - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex - 1),\n });\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \" \":\n case \"Enter\":\n event.preventDefault();\n this.setInputValue(highlightedOptionIndex);\n break;\n case \"Escape\":\n this.handleMenuChange(false);\n this.menuOptionId.emit({ optionId: undefined });\n break;\n case \"Shift\":\n case \"Tab\":\n this.preventIncorrectTabOrder = true;\n break;\n case \"Backspace\":\n if (isSearchBar) {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n default:\n if (isSearchBar && event.key !== \"Tab\") {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n }\n };\n\n private setInputValue = (highlightedOptionIndex: number) => {\n if (this.options[highlightedOptionIndex]) {\n this.optionSelect.emit({\n value: this.options[highlightedOptionIndex]?.value,\n });\n this.optionHighlighted = undefined;\n this.menuOptionId.emit({ optionId: undefined });\n }\n this.handleMenuChange(false);\n };\n\n private handleOptionClick = (event: Event): void => {\n const { value, label } = (event.target as HTMLLIElement).dataset;\n this.optionSelect.emit({ value, label });\n this.handleMenuChange(false);\n };\n\n private handleBlur = (event: FocusEvent): void => {\n if (event.relatedTarget !== this.inputEl) {\n if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n this.handleMenuChange(false, false);\n }\n } else {\n this.handleMenuChange(false);\n this.preventClickOpen = true;\n }\n };\n\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.autoSetValueOnMenuKeyDown(event);\n }\n };\n\n private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n event.cancelBubble = true;\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n this.setPreviousOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"ArrowDown\":\n event.preventDefault();\n this.setNextOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"Home\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n });\n this.keyboardNav = true;\n break;\n case \"End\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n });\n this.keyboardNav = true;\n break;\n case \" \":\n case \"Enter\":\n case \"Escape\":\n this.handleMenuChange(false);\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n case \"Shift\":\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private handleMenuKeyUp = (event: KeyboardEvent): void => {\n if (event.key === \"Tab\" && event.shiftKey) {\n this.preventClickOpen = false;\n }\n };\n\n private getOptionId = (value: string): string => {\n return `${this.menuId}-${value}`;\n };\n\n private getOptionAriaLabel = (\n option: IcMenuOption,\n parentOption: IcMenuOption\n ): string => {\n let ariaLabel = option.label;\n\n if (option.description) {\n ariaLabel = `${ariaLabel}, ${option.description}`;\n }\n\n if (parentOption) {\n return `${ariaLabel}, ${parentOption.label} group`;\n } else {\n return ariaLabel;\n }\n };\n\n private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n return options.sort((optionA, optionB) =>\n optionA.recommended && !optionB.recommended ? -1 : 0\n );\n };\n\n private isManualMode = this.activationType === \"manual\";\n\n private scrollToSelected = (menu: HTMLUListElement) => {\n const selectedOption = menu.querySelector(\n \".option[aria-selected]\"\n ) as HTMLElement;\n\n if (selectedOption) {\n const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n if (\n elTop > menu.scrollTop + menu.offsetHeight \|\|\n elTop < menu.scrollTop + menu.offsetHeight\n ) {\n menu.scrollTop = selectedOption.offsetTop;\n }\n selectedOption.focus();\n }\n };\n\n private loadUngroupedOptions = () => {\n if (this.options.length > 0) {\n this.options.map((option) => {\n if (option.children) {\n option.children.map(\n (option) => !option.disabled && this.ungroupedOptions.push(option)\n );\n } else if (!option.disabled) {\n this.ungroupedOptions.push(option);\n }\n });\n }\n this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n };\n\n connectedCallback(): void {\n if (this.parentEl?.tagName === \"IC-SEARCH-BAR\") {\n this.setHighlightedOption(0);\n this.initialOptionsListRender = true;\n }\n }\n\n componentWillLoad(): void {\n this.loadUngroupedOptions();\n }\n\n componentDidLoad(): void {\n let optionsHeight = 0;\n this.host.shadowRoot\n .querySelectorAll(\".option\")\n .forEach((option) => (optionsHeight += option.clientHeight));\n if (optionsHeight > 320) {\n this.menu.classList.add(\"menu-scroll\");\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.open, propName: \"open\" },\n { prop: this.options, propName: \"options\" },\n { prop: this.menuId, propName: \"menu-id\" },\n { prop: this.inputLabel, propName: \"input-label\" },\n //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n ],\n \"Menu\"\n );\n }\n\n componentDidRender(): void {\n if (this.open) {\n this.popperInstance = createPopper(this.anchorEl, this.host, {\n placement: \"bottom\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 7],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n }\n\n componentDidUpdate(): void {\n const inputValueInOptions: boolean = this.options.some(\n (option) => option.value === this.value\n );\n\n const optionHighlightedIsSet =\n this.optionHighlighted !== null &&\n this.optionHighlighted !== undefined &&\n this.optionHighlighted !== \"\";\n\n if (this.open && this.options.length !== 0) {\n if (\n this.value &&\n this.keyboardNav &&\n inputValueInOptions &&\n this.autoFocusOnSelected\n ) {\n this.scrollToSelected(this.menu);\n } else if (\n this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n this.inputEl.tagName !== \"INPUT\"\n ) {\n this.menu.focus();\n } else if (\n optionHighlightedIsSet &&\n !this.focusFromSearchKeypress &&\n !this.preventIncorrectTabOrder\n ) {\n const highlightedEl = this.host.shadowRoot.querySelector(\n `li[data-value=\"${this.optionHighlighted}\"]`\n ) as HTMLElement;\n\n if (highlightedEl) {\n highlightedEl.focus();\n }\n }\n }\n }\n\n private displayOption = (\n option: IcMenuOption,\n index?: number,\n parentOption?: IcMenuOption\n ): HTMLLIElement => {\n const { open, value } = this;\n\n return (\n <li\n id={this.getOptionId(option.value)}\n class={{\n option: true,\n \"focused-option\": this.isManualMode\n ? (this.keyboardNav \|\| this.initialOptionsListRender) &&\n option.value === this.optionHighlighted\n : this.keyboardNav && option.value === value,\n \"last-recommended-option\":\n option.recommended &&\n this.options[index + 1] &&\n !this.options[index + 1].recommended,\n \"disabled-option\": option.disabled,\n }}\n role=\"option\"\n tabindex={\n open &&\n (option.value === value \|\| option.value === this.optionHighlighted) &&\n this.keyboardNav\n ? \"0\"\n : \"-1\"\n }\n aria-label={this.getOptionAriaLabel(option, parentOption)}\n aria-selected={option.value === value}\n aria-disabled={option.disabled ? \"true\" : \"false\"}\n onClick={this.handleOptionClick}\n onBlur={this.handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n data-value={option.value}\n data-label={option.label}\n >\n <div class=\"option-text-container\">\n <ic-typography variant=\"body\" aria-hidden=\"true\">\n <p>{option.label}</p>\n </ic-typography>\n {option.description && (\n <ic-typography\n id={`${this.getOptionId(option.value)}-description`}\n class=\"option-description\"\n variant=\"caption\"\n aria-hidden=\"true\"\n >\n <p>{option.description}</p>\n </ic-typography>\n )}\n </div>\n {option.value === value &&\n this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n <span class=\"check-icon\" innerHTML={Check} />\n )}\n </li>\n );\n };\n\n render() {\n const { inputLabel, options, menuId, value, fullWidth } = this;\n\n return (\n <Host\n class={{\n \"full-width\": fullWidth,\n \"no-focus\": this.inputEl?.tagName === \"INPUT\",\n }}\n >\n {options.length !== 0 && (\n <ul\n id={menuId}\n class=\"menu\"\n role=\"listbox\"\n aria-label={inputLabel}\n aria-activedescendant={\n value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n }\n tabindex={\n open && !this.keyboardNav && this.inputEl?.tagName !== \"INPUT\"\n ? \"0\"\n : \"-1\"\n }\n ref={(el) => (this.menu = el)}\n onKeyDown={this.handleMenuKeyDown}\n onKeyUp={this.handleMenuKeyUp}\n onBlur={this.handleBlur}\n >\n {this.getSortedOptions(options).map((option, index) => {\n if (option.children) {\n if (option.children.length > 0) {\n return (\n <div>\n <ic-typography\n class=\"option-group-title\"\n role=\"presentation\"\n variant=\"subtitle-small\"\n >\n <p>{option.label}</p>\n </ic-typography>\n {option.children.map((childOption) =>\n this.displayOption(childOption, index, option)\n )}\n </div>\n );\n } else {\n return null;\n }\n } else {\n return this.displayOption(option, index);\n }\n })}\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/core/p-27528d04.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as i,H as s,g as o}from"./p-f9370be6.js";import{a as n,r,h as a}from"./p-c15bb762.js";import"./p-6f57b13c.js";const l='/! 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-label ic-typography{margin-bottom:var(--ic-space-sm)}';const h=class{constructor(i){t(this,i);this.icChange=e(this,"icChange",7);this.handleKeyDown=t=>{switch(t.key){case"ArrowDown":case"ArrowRight":this.radioOptions[this.getNextItemToSelect(this.selectedChild,true)].selected=true;t.preventDefault();break;case"ArrowUp":case"ArrowLeft":this.radioOptions[this.getNextItemToSelect(this.selectedChild,false)].selected=true;t.preventDefault()}};this.getNextItemToSelect=(t,e)=>{const i=this.radioOptions.length-1;if(t<1){t=0}let s=e?t+1:t-1;if(s<0){s=i}else if(s>i){s=0}if(this.radioOptions[s].disabled){s=this.getNextItemToSelect(s,e)}return s};this.label=undefined;this.name=undefined;this.required=false;this.hideLabel=false;this.disabled=false;this.helperText=undefined;this.small=false;this.validationStatus="";this.validationText="";this.checkedValue="";this.selectedChild=-1}selectHandler(t){this.checkedValue=t.detail.value;this.icChange.emit({value:this.checkedValue});if(this.radioOptions!==undefined){this.radioOptions.forEach(((t,e)=>{t.selected=this.checkedValue===t.value;if(t.selected){this.selectedChild=e}}));this.radioOptions[0].shadowRoot.querySelector("input").tabIndex=this.selectedChild>0?-1:0}}componentDidLoad(){this.radioOptions=Array.from(this.host.querySelectorAll("ic-radio-option"));this.radioOptions.forEach(((t,e)=>{if(!t.selected){t.selected=this.checkedValue===t.value}t.name=this.name;t.groupLabel=this.label;if(t.selected){this.selectedChild=e;this.checkedValue=t.value}}));this.radioOptions[0].shadowRoot.querySelector("input").tabIndex=this.selectedChild>0?-1:0;n([{prop:this.label,propName:"label"},{prop:this.name,propName:"name"}],"Radio Group")}render(){const t=a(this.validationStatus,this.disabled);r(true,this.host,this.name,this.checkedValue,this.disabled);return i(s,{onKeyDown:this.handleKeyDown},i("div",{role:"radiogroup","aria-label":`${this.label}${this.required?", required":""}`},!this.hideLabel&&i("ic-input-label",{class:{[`${this.validationStatus}`]:true},label:this.label,helperText:this.helperText,required:this.required,disabled:this.disabled}),i("slot",null)),i("ic-input-validation",{ariaLiveMode:"polite",status:t?this.validationStatus:"",message:t?this.validationText:""}))}get host(){return o(this)}};h.style=l;export{h as ic_radio_group};
2	+ //# sourceMappingURL=p-27528d04.entry.js.map

package/dist/core/{p-0cf51da5.entry.js.map → p-27528d04.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"names":["icRadioGroupCss","RadioGroup","this","handleKeyDown","event","key","radioOptions","getNextItemToSelect","selectedChild","selected","preventDefault","currentItem","movingDown","numRadios","length","nextItem","disabled","[object Object]","checkedValue","detail","value","icChange","emit","undefined","forEach","radioOption","index","shadowRoot","querySelector","tabIndex","Array","from","host","querySelectorAll","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","hadValidationStatus","hasValidationStatus","validationStatus","renderHiddenInput","h","Host","onKeyDown","role","aria-label","required","hideLabel","class","helperText","ariaLiveMode","status","message","validationText"],"mappings":"~~kHAAA~~,MAAMA,EAAkB,8+ECwBXC,EAAU,kEA2EbC,KAAAC,cAAiBC,IACvB,OAAQA,EAAMC,KACZ,IAAK,YACL,IAAK,aACHH,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,OAC7CC,SAAW,KACbL,EAAMM,iBACN,MACF,IAAK,UACL,IAAK,YACHR,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,QAC7CC,SAAW,KACbL,EAAMM,mBAIJR,KAAAK,oBAAsB,CAC5BI,EACAC,KAEA,MAAMC,EAAYX,KAAKI,aAAaQ,OAAS,EAE7C,GAAIH,EAAc,EAAG,CACnBA,EAAc,EAGhB,IAAII,EAAWH,EAAaD,EAAc,EAAIA,EAAc,EAG5D,GAAII,EAAW,EAAG,CAChBA,EAAWF,OACN,GAAIE,EAAWF,EAAW,CAC/BE,EAAW,EAIb,GAAIb,KAAKI,aAAaS,GAAUC,SAAU,CACxCD,EAAWb,KAAKK,oBAAoBQ,EAAUH,GAGhD,OAAOG,0DAnGmB,qBAKC,oBAKD,2CAUH,4BAI8B,uBAItB,qBAID,uBACE,EAQlCE,cAAcb,GACZF,KAAKgB,aAAed,EAAMe,OAAOC,MACjClB,KAAKmB,SAASC,KAAK,CAAEF,MAAOlB,KAAKgB,eAEjC,GAAIhB,KAAKI,eAAiBiB,UAAW,CACnCrB,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtCD,EAAYhB,SAAWP,KAAKgB,eAAiBO,EAAYL,MACzD,GAAIK,EAAYhB,SAAU,CACxBP,KAAKM,cAAgBkB,MAGzBxB,KAAKI,aAAa,GAAGqB,WAAWC,cAAc,SAASC,SACrD3B,KAAKM,cAAgB,GAAK,EAAI,GAiDpCS,mBACEf,KAAKI,aAAewB,MAAMC,KACxB7B,KAAK8B,KAAKC,iBAAiB,oBAG7B/B,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtC,IAAKD,EAAYhB,SAAU,CACzBgB,EAAYhB,SAAWP,KAAKgB,eAAiBO,EAAYL,MAE3DK,EAAYS,KAAOhC,KAAKgC,KACxBT,EAAYU,WAAajC,KAAKkC,MAC9B,GAAIX,EAAYhB,SAAU,CACxBP,KAAKM,cAAgBkB,EACrBxB,KAAKgB,aAAeO,EAAYL,UAGpClB,KAAKI,aAAa,GAAGqB,WAAWC,cAAc,SAASC,SACrD3B,KAAKM,cAAgB,GAAK,EAAI,EAEhC6B,EACE,CACE,CAAEC,KAAMpC,KAAKkC,MAAOG,SAAU,SAC9B,CAAED,KAAMpC,KAAKgC,KAAMK,SAAU,SAE/B,eAIJtB,SACE,MAAMuB,EAAsBC,EAC1BvC,KAAKwC,iBACLxC,KAAKc,UAGP2B,EACE,KACAzC,KAAK8B,KACL9B,KAAKgC,KACLhC,KAAKgB,aACLhB,KAAKc,UAGP,OACE4B,EAACC,EAAI,CAACC,UAAW5C,KAAKC,eACpByC,EAAA,MAAA,CACEG,KAAK,aAAYC,aACL,GAAG9C,KAAKkC,QAAQlC,KAAK+C,SAAW,aAAe,OAEzD/C,KAAKgD,WACLN,EAAA,iBAAA,CACEO,MAAO,CAAElC,CAAC,GAAGf,KAAKwC,oBAAqB,MACvCN,MAAOlC,KAAKkC,MACZgB,WAAYlD,KAAKkD,WACjBH,SAAU/C,KAAK+C,SACfjC,SAAUd,KAAKc,WAGnB4B,EAAA,OAAA,OAEFA,EAAA,sBAAA,CACES,aAAa,SACbC,OAAQd,EAAsBtC,KAAKwC,iBAAmB,GACtDa,QAASf,EAAsBtC,KAAKsD,eAAiB","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioOptions: HTMLIcRadioOptionElement[];\n\n @Element() host: HTMLIcRadioGroupElement;\n\n /*\n Provide a label for the input.\n /\n @Prop() label!: string;\n\n /\n Provide a name for the input.\n /\n @Prop() name!: string;\n\n /\n Specify if the input requires a value.\n /\n @Prop() required: boolean = false;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n Specify whether the input is disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n Specify whether ~~dense~~ styling is to be applied to the element.\n /\n @Prop() ~~dense~~: boolean = false;\n /\n Provide validation status - 'error'\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n Provide validation text - 'error'\n /\n @Prop() validationText: string = \"\";\n /\n Provide checked state\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"radioOptionSelect\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\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 ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\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 componentDidLoad(): void {\n this.radioOptions = Array.from(\n this.host.querySelectorAll(\"ic-radio-option\")\n );\n\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 });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n render() {\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host onKeyDown={this.handleKeyDown}>\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 <slot></slot>\n </div>\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={hadValidationStatus ? this.validationStatus : \"\"}\n message={hadValidationStatus ? this.validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"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"],"names":["icRadioGroupCss","RadioGroup","this","handleKeyDown","event","key","radioOptions","getNextItemToSelect","selectedChild","selected","preventDefault","currentItem","movingDown","numRadios","length","nextItem","disabled","[object Object]","checkedValue","detail","value","icChange","emit","undefined","forEach","radioOption","index","shadowRoot","querySelector","tabIndex","Array","from","host","querySelectorAll","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","hadValidationStatus","hasValidationStatus","validationStatus","renderHiddenInput","h","Host","onKeyDown","role","aria-label","required","hideLabel","class","helperText","ariaLiveMode","status","message","validationText"],"mappings":"qIAAA,MAAMA,EAAkB,8+ECwBXC,EAAU,kEA2EbC,KAAAC,cAAiBC,IACvB,OAAQA,EAAMC,KACZ,IAAK,YACL,IAAK,aACHH,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,OAC7CC,SAAW,KACbL,EAAMM,iBACN,MACF,IAAK,UACL,IAAK,YACHR,KAAKI,aACHJ,KAAKK,oBAAoBL,KAAKM,cAAe,QAC7CC,SAAW,KACbL,EAAMM,mBAIJR,KAAAK,oBAAsB,CAC5BI,EACAC,KAEA,MAAMC,EAAYX,KAAKI,aAAaQ,OAAS,EAE7C,GAAIH,EAAc,EAAG,CACnBA,EAAc,EAGhB,IAAII,EAAWH,EAAaD,EAAc,EAAIA,EAAc,EAG5D,GAAII,EAAW,EAAG,CAChBA,EAAWF,OACN,GAAIE,EAAWF,EAAW,CAC/BE,EAAW,EAIb,GAAIb,KAAKI,aAAaS,GAAUC,SAAU,CACxCD,EAAWb,KAAKK,oBAAoBQ,EAAUH,GAGhD,OAAOG,0DAnGmB,qBAKC,oBAKD,2CAUH,4BAI8B,uBAItB,qBAID,uBACE,EAQlCE,cAAcb,GACZF,KAAKgB,aAAed,EAAMe,OAAOC,MACjClB,KAAKmB,SAASC,KAAK,CAAEF,MAAOlB,KAAKgB,eAEjC,GAAIhB,KAAKI,eAAiBiB,UAAW,CACnCrB,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtCD,EAAYhB,SAAWP,KAAKgB,eAAiBO,EAAYL,MACzD,GAAIK,EAAYhB,SAAU,CACxBP,KAAKM,cAAgBkB,MAGzBxB,KAAKI,aAAa,GAAGqB,WAAWC,cAAc,SAASC,SACrD3B,KAAKM,cAAgB,GAAK,EAAI,GAiDpCS,mBACEf,KAAKI,aAAewB,MAAMC,KACxB7B,KAAK8B,KAAKC,iBAAiB,oBAG7B/B,KAAKI,aAAakB,SAAQ,CAACC,EAAaC,KACtC,IAAKD,EAAYhB,SAAU,CACzBgB,EAAYhB,SAAWP,KAAKgB,eAAiBO,EAAYL,MAE3DK,EAAYS,KAAOhC,KAAKgC,KACxBT,EAAYU,WAAajC,KAAKkC,MAC9B,GAAIX,EAAYhB,SAAU,CACxBP,KAAKM,cAAgBkB,EACrBxB,KAAKgB,aAAeO,EAAYL,UAGpClB,KAAKI,aAAa,GAAGqB,WAAWC,cAAc,SAASC,SACrD3B,KAAKM,cAAgB,GAAK,EAAI,EAEhC6B,EACE,CACE,CAAEC,KAAMpC,KAAKkC,MAAOG,SAAU,SAC9B,CAAED,KAAMpC,KAAKgC,KAAMK,SAAU,SAE/B,eAIJtB,SACE,MAAMuB,EAAsBC,EAC1BvC,KAAKwC,iBACLxC,KAAKc,UAGP2B,EACE,KACAzC,KAAK8B,KACL9B,KAAKgC,KACLhC,KAAKgB,aACLhB,KAAKc,UAGP,OACE4B,EAACC,EAAI,CAACC,UAAW5C,KAAKC,eACpByC,EAAA,MAAA,CACEG,KAAK,aAAYC,aACL,GAAG9C,KAAKkC,QAAQlC,KAAK+C,SAAW,aAAe,OAEzD/C,KAAKgD,WACLN,EAAA,iBAAA,CACEO,MAAO,CAAElC,CAAC,GAAGf,KAAKwC,oBAAqB,MACvCN,MAAOlC,KAAKkC,MACZgB,WAAYlD,KAAKkD,WACjBH,SAAU/C,KAAK+C,SACfjC,SAAUd,KAAKc,WAGnB4B,EAAA,OAAA,OAEFA,EAAA,sBAAA,CACES,aAAa,SACbC,OAAQd,EAAsBtC,KAAKwC,iBAAmB,GACtDa,QAASf,EAAsBtC,KAAKsD,eAAiB","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioOptions: HTMLIcRadioOptionElement[];\n\n @Element() host: HTMLIcRadioGroupElement;\n\n /*\n Provide a label for the input.\n /\n @Prop() label!: string;\n\n /\n Provide a name for the input.\n /\n @Prop() name!: string;\n\n /\n Specify if the input requires a value.\n /\n @Prop() required: boolean = false;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n Specify whether the input is disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n Specify whether small styling is to be applied to the element.\n /\n @Prop() small: boolean = false;\n /\n Provide validation status - 'error'\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n Provide validation text - 'error'\n /\n @Prop() validationText: string = \"\";\n /\n Provide checked state\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"radioOptionSelect\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\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 ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\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 componentDidLoad(): void {\n this.radioOptions = Array.from(\n this.host.querySelectorAll(\"ic-radio-option\")\n );\n\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 });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n render() {\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host onKeyDown={this.handleKeyDown}>\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 <slot></slot>\n </div>\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={hadValidationStatus ? this.validationStatus : \"\"}\n message={hadValidationStatus ? this.validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}

package/dist/core/p-3013158d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as i,h as a,H as s,g as e}from"./p-f9370be6.js";import{n,A as o,i as r}from"./p-c15bb762.js";import"./p-6f57b13c.js";const l=":host{display:block}.popout-modal{position:absolute;top:0;right:0;bottom:0;left:0}.popout-menu{position:fixed;top:0;right:0;width:256px;bottom:0;background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden;z-index:calc(var(--ic-z-index-overlay) / 2)}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:190px;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:1px solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:1px solid var(--ic-architectural-200)}.menu-status-version-container{display:inline-flex;margin:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.menu-status{background-color:var(--ic-architectural-500);color:var(--ic-color-white-text);border-radius:80px;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm);margin-right:var(--ic-space-xs)}.menu-version{border-radius:16px;background-color:var(--ic-architectural-100);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}";const c=class{constructor(a){t(this,a);this.icNavigationMenuClose=i(this,"icNavigationMenuClose",7);this.hasButtons=false;this.hasNavigation=false;this.navItemAboveButtons=false;this.navGroupFirst=false;this.lastTabStop=null;this.closeButton=null;this.closeMenu=()=>{this.icNavigationMenuClose.emit()};this.focusCloseButton=()=>{if(this.closeButton.setFocus){this.closeButton.setFocus()}};this.focusLastTabStop=()=>{let t;if(this.lastTabStop!==null){switch(this.lastTabStop.tagName){case"IC-NAVIGATION-BUTTON":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-ITEM":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-GROUP":t=this.lastTabStop;t.setFocus();break;case"A":this.lastTabStop.focus();break}}};this.version="";this.status=""}navItemClickHandler(){this.closeMenu()}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(document.activeElement===this.navBarEl){t.preventDefault();this.focusLastTabStop()}}else if(document.activeElement===this.lastTabStop\|\|this.lastTabStop===null){t.preventDefault();this.focusCloseButton()}}else if(t.key==="Escape"){this.closeMenu()}}componentWillLoad(){this.navBarEl=document.querySelector("ic-top-navigation");const t=n(this.el,"navigation");if(t){this.hasNavigation=true;const i=t[t.length-1];if(i.tagName==="IC-NAVIGATION-ITEM"){this.navItemAboveButtons=true}const a=t[0];if(a.tagName==="IC-NAVIGATION-GROUP"){this.navGroupFirst=true}}const i=n(this.el,"buttons");if(i!==null){this.hasButtons=true;this.lastTabStop=i[i.length-1]}else{if(this.hasNavigation){const i=t[t.length-1];const a=o(i,"navigation-item");if(a!==null){this.lastTabStop=a}else{this.lastTabStop=i}}}}componentDidLoad(){this.focusCloseButton()}componentWillRender(){this.hasNavigation=r(this.el,"navigation");this.hasButtons=r(this.el,"buttons")}render(){return a(s,null,a("div",{class:"popout-modal",onClick:this.closeMenu}),a("div",{class:"popout-menu",role:"dialog","aria-modal":"true","aria-label":`${this.hasNavigation?"Navigation":"App"} menu`},a("span",{"aria-hidden":"true",id:"navigation-landmark-text",class:"navigation-landmark-text"},"Main navigation"),a("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":this.hasNavigation?"false":"true"},a("div",{class:{["menu-close-button-container"]:true,["nav-group-first"]:this.navGroupFirst}},a("ic-button",{ref:t=>this.closeButton=t,id:"menu-close-button",class:"menu-close-button",variant:"icon",size:"large","aria-label":`Close ${this.hasNavigation?"navigation":"app"} menu`,onClick:this.closeMenu},a("svg",{slot:"icon",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#1759BC"})))),this.hasNavigation&&a("slot",{name:"navigation"})),this.hasButtons&&a("div",{class:{["menu-buttons-container"]:true,["menu-buttons-container-nav-item-above"]:this.navItemAboveButtons}},a("slot",{name:"buttons"})),(this.status!==""\|\|this.version!=="")&&a("div",{class:"menu-status-version-container"},this.status!==""&&a("div",{class:"menu-status"},a("ic-typography",{variant:"label-uppercase","aria-label":"app tag",class:"menu-status-text"},this.status)),this.version!==""&&a("div",{class:"menu-version"},a("ic-typography",{variant:"label",class:"menu-version-text","aria-label":"app version"},this.version)))))}get el(){return e(this)}};c.style=l;export{c as ic_navigation_menu};
2	+ //# sourceMappingURL=p-3013158d.entry.js.map

package/dist/core/{p-01a17304.entry.js.map → p-3013158d.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":["icNavigationMenuCss","NavigationMenu","this","hasButtons","hasNavigation","navItemAboveButtons","navGroupFirst","lastTabStop","closeButton","closeMenu","icNavigationMenuClose","emit","focusCloseButton","setFocus","focusLastTabStop","focusEl","tagName","focus","[object Object]","ev","key","shiftKey","document","activeElement","navBarEl","preventDefault","querySelector","navigationEls","getSlotContent","el","lastEl","length","firstEl","buttonContent","slotContent","getSlot","isSlotUsed","h","Host","class","onClick","role","aria-modal","aria-label","aria-hidden","id","aria-labelledby","ref","variant","size","slot","width","height","viewBox","fill","xmlns","d","name","status","version"],"mappings":"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","sourcesContent":[":host {\n display: block;\n}\n\n.popout-modal {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 256px;\n bottom: 0;\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-primary-text);\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n z-index: calc(var(--ic-z-index-overlay) / 2);\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 190px;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: 1px solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: 1px solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: inline-flex;\n margin: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.menu-status {\n background-color: var(--ic-architectural-500);\n color: var(--ic-color-white-text);\n border-radius: 80px;\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-right: var(--ic-space-xs);\n}\n\n.menu-version {\n border-radius: 16px;\n background-color: var(--ic-architectural-100);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 90px;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n Version info to display\n /\n @Prop() version: string = \"\";\n\n /\n Status info to display\n /\n @Prop() status: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n @Listen(\"icNavItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private navItemAboveButtons: boolean = false;\n private navGroupFirst: boolean = false;\n private lastTabStop: HTMLElement = null;\n private closeButton: HTMLIcButtonElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n if (this.closeButton.setFocus) {\n this.closeButton.setFocus();\n }\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-ITEM\":\n focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n focusEl.setFocus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n render() {\n return (\n <Host>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"emphasis\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n slot=\"icon\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n fill=\"#1759BC\"\n />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div class=\"menu-status-version-container\">\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":["icNavigationMenuCss","NavigationMenu","this","hasButtons","hasNavigation","navItemAboveButtons","navGroupFirst","lastTabStop","closeButton","closeMenu","icNavigationMenuClose","emit","focusCloseButton","setFocus","focusLastTabStop","focusEl","tagName","focus","[object Object]","ev","key","shiftKey","document","activeElement","navBarEl","preventDefault","querySelector","navigationEls","getSlotContent","el","lastEl","length","firstEl","buttonContent","slotContent","getSlot","isSlotUsed","h","Host","class","onClick","role","aria-modal","aria-label","aria-hidden","id","aria-labelledby","ref","variant","size","slot","width","height","viewBox","fill","xmlns","d","name","status","version"],"mappings":"qIAAA,MAAMA,EAAsB,+4CCsBfC,EAAc,4FA2CjBC,KAAAC,WAAsB,MACtBD,KAAAE,cAAyB,MACzBF,KAAAG,oBAA+B,MAC/BH,KAAAI,cAAyB,MACzBJ,KAAAK,YAA2B,KAC3BL,KAAAM,YAAmC,KAGnCN,KAAAO,UAAY,KAClBP,KAAKQ,sBAAsBC,QAGrBT,KAAAU,iBAAmB,KACzB,GAAIV,KAAKM,YAAYK,SAAU,CAC7BX,KAAKM,YAAYK,aAIbX,KAAAY,iBAAmB,KACzB,IAAIC,EACJ,GAAIb,KAAKK,cAAgB,KAAM,CAC7B,OAAQL,KAAKK,YAAYS,SACvB,IAAK,uBACHD,EAAUb,KAAKK,YACfQ,EAAQF,WACR,MACF,IAAK,qBACHE,EAAUb,KAAKK,YACfQ,EAAQF,WACR,MACF,IAAK,sBACHE,EAAUb,KAAKK,YACfQ,EAAQF,WACR,MACF,IAAK,IACHX,KAAKK,YAAYU,QACjB,sBAzEkB,eAKD,GAQzBC,sBACEhB,KAAKO,YAIPS,cAAcC,GACZ,GAAIA,EAAGC,MAAQ,MAAO,CACpB,GAAID,EAAGE,SAAU,CACf,GAAIC,SAASC,gBAAkBrB,KAAKsB,SAAU,CAC5CL,EAAGM,iBACHvB,KAAKY,yBAEF,GACLQ,SAASC,gBAAkBrB,KAAKK,aAChCL,KAAKK,cAAgB,KACrB,CACAY,EAAGM,iBACHvB,KAAKU,yBAEF,GAAIO,EAAGC,MAAQ,SAAU,CAC9BlB,KAAKO,aA6CTS,oBACEhB,KAAKsB,SAAWF,SAASI,cAAc,qBACvC,MAAMC,EAAgBC,EAAe1B,KAAK2B,GAAI,cAC9C,GAAIF,EAAe,CACjBzB,KAAKE,cAAgB,KACrB,MAAM0B,EAASH,EAAcA,EAAcI,OAAS,GACpD,GAAID,EAAOd,UAAY,qBAAsB,CAC3Cd,KAAKG,oBAAsB,KAE7B,MAAM2B,EAAUL,EAAc,GAC9B,GAAIK,EAAQhB,UAAY,sBAAuB,CAC7Cd,KAAKI,cAAgB,MAGzB,MAAM2B,EAAgBL,EAAe1B,KAAK2B,GAAI,WAE9C,GAAII,IAAkB,KAAM,CAC1B/B,KAAKC,WAAa,KAClBD,KAAKK,YAAc0B,EAAcA,EAAcF,OAAS,OACnD,CACL,GAAI7B,KAAKE,cAAe,CACtB,MAAM0B,EAASH,EAAcA,EAAcI,OAAS,GAEpD,MAAMG,EAAcC,EAAQL,EAAQ,mBACpC,GAAII,IAAgB,KAAM,CACxBhC,KAAKK,YAAc2B,MACd,CACLhC,KAAKK,YAAcuB,KAM3BZ,mBACEhB,KAAKU,mBAGPM,sBACEhB,KAAKE,cAAgBgC,EAAWlC,KAAK2B,GAAI,cACzC3B,KAAKC,WAAaiC,EAAWlC,KAAK2B,GAAI,WAGxCX,SACE,OACEmB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAM,eAAeC,QAAStC,KAAKO,YACxC4B,EAAA,MAAA,CACEE,MAAM,cACNE,KAAK,SAAQC,aACF,OAAMC,aACL,GAAGzC,KAAKE,cAAgB,aAAe,cAEnDiC,EAAA,OAAA,CAAAO,cACc,OACZC,GAAG,2BACHN,MAAM,4BAA0B,mBAIlCF,EAAA,MAAA,CAAAS,kBACkB,2BAA0BF,cAC7B1C,KAAKE,cAAgB,QAAU,QAE5CiC,EAAA,MAAA,CACEE,MAAO,CACLrB,CAAC,+BAAgC,KACjCA,CAAC,mBAAoBhB,KAAKI,gBAG5B+B,EAAA,YAAA,CACEU,IAAMlB,GAAQ3B,KAAKM,YAAcqB,EACjCgB,GAAG,oBACHN,MAAM,oBACNS,QAAQ,OACRC,KAAK,QAAON,aACA,SACVzC,KAAKE,cAAgB,aAAe,aAEtCoC,QAAStC,KAAKO,WAEd4B,EAAA,MAAA,CACEa,KAAK,OACLC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENlB,EAAA,OAAA,CACEmB,EAAE,wGACFF,KAAK,eAKZpD,KAAKE,eAAiBiC,EAAA,OAAA,CAAMoB,KAAK,gBAEnCvD,KAAKC,YACJkC,EAAA,MAAA,CACEE,MAAO,CACLrB,CAAC,0BAA2B,KAC5BA,CAAC,yCACChB,KAAKG,sBAGTgC,EAAA,OAAA,CAAMoB,KAAK,cAGbvD,KAAKwD,SAAW,IAAMxD,KAAKyD,UAAY,KACvCtB,EAAA,MAAA,CAAKE,MAAM,iCACRrC,KAAKwD,SAAW,IACfrB,EAAA,MAAA,CAAKE,MAAM,eACTF,EAAA,gBAAA,CACEW,QAAQ,kBAAiBL,aACd,UACXJ,MAAM,oBAELrC,KAAKwD,SAIXxD,KAAKyD,UAAY,IAChBtB,EAAA,MAAA,CAAKE,MAAM,gBACTF,EAAA,gBAAA,CACEW,QAAQ,QACRT,MAAM,oBAAmBI,aACd,eAEVzC,KAAKyD","sourcesContent":[":host {\n display: block;\n}\n\n.popout-modal {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 256px;\n bottom: 0;\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-primary-text);\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n z-index: calc(var(--ic-z-index-overlay) / 2);\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 190px;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: 1px solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: 1px solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: inline-flex;\n margin: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.menu-status {\n background-color: var(--ic-architectural-500);\n color: var(--ic-color-white-text);\n border-radius: 80px;\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-right: var(--ic-space-xs);\n}\n\n.menu-version {\n border-radius: 16px;\n background-color: var(--ic-architectural-100);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 90px;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n Version info to display\n /\n @Prop() version: string = \"\";\n\n /\n Status info to display\n /\n @Prop() status: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n @Listen(\"icNavItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private navItemAboveButtons: boolean = false;\n private navGroupFirst: boolean = false;\n private lastTabStop: HTMLElement = null;\n private closeButton: HTMLIcButtonElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n if (this.closeButton.setFocus) {\n this.closeButton.setFocus();\n }\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-ITEM\":\n focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n focusEl.setFocus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n render() {\n return (\n <Host>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n slot=\"icon\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n fill=\"#1759BC\"\n />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div class=\"menu-status-version-container\">\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/core/p-36b25af4.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as o,H as i,g as a}from"./p-f9370be6.js";import{a as r}from"./p-c15bb762.js";import{I as n}from"./p-6f57b13c.js";const s='/! 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{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:40px;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:none}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-dark){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host([selected]){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host([disabled]){pointer-events:none;color:var(--ic-architectural-300)}:host([selected].with-transition){transition:all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:var(--label-color)}';const c=class{constructor(o){t(this,o);this.tabClick=e(this,"tabClick",7);this.tabFocus=e(this,"tabFocus",7);this.isInitialRender=true;this.focusFromClick=false;this.handleClick=()=>{this.tabClick.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});if(this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});this.focusFromClick=false}};this.handleFocus=()=>{if(!this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition})}};this.handleMouseDown=()=>{this.focusFromClick=true};this.contextId="default";this.disabled=false;this.selected=false;this.tabId=undefined;this.tabPosition=undefined;this.appearance="light"}componentDidUpdate(){this.isInitialRender=false}componentDidLoad(){r([{prop:this.tabPosition,propName:"tab-position"}],"Tab")}render(){const{disabled:t,selected:e,appearance:a}=this;return o(i,{class:{["with-transition"]:!this.isInitialRender,["ic-tab-dark"]:a===n.Dark},role:"tab","aria-selected":e?"true":"false",onClick:this.handleClick,onFocus:this.handleFocus,onMouseDown:this.handleMouseDown,"aria-disabled":t?"true":"false",tabindex:this.selected?0:-1},this.host.querySelector('[slot="icon"]')&&o("slot",{name:"icon"}),o("ic-typography",{class:"ic-tab-label",variant:"label"},o("span",null,o("slot",null))))}get host(){return a(this)}};c.style=s;export{c as ic_tab};
2	+ //# sourceMappingURL=p-36b25af4.entry.js.map

package/dist/core/p-36b25af4.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"names":["icTabCss","Tab","this","isInitialRender","focusFromClick","handleClick","tabClick","emit","tabId","contextId","position","tabPosition","tabFocus","handleFocus","handleMouseDown","[object Object]","onComponentRequiredPropUndefined","prop","propName","disabled","selected","appearance","h","Host","class","IcThemeForegroundEnum","Dark","role","aria-selected","onClick","onFocus","onMouseDown","aria-disabled","tabindex","host","querySelector","name","variant"],"mappings":"wIAAA,MAAMA,EAAW,mzHCyBJC,EAAG,qGAiCNC,KAAAC,gBAA2B,KAC3BD,KAAAE,eAA0B,MAE1BF,KAAAG,YAAc,KACpBH,KAAKI,SAASC,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjB,GAAIT,KAAKE,eAAgB,CACvBF,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjBT,KAAKE,eAAiB,QAIlBF,KAAAW,YAAc,KACpB,IAAKX,KAAKE,eAAgB,CACxBF,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,gBAKbT,KAAAY,gBAAkB,KAIxBZ,KAAKE,eAAiB,qBA9DsB,wBAKjB,oBAGiB,sEASI,QAgDlDW,qBACEb,KAAKC,gBAAkB,MAGzBY,mBACEC,EACE,CAAC,CAAEC,KAAMf,KAAKS,YAAaO,SAAU,iBACrC,OAIJH,SACE,MAAMI,SAAEA,EAAQC,SAAEA,EAAQC,WAAEA,GAAenB,KAC3C,OACEoB,EAACC,EAAI,CACHC,MAAO,CACLT,CAAC,oBAAqBb,KAAKC,gBAC3BY,CAAC,eAAgBM,IAAeI,EAAsBC,MAExDC,KAAK,MAAKC,gBACKR,EAAW,OAAS,QACnCS,QAAS3B,KAAKG,YACdyB,QAAS5B,KAAKW,YACdkB,YAAa7B,KAAKY,gBAAekB,gBAClBb,EAAW,OAAS,QACnCc,SAAU/B,KAAKkB,SAAW,GAAK,GAE9BlB,KAAKgC,KAAKC,cAAc,kBAAoBb,EAAA,OAAA,CAAMc,KAAK,SACxDd,EAAA,gBAAA,CAAeE,MAAM,eAAea,QAAQ,SAC1Cf,EAAA,OAAA,KACEA,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --indicator-color: var(--ic-action-default);\n --focus-indicator: var(--ic-border-focus);\n --label-color: var(--ic-color-primary-text);\n --background-color-hover: var(--ic-action-default-bg-hover);\n --background-color-active: var(--ic-action-default-bg-active);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--label-color);\n height: 40px;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n\n:host(:hover) {\n background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-dark) {\n --indicator-initial-color: rgb(255 255 255 / 0%);\n --indicator-color: rgb(255 255 255 / 100%);\n --focus-indicator: var(--ic-border-focus);\n --label-color: white;\n --background-color-hover: var(--ic-action-dark-bg-hover);\n --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host([selected]) {\n border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n pointer-events: none;\n}\n\n::slotted(svg) {\n fill: var(--label-color);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n */\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /**\n * Disables the tab.\n */\n @Prop() disabled?: boolean = false;\n\n /** @internal Will display a selected indicator and set tabIndex. */\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /** @internal The shared ID between panel and tab. */\n @Prop({ reflect: true }) tabId?: string;\n\n /** @internal The position of the tab inside the tabs array in context. */\n @Prop() tabPosition!: number;\n\n /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"light\";\n\n /**\n * Called when a tab is selected.\n */\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /**\n * @internal Called when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab\"\n );\n }\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-dark\"]: appearance === IcThemeForegroundEnum.Dark,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}

package/dist/core/p-3d6902a3.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as s,g as n}from"./p-f9370be6.js";import{a as i}from"./p-c15bb762.js";import"./p-6f57b13c.js";const o=":host{display:block}";const a=class{constructor(e){t(this,e);this.contextId="default";this.tabPosition=undefined;this.panelId=undefined;this.selectedTab=undefined}componentDidLoad(){i([{prop:this.tabPosition,propName:"tab-position"}],"Tab Panel")}render(){const{panelId:t,selectedTab:n}=this;return e(s,{role:"tabpanel",hidden:t!==undefined&&n!==undefined?!(t===n):true},e("div",null,e("slot",null)))}get host(){return n(this)}};a.style=o;export{a as ic_tab_panel};
2	+ //# sourceMappingURL=p-3d6902a3.entry.js.map

package/dist/core/{p-211465cf.entry.js.map → p-3d6902a3.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":["icTabPanelCss","TabPanel","[object Object]","onComponentRequiredPropUndefined","prop","this","tabPosition","propName","panelId","selectedTab","h","Host","role","hidden","undefined"],"mappings":"~~6FAAA~~,MAAMA,EAAgB,6BCQTC,EAAQ,8CAM2B,uFAW9CC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,YAAaC,SAAU,iBACrC,aAIJL,SACE,MAAMM,QAAEA,EAAOC,YAAEA,GAAgBJ,KACjC,OACEK,EAACC,EAAI,CACHC,KAAK,WACLC,OACEL,IAAYM,WAAaL,IAAgBK,YACnCN,IAAYC,GACd,MAGNC,EAAA,MAAA,KACEA,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /*\n Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /* @internal The position of the tab panel inside the tabs array in context. /\n @Prop({ reflect: true }) tabPosition!: number;\n\n /* @internal The shared ID that links the panel and tab. /\n @Prop({ reflect: true }) panelId?: string;\n\n /* @internal The shared ID of the currently selected tab. */\n @Prop() selectedTab?: string;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab Panel\"\n );\n }\n\n render() {\n const { panelId, selectedTab } = this;\n return (\n <Host\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":["icTabPanelCss","TabPanel","[object Object]","onComponentRequiredPropUndefined","prop","this","tabPosition","propName","panelId","selectedTab","h","Host","role","hidden","undefined"],"mappings":"qHAAA,MAAMA,EAAgB,6BCQTC,EAAQ,8CAM2B,uFAW9CC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,YAAaC,SAAU,iBACrC,aAIJL,SACE,MAAMM,QAAEA,EAAOC,YAAEA,GAAgBJ,KACjC,OACEK,EAACC,EAAI,CACHC,KAAK,WACLC,OACEL,IAAYM,WAAaL,IAAgBK,YACnCN,IAAYC,GACd,MAGNC,EAAA,MAAA,KACEA,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /*\n Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /* @internal The position of the tab panel inside the tabs array in context. /\n @Prop({ reflect: true }) tabPosition!: number;\n\n /* @internal The shared ID that links the panel and tab. /\n @Prop({ reflect: true }) panelId?: string;\n\n /* @internal The shared ID of the currently selected tab. */\n @Prop() selectedTab?: string;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab Panel\"\n );\n }\n\n render() {\n const { panelId, selectedTab } = this;\n return (\n <Host\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/core/p-400b34b9.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as i,g as a}from"./p-f9370be6.js";import{g as s,D as n,c as o,i as r}from"./p-c15bb762.js";import"./p-6f57b13c.js";const l='/! 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(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:1px solid var(--ic-architectural-300)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:304px;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.small{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:8px;margin:-8px}.input-area{grid-area:input-area}@media screen and (max-width: 576px){.main-content{grid-template-areas:"title-area"\n "action-area"\n "input-area";justify-content:flex-start}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}}';const d=class{constructor(e){t(this,e);this.resizeObserver=null;this.resizeObserverCallback=()=>{if(this.reverseOrder){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{const t=s();if(t!==this.deviceSize){this.deviceSize=t}const e=this.el.shadowRoot.querySelector("div.action-area");const i=[];for(let t=0;t<this.actionContent.length;t++){const e=this.actionContent[t];let a=e.offsetHeight;if(a===undefined){a=0}i.push(a)}const a=Math.max(...i);let o=e.offsetHeight;if(o===undefined){o=0}if(this.deviceSize>n.S&&o<=a&&!this.areButtonsReversed){this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed}else if((this.deviceSize>n.S&&o>a\|\|this.deviceSize<=n.S)&&this.areButtonsReversed){this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed}};this.heading=undefined;this.subheading=undefined;this.aligned="left";this.small=false;this.border=true;this.sticky=false;this.stickyDesktopOnly=false;this.reverseOrder=false;this.deviceSize=n.XL;this.areButtonsReversed=false;this.actionContent=undefined}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){o(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{small:t,border:a,heading:s,subheading:n,aligned:o,sticky:l,stickyDesktopOnly:d}=this;return e(i,{class:{["sticky"]:l,["sticky-desktop"]:!l&&d}},e("header",{class:{["border-bottom"]:a,["tabs"]:r(this.el,"tabs")}},e("ic-section-container",{aligned:o,fullHeight:r(this.el,"tabs")},r(this.el,"breadcrumbs")&&e("div",{class:"breadcrumb-area"},e("slot",{name:"breadcrumbs"})),e("div",{class:"main-content"},e("div",{class:"title-area"},e("div",{class:"header-content"},e("slot",{name:"heading"},e("ic-typography",{variant:t?"h4":"h2",class:"heading"},e("h2",null,s))),e("slot",{name:"heading-adornment"})),e("div",null,e("slot",{name:"subheading"},n&&e("ic-typography",{variant:"body",class:{["subheading"]:true,["small"]:t}},n)))),r(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})),r(this.el,"input")&&e("div",{class:"input-area"},e("slot",{name:"input"}))),(r(this.el,"stepper")\|\|r(this.el,"tabs"))&&e("div",{class:"navigation-area"},r(this.el,"stepper")&&!r(this.el,"tabs")&&e("slot",{name:"stepper"}),r(this.el,"tabs")&&e("nav",{class:"tabs-slot","aria-label":"navigation-landmark-page-header"},e("slot",{name:"tabs"}))))))}get el(){return a(this)}};d.style=l;export{d as ic_page_header};
2	+ //# sourceMappingURL=p-400b34b9.entry.js.map

package/dist/core/{p-7f27efda.entry.js.map → p-400b34b9.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"names":["icPageHeaderCss","PageHeader","this","resizeObserver","resizeObserverCallback","reverseOrder","applyReverseOrder","runResizeObserver","ResizeObserver","observe","el","currSize","getCurrentDeviceSize","deviceSize","actionArea","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","DEVICE_SIZES","S","areButtonsReversed","reverse","forEach","btn","append","XL","[object Object]","Array","from","querySelectorAll","checkResizeObserver","disconnect","dense","border","heading","subheading","aligned","sticky","stickyDesktopOnly","h","Host","class","isSlotUsed","fullHeight","name","variant","aria-label"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n}\n\nheader {\n background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n border-bottom: 1px solid var(--ic-architectural-300);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 304px;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n row-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading.dense {\n margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n margin: -8px;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/*\n @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n /\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n @Element() el: HTMLIcPageHeaderElement;\n /\n The title to render on the component.\n /\n @Prop() heading?: string;\n /\n The subtitle to render on the component.\n /\n @Prop() subheading?: string;\n /\n How the component should be aligned.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n /\n Whether the component uses dense styling.\n /\n @Prop() dense?: boolean = false;\n /\n Set whether the bottom border is used\n /\n @Prop() border?: boolean = true;\n /\n Set whether the header is sticky at all breakpoints\n /\n @Prop() sticky?: boolean = false;\n /* Set whether the header is only sticky for viewport widths of 992px and above\n /\n @Prop() stickyDesktopOnly?: boolean = false;\n /* Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n /\n @Prop() reverseOrder?: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() areButtonsReversed: boolean = false;\n\n @State() actionContent: Node[];\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n / For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) /\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n / The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n if (\n this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n } else if (\n ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) \|\|\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n }\n };\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n dense,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n } = this;\n\n return (\n <Host\n class={{\n [\"sticky\"]: sticky,\n [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n }}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={dense ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div>\n <slot name=\"subheading\">\n {subheading && (\n <ic-typography\n variant=\"body\"\n class={{ [\"subheading\"]: true, [\"dense\"]: dense }}\n >\n {subheading}\n </ic-typography>\n )}\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") \|\|\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav\n class=\"tabs-slot\"\n aria-label=\"navigation-landmark-page-header\"\n >\n <slot name=\"tabs\" />\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"names":["icPageHeaderCss","PageHeader","this","resizeObserver","resizeObserverCallback","reverseOrder","applyReverseOrder","runResizeObserver","ResizeObserver","observe","el","currSize","getCurrentDeviceSize","deviceSize","actionArea","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","DEVICE_SIZES","S","areButtonsReversed","reverse","forEach","btn","append","XL","[object Object]","Array","from","querySelectorAll","checkResizeObserver","disconnect","small","border","heading","subheading","aligned","sticky","stickyDesktopOnly","h","Host","class","isSlotUsed","fullHeight","name","variant","aria-label"],"mappings":"0IAAA,MAAMA,EAAkB,q9HC2BXC,EAAU,+BAuCbC,KAAAC,eAAiC,KAEjCD,KAAAE,uBAAyB,KAC/B,GAAIF,KAAKG,aAAc,CACrBH,KAAKI,sBAIDJ,KAAAK,kBAAoB,KAC1BL,KAAKC,eAAiB,IAAIK,gBAAe,KACvCN,KAAKE,4BAEPF,KAAKC,eAAeM,QAAQP,KAAKQ,KAG3BR,KAAAI,kBAAoB,KAC1B,MAAMK,EAAWC,IACjB,GAAID,IAAaT,KAAKW,WAAY,CAChCX,KAAKW,WAAaF,EAGpB,MAAMG,EAAaZ,KAAKQ,GAAGK,WAAWC,cACpC,mBAEF,MAAMC,EAA0B,GAGhC,IAAK,IAAIC,EAAI,EAAGA,EAAIhB,KAAKiB,cAAcC,OAAQF,IAAK,CAClD,MAAMG,EAASnB,KAAKiB,cAAcD,GAClC,IAAII,EAAeD,EAAOE,aAC1B,GAAID,IAAiBE,UAAW,CAC9BF,EAAe,EAEjBL,EAAcQ,KAAKH,GAGrB,MAAMI,EAAMC,KAAKD,OAAOT,GAGxB,IAAIW,EAAmBd,EAAWS,aAElC,GAAIK,IAAqBJ,UAAW,CAClCI,EAAmB,EAGrB,GACE1B,KAAKW,WAAagB,EAAaC,GAC/BF,GAAoBF,IACnBxB,KAAK6B,mBACN,CACA7B,KAAKiB,cAAgBjB,KAAKiB,cAAca,UACxC9B,KAAKiB,cAAcc,SAASC,IAC1BhC,KAAKQ,GAAGyB,OAAOD,MAEjBhC,KAAK6B,oBAAsB7B,KAAK6B,wBAC3B,IACH7B,KAAKW,WAAagB,EAAaC,GAAKF,EAAmBF,GACvDxB,KAAKW,YAAcgB,EAAaC,IAClC5B,KAAK6B,mBACL,CACA7B,KAAKiB,cAAgBjB,KAAKiB,cAAca,UACxC9B,KAAKiB,cAAcc,SAASC,IAC1BhC,KAAKQ,GAAGyB,OAAOD,MAEjBhC,KAAK6B,oBAAsB7B,KAAK6B,mFA1FJ,kBAIN,kBAIC,iBAIA,6BAGW,wBAGL,sBAEHF,EAAaO,2BAEJ,mCAwEvCC,oBACEnC,KAAKiB,cAAgBmB,MAAMC,KACzBrC,KAAKQ,GAAG8B,iBAAiB,qBAI7BH,mBACEI,EAAoBvC,KAAKK,mBAG3B8B,uBACE,GAAInC,KAAKC,iBAAmB,KAAM,CAChCD,KAAKC,eAAeuC,cAIxBL,SACE,MAAMM,MACJA,EAAKC,OACLA,EAAMC,QACNA,EAAOC,WACPA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,kBACNA,GACE/C,KAEJ,OACEgD,EAACC,EAAI,CACHC,MAAO,CACLf,CAAC,UAAWW,EACZX,CAAC,mBAAoBW,GAAUC,IAGjCC,EAAA,SAAA,CACEE,MAAO,CACLf,CAAC,iBAAkBO,EACnBP,CAAC,QAASgB,EAAWnD,KAAKQ,GAAI,UAGhCwC,EAAA,uBAAA,CACEH,QAASA,EACTO,WAAYD,EAAWnD,KAAKQ,GAAI,SAE/B2C,EAAWnD,KAAKQ,GAAI,gBACnBwC,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CAAMK,KAAK,iBAGfL,EAAA,MAAA,CAAKE,MAAM,gBACTF,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,OAAA,CAAMK,KAAK,WACTL,EAAA,gBAAA,CACEM,QAASb,EAAQ,KAAO,KACxBS,MAAM,WAENF,EAAA,KAAA,KAAKL,KAGTK,EAAA,OAAA,CAAMK,KAAK,uBAEbL,EAAA,MAAA,KACEA,EAAA,OAAA,CAAMK,KAAK,cACRT,GACCI,EAAA,gBAAA,CACEM,QAAQ,OACRJ,MAAO,CAAEf,CAAC,cAAe,KAAMA,CAAC,SAAUM,IAEzCG,MAMVO,EAAWnD,KAAKQ,GAAI,YACnBwC,EAAA,MAAA,CAAKE,MAAM,eACTF,EAAA,OAAA,CAAMK,KAAK,aAGdF,EAAWnD,KAAKQ,GAAI,UACnBwC,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,OAAA,CAAMK,KAAK,aAKfF,EAAWnD,KAAKQ,GAAI,YACpB2C,EAAWnD,KAAKQ,GAAI,UACpBwC,EAAA,MAAA,CAAKE,MAAM,mBACRC,EAAWnD,KAAKQ,GAAI,aAClB2C,EAAWnD,KAAKQ,GAAI,SAAWwC,EAAA,OAAA,CAAMK,KAAK,YAC5CF,EAAWnD,KAAKQ,GAAI,SACnBwC,EAAA,MAAA,CACEE,MAAM,YAAWK,aACN,mCAEXP,EAAA,OAAA,CAAMK,KAAK","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n}\n\nheader {\n background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n border-bottom: 1px solid var(--ic-architectural-300);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 304px;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n row-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading.small {\n margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n margin: -8px;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/*\n @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n /\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n @Element() el: HTMLIcPageHeaderElement;\n /\n The title to render on the component.\n /\n @Prop() heading?: string;\n /\n The subtitle to render on the component.\n /\n @Prop() subheading?: string;\n /\n How the component should be aligned.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n /\n Whether the component uses small styling.\n /\n @Prop() small?: boolean = false;\n /\n Set whether the bottom border is used\n /\n @Prop() border?: boolean = true;\n /\n Set whether the header is sticky at all breakpoints\n /\n @Prop() sticky?: boolean = false;\n /* Set whether the header is only sticky for viewport widths of 992px and above\n /\n @Prop() stickyDesktopOnly?: boolean = false;\n /* Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n /\n @Prop() reverseOrder?: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() areButtonsReversed: boolean = false;\n\n @State() actionContent: Node[];\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n / For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) /\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n / The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n if (\n this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n } else if (\n ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) \|\|\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n }\n };\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n small,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n } = this;\n\n return (\n <Host\n class={{\n [\"sticky\"]: sticky,\n [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n }}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={small ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div>\n <slot name=\"subheading\">\n {subheading && (\n <ic-typography\n variant=\"body\"\n class={{ [\"subheading\"]: true, [\"small\"]: small }}\n >\n {subheading}\n </ic-typography>\n )}\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") \|\|\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav\n class=\"tabs-slot\"\n aria-label=\"navigation-landmark-page-header\"\n >\n <slot name=\"tabs\" />\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"]}

package/dist/core/p-438e327e.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as i,g as o}from"./p-f9370be6.js";import{D as n,g as s,s as a,c as l}from"./p-c15bb762.js";import"./p-6f57b13c.js";const r='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:relative;display:block}.data{display:flex;align-items:center}.text-cells{display:flex;flex-grow:1;min-width:0}.label{width:200px;min-width:200px;margin-right:var(--ic-space-md);color:var(--ic-color-tertiary-text)}.value{flex-grow:1}.end-component{width:-moz-fit-content;width:fit-content;margin-left:56px}.divider{margin-top:var(--ic-space-md);height:1px;background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-xs)}:host(.breakpoint-medium) .label{width:160px;min-width:160px}:host(.breakpoint-xs) .text-cells{flex-direction:column}:host(.breakpoint-xs) .label{width:128px;margin-bottom:var(--ic-space-xs)}';const d=class{constructor(t){e(this,t);this.resizeObserver=null;this.hasEndComponent=false;this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.checkLabelAbove()}));this.resizeObserver.observe(this.el)};this.label=undefined;this.value=undefined;this.small=false;this.deviceSize=n.XL;this.entitySize=undefined}checkLabelAbove(){var e;const t=(e=this.el.shadowRoot.querySelector(".data"))===null\|\|e===void 0?void 0:e.clientWidth;if(t+46<n.S){this.entitySize="xs"}else if(t+46<n.M){this.entitySize="m"}else{this.entitySize="xl"}}labelEndComponent(){const e=this.el.shadowRoot.querySelectorAll("slot[name=end-component]");e.forEach((e=>e.setAttribute("aria-label","for "+this.label+" row")))}componentWillLoad(){this.deviceSize=s();this.hasEndComponent=a(this.el,"end-component")}componentDidLoad(){l(this.runResizeObserver);this.checkLabelAbove();if(this.hasEndComponent){this.labelEndComponent()}}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{label:e,value:o,small:n}=this;return t(i,{class:{["small"]:n,["breakpoint-medium"]:this.entitySize==="m",["breakpoint-xs"]:this.entitySize==="xs"},role:"listitem"},t("div",{class:"data"},t("div",{class:"text-cells"},t("div",{class:"label"},t("slot",{name:"label"},t("ic-typography",{variant:this.entitySize==="xs"?"label":"subtitle-large"},e))),t("div",{class:"value"},t("slot",{name:"value"},t("ic-typography",{variant:"body"},o)))),this.hasEndComponent&&t("div",{class:"end-component"},t("div",{role:"cell"},t("slot",{name:"end-component"})))),t("div",{class:"divider"}))}get el(){return o(this)}};d.style=r;export{d as ic_data_row};
2	+ //# sourceMappingURL=p-438e327e.entry.js.map

package/dist/core/{p-10531d9a.entry.js.map → p-438e327e.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","src/components/ic-data-row/ic-data-row.tsx"],"names":["icDataRowCss","DataRow","this","resizeObserver","hasEndComponent","runResizeObserver","ResizeObserver","checkLabelAbove","observe","el","DEVICE_SIZES","XL","[object Object]","rowSize","_a","shadowRoot","querySelector","clientWidth","S","entitySize","M","component","querySelectorAll","forEach","child","setAttribute","label","deviceSize","getCurrentDeviceSize","slotHasContent","checkResizeObserver","labelEndComponent","disconnect","value","~~dense~~","h","Host","class","role","name","variant"],"mappings":"~~kHAAA~~,MAAMA,EAAe,6/FCkBRC,EAAO,+BAsBVC,KAAAC,eAAiC,KAEjCD,KAAAE,gBAA2B,MAE3BF,KAAAG,kBAAoB,KAC1BH,KAAKC,eAAiB,IAAIG,gBAAe,KACvCJ,KAAKK,qBAGPL,KAAKC,eAAeK,QAAQN,KAAKO,0DAfV,sBAEKC,EAAaC,6BAgBnCC,wBACN,MAAMC,GAAUC,EAAAZ,KAAKO,GAAGM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,OAAA,EAAAA,EAAEG,YAC3D,GAAIJ,EAAU,GAAKH,EAAaQ,EAAG,CACjChB,KAAKiB,WAAa,UACb,GAAIN,EAAU,GAAKH,EAAaU,EAAG,CACxClB,KAAKiB,WAAa,QACb,CACLjB,KAAKiB,WAAa,MAIdP,oBACN,MAAMS,EAAYnB,KAAKO,GAAGM,WAAWO,iBACnC,4BAGFD,EAAUE,SAASC,GACjBA,EAAMC,aAAa,aAAc,OAASvB,KAAKwB,MAAQ,UAI3Dd,oBACEV,KAAKyB,WAAaC,IAClB1B,KAAKE,gBAAkByB,EAAe3B,KAAKO,GAAI,iBAGjDG,mBACEkB,EAAoB5B,KAAKG,mBACzBH,KAAKK,kBACL,GAAIL,KAAKE,gBAAiB,CACxBF,KAAK6B,qBAITnB,uBACE,GAAIV,KAAKC,iBAAmB,KAAM,CAChCD,KAAKC,eAAe6B,cAIxBpB,SACE,MAAMc,MAAEA,EAAKO,MAAEA,EAAKC,MAAEA,GAAUhC,KAEhC,OACEiC,EAACC,EAAI,CACHC,MAAO,CACLzB,CAAC,SAAUsB,EACXtB,CAAC,qBAAsBV,KAAKiB,aAAe,IAC3CP,CAAC,iBAAkBV,KAAKiB,aAAe,MAEzCmB,KAAK,YAELH,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,MAAA,CAAKE,MAAM,SACTF,EAAA,OAAA,CAAMI,KAAK,SACTJ,EAAA,gBAAA,CACEK,QACEtC,KAAKiB,aAAe,KAAO,QAAU,kBAGtCO,KAIPS,EAAA,MAAA,CAAKE,MAAM,SACTF,EAAA,OAAA,CAAMI,KAAK,SACTJ,EAAA,gBAAA,CAAeK,QAAQ,QAAQP,MAIpC/B,KAAKE,iBACJ+B,EAAA,MAAA,CAAKE,MAAM,iBACTF,EAAA,MAAA,CAAKG,KAAK,QACRH,EAAA,OAAA,CAAMI,KAAK,qBAKnBJ,EAAA,MAAA,CAAKE,MAAM","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 200px;\n min-width: 200px;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\n.end-component {\n width: fit-content;\n margin-left: 56px;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: 1px;\n background-color: var(--ic-architectural-300);\n}\n\n:host(.~~dense~~) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 160px;\n min-width: 160px;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 128px;\n margin-bottom: var(--ic-space-xs);\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/*\n @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n /\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n @Element() el: HTMLIcDataRowElement;\n\n /\n Set the label in the leftmost cell of the row\n /\n @Prop() label: string;\n\n /\n Set the value of the middle (right if no addition supplied) cell of the row\n /\n @Prop() value: string;\n\n /\n Set the row to ~~dense~~ styling, this is automatically applied if ~~dense~~ is set on the parent data heading\n */\n @Prop() ~~dense~~: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() entitySize: \"xl\" \| \"m\" \| \"xs\";\n\n private resizeObserver: ResizeObserver = null;\n\n private hasEndComponent: boolean = false;\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n if (rowSize + 46 < DEVICE_SIZES.S) {\n this.entitySize = \"xs\";\n } else if (rowSize + 46 < DEVICE_SIZES.M) {\n this.entitySize = \"m\";\n } else {\n this.entitySize = \"xl\";\n }\n }\n\n private labelEndComponent(): void {\n const component = this.el.shadowRoot.querySelectorAll(\n \"slot[name=end-component]\"\n );\n\n component.forEach((child: HTMLElement) =>\n child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n );\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n this.checkLabelAbove();\n if (this.hasEndComponent) {\n this.labelEndComponent();\n }\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const { label, value, ~~dense~~ } = this;\n\n return (\n <Host\n class={{\n [\"~~dense~~\"]: ~~dense~~,\n [\"breakpoint-medium\"]: this.entitySize === \"m\",\n [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography\n variant={\n this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n }\n >\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"value\">\n <slot name=\"value\">\n <ic-typography variant=\"body\">{value}</ic-typography>\n </slot>\n </div>\n </div>\n {this.hasEndComponent && (\n <div class=\"end-component\">\n <div role=\"cell\">\n <slot name=\"end-component\"></slot>\n </div>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","src/components/ic-data-row/ic-data-row.tsx"],"names":["icDataRowCss","DataRow","this","resizeObserver","hasEndComponent","runResizeObserver","ResizeObserver","checkLabelAbove","observe","el","DEVICE_SIZES","XL","[object Object]","rowSize","_a","shadowRoot","querySelector","clientWidth","S","entitySize","M","component","querySelectorAll","forEach","child","setAttribute","label","deviceSize","getCurrentDeviceSize","slotHasContent","checkResizeObserver","labelEndComponent","disconnect","value","small","h","Host","class","role","name","variant"],"mappings":"0IAAA,MAAMA,EAAe,6/FCkBRC,EAAO,+BAsBVC,KAAAC,eAAiC,KAEjCD,KAAAE,gBAA2B,MAE3BF,KAAAG,kBAAoB,KAC1BH,KAAKC,eAAiB,IAAIG,gBAAe,KACvCJ,KAAKK,qBAGPL,KAAKC,eAAeK,QAAQN,KAAKO,0DAfV,sBAEKC,EAAaC,6BAgBnCC,wBACN,MAAMC,GAAUC,EAAAZ,KAAKO,GAAGM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,OAAA,EAAAA,EAAEG,YAC3D,GAAIJ,EAAU,GAAKH,EAAaQ,EAAG,CACjChB,KAAKiB,WAAa,UACb,GAAIN,EAAU,GAAKH,EAAaU,EAAG,CACxClB,KAAKiB,WAAa,QACb,CACLjB,KAAKiB,WAAa,MAIdP,oBACN,MAAMS,EAAYnB,KAAKO,GAAGM,WAAWO,iBACnC,4BAGFD,EAAUE,SAASC,GACjBA,EAAMC,aAAa,aAAc,OAASvB,KAAKwB,MAAQ,UAI3Dd,oBACEV,KAAKyB,WAAaC,IAClB1B,KAAKE,gBAAkByB,EAAe3B,KAAKO,GAAI,iBAGjDG,mBACEkB,EAAoB5B,KAAKG,mBACzBH,KAAKK,kBACL,GAAIL,KAAKE,gBAAiB,CACxBF,KAAK6B,qBAITnB,uBACE,GAAIV,KAAKC,iBAAmB,KAAM,CAChCD,KAAKC,eAAe6B,cAIxBpB,SACE,MAAMc,MAAEA,EAAKO,MAAEA,EAAKC,MAAEA,GAAUhC,KAEhC,OACEiC,EAACC,EAAI,CACHC,MAAO,CACLzB,CAAC,SAAUsB,EACXtB,CAAC,qBAAsBV,KAAKiB,aAAe,IAC3CP,CAAC,iBAAkBV,KAAKiB,aAAe,MAEzCmB,KAAK,YAELH,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,MAAA,CAAKE,MAAM,SACTF,EAAA,OAAA,CAAMI,KAAK,SACTJ,EAAA,gBAAA,CACEK,QACEtC,KAAKiB,aAAe,KAAO,QAAU,kBAGtCO,KAIPS,EAAA,MAAA,CAAKE,MAAM,SACTF,EAAA,OAAA,CAAMI,KAAK,SACTJ,EAAA,gBAAA,CAAeK,QAAQ,QAAQP,MAIpC/B,KAAKE,iBACJ+B,EAAA,MAAA,CAAKE,MAAM,iBACTF,EAAA,MAAA,CAAKG,KAAK,QACRH,EAAA,OAAA,CAAMI,KAAK,qBAKnBJ,EAAA,MAAA,CAAKE,MAAM","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 200px;\n min-width: 200px;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\n.end-component {\n width: fit-content;\n margin-left: 56px;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: 1px;\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 160px;\n min-width: 160px;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 128px;\n margin-bottom: var(--ic-space-xs);\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/*\n @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n /\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n @Element() el: HTMLIcDataRowElement;\n\n /\n Set the label in the leftmost cell of the row\n /\n @Prop() label: string;\n\n /\n Set the value of the middle (right if no addition supplied) cell of the row\n /\n @Prop() value: string;\n\n /\n Set the row to small styling, this is automatically applied if small is set on the parent data heading\n */\n @Prop() small: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() entitySize: \"xl\" \| \"m\" \| \"xs\";\n\n private resizeObserver: ResizeObserver = null;\n\n private hasEndComponent: boolean = false;\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n if (rowSize + 46 < DEVICE_SIZES.S) {\n this.entitySize = \"xs\";\n } else if (rowSize + 46 < DEVICE_SIZES.M) {\n this.entitySize = \"m\";\n } else {\n this.entitySize = \"xl\";\n }\n }\n\n private labelEndComponent(): void {\n const component = this.el.shadowRoot.querySelectorAll(\n \"slot[name=end-component]\"\n );\n\n component.forEach((child: HTMLElement) =>\n child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n );\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n this.checkLabelAbove();\n if (this.hasEndComponent) {\n this.labelEndComponent();\n }\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const { label, value, small } = this;\n\n return (\n <Host\n class={{\n [\"small\"]: small,\n [\"breakpoint-medium\"]: this.entitySize === \"m\",\n [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography\n variant={\n this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n }\n >\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"value\">\n <slot name=\"value\">\n <ic-typography variant=\"body\">{value}</ic-typography>\n </slot>\n </div>\n </div>\n {this.hasEndComponent && (\n <div class=\"end-component\">\n <div role=\"cell\">\n <slot name=\"end-component\"></slot>\n </div>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"]}