@ukic/web-components 2.19.0 → 2.21.0

package/dist/core/p-692ccc73.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icHorizontalScrollCss","SCROLL_DELAY_MS","HorizontalScroll","this","buttonStateSet","focusHandler","event","itemFocusHandler","Array","from","items","indexOf","target","resizeObserverCallback","el","clientWidth","itemsContainerEl","scrollWidth","itemOverflow","elementOverflowsX","lastItemVisible","offsetWidth","scrollLeft","runResizeObserver","resizeObserver","ResizeObserver","observe","scrollItemIntoView","getCurrentLeftItem","scrollRight","longScrollRight","scrollDelay","window","setTimeout","longScrollLeft","leftArrowMouseDownHandler","e","preventDefault","rightArrowMouseDownHandler","arrowMouseUpHandler","clearTimeout","index","itemOffsets","findIndex","Math","round","scrollHandler","isScrolling","scrollStopped","firstItemVisible","componentWillLoad","children","addEventListener","getSlotElements","forEach","item","focusTrigger","componentDidLoad","runningTotal","map","checkResizeObserver","scrollArrows","shadowRoot","querySelectorAll","arrow","disconnectedCallback","undefined","disconnect","removeEventListener","itemPosition","newScrollPos","render","appearance","h","Host","class","IcThemeForegroundEnum","Dark","Light","role","variant","innerHTML","LeftArrow","disabled","tabindex","onClick","onMouseDown","RightArrow"],"sources":["src/components/ic-horizontal-scroll/ic-horizontal-scroll.css?tag=ic-horizontal-scroll&encapsulation=shadow","src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  --border-bottom-color: var(--ic-architectural-300);\n  --splitter-color: var(--ic-architectural-100);\n\n  display: flex;\n  max-width: 100%;\n}\n\n:host(.light) {\n  --splitter-color: var(--ic-keyline-lighten-rgb);\n}\n\n:host(.dark) {\n  --splitter-color: var(--ic-keyline-darken-rgb);\n}\n\n/* Slotted items container element */\n::slotted(*) {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  margin: calc(var(--ic-space-xs) * -1) !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n:host(.visible) ::slotted(*) {\n  margin: calc(var(--ic-space-xs) * -1) 0 !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n.scroll-container-left,\n.scroll-container-right {\n  display: flex;\n}\n\n.scroll-container-left {\n  margin-left: var(--ic-space-xxs);\n}\n\n.scroll-container-right {\n  margin-right: var(--ic-space-xxs);\n}\n\n.hidden {\n  display: none;\n}\n\n.scroll-arrow {\n  margin: var(--ic-space-xxs) 0;\n}\n\n.disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n  display: flex;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-1px);\n  margin-top: var(--ic-space-xs);\n  border-radius: var(--ic-space-1px);\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.scroll-splitter-right {\n  margin-right: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n  background-color: transparent;\n}\n\n.disabled ic-button > svg {\n  color: var(--ic-keyline-darken-rgb);\n}\n\n:host(.dark) .disabled ic-button > svg,\n:host(.light) .disabled ic-button > svg {\n  color: var(--splitter-color) !important;\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  private buttonStateSet: boolean = false;\n  private isScrolling: number;\n  private itemOffsets: number[];\n  private items: HTMLElement[];\n  private itemsContainerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private scrollDelay: number;\n\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  @State() firstItemVisible: boolean = true;\n  @State() itemOverflow: boolean = false;\n  @State() lastItemVisible: boolean = false;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * @internal The name of the event that triggers focus handler logic.\n   */\n  @Prop() focusTrigger?: string = \"focus\";\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.removeEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n\n    this.items.forEach((item) => {\n      if (item.removeEventListener) {\n        item.removeEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n\n    this.itemsContainerEl.removeEventListener(\"scroll\", this.scrollHandler);\n  }\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  private focusHandler = (event: FocusEvent) => {\n    this.itemFocusHandler(\n      Array.from(this.items).indexOf(event.target as HTMLElement)\n    );\n  };\n\n  private itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-74f9082d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as o,g as a}from"./p-6b5e91e2.js";import{I as s}from"./p-26b7b18f.js";import{r,i as n}from"./p-e4d0d1fb.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-light){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host(.selected){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host(.disabled){pointer-events:none;color:var(--ic-architectural-300)}:host(.selected.with-transition){transition:all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.disabled){color:GrayText}}';const l=class{constructor(i){t(this,i);this.tabClick=e(this,"tabClick",7);this.tabCreated=e(this,"tabCreated",7);this.tabEnabled=e(this,"tabEnabled",7);this.tabFocus=e(this,"tabFocus",7);this.tabRemoved=e(this,"tabRemoved",7);this.focusFromClick=false;this.isInitialRender=true;this.handleClick=()=>{this.tabClick.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});if(this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});this.focusFromClick=false}};this.handleFocus=()=>{if(!this.focusFromClick){this.focusTabId=this.tabId;this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition})}};this.handleMouseDown=()=>{this.focusFromClick=true};this.appearance="dark";this.contextId="default";this.disabled=false;this.selected=false;this.tabId=undefined;this.tabPosition=undefined}disabledWatchHandler(){this.tabEnabled.emit()}connectedCallback(){this.tabCreated.emit(this.el)}disconnectedCallback(){const t=document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);if(t){t.tabRemovedHandler(!!this.focusTabId)}}componentWillLoad(){r(this.disabled,this.el)}componentDidUpdate(){this.isInitialRender=false}async setFocus(){if(this.el){this.el.focus()}}render(){const{disabled:t,selected:e,appearance:a}=this;return i(o,{class:{["with-transition"]:!this.isInitialRender,["ic-tab-light"]:a===s.Light,["selected"]:e,["disabled"]:t},role:"tab","aria-selected":e?"true":"false",onClick:this.handleClick,onFocus:this.handleFocus,onMouseDown:this.handleMouseDown,"aria-disabled":t?"true":"false",tabindex:this.selected?0:-1},this.el.querySelector('[slot="icon"]')&&i("slot",{name:"icon"}),i("ic-typography",{class:"ic-tab-label",variant:"label"},i("span",null,i("slot",null))),n(this.el,"badge")&&i("slot",{name:"badge"}))}get el(){return a(this)}static get watchers(){return{disabled:["disabledWatchHandler"]}}};l.style=c;export{l as ic_tab};
-//# sourceMappingURL=p-74f9082d.entry.js.map

package/dist/core/p-74f9082d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTabCss","Tab","this","focusFromClick","isInitialRender","handleClick","tabClick","emit","tabId","contextId","position","tabPosition","tabFocus","handleFocus","focusTabId","handleMouseDown","disabledWatchHandler","tabEnabled","connectedCallback","tabCreated","el","disconnectedCallback","tabContext","document","querySelector","tabRemovedHandler","componentWillLoad","removeDisabledFalse","disabled","componentDidUpdate","setFocus","focus","render","selected","appearance","h","Host","class","IcThemeForegroundEnum","Light","role","onClick","onFocus","onMouseDown","tabindex","name","variant","isSlotUsed"],"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  --indicator-initial-color: rgba(23 89 188 / 0%);\n  --indicator-color: var(--ic-action-default);\n  --focus-indicator: var(--ic-border-focus);\n  --label-color: var(--ic-color-primary-text);\n  --background-color-hover: var(--ic-action-default-bg-hover);\n  --background-color-active: var(--ic-action-default-bg-active);\n\n  display: flex;\n  align-items: center;\n  border-radius: 0;\n  color: var(--label-color);\n  height: 2.5rem;\n  padding: 0 var(--ic-space-md);\n  cursor: pointer;\n  position: relative;\n  border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n  gap: var(--ic-space-xs);\n  transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n  box-shadow: var(--focus-indicator);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(:hover) {\n  background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n  background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-light) {\n  --indicator-initial-color: rgb(255 255 255 / 0%);\n  --indicator-color: rgb(255 255 255 / 100%);\n  --focus-indicator: var(--ic-border-focus);\n  --label-color: white;\n  --background-color-hover: var(--ic-action-dark-bg-hover);\n  --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.selected) {\n  border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--ic-architectural-300);\n}\n\n:host(.selected.with-transition) {\n  transition: all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n  pointer-events: none;\n}\n\n::slotted(svg) {\n  fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n  :host {\n    border-bottom: var(--ic-space-xxs) solid canvas;\n  }\n\n  :host(.disabled) {\n    color: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n */\n@Component({\n  tag: \"ic-tab\",\n  styleUrl: \"ic-tab.css\",\n  shadow: true,\n})\nexport class Tab {\n  private focusFromClick: boolean = false;\n  private focusTabId: string;\n  private isInitialRender: boolean = true;\n\n  @Element() el: HTMLIcTabElement;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */\n  @Prop({ reflect: true }) selected?: boolean = false;\n\n  /** @internal The shared ID between panel and tab. */\n  @Prop({ reflect: true }) tabId?: string;\n\n  /** @internal The position of the tab inside the tabs array in context. */\n  @Prop() tabPosition?: number;\n\n  @Watch(\"disabled\")\n  disabledWatchHandler(): void {\n    this.tabEnabled.emit();\n  }\n\n  /**\n   * @internal Emitted when a tab is selected.\n   */\n  @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Emitted when a tab is dynamically created.\n   */\n  @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n  /**\n   * @internal Emitted when a tab's disabled prop changes\n   */\n  @Event() tabEnabled: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when a tab is focussed.\n   */\n  @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Emitted when a tab is unmounted.\n   */\n  @Event() tabRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabCreated.emit(this.el);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    if (tabContext) {\n      tabContext.tabRemovedHandler(!!this.focusTabId);\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  /**\n   * Sets focus on the tab.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el) {\n      this.el.focus();\n    }\n  }\n\n  private handleClick = () => {\n    this.tabClick.emit({\n      tabId: this.tabId,\n      contextId: this.contextId,\n      position: this.tabPosition,\n    });\n    if (this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n      this.focusFromClick = false;\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.focusFromClick) {\n      this.focusTabId = this.tabId;\n\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n    }\n  };\n\n  private handleMouseDown = () => {\n    //set flag so that focus gets handled after click\n    //there is a timing issue where a long click only causes focus to happen & not the click\n    //the focus does need to be a seperate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const { disabled, selected, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"selected\"]: selected,\n          [\"disabled\"]: disabled,\n        }}\n        role=\"tab\"\n        aria-selected={selected ? \"true\" : \"false\"}\n        onClick={this.handleClick}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n        tabindex={this.selected ? 0 : -1}\n      >\n        {this.el.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n        <ic-typography class=\"ic-tab-label\" variant=\"label\">\n          <span>\n            <slot></slot>\n          </span>\n        </ic-typography>\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAW,k7H,MC4BJC,EAAG,M,oNACNC,KAAAC,eAA0B,MAE1BD,KAAAE,gBAA2B,KAqF3BF,KAAAG,YAAc,KACpBH,KAAKI,SAASC,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjB,GAAIT,KAAKC,eAAgB,CACvBD,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjBT,KAAKC,eAAiB,K,GAIlBD,KAAAW,YAAc,KACpB,IAAKX,KAAKC,eAAgB,CACxBD,KAAKY,WAAaZ,KAAKM,MAEvBN,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,a,GAKbT,KAAAa,gBAAkB,KAIxBb,KAAKC,eAAiB,IAAI,E,gBAhHsB,O,eAGJ,U,cAKjB,M,cAGiB,M,gDAS9C,oBAAAa,GACEd,KAAKe,WAAWV,M,CA4BlB,iBAAAW,GACEhB,KAAKiB,WAAWZ,KAAKL,KAAKkB,G,CAG5B,oBAAAC,GACE,MAAMC,EAAaC,SAASC,cAC1B,6BAA6BtB,KAAKO,cAEpC,GAAIa,EAAY,CACdA,EAAWG,oBAAoBvB,KAAKY,W,EAIxC,iBAAAY,GACEC,EAAoBzB,KAAK0B,SAAU1B,KAAKkB,G,CAG1C,kBAAAS,GACE3B,KAAKE,gBAAkB,K,CAOzB,cAAM0B,GACJ,GAAI5B,KAAKkB,GAAI,CACXlB,KAAKkB,GAAGW,O,EAuCZ,MAAAC,GACE,MAAMJ,SAAEA,EAAQK,SAAEA,EAAQC,WAAEA,GAAehC,KAC3C,OACEiC,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,oBAAqBnC,KAAKE,gBAC3B,CAAC,gBAAiB8B,IAAeI,EAAsBC,MACvD,CAAC,YAAaN,EACd,CAAC,YAAaL,GAEhBY,KAAK,MAAK,gBACKP,EAAW,OAAS,QACnCQ,QAASvC,KAAKG,YACdqC,QAASxC,KAAKW,YACd8B,YAAazC,KAAKa,gBAAe,gBAClBa,EAAW,OAAS,QACnCgB,SAAU1C,KAAK+B,SAAW,GAAK,GAE9B/B,KAAKkB,GAAGI,cAAc,kBAAoBW,EAAA,QAAMU,KAAK,SACtDV,EAAA,iBAAeE,MAAM,eAAeS,QAAQ,SAC1CX,EAAA,YACEA,EAAA,eAGHY,EAAW7C,KAAKkB,GAAI,UAAYe,EAAA,QAAMU,KAAK,U"}

package/dist/core/p-7b720034.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSkeletonCss","Skeleton","componentWillLoad","this","el","style","height","width","default","heightOnly","widthOnly","render","variant","light","appearance","hasChild","firstElementChild","defaultSkeletonStyle","heightSetStyle","widthSetStyle","h","Host","class"],"sources":["src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-architectural-100);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-200);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-100);\n  }\n}\n\n@keyframes loading-light {\n  0% {\n    background-color: var(--ic-architectural-600);\n  }\n\n  50% {\n    background-color: var(--ic-architectural-400);\n  }\n\n  100% {\n    background-color: var(--ic-architectural-600);\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-architectural-100);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.circle) {\n  border-radius: 50%;\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-600);\n  animation: loading-light 1200ms infinite;\n}\n\n@media (forced-colors: active) {\n  :host(.skeleton) {\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n    background: currentcolor;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  @State() default: boolean;\n  @State() hasChild: boolean;\n  @State() heightOnly: boolean;\n  @State() widthOnly: boolean;\n\n  /**\n   * The appearance of the skeleton.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"light\" instead.\n   */\n  @Prop() light?: boolean = false;\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, light, appearance } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circle\"]: variant == \"circle\",\n          [\"light\"]: light || appearance === \"light\",\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,iqG,MCQTC,EAAQ,M,2IAWwB,U,WAKjB,M,aAKa,W,CAEvC,iBAAAC,GACE,GAAIC,KAAKC,GAAGC,MAAMC,SAAW,IAAMH,KAAKC,GAAGC,MAAME,QAAU,GAAI,CAC7DJ,KAAKK,QAAU,I,MACV,KAAML,KAAKC,GAAGC,MAAMC,SAAW,KAAOH,KAAKC,GAAGC,MAAME,QAAU,GAAI,CACvEJ,KAAKM,WAAa,I,MACb,KAAMN,KAAKC,GAAGC,MAAME,QAAU,KAAOJ,KAAKC,GAAGC,MAAMC,SAAW,GAAI,CACvEH,KAAKO,UAAY,I,EAIrB,MAAAC,GACE,MAAMC,QAAEA,EAAOC,MAAEA,EAAKC,WAAEA,GAAeX,KAEvCA,KAAKY,WAAaZ,KAAKC,GAAGY,kBAE1B,MAAMC,EAAuB,CAC3BX,OAAQM,GAAW,OAAS,MAAQA,GAAW,SAAW,OAAS,OACnEL,MAAOK,GAAW,SAAW,OAAS,SAGxC,MAAMM,EAAiB,CACrBZ,OAAQH,KAAKC,GAAGC,MAAMC,OACtBC,MAAOK,GAAW,SAAW,OAAS,SAGxC,MAAMO,EAAgB,CACpBb,OAAQM,GAAW,OAAS,MAAQA,GAAW,SAAW,OAAS,OACnEL,MAAOJ,KAAKC,GAAGC,MAAME,OAGvB,OACEa,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,YAAa,KACd,CAAC,UAAWV,GAAW,SACvB,CAAC,SAAUC,GAASC,IAAe,SAErCT,OACIF,KAAKY,UAAYZ,KAAKK,SAAWS,GAClCd,KAAKM,YAAcS,GACnBf,KAAKO,WAAaS,EAAc,gBAErB,QAEdC,EAAA,a"}

