@ukic/web-components 3.16.0 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/ic-pagination.cjs.entry.js +8 -4
- package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +18 -3
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js +28 -4
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.stories.js +2 -0
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +52 -4
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-badge.js.map +1 -1
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-pagination.js +9 -4
- package/dist/components/ic-pagination.js.map +1 -1
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +21 -4
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/core/core.css +28 -6
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-3636be4f.entry.js +2 -0
- package/dist/core/p-3636be4f.entry.js.map +1 -0
- package/dist/core/p-ca82850f.entry.js +2 -0
- package/dist/core/p-ca82850f.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/ic-pagination.entry.js +8 -4
- package/dist/esm/ic-pagination.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +18 -3
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-pagination/ic-pagination.d.ts +4 -0
- package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts +5 -0
- package/dist/types/components.d.ts +9 -0
- package/hydrate/index.js +30 -8
- package/hydrate/index.mjs +30 -8
- package/package.json +24 -24
- package/vscode-data.json +4 -0
- package/dist/core/p-14d43f64.entry.js +0 -2
- package/dist/core/p-14d43f64.entry.js.map +0 -1
- package/dist/core/p-762ea31a.entry.js +0 -2
- package/dist/core/p-762ea31a.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n display: flex;\n flex-direction: column;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: -moz-fit-content;\n height: fit-content;\n max-height: var(--max-height, -moz-fit-content);\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport {\n createPopper,\n Instance as PopperInstance,\n Options,\n} from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst MENU_SELECTOR = \"div.menu-body\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement | null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance | null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n @State() popperProps: Partial<Options> = {};\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor?: string;\n\n /**\n * Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n */\n @Prop() fixedPositioning: boolean = false;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel?: number = 1;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open?: boolean | undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /**\n * Emitted when the popover menu is closed.\n */\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(MENU_SELECTOR);\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string | undefined): HTMLElement | null => {\n let anchorElement: HTMLElement | null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /**\n * @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n /**\n * @internal This method allows props to be added to the PopperJS createPopper instance outside of the popover menu\n * @param props object - createPopper props set externally\n */\n @Method()\n async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n this.popperProps = props;\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string | null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n strategy: this.fixedPositioning ? \"fixed\" : \"absolute\",\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n ...this.popperProps,\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <div\n class=\"menu-body\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n display: flex;\n flex-direction: column;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport {\n createPopper,\n Instance as PopperInstance,\n Options,\n} from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst MENU_SELECTOR = \"div.menu-body\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement | null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance | null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n @State() popperProps: Partial<Options> = {};\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor?: string;\n\n /**\n * Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n */\n @Prop() fixedPositioning: boolean = false;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel?: number = 1;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open?: boolean | undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /**\n * Emitted when the popover menu is closed.\n */\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(MENU_SELECTOR);\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string | undefined): HTMLElement | null => {\n let anchorElement: HTMLElement | null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /**\n * @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n /**\n * @internal This method allows props to be added to the PopperJS createPopper instance outside of the popover menu\n * @param props object - createPopper props set externally\n */\n @Method()\n async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n this.popperProps = props;\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string | null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n strategy: this.fixedPositioning ? \"fixed\" : \"absolute\",\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n ...this.popperProps,\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <div\n class=\"menu-body\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ic-radio-group.js","mappings":"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","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle\n );\n --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\n:host ic-input-label.error {\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\n:host ic-input-label.disabled {\n --ic-input-label-text-color: var(\n --ic-radio-button-input-field-label-disabled\n );\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle-disabled\n );\n}\n\n:host ic-input-validation.show-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host ic-input-label:not(.with-helper) .ic-typography-label,\n:host ic-input-label .helpertext {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-radio-group-small) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host ic-input-label .helpertext {\n display: block;\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the radio group.\n */\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer?: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver | null = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation?: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * The size of the radio group component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The value of the `aria-live` attribute on the validation message.\n */\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation!;\n this.checkOrientation();\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme!);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions?.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (this.radioContainer) {\n if (totalWidth >= this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationAriaLive,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n \"ic-radio-group-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <fieldset\n role=\"radiogroup\"\n id={this.name}\n aria-required={`${required}`}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{\n [`${validationStatus}`]: true,\n [\"disabled\"]: !!disabled,\n }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ic-radio-group.js","mappings":"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","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle\n );\n --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\n:host ic-input-label.error {\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\n:host ic-input-label.disabled {\n --ic-input-label-text-color: var(\n --ic-radio-button-input-field-label-disabled\n );\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle-disabled\n );\n}\n\n:host ic-input-validation.show-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host ic-input-label:not(.with-helper) .ic-typography-label,\n:host ic-input-label .helpertext {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-radio-group-small) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host ic-input-label .helpertext {\n display: block;\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the radio group.\n */\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer?: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver | null = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * The label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation?: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * The size of the radio group component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The value of the `aria-live` attribute on the validation message.\n */\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation!;\n this.checkOrientation();\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme!);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions?.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (this.radioContainer) {\n if (totalWidth >= this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationAriaLive,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n \"ic-radio-group-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <fieldset\n role=\"radiogroup\"\n id={this.name}\n aria-required={`${required}`}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{\n [`${validationStatus}`]: true,\n [\"disabled\"]: !!disabled,\n }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ic-step.js","mappings":"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","names":[],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n right: -9999px;\n}\n\n/* COMPACT STEP STYLING */\n:host(.ic-step-compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n /* COMPACT STEP */\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n /* DEFAULT STEP */\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /**\n * @internal If a compact stepper is being used, this sets the styling of the step.\n */\n @Prop() compactStepStyling?: IcStepTypes;\n\n /**\n * @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n */\n @Prop({ mutable: true }) current?: boolean = false;\n\n /**\n * Words within the component that can be replaced to translate the component into a different language\n */\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n */\n @Prop() lastStep!: boolean;\n\n /**\n * @internal The step number of the final step. This is managed by ic-stepper.\n */\n @Prop() lastStepNum?: number;\n\n /**\n * @internal The name of the next step. This is managed by ic-stepper.\n */\n @Prop() nextStepHeading?: string;\n\n /**\n * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n */\n @Prop() progress?: number;\n\n /**\n * @internal The step number, managed by ic-stepper.\n */\n @Prop() stepNum?: number;\n\n /**\n * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n */\n @Prop() status?: IcStepStatuses;\n\n /**\n * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n */\n @Prop() subheading?: string;\n\n /**\n * The title of the step within the stepper.\n */\n @Prop() heading?: string;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * @internal The variant of the step. This is managed by ic-stepper.\n */\n @Prop() variant!: IcStepVariants;\n\n /**\n * The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" || compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n </ic-typography>\n {(this.subheading ||\n type === \"completed\" ||\n type === \"disabled\" ||\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") ||\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading || stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") ||\n type === \"completed\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading || subheading || status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading || status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current || type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ic-step.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,2nLAA2nL,CAAC;AAC9oL,qBAAe,SAAS;;MCgBX,IAAI;IALjB;;;;;;;QAgB2B,YAAO,GAAa,KAAK,CAAC;;;;QAK3C,WAAM,GAAe;YAC3B,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;YACd,EAAE,EAAE,IAAI;YACR,QAAQ,EAAE,WAAW;YACrB,SAAS,EAAE,WAAW;YACtB,WAAW,EAAE,cAAc;YAC3B,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,UAAU;SACrB,CAAC;;;;QA6CM,UAAK,GAAiB,SAAS,CAAC;;;;QAUhC,SAAI,GAAiB,QAAQ,CAAC;KA4OvC;IAzOC,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;;QACJ,MAAM,EACJ,kBAAkB,EAClB,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,WAAW,EACX,eAAe,EACf,QAAQ,EACR,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAK,EACL,IAAI,EACJ,OAAO,GACR,GAAG,IAAI,CAAC;;QAGT,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,IAAI,IAAI,KAAK,WAAW,EAAE;YACxB,SAAS,GAAG,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC;SACrC;aAAM,IAAI,IAAI,KAAK,UAAU,EAAE;YAC9B,SAAS,GAAG,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC;SACvC;aAAM,IAAI,MAAM,KAAK,UAAU,EAAE;YAChC,SAAS,GAAG,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;SACpC;aAAM,IAAI,MAAM,KAAK,UAAU,EAAE;YAChC,SAAS,GAAG,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;SACpC;;QAGD,IAAI,UAAU,CAAC;QACf,IAAI,MAAM,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE;YACnC,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SACxD;;QAGD,IAAI,QAAQ,CAAC;QACb,IAAI,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU,EAAE;YAC5D,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;SAC/B;aAAM,IAAI,kBAAkB,KAAK,WAAW,EAAE;YAC7C,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;SAC7B;;QAGD,IAAI,UAAU,CAAC;QACf,IAAI,IAAI,KAAK,WAAW,IAAI,kBAAkB,KAAK,WAAW,EAAE;YAC9D,UAAU,IACR,6DACE,KAAK,EAAC,sBAAsB,iBAChB,MAAM,EAClB,SAAS,EAAE,SAAS,GACd,CACT,CAAC;SACH;aAAM,IAAI,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU,EAAE;YACnE,UAAU,IACR,6DACE,KAAK,EAAC,wBAAwB,iBAClB,MAAM,EAClB,SAAS,EAAE,WAAW,GAChB,CACT,CAAC;SACH;;QAGD,MAAM,WAAW,IACf,4DACE,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO;gBACtB,CAAC,gBAAgB,kBAAkB,EAAE,GAAG,CAAC,CAAC,kBAAkB;gBAC5D,CAAC,UAAU,GACT,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU;aAC3D,IAED,6EACE,KAAK,EAAE;gBACL,iCAAiC,EAAE,IAAI;gBACvC,cAAc,EACZ,IAAI,KAAK,UAAU,IAAI,kBAAkB,KAAK,UAAU;aAC3D,iBACW,MAAM,EAClB,IAAI,EAAC,OAAO,iBACC,OAAO,EACpB,QAAQ,EAAE,QAAQ,GACI,EACxB,4DAAK,KAAK,EAAC,cAAc,IACvB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,IACxC,OAAO,CACM,EAChB,4DAAK,KAAK,EAAC,WAAW,IACpB,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,IAC9C,GAAG,OAAO,IAAI,MAAM,CAAC,EAAE,IAAI,WAAW,EAAE,EACzC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,MAAM,CAAC,KAAK,EAAE,CAAQ,CAC3C,EACf,CAAC,IAAI,CAAC,UAAU;YACf,IAAI,KAAK,WAAW;YACpB,IAAI,KAAK,UAAU;aAClB,IAAI,CAAC,OAAO,KAAK,SAAS;gBACzB,CAAC,CAAC,kBAAkB;gBACpB,kBAAkB,KAAK,QAAQ,CAAC;YAClC,CAAC,CAAC,MAAM,MACR,4DAAK,KAAK,EAAC,aAAa,IACrB,UAAU,KAAK,SAAS,IAAI,UAAU,EACtC,CAAC,UAAU,IAAI,QAAQ,MACtB,sEAAe,OAAO,EAAC,SAAS,IAC7B,UAAU,KAAK,IAAI,IAAI,aAAa,CAAC,UAAU,CAAC;cAC7C,UAAU;cACV,IAAI,KAAK,UAAU;iBAClB,OAAO,KAAK,SAAS;oBACpB,kBAAkB,KAAK,UAAU,CAAC;gBACpC,IAAI,KAAK,WAAW;iBACnB,OAAO,KAAK,SAAS;oBACpB,kBAAkB,KAAK,WAAW,CAAC;kBACrC,QAAQ;kBACR,MAAM,IAAI,UAAU,CACV,CACjB,CACG,CACP,CACG,EACL,QAAQ,IACP,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,IACtD,MAAM,CAAC,QAAQ,CACF,KAEhB,aAAa,CAAC,eAAe,CAAC,KAC5B,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,IACtD,MAAM,CAAC,IAAI,EACZ,YAAM,KAAK,EAAC,iBAAiB,SAAG,MAAM,CAAC,IAAI,CAAQ,OAAE,GAAG,EACvD,IAAI,CAAC,eAAe,CACP,CACjB,CACF,CACG,CACF,CACP,CAAC;;QAGF,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,KAAK,WAAW,EAAE;YACxB,IAAI,IACF,sEAAe,OAAO,EAAC,gBAAgB,IACrC,6DAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;SACH;aAAM;YACL,IAAI,IACF,4DAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,6DAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;SACH;;QAGD,MAAM,UAAU,GAAG,IAAI,KAAK,SAAS,KACnC,4DAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,QAAQ,KACzB,4DACE,KAAK,EAAE;gBACL,CAAC,cAAc,GAAG,IAAI;gBACtB,CAAC,oBAAoB,GAAG,CAAC,EACvB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;oBAC/D,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CACrE;aACF,IAEA,UAAU,CACP,CACP,CAAC;;QAGF,MAAM,WAAW,IACf,4DACE,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;aAClB,IAED,4DAAK,KAAK,EAAC,UAAU,IACnB,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO,EAClC,SAAS,CACN,EACL,CAAC,OAAO,IAAI,UAAU,IAAI,MAAM,MAC/B,4DAAK,KAAK,EAAC,cAAc,IACtB,OAAO,KACN,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,IACpD,OAAO,CACM,CACjB,EACA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,KAChC,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IAChD,UAAU,KAAK,IAAI,IAAI,aAAa,CAAC,UAAU,CAAC;cAC7C,UAAU;cACV,UAAU,CACA,CACjB,CACG,CACP,CACG,CACP,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,gBACH,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,GAAG,SAAS,EAAE,kBACrC,CAAC,OAAO,IAAI,IAAI,KAAK,SAAS,KAAK,MAAM,EACvD,KAAK,EAAE;gBACL,CAAC,oBAAoB,GAAG,CAAC,EACvB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;oBAC/D,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CACrE;gBACD,CAAC,WAAW,OAAO,EAAE,GAAG,IAAI;gBAC5B,CAAC,YAAY,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS;aAChD,IAEA,OAAO,KAAK,SAAS,GAAG,WAAW,GAAG,WAAW,CAC7C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n right: -9999px;\n}\n\n/* COMPACT STEP STYLING */\n:host(.ic-step-compact) {\n -moz-column-gap: var(--ic-space-sm);\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n -moz-column-gap: var(--ic-space-sm);\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n display: flex;\n -moz-column-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n -moz-column-gap: var(--ic-space-xxxs);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n /* COMPACT STEP */\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n /* DEFAULT STEP */\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /**\n * @internal If a compact stepper is being used, this sets the styling of the step.\n */\n @Prop() compactStepStyling?: IcStepTypes;\n\n /**\n * @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n */\n @Prop({ mutable: true }) current?: boolean = false;\n\n /**\n * Words within the component that can be replaced to translate the component into a different language\n */\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n */\n @Prop() lastStep!: boolean;\n\n /**\n * @internal The step number of the final step. This is managed by ic-stepper.\n */\n @Prop() lastStepNum?: number;\n\n /**\n * @internal The name of the next step. This is managed by ic-stepper.\n */\n @Prop() nextStepHeading?: string;\n\n /**\n * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n */\n @Prop() progress?: number;\n\n /**\n * @internal The step number, managed by ic-stepper.\n */\n @Prop() stepNum?: number;\n\n /**\n * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n */\n @Prop() status?: IcStepStatuses;\n\n /**\n * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n */\n @Prop() subheading?: string;\n\n /**\n * The title of the step within the stepper.\n */\n @Prop() heading?: string;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * @internal The variant of the step. This is managed by ic-stepper.\n */\n @Prop() variant!: IcStepVariants;\n\n /**\n * The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" || compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n </ic-typography>\n {(this.subheading ||\n type === \"completed\" ||\n type === \"disabled\" ||\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") ||\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading || stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") ||\n type === \"completed\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading || subheading || status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading || status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current || type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -15,6 +15,7 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
|
|
|
15
15
|
key: null,
|
|
16
16
|
shift: false,
|
|
17
17
|
};
|
|
18
|
+
this.externallySetActiveToggle = null;
|
|
18
19
|
/**
|
|
19
20
|
* The accessible label of the toggle button group component to provide context for screen reader users.
|
|
20
21
|
*/
|
|
@@ -98,7 +99,15 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
|
|
|
98
99
|
key !== "ArrowUp")
|
|
99
100
|
return;
|
|
100
101
|
const toggleButtonOptions = this.getAllToggleButtons();
|
|
101
|
-
|
|
102
|
+
let targetToggle;
|
|
103
|
+
if (this.externallySetActiveToggle) {
|
|
104
|
+
targetToggle =
|
|
105
|
+
toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === this.externallySetActiveToggle)[0]), key === "ArrowDown" || key === "ArrowRight")];
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
targetToggle =
|
|
109
|
+
toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === document.activeElement)[0]), key === "ArrowDown" || key === "ArrowRight")];
|
|
110
|
+
}
|
|
102
111
|
if (this.selectMethod === "auto") {
|
|
103
112
|
// trigger selectHandler when unable to add 'target'
|
|
104
113
|
targetToggle.checked = true;
|
|
@@ -208,6 +217,12 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
|
|
|
208
217
|
});
|
|
209
218
|
}
|
|
210
219
|
}
|
|
220
|
+
/**
|
|
221
|
+
* @internal Used to enable other components to set the active toggle button when toggle button group is in a shadow dom.
|
|
222
|
+
*/
|
|
223
|
+
async setActiveToggle(toggle) {
|
|
224
|
+
this.externallySetActiveToggle = toggle;
|
|
225
|
+
}
|
|
211
226
|
componentWillLoad() {
|
|
212
227
|
if (this.selectType === "multi")
|
|
213
228
|
this.selectMethod = "manual";
|
|
@@ -236,14 +251,14 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
|
|
|
236
251
|
}
|
|
237
252
|
render() {
|
|
238
253
|
const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
|
|
239
|
-
return (h(Host, { key: '
|
|
254
|
+
return (h(Host, { key: '5ae12c9f09c65a04cbe1f19850998c0d942327c8', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
|
|
240
255
|
"ic-toggle-button-group-disabled": disabled,
|
|
241
256
|
"ic-toggle-button-group-full-width": fullWidth,
|
|
242
257
|
"ic-toggle-button-group-loading": loading,
|
|
243
258
|
"ic-toggle-button-group-monochrome": monochrome,
|
|
244
259
|
"ic-toggle-button-group-hide-outline": !outline,
|
|
245
260
|
[`ic-theme-${theme}`]: theme !== "inherit",
|
|
246
|
-
}, onFocus: this.handleHostFocus }, h("slot", { key: '
|
|
261
|
+
}, onFocus: this.handleHostFocus }, h("slot", { key: '02c4f4cd7df626d4032246bdbcd7e07d2167ba52' })));
|
|
247
262
|
}
|
|
248
263
|
get el() { return this; }
|
|
249
264
|
static get watchers() { return {
|
|
@@ -272,7 +287,9 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
|
|
|
272
287
|
"theme": [1],
|
|
273
288
|
"tooltipPlacement": [1, "tooltip-placement"],
|
|
274
289
|
"variant": [513],
|
|
275
|
-
"lastKeyPressed": [32]
|
|
290
|
+
"lastKeyPressed": [32],
|
|
291
|
+
"externallySetActiveToggle": [32],
|
|
292
|
+
"setActiveToggle": [64]
|
|
276
293
|
}, [[0, "icToggleChecked", "selectHandler"]], {
|
|
277
294
|
"disabled": ["watchDisabledHandler"],
|
|
278
295
|
"fullWidth": ["watchFullWidthHandler"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-hide-outline) {\n --ic-toggle-button-unselected-border: transparent;\n --ic-toggle-button-unselected-border-disabled: transparent;\n --ic-toggle-button-unselected-border-monochrome: transparent;\n --ic-toggle-button-unselected-border-disabled-monochrome: transparent;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `true`, the toggle button group will display with an outline.\n */\n @Prop() outline = true;\n @Watch(\"outline\")\n watchOutlineHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.outline = this.outline;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The position of the tooltip in relation to the toggle buttons.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.disabled) {\n (target as HTMLElement)?.blur();\n return;\n }\n if (this.loading) return;\n const el = target as HTMLIcToggleButtonGroupElement | null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement | null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") || []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked || this.selectType !== \"single\") && !shift) ||\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift || relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n const targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const {\n accessibleLabel,\n disabled,\n fullWidth,\n loading,\n monochrome,\n outline,\n theme,\n } = this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={disabled ? -1 : 0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n \"ic-toggle-button-group-hide-outline\": !outline,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-hide-outline) {\n --ic-toggle-button-unselected-border: transparent;\n --ic-toggle-button-unselected-border-disabled: transparent;\n --ic-toggle-button-unselected-border-monochrome: transparent;\n --ic-toggle-button-unselected-border-disabled-monochrome: transparent;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n @State() externallySetActiveToggle: HTMLIcToggleButtonElement | null = null;\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `true`, the toggle button group will display with an outline.\n */\n @Prop() outline = true;\n @Watch(\"outline\")\n watchOutlineHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.outline = this.outline;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The position of the tooltip in relation to the toggle buttons.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n /**\n * @internal Used to enable other components to set the active toggle button when toggle button group is in a shadow dom.\n */\n @Method()\n async setActiveToggle(toggle: HTMLIcToggleButtonElement): Promise<void> {\n this.externallySetActiveToggle = toggle;\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.disabled) {\n (target as HTMLElement)?.blur();\n return;\n }\n if (this.loading) return;\n const el = target as HTMLIcToggleButtonGroupElement | null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement | null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") || []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked || this.selectType !== \"single\") && !shift) ||\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift || relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n let targetToggle: HTMLIcToggleButtonElement;\n if (this.externallySetActiveToggle) {\n targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter(\n (el) => el === this.externallySetActiveToggle\n )[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n } else {\n targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter(\n (el) => el === document.activeElement\n )[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n }\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const {\n accessibleLabel,\n disabled,\n fullWidth,\n loading,\n monochrome,\n outline,\n theme,\n } = this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={disabled ? -1 : 0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n \"ic-toggle-button-group-hide-outline\": !outline,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|