@six-group/ui-library 0.0.0-insider.a8d68c7 → 0.0.0-insider.b26fdef

package/dist/ui-library/p-19a61686.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as a,H as s,g as o}from"./p-0beec94f.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";let e=0;const l=class{constructor(a){t(this,a);this.sixClose=i(this,"six-tab-close",7);this.componentId=`tab-${++e}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var i;(i=this.tab)===null||i===void 0?void 0:i.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const i=this.host.closest("six-tab-group");const o=(t=i===null||i===void 0?void 0:i.placement)!==null&&t!==void 0?t:"top";return a(s,{id:this.host.id||this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":o==="top","tab--bottom":o==="bottom","tab--left":o==="left","tab--right":o==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),a("div",{class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":o==="top","tab__indicator--bottom":o==="bottom","tab__indicator--left":o==="left","tab__indicator--right":o==="right"}}))}get host(){return o(this)}};l.style=r;export{l as six_tab};
+//# sourceMappingURL=p-19a61686.entry.js.map

package/dist/ui-library/p-19a61686.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: flex;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n  position: absolute;\n  &.tab__indicator--active {\n    background-color: var(--six-tab-border-color-active);\n  }\n}\n\n// TOP\n.tab--top {\n  margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n  width: 100%;\n  bottom: 0;\n  height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n  margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n  width: 100%;\n  top: 0;\n  height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n  margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n  height: 100%;\n  right: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n  margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,krDCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0Cf,KAAKgB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAQ,MAARA,SAAQ,SAARA,EAAUG,aAAS,MAAAX,SAAA,EAAAA,EAAI,MACzC,OAEEY,EAACC,EAAI,CAACtB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7BkB,EAAA,OACEE,KAAK,OACLC,IAAMC,GAAQvB,KAAKQ,IAAMe,EACzBC,MAAO,CACLhB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAelB,KAAKyB,OACpB,gBAAiBzB,KAAK0B,SACtB,gBAAiB1B,KAAK2B,UAExBC,KAAK,MAAK,gBACK5B,KAAK2B,SAAW,OAAS,QAAO,gBAChC3B,KAAKyB,OAAS,OAAS,QACtCI,SAAU7B,KAAK2B,WAAa3B,KAAKyB,OAAS,KAAO,KAEjDN,EAAA,aACCnB,KAAK0B,UACJP,EAAA,mBACEW,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAASjC,KAAKG,iBACd+B,UAAW,EAAC,cACA,UAIlBf,EAAA,OACEK,MAAO,CACLW,eAAgB,KAChB,yBAA0BnC,KAAKyB,OAG/B,sBAAuBP,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W"}

package/dist/ui-library/{p-73597d13.entry.js → p-1d0c5929.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as r,H as n,g as i}from"./p-ac4f4d45.js";const a=":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";const e=class{constructor(r){t(this,r);this.padded=true}render(){return r(n,null,r("div",{part:"left-margin",class:"left-margin"}),r("div",{part:"content",class:{content:true,"content--padded":this.padded}},r("slot",null)),r("div",{part:"right-margin",class:"right-margin"}))}get host(){return i(this)}};e.style=a;export{e as six_main_container};
-//# sourceMappingURL=p-73597d13.entry.js.map
+import{r as t,h as r,H as n,g as i}from"./p-0beec94f.js";const a=":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";const e=class{constructor(r){t(this,r);this.padded=true}render(){return r(n,null,r("div",{part:"left-margin",class:"left-margin"}),r("div",{part:"content",class:{content:true,"content--padded":this.padded}},r("slot",null)),r("div",{part:"right-margin",class:"right-margin"}))}get host(){return i(this)}};e.style=a;export{e as six_main_container};
+//# sourceMappingURL=p-1d0c5929.entry.js.map

package/dist/ui-library/p-1d0c5929.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixMainContainerCss","SixMainContainer","render","h","Host","part","class","content","this","padded"],"sources":["src/components/six-main-container/six-main-container.scss?tag=six-main-container&encapsulation=shadow","src/components/six-main-container/six-main-container.tsx"],"sourcesContent":["$margin-default-width: 10rem;\n$content-default-width: 60rem;\n$content-min-width: 48rem;\n$content-max-width: 100rem;\n\n:host {\n  display: flex;\n  flex-wrap: nowrap;\n  min-width: fit-content;\n}\n\n.left-margin,\n.right-margin {\n  flex: 1 6 $margin-default-width;\n  min-width: var(--six-spacing-xxx-large);\n}\n\n.content {\n  flex: 6 1 $content-default-width;\n  min-width: $content-min-width;\n  max-width: $content-max-width;\n  &--padded {\n    padding: var(--six-spacing-xxx-large) 0;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The main container's content.\n *\n * @part left-margin  - The component's left margin area.\n * @part content      - The component's content area.\n * @part right-margin - The component's right margin area.\n */\n\n@Component({\n  tag: 'six-main-container',\n  styleUrl: 'six-main-container.scss',\n  shadow: true,\n})\nexport class SixMainContainer {\n  @Element() host!: HTMLSixMainContainerElement;\n\n  /** Set to false to remove top and bottom padding.  */\n  @Prop() padded = true;\n\n  render() {\n    return (\n      <Host>\n        <div part=\"left-margin\" class=\"left-margin\" />\n        <div part=\"content\" class={{ content: true, 'content--padded': this.padded }}>\n          <slot />\n        </div>\n        <div part=\"right-margin\" class=\"right-margin\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,+P,MCkBfC,EAAgB,M,qCAIV,I,CAEjB,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,KAAK,cAAcC,MAAM,gBAC9BH,EAAA,OAAKE,KAAK,UAAUC,MAAO,CAAEC,QAAS,KAAM,kBAAmBC,KAAKC,SAClEN,EAAA,cAEFA,EAAA,OAAKE,KAAK,eAAeC,MAAM,iB"}

package/dist/ui-library/{p-03a145f5.entry.js → p-23c02c98.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as i,h as t}from"./p-ac4f4d45.js";import{D as e,a as h}from"./p-8cf72af6.js";import{E as a}from"./p-60621dc6.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";const r=class{constructor(t){s(this,t);this.searchFieldChange=i(this,"six-search-field-change",7);this.eventListeners=new a;this.handleInputChange=()=>{if(this.inputElement!=null){this.searchFieldChange.emit({value:this.inputElement.value})}};this.placeholder=undefined;this.debounce=e;this.disabled=false;this.value="";this.clearable=false}handleValueChange(){if(this.inputElement!=null){this.inputElement.value=this.value}}componentDidLoad(){if(this.inputElement==null)return;this.eventListeners.add(this.inputElement,"six-input-input",h(this.handleInputChange,this.debounce));this.eventListeners.add(this.inputElement,"keydown",(s=>{const i=s;if(i.key==="Enter"){this.handleInputChange()}}))}disconnectedCallback(){this.eventListeners.removeAll()}render(){return t("div",{class:"search-box"},t("six-input",{ref:s=>this.inputElement=s,placeholder:this.placeholder,value:this.value,disabled:this.disabled,clearable:this.clearable},t("six-icon",{class:"search-box__icon",slot:"prefix",size:"small",onClick:this.handleInputChange},"search")),t("slot",null))}static get watchers(){return{value:["handleValueChange"]}}};r.style=o;export{r as six_search_field};
-//# sourceMappingURL=p-03a145f5.entry.js.map
+import{r as s,c as i,h as t}from"./p-0beec94f.js";import{D as e,a as h}from"./p-a1502802.js";import{E as a}from"./p-8bfb4bfc.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";const r=class{constructor(t){s(this,t);this.searchFieldChange=i(this,"six-search-field-change",7);this.eventListeners=new a;this.handleInputChange=()=>{if(this.inputElement!=null){this.searchFieldChange.emit({value:this.inputElement.value})}};this.placeholder=undefined;this.debounce=e;this.disabled=false;this.value="";this.clearable=false}handleValueChange(){if(this.inputElement!=null){this.inputElement.value=this.value}}componentDidLoad(){if(this.inputElement==null)return;this.eventListeners.add(this.inputElement,"six-input-input",h(this.handleInputChange,this.debounce));this.eventListeners.add(this.inputElement,"keydown",(s=>{const i=s;if(i.key==="Enter"){this.handleInputChange()}}))}disconnectedCallback(){this.eventListeners.removeAll()}render(){return t("div",{class:"search-box"},t("six-input",{ref:s=>this.inputElement=s,placeholder:this.placeholder,value:this.value,disabled:this.disabled,clearable:this.clearable},t("six-icon",{class:"search-box__icon",slot:"prefix",size:"small",onClick:this.handleInputChange},"search")),t("slot",null))}static get watchers(){return{value:["handleValueChange"]}}};r.style=o;export{r as six_search_field};
+//# sourceMappingURL=p-23c02c98.entry.js.map

package/dist/ui-library/p-23c02c98.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSearchFieldCss","SixSearchField","this","eventListeners","EventListeners","handleInputChange","inputElement","searchFieldChange","emit","value","DEFAULT_DEBOUNCE_FAST","handleValueChange","componentDidLoad","add","debounce","event","keyboardEvent","key","disconnectedCallback","removeAll","render","h","class","ref","el","placeholder","disabled","clearable","slot","size","onClick"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,kN,MCoBbC,EAAc,M,oFAqBjBC,KAAAC,eAAiB,IAAIC,EAErBF,KAAAG,kBAAoB,KAC1B,GAAIH,KAAKI,cAAgB,KAAM,CAC7BJ,KAAKK,kBAAkBC,KAAK,CAAEC,MAAOP,KAAKI,aAAaG,O,4CApBvBC,E,cAGA,M,WAGH,G,eAGb,K,CAgBpB,iBAAAC,GACE,GAAIT,KAAKI,cAAgB,KAAM,CAC7BJ,KAAKI,aAAaG,MAAQP,KAAKO,K,EAInC,gBAAAG,GACE,GAAIV,KAAKI,cAAgB,KAAM,OAE/BJ,KAAKC,eAAeU,IAAIX,KAAKI,aAAc,kBAAmBQ,EAASZ,KAAKG,kBAAmBH,KAAKY,WACpGZ,KAAKC,eAAeU,IAAIX,KAAKI,aAAc,WAAYS,IACrD,MAAMC,EAAgBD,EACtB,GAAIC,EAAcC,MAAQ,QAAS,CAEjCf,KAAKG,mB,KAKX,oBAAAa,GACEhB,KAAKC,eAAegB,W,CAGtB,MAAAC,GACE,OACEC,EAAA,OAAKC,MAAM,cACTD,EAAA,aACEE,IAAMC,GAAQtB,KAAKI,aAAekB,EAClCC,YAAavB,KAAKuB,YAClBhB,MAAOP,KAAKO,MACZiB,SAAUxB,KAAKwB,SACfC,UAAWzB,KAAKyB,WAEhBN,EAAA,YAAUC,MAAM,mBAAmBM,KAAK,SAASC,KAAK,QAAQC,QAAS5B,KAAKG,mBAAiB,WAI/FgB,EAAA,a"}

package/dist/ui-library/p-2eed9d8d.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as e,g as r}from"./p-0beec94f.js";import{F as i}from"./p-6907a7dc.js";import{h as l}from"./p-faa04bb5.js";import{E as s}from"./p-8bfb4bfc.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox--focused .checkbox__control{outline:var(--six-focus-ring);outline-offset:0}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';let n=0;const a=class{constructor(e){o(this,e);this.sixBlur=t(this,"six-checkbox-blur",7);this.sixChange=t(this,"six-checkbox-change",7);this.sixFocus=t(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++n}`;this.labelId=`checkbox-label-${n}`;this.textId=`checkbox-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.handleChange=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.indeterminate=false;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleMouseDown=o=>{var t;o.preventDefault();(t=this.nativeInput)===null||t===void 0?void 0:t.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.checked=false;this.indeterminate=false}handleCheckedChange(){if(this.nativeInput==null)return;this.nativeInput.checked=this.checked;this.checked=this.nativeInput.checked;this.nativeInput.indeterminate=this.indeterminate}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-checkbox-change","change",this.host);this.eventListeners.forward("six-checkbox-blur","blur",this.host);this.eventListeners.forward("six-checkbox-focus","focus",this.host)}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const o=this.nativeInput;if(o==null){return}o.indeterminate=this.indeterminate}async setFocus(o){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.blur()}handleSlotChange(){this.hasLabelSlot=l(this.host,"label");this.hasErrorSlot=l(this.host,"error-text")}render(){return e(i,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,hasErrorTextSlot:this.hasErrorSlot,errorText:this.errorText,errorTextCount:this.errorTextCount,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},e("label",{part:"base",class:{checkbox:true,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},e("span",{part:"control",class:"checkbox__control"},this.checked&&e("span",{part:"checked-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(3.428571, 3.428571)"},e("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),e("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&e("span",{part:"indeterminate-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(2.285714, 6.857143)"},e("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),e("input",{ref:o=>this.nativeInput=o,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{part:"text",id:this.textId,class:"checkbox__text"},e("slot",null))))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=c;export{a as six_checkbox};
+//# sourceMappingURL=p-2eed9d8d.entry.js.map

package/dist/ui-library/p-2eed9d8d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","eventListeners","EventListeners","handleChange","nativeInput","checked","indeterminate","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleMouseDown","event","preventDefault","_a","focus","handleCheckedChange","handleLabelChange","handleSlotChange","connectedCallback","host","shadowRoot","addEventListener","forward","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","setFocus","options","removeFocus","blur","hasLabelSlot","hasSlot","hasErrorSlot","render","h","FormControl","label","hasErrorTextSlot","errorText","errorTextCount","size","disabled","required","displayError","invalid","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox--focused {\n  .checkbox__control {\n    outline: var(--six-focus-ring);\n    outline-offset: 0;\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) return;\n\n    this.nativeInput.checked = this.checked;\n    this.checked = this.nativeInput.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n    this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n    this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        hasErrorTextSlot={this.hasErrorSlot}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-8e0b6b7e.entry.js → p-3187bc23.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as s}from"./p-ac4f4d45.js";const t=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);display:inline-flex}.progress-ring{display:inline-flex;align-items:center;justify-content:center;position:relative}.progress-ring__image{transform:rotate(-90deg);transform-origin:50% 50%}.progress-ring__track{stroke:var(--track-color)}.progress-ring__indicator{stroke:var(--indicator-color);transition:0.35s stroke-dashoffset, 0.35s stroke}.progress-ring__label{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;user-select:none;font-family:var(--six-font-family)}";const i=class{constructor(s){r(this,s);this.size=128;this.strokeWidth=4;this.percentage=0}handlePercentageChange(){this.updateProgress()}componentDidLoad(){this.updateProgress()}updateProgress(){var r;if(((r=this.indicator)===null||r===void 0?void 0:r.r)==null)return;const s=this.indicator.r.baseVal.value;const t=s*2*Math.PI;const i=t-this.percentage/100*t;this.indicator.style.strokeDasharray=`${t} ${t}`;this.indicator.style.strokeDashoffset=`${i}`}render(){return s("div",{part:"base",class:"progress-ring"},s("svg",{class:"progress-ring__image",width:this.size,height:this.size},s("circle",{class:"progress-ring__track","stroke-width":this.strokeWidth,"stroke-linecap":"round",fill:"transparent",r:this.size/2-this.strokeWidth*2,cx:this.size/2,cy:this.size/2}),s("circle",{ref:r=>this.indicator=r,class:"progress-ring__indicator","stroke-width":this.strokeWidth,"stroke-linecap":"round",fill:"transparent",r:this.size/2-this.strokeWidth*2,cx:this.size/2,cy:this.size/2})),s("span",{part:"label",class:"progress-ring__label"},s("slot",null)))}static get watchers(){return{percentage:["handlePercentageChange"]}}};i.style=t;export{i as six_progress_ring};
-//# sourceMappingURL=p-8e0b6b7e.entry.js.map
+import{r,h as s}from"./p-0beec94f.js";const t=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);display:inline-flex}.progress-ring{display:inline-flex;align-items:center;justify-content:center;position:relative}.progress-ring__image{transform:rotate(-90deg);transform-origin:50% 50%}.progress-ring__track{stroke:var(--track-color)}.progress-ring__indicator{stroke:var(--indicator-color);transition:0.35s stroke-dashoffset, 0.35s stroke}.progress-ring__label{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;user-select:none;font-family:var(--six-font-family)}";const i=class{constructor(s){r(this,s);this.size=128;this.strokeWidth=4;this.percentage=0}handlePercentageChange(){this.updateProgress()}componentDidLoad(){this.updateProgress()}updateProgress(){var r;if(((r=this.indicator)===null||r===void 0?void 0:r.r)==null)return;const s=this.indicator.r.baseVal.value;const t=s*2*Math.PI;const i=t-this.percentage/100*t;this.indicator.style.strokeDasharray=`${t} ${t}`;this.indicator.style.strokeDashoffset=`${i}`}render(){return s("div",{part:"base",class:"progress-ring"},s("svg",{class:"progress-ring__image",width:this.size,height:this.size},s("circle",{class:"progress-ring__track","stroke-width":this.strokeWidth,"stroke-linecap":"round",fill:"transparent",r:this.size/2-this.strokeWidth*2,cx:this.size/2,cy:this.size/2}),s("circle",{ref:r=>this.indicator=r,class:"progress-ring__indicator","stroke-width":this.strokeWidth,"stroke-linecap":"round",fill:"transparent",r:this.size/2-this.strokeWidth*2,cx:this.size/2,cy:this.size/2})),s("span",{part:"label",class:"progress-ring__label"},s("slot",null)))}static get watchers(){return{percentage:["handlePercentageChange"]}}};i.style=t;export{i as six_progress_ring};
+//# sourceMappingURL=p-3187bc23.entry.js.map

package/dist/ui-library/p-3187bc23.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixProgressRingCss","SixProgressRing","handlePercentageChange","this","updateProgress","componentDidLoad","_a","indicator","r","radius","baseVal","value","circumference","Math","PI","offset","percentage","style","strokeDasharray","strokeDashoffset","render","h","part","class","width","size","height","strokeWidth","fill","cx","cy","ref","el"],"sources":["src/components/six-progress-ring/six-progress-ring.scss?tag=six-progress-ring&encapsulation=shadow","src/components/six-progress-ring/six-progress-ring.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n  font-family: var(--six-font-family);\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  private indicator?: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage = 0;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  private updateProgress() {\n    if (this.indicator?.r == null) return;\n\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el) => (this.indicator = el as SVGCircleElement)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAqB,gvB,MCmBdC,EAAe,M,mCAIX,I,iBAGO,E,gBAGD,C,CAGrB,sBAAAC,GACEC,KAAKC,gB,CAGP,gBAAAC,GACEF,KAAKC,gB,CAGC,cAAAA,G,MACN,KAAIE,EAAAH,KAAKI,aAAS,MAAAD,SAAA,SAAAA,EAAEE,IAAK,KAAM,OAE/B,MAAMC,EAASN,KAAKI,UAAUC,EAAEE,QAAQC,MACxC,MAAMC,EAAgBH,EAAS,EAAII,KAAKC,GACxC,MAAMC,EAASH,EAAiBT,KAAKa,WAAa,IAAOJ,EAEzDT,KAAKI,UAAUU,MAAMC,gBAAkB,GAAGN,KAAiBA,IAC3DT,KAAKI,UAAUU,MAAME,iBAAmB,GAAGJ,G,CAG7C,MAAAK,GACE,OACEC,EAAA,OAAKC,KAAK,OAAOC,MAAM,iBACrBF,EAAA,OAAKE,MAAM,uBAAuBC,MAAOrB,KAAKsB,KAAMC,OAAQvB,KAAKsB,MAC/DJ,EAAA,UACEE,MAAM,uBAAsB,eACdpB,KAAKwB,YAAW,iBACf,QACfC,KAAK,cACLpB,EAAGL,KAAKsB,KAAO,EAAItB,KAAKwB,YAAc,EACtCE,GAAI1B,KAAKsB,KAAO,EAChBK,GAAI3B,KAAKsB,KAAO,IAGlBJ,EAAA,UACEU,IAAMC,GAAQ7B,KAAKI,UAAYyB,EAC/BT,MAAM,2BAA0B,eAClBpB,KAAKwB,YAAW,iBACf,QACfC,KAAK,cACLpB,EAAGL,KAAKsB,KAAO,EAAItB,KAAKwB,YAAc,EACtCE,GAAI1B,KAAKsB,KAAO,EAChBK,GAAI3B,KAAKsB,KAAO,KAIpBJ,EAAA,QAAMC,KAAK,QAAQC,MAAM,wBACvBF,EAAA,c"}

package/dist/ui-library/{p-502ff3d3.entry.js → p-32e1a5ab.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as s,g as a}from"./p-ac4f4d45.js";import{u as o,l as e}from"./p-eb8f05a9.js";import{h as l}from"./p-d87a6f4d.js";import{i as r,M as n}from"./p-ba74863a.js";const h=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-x-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";const d=r();let c=0;const g=class{constructor(s){i(this,s);this.sixShow=t(this,"six-dialog-show",7);this.sixAfterShow=t(this,"six-dialog-after-show",7);this.sixHide=t(this,"six-dialog-hide",7);this.sixAfterHide=t(this,"six-dialog-after-hide",7);this.sixInitialFocus=t(this,"six-dialog-initial-focus",7);this.sixOverlayDismiss=t(this,"six-dialog-overlay-dismiss",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleCloseClick=()=>{this.hide()};this.handleKeyDown=i=>{if(i.key==="Escape"){this.hide()}};this.handleOverlayClick=()=>{const i=this.sixOverlayDismiss.emit();if(!i.defaultPrevented){this.hide()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("dialog__panel")){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new n(this.host,{onFocusOut:()=>{var i;return(i=this.panel)===null||i===void 0?void 0:i.focus()}})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show()}}disconnectedCallback(){o(this.host)}async show(){if(this.willShow||this.modal==null||this.panel==null||this.dialog==null){return}const i=this.panel;const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();e(this.host);if(this.open){if(d){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus({preventScroll:true})}}))}else{this.dialog.addEventListener("transitionend",(()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus()}}),{once:true})}}}async hide(){if(this.willHide||this.modal==null){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();o(this.host)}render(){return s("div",{ref:i=>this.dialog=i,part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},s("div",{part:"overlay",class:"dialog__overlay",onClick:this.handleOverlayClick}),s("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&s("header",{part:"header",class:"dialog__header"},s("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},s("slot",{name:"label"},this.label||String.fromCharCode(65279))),s("six-icon-button",{exportparts:"base:close-button",class:"dialog__close",name:"close",onClick:this.handleCloseClick})),s("div",{part:"body",class:"dialog__body"},s("slot",null)),s("footer",{part:"footer",class:"dialog__footer"},s("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"]}}};g.style=h;export{g as six_dialog};
-//# sourceMappingURL=p-502ff3d3.entry.js.map
+import{r as i,c as t,h as s,g as a}from"./p-0beec94f.js";import{u as o,l as e}from"./p-8227aaed.js";import{h as l}from"./p-faa04bb5.js";import{i as r,M as n}from"./p-998de05d.js";const h=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-x-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";const d=r();let c=0;const g=class{constructor(s){i(this,s);this.sixShow=t(this,"six-dialog-show",7);this.sixAfterShow=t(this,"six-dialog-after-show",7);this.sixHide=t(this,"six-dialog-hide",7);this.sixAfterHide=t(this,"six-dialog-after-hide",7);this.sixInitialFocus=t(this,"six-dialog-initial-focus",7);this.sixOverlayDismiss=t(this,"six-dialog-overlay-dismiss",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleCloseClick=()=>{this.hide()};this.handleKeyDown=i=>{if(i.key==="Escape"){this.hide()}};this.handleOverlayClick=()=>{const i=this.sixOverlayDismiss.emit();if(!i.defaultPrevented){this.hide()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("dialog__panel")){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new n(this.host,{onFocusOut:()=>{var i;return(i=this.panel)===null||i===void 0?void 0:i.focus()}})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show()}}disconnectedCallback(){o(this.host)}async show(){if(this.willShow||this.modal==null||this.panel==null||this.dialog==null){return}const i=this.panel;const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();e(this.host);if(this.open){if(d){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus({preventScroll:true})}}))}else{this.dialog.addEventListener("transitionend",(()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus()}}),{once:true})}}}async hide(){if(this.willHide||this.modal==null){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();o(this.host)}render(){return s("div",{ref:i=>this.dialog=i,part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},s("div",{part:"overlay",class:"dialog__overlay",onClick:this.handleOverlayClick}),s("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&s("header",{part:"header",class:"dialog__header"},s("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},s("slot",{name:"label"},this.label||String.fromCharCode(65279))),s("six-icon-button",{exportparts:"base:close-button",class:"dialog__close",name:"close",onClick:this.handleCloseClick})),s("div",{part:"body",class:"dialog__body"},s("slot",null)),s("footer",{part:"footer",class:"dialog__footer"},s("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"]}}};g.style=h;export{g as six_dialog};
+//# sourceMappingURL=p-32e1a5ab.entry.js.map

package/dist/ui-library/p-32e1a5ab.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixDialogCss","hasPreventScroll","isPreventScrollSupported","id","SixDialog","this","componentId","willShow","willHide","handleCloseClick","hide","handleKeyDown","event","key","handleOverlayClick","sixOverlayDismiss","emit","defaultPrevented","handleSlotChange","hasFooter","hasSlot","host","handleTransitionEnd","target","propertyName","classList","contains","isVisible","open","sixAfterShow","sixAfterHide","handleOpenChange","show","connectedCallback","modal","Modal","onFocusOut","_a","panel","focus","componentWillLoad","disconnectedCallback","unlockBodyScrolling","dialog","sixShow","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","addEventListener","once","sixHide","deactivate","render","h","ref","el","part","class","onKeyDown","onTransitionEnd","onClick","role","noHeader","label","tabIndex","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--six-z-index-dialog);\n  color: var(--six-color-web-rock-900);\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--six-spacing-xx-large));\n  max-height: calc(100% - var(--six-spacing-xx-large));\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-shadow-x-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-x-large);\n  font-weight: var(--six-font-weight-bold);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:first-of-type)) {\n    margin-left: var(--six-spacing-xx-small);\n  }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.dialog.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-bd8f8eef.entry.js → p-32fed3c7.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as s,H as t,g as r}from"./p-ac4f4d45.js";import{E as h}from"./p-60621dc6.js";import{g as a,h as o}from"./p-d87a6f4d.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";var l;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["AppSwitcher"]=2]="AppSwitcher";e[e["Profile"]=3]="Profile"})(l||(l={}));var c;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(c||(c={}));const d=class{constructor(s){e(this,s);this.sixAppNameClicked=i(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=i(this,"six-header-app-switcher-select",7);this.sixProfileSelect=i(this,"six-header-profile-select",7);this.sixHamburgerClick=i(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=i(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=i(this,"six-header-search-field-toggle",7);this.eventListeners=new h;this.setupMenu=e=>{if(e==null)return;this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo||e==null)return;this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.sixProfileSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.setupAppSwitcher=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.selectedApp=s.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?l.Search:l.None};this.shiftContent=false;this.openHamburgerMenu=false;this.openSearch=false;this.clickableLogo=false;this.selectedApp=undefined;this.selectedSection=undefined}handleOpenSearchChange(){this.computeSearchOpenState()}async setSearchOpenState(e){if(this.selectedSection===l.Search&&!e){this.selectedSection=l.None}else if(e&&this.selectedSection!==l.Search){this.selectedSection=l.Search}}async getIsSearchOpen(){return this.selectedSection===l.Search}hasSlot(e){if(this.slots==null){return false}return this.slots[e]}isSectionSelected(e){return e===this.selectedSection}selectSection(e){return()=>this.selectedSection=e}toggleSearch(){const e=this.selectedSection!==l.Search;this.selectedSection=this.selectedSection===l.Search?l.None:l.Search;this.sixSearchFieldToggle.emit({visible:e});if(this.selectedSection===l.Search){setTimeout((async()=>{var e,i;const s=a(this.host,c.Search);(i=(e=s===null||s===void 0?void 0:s.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-input"))===null||i===void 0?void 0:i.setFocus()}),50)}}componentWillLoad(){this.slots={[c.Search]:o(this.host,c.Search),[c.Notifications]:o(this.host,c.Notifications),[c.AppSwitcher]:o(this.host,c.AppSwitcher),[c.Profile]:o(this.host,c.Profile),[c.Logo]:o(this.host,c.Logo)};if(this.hasSlot(c.AppSwitcher)){this.selectedApp=this.getSelectedApp()}if(this.hasSlot(c.Search)){this.computeSearchOpenState()}}getSelectedApp(){var e;const i=a(this.host,c.AppSwitcher);if(i==null){return undefined}const s=Array.from(i.querySelectorAll("six-menu-item"));const t=s.find((e=>e.hasAttribute("checked")));return(e=t===null||t===void 0?void 0:t.textContent)!==null&&e!==void 0?e:undefined}disconnectedCallback(){this.eventListeners.removeAll()}render(){const e=this.hasSlot(c.Search)&&s("section",{class:{"six-header__search":true,"six-header__search--open":this.isSectionSelected(l.Search)}},s("six-icon-button",{name:"search",onClick:()=>this.toggleSearch(),"data-testid":"search-trigger"}));const i=this.hasSlot(c.Notifications)&&s("section",{class:"six-header__notification"},s("slot",{name:c.Notifications}));const r=this.hasSlot(c.AppSwitcher)&&s("section",{class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.isSectionSelected(l.AppSwitcher)}},s("a",{onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),s("six-dropdown",{distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},s("six-icon-button",{name:"apps",slot:"trigger"}),s("slot",{name:c.AppSwitcher})));const h=this.hasSlot(c.Profile)&&s("section",{class:{"six-header__profile":true,"six-header__profile--open":this.isSectionSelected(l.Profile)}},s("six-dropdown",{distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},s("slot",{name:"profile-avatar",slot:"trigger"}),s("slot",{name:"profile-menu"})));const a=this.hasSlot(c.Logo)?s("section",null,s("slot",{name:"logo"})):s("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},s("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},s("title",null,"SIX"),s("g",{fill:"#DE3919","fill-rule":"nonzero"},s("path",{d:"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"}),s("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),s("path",{d:"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"}))));return s(t,null,s("header",{class:"six-header"},s("section",{class:"six-header__menu"},s("six-icon-button",{name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu})),a,s("section",{class:"six-header__placeholder"}),s("section",{class:"six-header__custom"},s("slot",null)),e,i,r,h),s("div",{class:{"six-header__search-field":true,"six-header__search-field--visible":this.isSectionSelected(l.Search),"six-header__search-field--shift-content":this.shiftContent}},s("slot",{name:c.Search})))}static get assetsDirs(){return["assets"]}get host(){return r(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};d.style=n;export{d as six_header};
-//# sourceMappingURL=p-bd8f8eef.entry.js.map
+import{r as e,c as i,h as s,H as t,g as r}from"./p-0beec94f.js";import{E as h}from"./p-8bfb4bfc.js";import{g as a,h as o}from"./p-faa04bb5.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";var l;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["AppSwitcher"]=2]="AppSwitcher";e[e["Profile"]=3]="Profile"})(l||(l={}));var c;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(c||(c={}));const d=class{constructor(s){e(this,s);this.sixAppNameClicked=i(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=i(this,"six-header-app-switcher-select",7);this.sixProfileSelect=i(this,"six-header-profile-select",7);this.sixHamburgerClick=i(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=i(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=i(this,"six-header-search-field-toggle",7);this.eventListeners=new h;this.setupMenu=e=>{if(e==null)return;this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo||e==null)return;this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.sixProfileSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.setupAppSwitcher=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(l.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(l.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.selectedApp=s.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?l.Search:l.None};this.shiftContent=false;this.openHamburgerMenu=false;this.openSearch=false;this.clickableLogo=false;this.selectedApp=undefined;this.selectedSection=undefined}handleOpenSearchChange(){this.computeSearchOpenState()}async setSearchOpenState(e){if(this.selectedSection===l.Search&&!e){this.selectedSection=l.None}else if(e&&this.selectedSection!==l.Search){this.selectedSection=l.Search}}async getIsSearchOpen(){return this.selectedSection===l.Search}hasSlot(e){if(this.slots==null){return false}return this.slots[e]}isSectionSelected(e){return e===this.selectedSection}selectSection(e){return()=>this.selectedSection=e}toggleSearch(){const e=this.selectedSection!==l.Search;this.selectedSection=this.selectedSection===l.Search?l.None:l.Search;this.sixSearchFieldToggle.emit({visible:e});if(this.selectedSection===l.Search){setTimeout((async()=>{var e,i;const s=a(this.host,c.Search);(i=(e=s===null||s===void 0?void 0:s.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-input"))===null||i===void 0?void 0:i.setFocus()}),50)}}componentWillLoad(){this.slots={[c.Search]:o(this.host,c.Search),[c.Notifications]:o(this.host,c.Notifications),[c.AppSwitcher]:o(this.host,c.AppSwitcher),[c.Profile]:o(this.host,c.Profile),[c.Logo]:o(this.host,c.Logo)};if(this.hasSlot(c.AppSwitcher)){this.updateSelectedApp()}if(this.hasSlot(c.Search)){this.computeSearchOpenState()}}connectedCallback(){const e=a(this.host,c.AppSwitcher);if(e){this.mutationObserver=new MutationObserver((e=>{if(e.some((e=>e.type==="childList"||e.type==="attributes"))){this.updateSelectedApp()}}));this.mutationObserver.observe(e,{attributes:true,childList:true,subtree:true})}}updateSelectedApp(){var e;const i=a(this.host,c.AppSwitcher);if(i==null){return undefined}const s=Array.from(i.querySelectorAll("six-menu-item"));const t=s.find((e=>e.hasAttribute("checked")&&e.getAttribute("checked")!=="false"));this.selectedApp=(e=t===null||t===void 0?void 0:t.textContent)!==null&&e!==void 0?e:undefined}disconnectedCallback(){var e;this.eventListeners.removeAll();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){const e=this.hasSlot(c.Search)&&s("section",{class:{"six-header__search":true,"six-header__search--open":this.isSectionSelected(l.Search)}},s("six-icon-button",{name:"search",onClick:()=>this.toggleSearch(),"data-testid":"search-trigger"}));const i=this.hasSlot(c.Notifications)&&s("section",{class:"six-header__notification"},s("slot",{name:c.Notifications}));const r=this.hasSlot(c.AppSwitcher)&&s("section",{class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.isSectionSelected(l.AppSwitcher)}},s("a",{onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),s("six-dropdown",{distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},s("six-icon-button",{name:"apps",slot:"trigger"}),s("slot",{name:c.AppSwitcher})));const h=this.hasSlot(c.Profile)&&s("section",{class:{"six-header__profile":true,"six-header__profile--open":this.isSectionSelected(l.Profile)}},s("six-dropdown",{distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},s("slot",{name:"profile-avatar",slot:"trigger"}),s("slot",{name:"profile-menu"})));const a=this.hasSlot(c.Logo)?s("section",null,s("slot",{name:"logo"})):s("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},s("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},s("title",null,"SIX"),s("g",{fill:"#DE3919","fill-rule":"nonzero"},s("path",{d:"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"}),s("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),s("path",{d:"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"}))));return s(t,null,s("header",{class:"six-header"},s("section",{class:"six-header__menu"},s("six-icon-button",{name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu})),a,s("section",{class:"six-header__placeholder"}),s("section",{class:"six-header__custom"},s("slot",null)),e,i,r,h),s("div",{class:{"six-header__search-field":true,"six-header__search-field--visible":this.isSectionSelected(l.Search),"six-header__search-field--shift-content":this.shiftContent}},s("slot",{name:c.Search})))}static get assetsDirs(){return["assets"]}get host(){return r(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};d.style=n;export{d as six_header};
+//# sourceMappingURL=p-32fed3c7.entry.js.map

package/dist/ui-library/p-32fed3c7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixHeaderCss","Section","Slot","SixHeader","this","eventListeners","EventListeners","setupMenu","el","add","sixHamburgerClick","emit","setupLogo","clickableLogo","sixLogoClick","setupProfile","selectSection","Profile","None","event","name","item","detail","sixProfileSelect","selectedLabel","innerText","setupAppSwitcher","AppSwitcher","selectedApp","sixAppSwitcherSelect","appNameClicked","sixAppNameClicked","computeSearchOpenState","selectedSection","openSearch","Search","handleOpenSearchChange","setSearchOpenState","openState","getIsSearchOpen","hasSlot","slot","slots","isSectionSelected","value","section","toggleSearch","visible","sixSearchFieldToggle","setTimeout","async","getSlot","host","_b","_a","shadowRoot","querySelector","setFocus","componentWillLoad","Notifications","Logo","updateSelectedApp","connectedCallback","appSwitcherSlot","mutationObserver","MutationObserver","mutations","some","mutation","type","observe","attributes","childList","subtree","element","undefined","items","Array","from","querySelectorAll","firstCheckedMenuItem","find","hasAttribute","getAttribute","textContent","disconnectedCallback","removeAll","disconnect","render","search","h","class","onClick","notifications","appSwitcher","distance","skidding","placement","ref","profile","logo","height","viewBox","xmlns","fill","d","Host","openHamburgerMenu","shiftContent"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: $header-height;\n  background-color: var(--six-header-background-color);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: var(--six-shadow-x-large);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__logo {\n    width: 6rem;\n    margin-top: 0.15rem;\n\n    &--clickable {\n      cursor: pointer;\n    }\n  }\n\n  &__placeholder {\n    flex: 1;\n  }\n\n  &__menu,\n  &__logo,\n  &__custom,\n  &__search,\n  &__notification,\n  &__app-switcher,\n  &__profile {\n    height: calc(100% - #{$border-height} - 1px);\n    padding: 0 1.25rem;\n    display: flex;\n    align-items: center;\n    border-bottom: solid $border-height transparent;\n\n    &--open {\n      border-bottom: solid $border-height var(--six-header-border-color-open);\n    }\n  }\n\n  &__selected-app {\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 600;\n    padding-right: 0;\n    padding-left: 0.3rem;\n    &:hover {\n      color: var(--six-header-selected-app-color-hover);\n    }\n  }\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n  visible: boolean;\n}\n\nenum Section {\n  None,\n  Search,\n  AppSwitcher,\n  Profile,\n}\n\nenum Slot {\n  Search = 'search-field',\n  Notifications = 'notifications',\n  AppSwitcher = 'app-switcher-menu',\n  Profile = 'profile-menu',\n  Logo = 'logo',\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n */\n\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /** Set the hamburger menu icon to open or closed state */\n  @Prop() openHamburgerMenu = false;\n\n  /** Set the header search to be in an open or closed state */\n  @Prop() openSearch = false;\n\n  /** Set whether the logo should be clickable */\n  @Prop() clickableLogo = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    this.computeSearchOpenState();\n  }\n\n  /** Sets open state for search */\n  @Method()\n  async setSearchOpenState(openState: boolean) {\n    if (this.selectedSection === Section.Search && !openState) {\n      this.selectedSection = Section.None;\n    } else if (openState && this.selectedSection !== Section.Search) {\n      this.selectedSection = Section.Search;\n    }\n  }\n\n  /** Get open state for search */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /** Emitted when the name of the selected app is clicked. */\n  @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when a menu item is in the app switcher menu is selected. */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /** Emitted when a menu item is in the profile menu is selected. */\n  @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /** Emitted when the hamburger menu is clicked. */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the header logo is clicked. */\n  @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when search field is toggled. */\n  @Event({ eventName: 'six-header-search-field-toggle' })\n  sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  private slots?: Record<Slot, boolean>;\n\n  private mutationObserver?: MutationObserver;\n\n  @State() selectedApp?: string;\n  @State() selectedSection?: Section;\n\n  private hasSlot(slot: Slot): boolean {\n    if (this.slots == null) {\n      return false;\n    }\n    return this.slots[slot];\n  }\n\n  private isSectionSelected(value: Section) {\n    return value === this.selectedSection;\n  }\n\n  private selectSection(section: Section) {\n    return () => (this.selectedSection = section);\n  }\n\n  private toggleSearch() {\n    const visible = this.selectedSection !== Section.Search;\n    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n    this.sixSearchFieldToggle.emit({ visible });\n    if (this.selectedSection === Section.Search) {\n      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(async () => {\n        const slot = getSlot(this.host, Slot.Search);\n        slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n      }, 50);\n    }\n  }\n\n  private setupMenu = (el?: HTMLSixIconButtonElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  private setupLogo = (el?: HTMLElement) => {\n    if (!this.clickableLogo || el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n  };\n\n  private setupProfile = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private appNameClicked = () => this.sixAppNameClicked.emit();\n\n  private computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = {\n      [Slot.Search]: hasSlot(this.host, Slot.Search),\n      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n      [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n      [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n    };\n\n    if (this.hasSlot(Slot.AppSwitcher)) {\n      this.updateSelectedApp();\n    }\n\n    if (this.hasSlot(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  connectedCallback() {\n    const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n    if (appSwitcherSlot) {\n      this.mutationObserver = new MutationObserver((mutations) => {\n        if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {\n          this.updateSelectedApp();\n        }\n      });\n      this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n    }\n  }\n\n  private updateSelectedApp() {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = getSlot(this.host, Slot.AppSwitcher);\n    if (element == null) {\n      return undefined;\n    }\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find(\n      (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n    );\n    this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n    this.mutationObserver?.disconnect();\n  }\n\n  render() {\n    const search = this.hasSlot(Slot.Search) && (\n      <section\n        class={{\n          'six-header__search': true,\n          'six-header__search--open': this.isSectionSelected(Section.Search),\n        }}\n      >\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </section>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <section class=\"six-header__notification\">\n        <slot name={Slot.Notifications} />\n      </section>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <section\n        class={{\n          'six-header__app-switcher': true,\n          'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n        }}\n      >\n        <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n          {this.selectedApp}\n        </a>\n        <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n          <six-icon-button name=\"apps\" slot=\"trigger\" />\n          <slot name={Slot.AppSwitcher} />\n        </six-dropdown>\n      </section>\n    );\n\n    const profile = this.hasSlot(Slot.Profile) && (\n      <section\n        class={{\n          'six-header__profile': true,\n          'six-header__profile--open': this.isSectionSelected(Section.Profile),\n        }}\n      >\n        <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </section>\n    );\n\n    const logo = this.hasSlot(Slot.Logo) ? (\n      <section>\n        <slot name=\"logo\" />\n      </section>\n    ) : (\n      <section\n        class={{\n          'six-header__logo': true,\n          'six-header__logo--clickable': this.clickableLogo,\n        }}\n        ref={this.setupLogo}\n      >\n        <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n          <title>SIX</title>\n          <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n            <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n            <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n            <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n          </g>\n        </svg>\n      </section>\n    );\n\n    return (\n      <Host>\n        <header class=\"six-header\">\n          <section class=\"six-header__menu\">\n            <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n          </section>\n\n          {logo}\n\n          <section class=\"six-header__placeholder\" />\n\n          <section class=\"six-header__custom\">\n            <slot />\n          </section>\n\n          {search}\n\n          {notifications}\n\n          {appSwitcher}\n\n          {profile}\n        </header>\n\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-baa03951.entry.js → p-3d54ecf2.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o}from"./p-ac4f4d45.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:16px;--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--label-color:var(--six-progress-label-color);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--sl-border-radius-pill);overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--six-font-sans);font-size:12px;font-weight:var(--six-font-weight-normal);background-color:var(--indicator-color);color:var(--label-color);text-align:center;line-height:var(--height);white-space:nowrap;overflow:hidden;transition:400ms width, 400ms background-color;user-select:none}.progress-bar--indeterminate .progress-bar__indicator{position:absolute;animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{left:-50%;width:50%}75%,100%{left:100%;width:50%}}";const s=class{constructor(o){r(this,o);this.percentage=0;this.indeterminate=false}render(){return o("div",{part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.percentage},o("div",{part:"indicator",class:"progress-bar__indicator",style:{width:`${this.percentage}%`}},!this.indeterminate&&o("span",{part:"label",class:"progress-bar__label"},o("slot",null))))}};s.style=i;export{s as six_progress_bar};
-//# sourceMappingURL=p-baa03951.entry.js.map
+import{r,h as o}from"./p-0beec94f.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:16px;--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--label-color:var(--six-progress-label-color);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--sl-border-radius-pill);overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--six-font-sans);font-size:12px;font-weight:var(--six-font-weight-normal);background-color:var(--indicator-color);color:var(--label-color);text-align:center;line-height:var(--height);white-space:nowrap;overflow:hidden;transition:400ms width, 400ms background-color;user-select:none}.progress-bar--indeterminate .progress-bar__indicator{position:absolute;animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{left:-50%;width:50%}75%,100%{left:100%;width:50%}}";const e=class{constructor(o){r(this,o);this.percentage=0;this.indeterminate=false}render(){return o("div",{part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.percentage},o("div",{part:"indicator",class:"progress-bar__indicator",style:{width:`${this.percentage}%`}},!this.indeterminate&&o("span",{part:"label",class:"progress-bar__label"},o("slot",null))))}};e.style=i;export{e as six_progress_bar};
+//# sourceMappingURL=p-3d54ecf2.entry.js.map

package/dist/ui-library/p-3d54ecf2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixProgressBarCss","SixProgressBar","render","h","part","class","this","indeterminate","role","percentage","style","width"],"sources":["src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n  --height: 16px;\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --label-color: var(--six-progress-label-color);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: var(--sl-border-radius-pill);\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-family: var(--six-font-sans);\n  font-size: 12px;\n  font-weight: var(--six-font-weight-normal);\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  line-height: var(--height);\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 400ms width, 400ms background-color;\n  user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  position: absolute;\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -50%;\n    width: 50%;\n  }\n  75%,\n  100% {\n    left: 100%;\n    width: 50%;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'six-progress-bar',\n  styleUrl: 'six-progress-bar.scss',\n  shadow: true,\n})\nexport class SixProgressBar {\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() percentage = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.percentage}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.percentage}%`,\n          }}\n        >\n          {!this.indeterminate && (\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot />\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,29B,MCoBbC,EAAc,M,yCAEJ,E,mBAGG,K,CAExB,MAAAC,GACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,8BAA+BC,KAAKC,eAEtCC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJF,KAAKC,cAAgB,KAAOD,KAAKG,YAEhDN,EAAA,OACEC,KAAK,YACLC,MAAM,0BACNK,MAAO,CACLC,MAAO,GAAGL,KAAKG,iBAGfH,KAAKC,eACLJ,EAAA,QAAMC,KAAK,QAAQC,MAAM,uBACvBF,EAAA,e"}

package/dist/ui-library/p-4229f7e8.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as s,h as t,g as e}from"./p-0beec94f.js";import{f as a}from"./p-06ba4450.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;--horizontal-padding:var(--six-spacing-medium);font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium) var(--horizontal-padding);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";let r=0;const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-details-show",7);this.sixAfterShow=s(this,"six-details-after-show",7);this.sixHide=s(this,"six-details-hide",7);this.sixAfterHide=s(this,"six-details-after-hide",7);this.componentId=`details-${++r}`;this.isVisible=false;this.handleBodyTransitionEnd=i=>{if(this.body==null)return;const s=i.target;if(i.propertyName==="height"&&s.classList.contains("details__body")){this.body.style.overflow=this.open?"visible":"hidden";this.body.style.height=this.open?"auto":"0";this.open?this.sixAfterShow.emit():this.sixAfterHide.emit();this.body.hidden=!this.open}};this.handleSummaryClick=()=>{var i;if(!this.disabled&&(this.hasContent||this.selectableEmpty)){this.open?this.hide():this.show();(i=this.header)===null||i===void 0?void 0:i.focus()}};this.handleSummaryKeyDown=i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.open?this.hide():this.show()}if(i.key==="ArrowUp"||i.key==="ArrowLeft"){i.preventDefault();this.hide()}if(i.key==="ArrowDown"||i.key==="ArrowRight"){i.preventDefault();this.show()}};this.animateSummaryIcon=true;this.open=false;this.summary="";this.summaryIcon=undefined;this.summaryIconSize="inherit";this.disabled=false;this.inline=false;this.selectableEmpty=false;this.hasContent=true}handleOpenChange(){if(this.body!=null){this.open?this.show():this.hide()}}componentDidLoad(){if(this.details==null||this.body==null)return;a.observe(this.details);this.body.hidden=!this.open;if(this.open){this.show()}}disconnectedCallback(){if(this.details!=null){a.unobserve(this.details)}}async show(){if(this.isVisible||this.body==null)return;const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.body.hidden=false;if(this.body.scrollHeight===0){this.body.style.height="auto";this.body.style.overflow="visible"}else{this.body.style.height=`${this.body.scrollHeight}px`;this.body.style.overflow="hidden"}this.isVisible=true;this.open=true}async hide(){if(!this.isVisible||this.body==null)return;const i=this.body;const s=this.sixHide.emit();if(s.defaultPrevented){this.open=true;return}i.style.height=`${i.scrollHeight}px`;i.style.overflow="hidden";requestAnimationFrame((()=>{i.style.height="0"}));this.isVisible=false;this.open=false}render(){const i=this.hasContent&&(this.summaryIcon||"expand_more");return t("div",{ref:i=>this.details=i,part:"base",class:{details:true,"details--open":this.open,"details--disabled":this.disabled,inline:this.inline}},t("header",{ref:i=>this.header=i,part:"header",id:`${this.componentId}-header`,class:"details__header",role:"button","aria-expanded":this.open?"true":"false","aria-controls":`${this.componentId}-content`,"aria-disabled":this.disabled?"true":"false",tabIndex:this.disabled?-1:0,onClick:this.handleSummaryClick,onKeyDown:this.handleSummaryKeyDown},t("div",{part:"summary",class:"details__summary"},t("slot",{name:"summary"},this.summary)),t("span",{part:"summary-icon",class:{"details__summary-icon":true,"details__summary-icon--animate":this.animateSummaryIcon}},t("slot",{name:"summary-icon",onSlotchange:()=>this.animateSummaryIcon=false},i&&t("six-icon",{size:this.summaryIconSize},i)))),t("div",{ref:i=>this.body=i,class:"details__body",onTransitionEnd:this.handleBodyTransitionEnd},t("div",{part:"content",id:`${this.componentId}-content`,class:"details__content",role:"region","aria-labelledby":`${this.componentId}-header`},t("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};n.style=o;export{n as six_details};
+//# sourceMappingURL=p-4229f7e8.entry.js.map