package/dist/core/p-8bc2a670.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as i,g as o}from"./p-6b5e91e2.js";const s='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.group-title-container{padding:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center}:host(.small) .group-title-container{padding:var(--ic-space-xxs) var(--ic-space-xs)}:host(.large) .group-title-container{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(.light){color:var(--ic-architectural-white)}:host(.accordion-group.dark) ::slotted(ic-accordion){color:var(--ic-architectural-white)}';let n=0;const a=class{constructor(e){t(this,e);this.accordionGroupId=`ic-accordion-group-${n++}`;this.handleExpanded=()=>{if(this.areAllAccordionsOpen){this.expanded=false;this.accordions.forEach((t=>{t.expanded=this.expanded}))}else{this.expanded=true;this.accordions.forEach((t=>{t.expanded=this.expanded}))}this.setExpandedToAreAllAccordionsOpen()};this.linkAccordions=()=>{this.accordions.forEach((t=>{t.setAttribute("context-id",this.accordionGroupId)}))};this.setExpandedToAreAllAccordionsOpen=()=>{this.areAllAccordionsOpen=this.accordions.every((t=>!!t.expanded))};this.accordionOpenBtnText=()=>!this.areAllAccordionsOpen?"See all":"Hide all";this.accordions=undefined;this.areAllAccordionsOpen=undefined;this.accessibleButtonLabel="accordions";this.appearance="default";this.expanded=false;this.groupTitle="";this.singleExpansion=false;this.size="default"}componentDidLoad(){const t=this.el.children;this.accordions=Array.from(t).filter((t=>t.tagName==="IC-ACCORDION"));this.linkAccordions();this.accordions.forEach((t=>{t.appearance=this.appearance}));this.accordions.forEach((t=>{t.size=this.size}));if(this.expanded){this.accordions.forEach((t=>{t.expanded=true}));this.setExpandedToAreAllAccordionsOpen()}else{this.setExpandedToAreAllAccordionsOpen();this.expanded=this.areAllAccordionsOpen}}handleAccordionClicked(t){if(!this.singleExpansion){this.setExpandedToAreAllAccordionsOpen()}else{this.accordions.forEach((e=>{if(e.expanded&&t.detail.id!==e.id){e.expanded=false}}))}}async setFocus(){const t=this.singleExpansion?this.accordions[0]:this.allButtonEl;t.setFocus()}render(){const{appearance:t,size:o,groupTitle:s,singleExpansion:n,accessibleButtonLabel:a}=this;return e(i,{"context-id":this.accordionGroupId,class:{[`${t}`]:true,[`${o}`]:true,["accordion-group"]:true}},e("div",{class:"group-title-container"},e("ic-typography",{variant:"h4"},e("h3",null,s)),!n&&e("ic-button",{ref:t=>this.allButtonEl=t,appearance:t==="light"?"light":"default",onClick:this.handleExpanded,variant:"tertiary","aria-label":`${this.accordionOpenBtnText()} ${a}`},this.accordionOpenBtnText())),e("slot",null))}get el(){return o(this)}};a.style=s;export{a as ic_accordion_group};
-//# sourceMappingURL=p-8bc2a670.entry.js.map

package/dist/core/p-8bc2a670.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icAccordionGroupCss","accordionGroupIds","AccordionGroup","this","accordionGroupId","handleExpanded","areAllAccordionsOpen","expanded","accordions","forEach","acc","setExpandedToAreAllAccordionsOpen","linkAccordions","accordion","setAttribute","every","accordionOpenBtnText","componentDidLoad","accordionDirectChildren","el","children","Array","from","filter","child","tagName","appearance","size","handleAccordionClicked","event","singleExpansion","detail","id","setFocus","focusEl","allButtonEl","render","groupTitle","accessibleButtonLabel","h","Host","class","variant","ref","onClick"],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.group-title-container {\n  padding: var(--ic-space-xs);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n:host(.small) .group-title-container {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.large) .group-title-container {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(.light) {\n  color: var(--ic-architectural-white);\n}\n\n:host(.accordion-group.dark) ::slotted(ic-accordion) {\n  color: var(--ic-architectural-white);\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionGroupIds = 0;\n@Component({\n  tag: \"ic-accordion-group\",\n  styleUrl: \"ic-accordion-group.css\",\n  shadow: true,\n})\nexport class AccordionGroup {\n  private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n  private allButtonEl: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcAccordionGroupElement;\n\n  @State() accordions: HTMLIcAccordionElement[];\n\n  @State() areAllAccordionsOpen: boolean;\n\n  /**\n   * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n   */\n  @Prop() accessibleButtonLabel: string = \"accordions\";\n\n  /**\n   * The appearance of the accordion group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will load in an expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The header for the accordion group.\n   */\n  @Prop() groupTitle: string = \"\";\n\n  /**\n   * If `true`, only one accordion will open at a time.\n   */\n  @Prop() singleExpansion: boolean = false;\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  componentDidLoad(): void {\n    const accordionDirectChildren = (this.el as HTMLElement).children;\n    this.accordions = Array.from(accordionDirectChildren).filter(\n      (child) => child.tagName === \"IC-ACCORDION\"\n    ) as HTMLIcAccordionElement[];\n    this.linkAccordions();\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n    this.accordions.forEach((acc) => {\n      acc.size = this.size;\n    });\n    if (this.expanded) {\n      this.accordions.forEach((acc) => {\n        acc.expanded = true;\n      });\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.setExpandedToAreAllAccordionsOpen();\n      this.expanded = this.areAllAccordionsOpen;\n    }\n  }\n\n  @Listen(\"accordionClicked\")\n  handleAccordionClicked(event: CustomEvent): void {\n    if (!this.singleExpansion) {\n      // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.accordions.forEach((acc) => {\n        if (acc.expanded && event.detail.id !== acc.id) {\n          acc.expanded = false;\n        }\n      });\n    }\n  }\n\n  /**\n   * Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n   * Otherwise, the first accordion will be focused.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const focusEl = this.singleExpansion\n      ? this.accordions[0]\n      : this.allButtonEl;\n    focusEl.setFocus();\n  }\n\n  private handleExpanded = () => {\n    if (this.areAllAccordionsOpen) {\n      this.expanded = false;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    } else {\n      this.expanded = true;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    }\n    this.setExpandedToAreAllAccordionsOpen();\n  };\n\n  private linkAccordions = () => {\n    this.accordions.forEach((accordion) => {\n      accordion.setAttribute(\"context-id\", this.accordionGroupId);\n    });\n  };\n\n  private setExpandedToAreAllAccordionsOpen = () => {\n    this.areAllAccordionsOpen = this.accordions.every(\n      (accordion) => !!accordion.expanded\n    );\n  };\n\n  private accordionOpenBtnText = () => {\n    return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n  };\n\n  render() {\n    const {\n      appearance,\n      size,\n      groupTitle,\n      singleExpansion,\n      accessibleButtonLabel,\n    } = this;\n    return (\n      <Host\n        context-id={this.accordionGroupId}\n        class={{\n          [`${appearance}`]: true,\n          [`${size}`]: true,\n          [\"accordion-group\"]: true,\n        }}\n      >\n        <div class=\"group-title-container\">\n          <ic-typography variant=\"h4\">\n            <h3>{groupTitle}</h3>\n          </ic-typography>\n          {!singleExpansion && (\n            <ic-button\n              ref={(el) => (this.allButtonEl = el)}\n              appearance={appearance === \"light\" ? \"light\" : \"default\"}\n              onClick={this.handleExpanded}\n              variant=\"tertiary\"\n              aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n            >\n              {this.accordionOpenBtnText()}\n            </ic-button>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,swFCY5B,IAAIC,EAAoB,E,MAMXC,EAAc,M,yBACjBC,KAAAC,iBAAmB,sBAAsBH,MAwFzCE,KAAAE,eAAiB,KACvB,GAAIF,KAAKG,qBAAsB,CAC7BH,KAAKI,SAAW,MAChBJ,KAAKK,WAAWC,SAASC,IACvBA,EAAIH,SAAWJ,KAAKI,QAAQ,G,KAEzB,CACLJ,KAAKI,SAAW,KAChBJ,KAAKK,WAAWC,SAASC,IACvBA,EAAIH,SAAWJ,KAAKI,QAAQ,G,CAGhCJ,KAAKQ,mCAAmC,EAGlCR,KAAAS,eAAiB,KACvBT,KAAKK,WAAWC,SAASI,IACvBA,EAAUC,aAAa,aAAcX,KAAKC,iBAAiB,GAC3D,EAGID,KAAAQ,kCAAoC,KAC1CR,KAAKG,qBAAuBH,KAAKK,WAAWO,OACzCF,KAAgBA,EAAUN,UAC5B,EAGKJ,KAAAa,qBAAuB,KACrBb,KAAKG,qBAAuB,UAAY,W,yFAxGV,a,gBAKA,U,cAKK,M,gBAKhB,G,qBAKM,M,UAKV,S,CAEzB,gBAAAW,GACE,MAAMC,EAA2Bf,KAAKgB,GAAmBC,SACzDjB,KAAKK,WAAaa,MAAMC,KAAKJ,GAAyBK,QACnDC,GAAUA,EAAMC,UAAY,iBAE/BtB,KAAKS,iBACLT,KAAKK,WAAWC,SAASC,IACvBA,EAAIgB,WAAavB,KAAKuB,UAAU,IAElCvB,KAAKK,WAAWC,SAASC,IACvBA,EAAIiB,KAAOxB,KAAKwB,IAAI,IAEtB,GAAIxB,KAAKI,SAAU,CACjBJ,KAAKK,WAAWC,SAASC,IACvBA,EAAIH,SAAW,IAAI,IAErBJ,KAAKQ,mC,KACA,CACLR,KAAKQ,oCACLR,KAAKI,SAAWJ,KAAKG,oB,EAKzB,sBAAAsB,CAAuBC,GACrB,IAAK1B,KAAK2B,gBAAiB,CAEzB3B,KAAKQ,mC,KACA,CACLR,KAAKK,WAAWC,SAASC,IACvB,GAAIA,EAAIH,UAAYsB,EAAME,OAAOC,KAAOtB,EAAIsB,GAAI,CAC9CtB,EAAIH,SAAW,K,MAWvB,cAAM0B,GACJ,MAAMC,EAAU/B,KAAK2B,gBACjB3B,KAAKK,WAAW,GAChBL,KAAKgC,YACTD,EAAQD,U,CAkCV,MAAAG,GACE,MAAMV,WACJA,EAAUC,KACVA,EAAIU,WACJA,EAAUP,gBACVA,EAAeQ,sBACfA,GACEnC,KACJ,OACEoC,EAACC,EAAI,cACSrC,KAAKC,iBACjBqC,MAAO,CACL,CAAC,GAAGf,KAAe,KACnB,CAAC,GAAGC,KAAS,KACb,CAAC,mBAAoB,OAGvBY,EAAA,OAAKE,MAAM,yBACTF,EAAA,iBAAeG,QAAQ,MACrBH,EAAA,UAAKF,KAELP,GACAS,EAAA,aACEI,IAAMxB,GAAQhB,KAAKgC,YAAchB,EACjCO,WAAYA,IAAe,QAAU,QAAU,UAC/CkB,QAASzC,KAAKE,eACdqC,QAAQ,WAAU,aACN,GAAGvC,KAAKa,0BAA0BsB,KAE7CnC,KAAKa,yBAIZuB,EAAA,a"}