package/dist/ui-library/p-4229f7e8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixDetailsCss","id","SixDetails","this","componentId","isVisible","handleBodyTransitionEnd","event","body","target","propertyName","classList","contains","style","overflow","open","height","sixAfterShow","emit","sixAfterHide","hidden","handleSummaryClick","disabled","hasContent","selectableEmpty","hide","show","_a","header","focus","handleSummaryKeyDown","key","preventDefault","handleOpenChange","componentDidLoad","details","focusVisible","observe","disconnectedCallback","unobserve","sixShow","defaultPrevented","scrollHeight","sixHide","requestAnimationFrame","render","summaryIcon","h","ref","el","part","class","inline","role","tabIndex","onClick","onKeyDown","name","summary","animateSummaryIcon","onSlotchange","size","summaryIconSize","onTransitionEnd"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n * @prop --horizontal-padding: The horizontal padding\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n  --horizontal-padding: var(--six-spacing-medium);\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium) var(--horizontal-padding);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details--open:hover {\n  color: var(--six-input-color-focus);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-479d8087.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i}from"./p-0beec94f.js";import{f as o}from"./p-06ba4450.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const s=class{constructor(i){t(this,i);this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}};this.name=undefined;this.size="medium";this.label=undefined;this.disabled=false;this.html=undefined}componentDidLoad(){if(this.button!=null){o.observe(this.button)}}disconnectedCallback(){if(this.button!=null){o.unobserve(this.button)}}render(){const t=this.html&&i("span",{innerHTML:this.html});return i("div",{onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},i("button",{ref:t=>this.button=t,part:"base",disabled:this.disabled,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:"button","aria-label":this.label},i("six-icon",{"aria-hidden":"true",size:this.size},this.name),i("slot",null),t))}};s.style=n;export{s as six_icon_button};
+//# sourceMappingURL=p-479d8087.entry.js.map