package/dist/core/p-8ed04819.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasIconButtons","hasNavigation","hasSearchSlotContent","resizeObserver","searchBar","initialiseSearchBar","slot","getSlot","el","tagName","querySelector","hideLabel","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserverCallback","currSize","deviceSize","customMobileBreakpoint","mobileSearchBarVisible","topNavResized","emit","size","_a","document","activeElement","setAttribute","removeAttribute","setTimeout","focus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","DEVICE_SIZES","XL","getThemeForegroundColor","L","watchPropHandler","newValue","oldValue","onComponentPropUndefinedChange","disconnectedCallback","disconnect","componentWillLoad","isSlotUsed","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","componentWillRender","navBarMenuCloseHandler","shadowRoot","searchInputBlurHandler","detail","searchValue","value","searchValueChangeHandler","themeChangeHandler","foregroundColor","mode","mobileSearchButtonEl","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","body","style","height","overflow","icNavigationMenuClosed","render","contentAligned","href","inline","shortAppTitle","status","version","hasStatus","hasVersion","hasMenuContent","searchButtonSize","S","hasTitle","isPropDefined","overMobileBreakpoint","appTitleVariant","mobileSearchButtonTitle","menuSize","shortAppTitleSlot","hasAppTitleSlot","Component","attrs","h","Host","class","IcThemeForegroundEnum","Dark","aligned","role","Object","assign","name","isEmptyString","variant","id","ref","onMouseDown","appearance","onClick","xmlns","viewBox","fill","d","width","tabindex"],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-theme-text);\n  width: 100%;\n  position: relative;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-theme-primary);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n  color: var(--ic-theme-text);\n  text-decoration: none;\n  outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-keyline-lighten);\n  padding: 0 var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n  margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\n:host(.dark) .app-status {\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-theme-active);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(*) {\n  fill: var(--ic-theme-text);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding: 0 var(--ic-space-md);\n  }\n}\n\n/** Mobile styling **/\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n  display: none;\n}\n\n:host(.mobile-mode) .title-link {\n  margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n  max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-top: var(--ic-keyline-darken);\n  height: 4rem;\n  padding-left: var(--ic-space-md);\n  padding-right: var(--ic-space-md);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 2.5rem;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 3.5rem;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(*) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-hc-border);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(*) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n  IcDeviceSizes,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() topNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n      document.body.style.height = \"100%\";\n      document.body.style.overflow = \"hidden\";\n    } else {\n      this.icNavigationMenuClosed.emit();\n      document.body.style.height = \"auto\";\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.topNavResized.emit({\n        size: currSize,\n      });\n      if (document.activeElement?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon\"\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          appearance={foregroundColor}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-8fe2b073.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as n,g as i}from"./p-6b5e91e2.js";import{I as o}from"./p-26b7b18f.js";import{u as a,t as r,a as s,d as c}from"./p-e4d0d1fb.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const d=class{constructor(t){e(this,t);this.foregroundColor=a();this.rightContent=false;this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.scrollFactor="right -100px";this.aligned="left";this.backgroundImage=undefined;this.contentAligned="left";this.disableBackgroundParallax=false;this.heading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.size="default";this.small=false;this.subheading=undefined}componentWillLoad(){this.rightContent=r(this.el,"secondary")}componentDidLoad(){s([{prop:this.heading,propName:"heading"}],"Hero")}componentWillRender(){this.rightContent=r(this.el,"secondary")}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const n=-100+e*t;this.scrollFactor="right "+n+"px"}render(){const{aligned:e,small:i,size:a,heading:r,subheading:s,secondaryHeading:h,secondarySubheading:d,foregroundColor:l,backgroundImage:m,scrollFactor:g}=this;let p={};if(c(m)){p={"background-image":"url("+m+")","background-position":g}}return t(n,{class:{[o.Dark]:l===o.Dark,["has-background-image"]:m!==undefined,["small"]:i||a==="small",["secondary-heading"]:!!h},style:p},t("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},t("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},t("div",{class:"heading"},t("slot",{name:"heading"},t("ic-typography",{variant:i||a==="small"?"h2":"h1",class:{["heading-bottom-spacing"]:!i&&a!=="small"}},r))),t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"body"},s))),t("div",{class:"interaction-container"},t("slot",{name:"interaction"}))),(c(h)||this.rightContent)&&t("div",{class:"right-container"},t("slot",{name:"secondary"},h&&t("div",{class:"secondary-container"},t("div",{class:"secondary-heading"},t("ic-typography",{variant:"h4"},h)),t("div",{class:"secondary-subheading"},t("ic-typography",{variant:"subtitle-small"},d)))))))}get el(){return i(this)}};d.style=h;export{d as ic_hero};
-//# sourceMappingURL=p-8fe2b073.entry.js.map

package/dist/core/p-8fe2b073.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icHeroCss","Hero","getThemeForegroundColor","this","rightContent","secondaryHeading","undefined","componentWillLoad","slotHasContent","el","componentDidLoad","onComponentRequiredPropUndefined","prop","heading","propName","componentWillRender","themeChangeHandler","ev","theme","detail","foregroundColor","mode","doScroll","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","render","aligned","small","size","subheading","secondarySubheading","backgroundImage","style","isPropDefined","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n  flex-wrap: wrap;\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcSizesNoLarge,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The size of the hero component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      size,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (isPropDefined(backgroundImage)) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"small\"]: small || size === \"small\",\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small || size === \"small\" ? \"h2\" : \"h1\"}\n                  class={{\n                    [\"heading-bottom-spacing\"]: !small && size !== \"small\",\n                  }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(isPropDefined(secondaryHeading) || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sJAAA,MAAMA,EAAY,mzM,MCoCLC,EAAI,M,8CAG+BC,I,kBACb,M,2BAG9BC,KAAKC,cAAgBD,KAAKE,mBAAqBC,U,kBAClB,e,aAKD,O,mDAUmB,O,+BAKJ,M,oGAoBd,U,WAKN,M,0BAO1B,iBAAAC,GACEJ,KAAKC,aAAeI,EAAeL,KAAKM,GAAI,Y,CAG9C,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMT,KAAKU,QAASC,SAAU,YACjC,O,CAIJ,mBAAAC,GACEZ,KAAKC,aAAeI,EAAeL,KAAKM,GAAI,Y,CAI9C,kBAAAO,CAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BhB,KAAKiB,gBAAkBF,EAAMG,I,CAI/B,QAAAC,GACE,GAAInB,KAAKoB,0BAA2B,CAClC,M,CAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BzB,KAAK2B,aAAe,SAAWD,EAAI,I,CAGrC,MAAAE,GACE,MAAMC,QACJA,EAAOC,MACPA,EAAKC,KACLA,EAAIrB,QACJA,EAAOsB,WACPA,EAAU9B,iBACVA,EAAgB+B,oBAChBA,EAAmBhB,gBACnBA,EAAeiB,gBACfA,EAAeP,aACfA,GACE3B,KAEJ,IAAImC,EAAQ,GAEZ,GAAIC,EAAcF,GAAkB,CAClCC,EAAQ,CACN,mBAAoB,OAASD,EAAkB,IAC/C,sBAAuBP,E,CAI3B,OACEU,EAACC,EAAI,CACHC,MAAO,CACL,CAACC,EAAsBC,MACrBxB,IAAoBuB,EAAsBC,KAC5C,CAAC,wBAAyBP,IAAoB/B,UAC9C,CAAC,SAAU2B,GAASC,IAAS,QAC7B,CAAC,uBAAwB7B,GAE3BiC,MAAOA,GAEPE,EAAA,wBACER,QAASA,EACTa,WAAU,KACVH,MAAM,qBAENF,EAAA,OACEE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,6BAA8BvC,KAAK2C,uBAGtCN,EAAA,OAAKE,MAAM,WACTF,EAAA,QAAMO,KAAK,WACTP,EAAA,iBACEQ,QAASf,GAASC,IAAS,QAAU,KAAO,KAC5CQ,MAAO,CACL,CAAC,2BAA4BT,GAASC,IAAS,UAGhDrB,KAIP2B,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMO,KAAK,cACTP,EAAA,iBAAeQ,QAAQ,QAAQb,KAGnCK,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,mBAGbR,EAAclC,IAAqBF,KAAKC,eACxCoC,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMO,KAAK,aACR1C,GACCmC,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeQ,QAAQ,MACpB3C,IAGLmC,EAAA,OAAKE,MAAM,wBACTF,EAAA,iBAAeQ,QAAQ,kBACpBZ,Q"}