package/dist/ui-library/p-479d8087.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,21C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}

package/dist/ui-library/{p-ef3936e5.entry.js → p-49aa8d1e.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as s,g as r}from"./p-ac4f4d45.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";const a=Object.assign(document.createElement("div"),{className:"six-toast-stack"});const o=class{constructor(s){i(this,s);this.sixShow=t(this,"six-alert-show",7);this.sixAfterShow=t(this,"six-alert-after-show",7);this.sixHide=t(this,"six-alert-hide",7);this.sixAfterHide=t(this,"six-alert-after-hide",7);this.handleCloseClick=()=>{this.hide()};this.handleMouseMove=()=>{this.restartAutoHide()};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("alert")){this.isVisible=this.open;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.isVisible=false;this.open=false;this.closable=false;this.type="primary";this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}componentWillLoad(){if(this.open){this.show()}}async show(){if(this.isVisible){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}async hide(){if(!this.isVisible){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}clearTimeout(this.autoHideTimeout);this.isVisible=false;this.open=false}async toast(){return new Promise((i=>{if(!a.parentElement){document.body.append(a)}a.append(this.host);requestAnimationFrame((()=>this.show()));this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove();i();if(a.querySelector("six-alert")===null){a.remove()}}),{once:true})}))}restartAutoHide(){clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}render(){return s("div",{part:"base",class:{alert:true,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":this.type==="primary","alert--success":this.type==="success","alert--info":this.type==="info","alert--warning":this.type==="warning","alert--danger":this.type==="danger"},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},s("span",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("span",{part:"message",class:"alert__message"},s("slot",null)),this.closable&&s("span",{class:"alert__close"},s("six-icon-button",{name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};o.style=e;export{o as six_alert};
-//# sourceMappingURL=p-ef3936e5.entry.js.map
+import{r as i,c as t,h as s,g as r}from"./p-0beec94f.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";const a=Object.assign(document.createElement("div"),{className:"six-toast-stack"});const o=class{constructor(s){i(this,s);this.sixShow=t(this,"six-alert-show",7);this.sixAfterShow=t(this,"six-alert-after-show",7);this.sixHide=t(this,"six-alert-hide",7);this.sixAfterHide=t(this,"six-alert-after-hide",7);this.handleCloseClick=()=>{this.hide()};this.handleMouseMove=()=>{this.restartAutoHide()};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("alert")){this.isVisible=this.open;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.isVisible=false;this.open=false;this.closable=false;this.type="primary";this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}componentWillLoad(){if(this.open){this.show()}}async show(){if(this.isVisible){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}async hide(){if(!this.isVisible){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}clearTimeout(this.autoHideTimeout);this.isVisible=false;this.open=false}async toast(){return new Promise((i=>{if(!a.parentElement){document.body.append(a)}a.append(this.host);requestAnimationFrame((()=>this.show()));this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove();i();if(a.querySelector("six-alert")===null){a.remove()}}),{once:true})}))}restartAutoHide(){clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}render(){return s("div",{part:"base",class:{alert:true,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":this.type==="primary","alert--success":this.type==="success","alert--info":this.type==="info","alert--warning":this.type==="warning","alert--danger":this.type==="danger"},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},s("span",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("span",{part:"message",class:"alert__message"},s("slot",null)),this.closable&&s("span",{class:"alert__close"},s("six-icon-button",{name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};o.style=e;export{o as six_alert};
+//# sourceMappingURL=p-49aa8d1e.entry.js.map

package/dist/ui-library/p-49aa8d1e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixAlertCss","toastStack","Object","assign","document","createElement","className","SixAlert","this","handleCloseClick","hide","handleMouseMove","restartAutoHide","handleTransitionEnd","event","target","propertyName","classList","contains","isVisible","open","sixAfterShow","emit","sixAfterHide","Infinity","handleOpenChange","show","handleDurationChange","componentWillLoad","sixShow","defaultPrevented","duration","autoHideTimeout","window","setTimeout","sixHide","clearTimeout","toast","Promise","resolve","parentElement","body","append","host","requestAnimationFrame","addEventListener","remove","querySelector","once","render","h","part","class","alert","closable","type","role","onMouseMove","onTransitionEnd","name","exportparts","onClick"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n\n  ::slotted(*) {\n    margin-left: var(--six-spacing-large);\n  }\n}\n\n.alert--primary {\n  border-top-color: var(--six-color-web-rock-900);\n\n  .alert__icon {\n    color: var(--six-color-web-rock-900);\n  }\n}\n\n.alert--success {\n  border-top-color: var(--six-color-success-600);\n\n  .alert__icon {\n    color: var(--six-color-success-600);\n  }\n}\n\n.alert--info {\n  border-top-color: var(--six-color-action-500);\n\n  .alert__icon {\n    color: var(--six-color-action-500);\n  }\n}\n\n.alert--warning {\n  border-top-color: var(--six-color-warning-800);\n\n  .alert__icon {\n    color: var(--six-color-warning-800);\n  }\n}\n\n.alert--danger {\n  border-top-color: var(--six-color-danger-900);\n\n  .alert__icon {\n    color: var(--six-color-danger-900);\n  }\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n  padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n  tag: 'six-alert',\n  styleUrl: 'six-alert.scss',\n  shadow: true,\n})\nexport class SixAlert {\n  private autoHideTimeout?: number;\n\n  @Element() host!: HTMLSixAlertElement;\n\n  @State() isVisible = false;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    clearTimeout(this.autoHideTimeout);\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  @Method()\n  async toast() {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.append(this.host);\n      requestAnimationFrame(() => this.show());\n\n      this.host.addEventListener(\n        'six-alert-after-hide',\n        () => {\n          this.host.remove();\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('six-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('alert')) {\n      this.isVisible = this.open;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--visible': this.isVisible,\n          'alert--closable': this.closable,\n          'alert--primary': this.type === 'primary',\n          'alert--success': this.type === 'success',\n          'alert--info': this.type === 'info',\n          'alert--warning': this.type === 'warning',\n          'alert--danger': this.type === 'danger',\n        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </span>\n\n        <span part=\"message\" class=\"alert__message\">\n          <slot />\n        </span>\n\n        {this.closable && (\n          <span class=\"alert__close\">\n            <six-icon-button\n              name=\"clear\"\n              exportparts=\"base:close-button\"\n              onClick={this.handleCloseClick}\n            ></six-icon-button>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,w1DCGpB,MAAMC,EAAaC,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAAEC,UAAW,oB,MAsBhEC,EAAQ,M,+MA2HXC,KAAAC,iBAAmB,KACzBD,KAAKE,MAAM,EAGLF,KAAAG,gBAAkB,KACxBH,KAAKI,iBAAiB,EAGhBJ,KAAAK,oBAAuBC,IAC7B,MAAMC,EAASD,EAAMC,OAGrB,GAAID,EAAME,eAAiB,WAAaD,EAAOE,UAAUC,SAAS,SAAU,CAC1EV,KAAKW,UAAYX,KAAKY,KACtBZ,KAAKY,KAAOZ,KAAKa,aAAaC,OAASd,KAAKe,aAAaD,M,kBApIxC,M,UAG0B,M,cAGX,M,UAGmD,U,cAMpEE,Q,CAGnB,gBAAAC,GACEjB,KAAKY,KAAOZ,KAAKkB,OAASlB,KAAKE,M,CAIjC,oBAAAiB,GACEnB,KAAKI,iB,CAeP,iBAAAgB,GAEE,GAAIpB,KAAKY,KAAM,CACbZ,KAAKkB,M,EAMT,UAAMA,GAEJ,GAAIlB,KAAKW,UAAW,CAClB,M,CAGF,MAAMU,EAAUrB,KAAKqB,QAAQP,OAC7B,GAAIO,EAAQC,iBAAkB,CAC5BtB,KAAKY,KAAO,MACZ,M,CAGFZ,KAAKW,UAAY,KACjBX,KAAKY,KAAO,KAEZ,GAAIZ,KAAKuB,SAAWP,SAAU,CAC5BhB,KAAKwB,gBAAkBC,OAAOC,YAAW,IAAM1B,KAAKE,QAAQF,KAAKuB,S,EAMrE,UAAMrB,GAEJ,IAAKF,KAAKW,UAAW,CACnB,M,CAGF,MAAMgB,EAAU3B,KAAK2B,QAAQb,OAC7B,GAAIa,EAAQL,iBAAkB,CAC5BtB,KAAKY,KAAO,KACZ,M,CAGFgB,aAAa5B,KAAKwB,iBAClBxB,KAAKW,UAAY,MACjBX,KAAKY,KAAO,K,CASd,WAAMiB,GACJ,OAAO,IAAIC,SAAeC,IACxB,IAAKtC,EAAWuC,cAAe,CAC7BpC,SAASqC,KAAKC,OAAOzC,E,CAGvBA,EAAWyC,OAAOlC,KAAKmC,MACvBC,uBAAsB,IAAMpC,KAAKkB,SAEjClB,KAAKmC,KAAKE,iBACR,wBACA,KACErC,KAAKmC,KAAKG,SACVP,IAGA,GAAItC,EAAW8C,cAAc,eAAiB,KAAM,CAClD9C,EAAW6C,Q,IAGf,CAAEE,KAAM,MACT,G,CAsBG,eAAApC,GACNwB,aAAa5B,KAAKwB,iBAClB,GAAIxB,KAAKY,MAAQZ,KAAKuB,SAAWP,SAAU,CACzChB,KAAKwB,gBAAkBC,OAAOC,YAAW,IAAM1B,KAAKE,QAAQF,KAAKuB,S,EAIrE,MAAAkB,GACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACLC,MAAO,KACP,cAAe7C,KAAKY,KACpB,iBAAkBZ,KAAKW,UACvB,kBAAmBX,KAAK8C,SACxB,iBAAkB9C,KAAK+C,OAAS,UAChC,iBAAkB/C,KAAK+C,OAAS,UAChC,cAAe/C,KAAK+C,OAAS,OAC7B,iBAAkB/C,KAAK+C,OAAS,UAChC,gBAAiB/C,KAAK+C,OAAS,UAEjCC,KAAK,QAAO,YACF,YAAW,cACT,OAAM,cACLhD,KAAKY,KAAO,QAAU,OACnCqC,YAAajD,KAAKG,gBAClB+C,gBAAiBlD,KAAKK,qBAEtBqC,EAAA,QAAMC,KAAK,OAAOC,MAAM,eACtBF,EAAA,QAAMS,KAAK,UAGbT,EAAA,QAAMC,KAAK,UAAUC,MAAM,kBACzBF,EAAA,cAGD1C,KAAK8C,UACJJ,EAAA,QAAME,MAAM,gBACVF,EAAA,mBACES,KAAK,QACLC,YAAY,oBACZC,QAASrD,KAAKC,oB"}

package/dist/ui-library/{p-cdcde4cd.entry.js → p-58661675.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o}from"./p-ac4f4d45.js";const a=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";const s=class{constructor(o){r(this,o);this.type="primary";this.pill=false;this.pulse=false}render(){return o("span",{part:"base",class:{badge:true,"badge--primary":this.type==="primary","badge--secondary":this.type==="secondary","badge--success":this.type==="success","badge--warning":this.type==="warning","badge--danger":this.type==="danger","badge--action":this.type==="action","badge--info":this.type==="info","badge--pill":this.pill,"badge--pulse":this.pulse},role:"status"},o("slot",null))}};s.style=a;export{s as six_badge};
-//# sourceMappingURL=p-cdcde4cd.entry.js.map
+import{r,h as o}from"./p-0beec94f.js";const a=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";const e=class{constructor(o){r(this,o);this.type="primary";this.pill=false;this.pulse=false}render(){return o("span",{part:"base",class:{badge:true,"badge--primary":this.type==="primary","badge--secondary":this.type==="secondary","badge--success":this.type==="success","badge--warning":this.type==="warning","badge--danger":this.type==="danger","badge--action":this.type==="action","badge--info":this.type==="info","badge--pill":this.pill,"badge--pulse":this.pulse},role:"status"},o("slot",null))}};e.style=a;export{e as six_badge};
+//# sourceMappingURL=p-58661675.entry.js.map

package/dist/ui-library/p-58661675.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixBadgeCss","SixBadge","render","h","part","class","badge","this","type","pill","pulse","role"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-x-small);\n  font-weight: var(--six-font-weight-semibold);\n  letter-spacing: var(--six-letter-spacing-normal);\n  line-height: 1;\n  border-radius: var(--six-border-radius-small);\n  white-space: nowrap;\n  padding: 3px 6px;\n  user-select: none;\n  cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n  background-color: var(--six-color-web-rock-900);\n  color: var(--six-color-white);\n}\n\n.badge--success {\n  background-color: var(--six-color-success-500);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n  background-color: var(--six-color-warning-700);\n  color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n  background-color: var(--six-color-danger-800);\n  color: var(--six-color-white);\n}\n\n.badge--action {\n  background-color: var(--six-color-action-500);\n  color: var(--six-color-white);\n}\n\n.badge--primary {\n  background-color: var(--six-color-clay-50);\n  color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n  animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n  --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n  --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n  --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n  --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n  --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n  --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 0.5rem transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,oqD,MCkBPC,EAAQ,M,mCAE4E,U,UAGhF,M,WAGC,K,CAEhB,MAAAC,GACE,OACEC,EAAA,QACEC,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,iBAAkBC,KAAKC,OAAS,UAChC,mBAAoBD,KAAKC,OAAS,YAClC,iBAAkBD,KAAKC,OAAS,UAChC,iBAAkBD,KAAKC,OAAS,UAChC,gBAAiBD,KAAKC,OAAS,SAC/B,gBAAiBD,KAAKC,OAAS,SAC/B,cAAeD,KAAKC,OAAS,OAC7B,cAAeD,KAAKE,KACpB,eAAgBF,KAAKG,OAEvBC,KAAK,UAELR,EAAA,a"}