package/dist/core/p-9f29ab99.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{d as a,r as n,a as r,i as c,b as l}from"./p-e4d0d1fb.js";import{C as u}from"./p-c2e091d7.js";import{C as d}from"./p-3b185c32.js";import"./p-26b7b18f.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-color-primary-text);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.disabled) ::part(button){color:var(--ic-architectural-200) !important;pointer-events:none}:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description{color:var(--ic-architectural-200) !important}:host([variant="destructive"]) ::part(button){color:var(--ic-action-destructive)}:host ::part(button):hover{background-color:var(--ic-action-dark-bg-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-color-white-text);background-color:var(--ic-focus-blue);box-shadow:none}:host(.disabled) ::part(button):focus-visible,:host(.disabled) ::part(button):focus{color:var(--ic-theme-lighten-40) !important}:host([variant="destructive"]) ::part(button):focus-visible,:host([variant="destructive"]) ::part(button):focus{background-color:var(--ic-action-destructive)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{color:var(--ic-color-white-text)}:host(.disabled) ic-button:focus-within .focus-border{border-color:var(--ic-architectural-white)}:host(.disabled) ic-button:focus-within .menu-item-label,:host(.disabled) ic-button:focus-within .shortcut,:host(.disabled) ic-button:focus-within .menu-item-description{color:var(--ic-theme-lighten-40) !important}:host ::part(button):active{background-color:var(--ic-action-dark-bg-active);color:var(--ic-color-primary-text) !important}:host([variant="destructive"]) ::part(button):active{background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-destructive) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{color:var(--ic-color-secondary-text)}.shortcut{color:var(--ic-color-tertiary-text);display:flex;flex:min-content}:host([variant="destructive"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{color:var(--ic-color-primary-text)}ic-button:active .menu-item-description{color:var(--ic-color-secondary-text)}ic-button:active .shortcut{color:var(--ic-color-tertiary-text)}:host([variant="destructive"]) ic-button:active .menu-item-label{color:var(--ic-action-destructive) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.disabled) .menu-item-info,:host(.disabled) .menu-item-label,:host(.disabled) .shortcut,:host(.disabled) .menu-item-description,:host(.disabled) ic-button:focus-within .menu-item-info,:host(.disabled) ic-button:focus-within .menu-item-label,:host(.disabled) ic-button:focus-within .shortcut,:host(.disabled) ic-button:focus-within .menu-item-description{color:GrayText !important}:host(.disabled) ::part(button):focus-visible,:host(.disabled) ::part(button):focus{outline-color:GrayText !important}}';const b=class{constructor(i){t(this,i);this.childBlur=e(this,"childBlur",7);this.handleMenuItemClick=e(this,"handleMenuItemClick",7);this.triggerPopoverMenuInstance=e(this,"triggerPopoverMenuInstance",7);this.handleClick=t=>{if(a(this.submenuTriggerFor)){this.triggerPopoverMenuInstance.emit()}else if(this.variant==="toggle"){t.preventDefault();this.toggleChecked?this.toggleChecked=false:this.toggleChecked=true}this.handleMenuItemClick.emit({label:this.label,hasSubMenu:!!this.el.submenuTriggerFor})};this.getMenuItemAriaLabel=()=>{let t=this.label;if(a(this.description)){t=`${t}, ${this.description}`}if(a(this.keyboardShortcut)){t=`${t}, ${this.keyboardShortcut}`}if(this.variant==="destructive"){t=`${t}, destructive`}if(a(this.submenuTriggerFor)){t=`${t}, triggers submenu`}if(this.el.classList.contains("ic-popover-submenu-back-button")){t="Go back to parent menu"}const e=l(this.el);if(e.tagName==="IC-MENU-GROUP"&&e.label){return`${t}, ${e.label} menu group`}else{return t}};this.toggleChecked=false;this.description=undefined;this.disabled=false;this.href=undefined;this.hreflang=undefined;this.keyboardShortcut=undefined;this.label=undefined;this.referrerpolicy=undefined;this.rel=undefined;this.submenuTriggerFor=undefined;this.target=undefined;this.variant="default"}componentWillLoad(){if(a(this.submenuTriggerFor)&&this.variant!=="default"){this.variant="default"}n(this.disabled,this.el)}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Menu Item")}handleHostClick(t){if(this.disabled){t.stopImmediatePropagation()}}render(){const t=()=>i("div",{class:"menu-item-info"},i("div",{class:"menu-labels"},i("ic-typography",{class:"menu-item-label"},this.label),this.keyboardShortcut&&i("ic-typography",{variant:"caption",class:"shortcut"},this.keyboardShortcut)),this.description&&i("ic-typography",{class:"menu-item-description",variant:"caption"},this.description));return i(o,{class:{["disabled"]:this.disabled}},i("li",{role:this.variant==="toggle"?"menuitemcheckbox":"menuitem","aria-disabled":`${this.disabled}`,"aria-checked":this.variant==="toggle"&&this.toggleChecked===true?true:this.variant==="toggle"&&this.toggleChecked===false?false:undefined},i("ic-button",{fullWidth:true,variant:"tertiary",onClick:this.handleClick,href:a(this.href),hreflang:a(this.hreflang),target:a(this.target),rel:a(this.rel),referrerpolicy:this.referrerpolicy!==undefined?this.referrerpolicy:null,"aria-disabled":`${this.disabled}`,"aria-label":this.getMenuItemAriaLabel(),ariaControlsId:a(this.submenuTriggerFor)?`ic-popover-submenu-${this.submenuTriggerFor}`:false,"aria-haspopup":a(this.submenuTriggerFor)||this.el.classList.contains("ic-popover-submenu-back-button")?"menu":false,ariaOwnsId:a(this.submenuTriggerFor)?`ic-popover-submenu-${this.submenuTriggerFor}`:false},i("div",{class:"focus-border"},c(this.el,"icon")&&i("span",{class:"icon"},i("slot",{name:"icon"})),i(t,null),this.variant==="toggle"&&i("span",{class:{["check-icon"]:true,["hide"]:!this.toggleChecked},"aria-hidden":"true",innerHTML:u}),a(this.submenuTriggerFor)&&i("span",{class:{["submenu-icon"]:true},"aria-hidden":"true",innerHTML:d})))))}static get delegatesFocus(){return true}get el(){return s(this)}};b.style=h;export{b as ic_menu_item};
-//# sourceMappingURL=p-9f29ab99.entry.js.map

package/dist/core/p-9f29ab99.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icMenuItemCss","MenuItem","this","handleClick","e","isPropDefined","submenuTriggerFor","triggerPopoverMenuInstance","emit","variant","preventDefault","toggleChecked","handleMenuItemClick","label","hasSubMenu","el","getMenuItemAriaLabel","ariaLabel","description","keyboardShortcut","classList","contains","parentEl","getParentElement","tagName","componentWillLoad","removeDisabledFalse","disabled","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","handleHostClick","stopImmediatePropagation","render","MenuItemInformation","h","class","Host","role","undefined","fullWidth","onClick","href","hreflang","target","rel","referrerpolicy","ariaControlsId","ariaOwnsId","isSlotUsed","name","innerHTML","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n  list-style: none;\n  padding: 0;\n}\n\n:host ::part(button) {\n  color: var(--ic-color-primary-text);\n  padding: calc(var(--ic-space-xxxs) / 2);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: 0;\n  min-height: 2.5rem;\n  height: auto;\n}\n\n.focus-border {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: var(--ic-border-radius);\n  margin: calc(var(--ic-space-xxxs) / 2);\n  padding: var(--ic-space-xxs);\n  border: var(--ic-space-xxxs) dashed transparent;\n\n  --icon-height: auto;\n}\n\n:host(.disabled) ::part(button) {\n  color: var(--ic-architectural-200) !important;\n  pointer-events: none;\n}\n\n:host(.disabled) .menu-item-label,\n:host(.disabled) .shortcut,\n:host(.disabled) .menu-item-description {\n  color: var(--ic-architectural-200) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n  color: var(--ic-action-destructive);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n  color: var(--ic-color-white-text);\n  background-color: var(--ic-focus-blue);\n  box-shadow: none;\n}\n\n:host(.disabled) ::part(button):focus-visible,\n:host(.disabled) ::part(button):focus {\n  color: var(--ic-theme-lighten-40) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n  background-color: var(--ic-action-destructive);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n  color: var(--ic-color-white-text);\n}\n\n:host(.disabled) ic-button:focus-within .focus-border {\n  border-color: var(--ic-architectural-white);\n}\n\n:host(.disabled) ic-button:focus-within .menu-item-label,\n:host(.disabled) ic-button:focus-within .shortcut,\n:host(.disabled) ic-button:focus-within .menu-item-description {\n  color: var(--ic-theme-lighten-40) !important;\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-action-dark-bg-active);\n  color: var(--ic-color-primary-text) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-active);\n  color: var(--ic-action-destructive) !important;\n}\n\n.menu-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: baseline;\n  white-space: pre-line;\n  text-align: left;\n}\n\n.menu-labels {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n  color: var(--ic-color-secondary-text);\n}\n\n.shortcut {\n  color: var(--ic-color-tertiary-text);\n  display: flex;\n  flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n  text-transform: uppercase;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n  color: var(--ic-color-primary-text);\n}\n\nic-button:active .menu-item-description {\n  color: var(--ic-color-secondary-text);\n}\n\nic-button:active .shortcut {\n  color: var(--ic-color-tertiary-text);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n  color: var(--ic-action-destructive) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n  visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  :host ::part(button) {\n    border: canvas;\n  }\n\n  :host ::part(button):focus-visible {\n    outline: var(--ic-space-xxxs) solid transparent;\n  }\n\n  .focus-border {\n    border-color: canvas;\n  }\n\n  :host(.disabled) ic-button:focus-within .focus-border {\n    border-color: GrayText;\n  }\n\n  :host(.disabled) .menu-item-info,\n  :host(.disabled) .menu-item-label,\n  :host(.disabled) .shortcut,\n  :host(.disabled) .menu-item-description,\n  :host(.disabled) ic-button:focus-within .menu-item-info,\n  :host(.disabled) ic-button:focus-within .menu-item-label,\n  :host(.disabled) ic-button:focus-within .shortcut,\n  :host(.disabled) ic-button:focus-within .menu-item-description {\n    color: GrayText !important;\n  }\n\n  :host(.disabled) ::part(button):focus-visible,\n  :host(.disabled) ::part(button):focus {\n    outline-color: GrayText !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  getParentElement,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  @State() toggleChecked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked\n        ? (this.toggleChecked = false)\n        : (this.toggleChecked = true);\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = getParentElement(this.el);\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" && this.toggleChecked === true\n              ? true\n              : this.variant === \"toggle\" && this.toggleChecked === false\n              ? false\n              : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-a13236ef.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icCheckboxCss","Checkbox","this","IC_TEXT_FIELD","handleClick","checked","icCheck","emit","checkboxChecked","handleFormReset","initiallyChecked","componentWillLoad","removeDisabledFalse","disabled","el","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","value","componentDidRender","additionalFieldDisplay","textfield","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","disconnectedCallback","removeFormResetListener","setFocus","checkboxEl","shadowRoot","focus","render","id","isPropDefined","groupLabel","replace","parentElementSize","parentElement","size","renderHiddenInput","name","removeHiddenInput","h","Host","class","small","indeterminate","width","height","viewBox","xmlns","d","role","type","onClick","form","formaction","formenctype","formmethod","formnovalidate","formtarget","variant","htmlFor","isSlotUsed","ref","dynamicText"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n  align-items: center;\n}\n\n:host(.small) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-architectural-white);\n  border: var(--ic-border-width) solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  flex-shrink: 0;\n}\n\n:host(.small) .checkbox,\n:host(.small) .container svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.large) .checkbox,\n:host(.large) .container svg {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: var(--ic-border-width) solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: var(--ic-architectural-white);\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover-no-alpha);\n  border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active-no-alpha);\n  border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover-no-alpha);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active-no-alpha);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n  border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n:host(.small) .checkmark {\n  margin-left: calc(-1 * var(--ic-space-md));\n  right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.large) .checkmark {\n  margin-left: calc(-1 * var(--ic-space-xl));\n  right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n:host(.small) .indeterminate-symbol {\n  width: 0.6rem;\n  right: -0.8rem;\n  margin-left: -0.6rem;\n}\n\n:host(.large) .indeterminate-symbol {\n  width: 1.25rem;\n  right: -1.625rem;\n  margin-left: -1.25rem;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  private additionalFieldContainer: HTMLDivElement;\n  private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n  @Element() el: HTMLIcCheckboxElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop() size?: IcSizes;\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(this.IC_TEXT_FIELD);\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else if (this.additionalFieldContainer) {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.el.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  render() {\n    let id = `ic-checkbox-${\n      isPropDefined(this.label) ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    const parentElementSize = (\n      this.el.parentElement as HTMLIcCheckboxGroupElement\n    ).size;\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.el,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.el);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"small\"]: this.small,\n          [`${this.size || parentElementSize}`]: true,\n        }}\n      >\n        <div class=\"container\">\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n            form={this.form}\n            formaction={this.formaction}\n            formenctype={this.formenctype}\n            formmethod={this.formmethod}\n            formnovalidate={this.formnovalidate}\n            formtarget={this.formtarget}\n          ></input>\n          <ic-typography class=\"checkbox-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-adf468f4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icCheckboxGroupCss","CheckboxGroup","handleChange","ev","target","tagName","stopImmediatePropagation","componentWillLoad","removeDisabledFalse","this","disabled","el","componentDidLoad","Array","from","querySelectorAll","forEach","checkbox","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","selectHandler","checkedOptions","filter","checked","icChange","emit","value","map","opt","textFieldValue","_a","querySelector","selectedOption","render","describedBy","getInputDescribedByText","helperText","validationStatus","hadValidationStatus","hasValidationStatus","h","Host","class","small","size","required","hideLabel","id","trim","for","ariaLiveMode","status","message","validationText"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    Array.from(this.el.querySelectorAll(\"ic-checkbox\")).forEach((checkbox) => {\n      if (!checkbox.name) checkbox.name = this.name;\n      checkbox.groupLabel = this.label;\n    });\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(ev: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(\"ic-checkbox\")\n    ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n    this.icChange.emit({\n      value: checkedOptions.map((opt) => opt.value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: ev.target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small, [`${this.size}`]: true }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"iJAAA,MAAMA,EAAqB,47F,MCyBdC,EAAa,M,0EAMI,M,gBAKC,G,eAKA,M,uDAeD,M,UAKH,U,WAKA,M,sBAK8B,G,oBAKtB,E,CAQjC,YAAAC,CAAaC,GAGX,GAAKA,EAAGC,OAAuBC,UAAY,gBAAiB,CAC1DF,EAAGG,0B,EAIP,iBAAAC,GACEC,EAAoBC,KAAKC,SAAUD,KAAKE,G,CAG1C,gBAAAC,GACEC,MAAMC,KAAKL,KAAKE,GAAGI,iBAAiB,gBAAgBC,SAASC,IAC3D,IAAKA,EAASC,KAAMD,EAASC,KAAOT,KAAKS,KACzCD,EAASE,WAAaV,KAAKW,KAAK,IAGlCC,EACE,CACE,CAAEC,KAAMb,KAAKW,MAAOG,SAAU,SAC9B,CAAED,KAAMb,KAAKS,KAAMK,SAAU,SAE/B,iB,CAKJ,aAAAC,CAAcrB,GACZ,MAAMsB,EAAiBZ,MAAMC,KAC3BL,KAAKE,GAAGI,iBAAiB,gBACzBW,QAAQT,GAAaA,EAASU,UAAYV,EAASP,WACrDD,KAAKmB,SAASC,KAAK,CACjBC,MAAOL,EAAeM,KAAKC,GAAQA,EAAIF,QACvCL,eAAgBA,EAAeM,KAAKC,I,MAAQ,OAC1Cf,SAAUe,EACVC,gBAAgBC,EAAAF,EAAIG,cAAc,oBAAgB,MAAAD,SAAA,SAAAA,EAAEJ,MACrD,IACDM,eAAgBjC,EAAGC,Q,CAIvB,MAAAiC,GACE,MAAMC,EAAcC,EAClB9B,KAAKS,KACLT,KAAK+B,aAAe,GACpB/B,KAAKgC,mBAAqB,IAE5B,MAAMC,EAAsBC,EAC1BlC,KAAKgC,iBACLhC,KAAKC,UAGP,OACEkC,EAACC,EAAI,CAACC,MAAO,CAAE,CAAC,SAAUrC,KAAKsC,MAAO,CAAC,GAAGtC,KAAKuC,QAAS,QACpDvC,KAAKgC,mBAAqB,SAC1BhC,KAAKwC,UACLxC,KAAKyC,YACLN,EAAA,QACEO,GAAG,uBACHL,MAAM,0BAAyB,cACnB,QAEXrC,KAAKW,MAAO,IACZX,KAAKgC,mBAAqB,QAAU,gBAAkB,KAAM,IAC5DhC,KAAKwC,SAAW,WAAa,MAGlCL,EAAA,YACEO,GAAI1C,KAAKS,KAAI,kBACI,GACfT,KAAKgC,mBAAqB,SAAWhC,KAAKwC,UAAYxC,KAAKyC,UACvD,uBACA,MACFZ,IAAcc,OAClB1C,SAAUD,KAAKC,WAEbD,KAAKyC,WACLN,EAAA,cACEA,EAAA,kBACEE,MAAO,CAAE,CAAC,GAAGrC,KAAKgC,oBAAqB,MACvCrB,MAAOX,KAAKW,MACZoB,WAAY/B,KAAK+B,WACjBS,SAAUxC,KAAKwC,SACfvC,SAAUD,KAAKC,SACf2C,IAAK5C,KAAKS,QAIhB0B,EAAA,OAAKE,MAAM,wBACTF,EAAA,eAGHF,GACCE,EAAA,uBACES,IAAK5C,KAAKS,KACVoC,aAAa,SACbC,OAAQ9C,KAAKgC,iBACbe,QAAS/C,KAAKgD,iB"}