@six-group/ui-library 0.0.0-insider.fa8b667 → 0.0.0-insider.fade3a2

package/dist/ui-library/p-3eed2287.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as s,g as a}from"./p-f93d8a4e.js";const n=":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";const o=n;const r=class{constructor(e){t(this,e);this.columns=undefined}handleColumnsChange(){if(typeof this.columns!=="number"||this.columns===0){this.columns=12}this.host.style.setProperty("--no-of-columns",String(this.columns))}componentWillLoad(){this.handleColumnsChange()}render(){return e(s,{key:"9ba9e7ea26b16c5a28677cbc19d7afe38e5a70be"},e("slot",{key:"62ee116798886fdca9816688f2775421a9ba497c"}))}get host(){return a(this)}static get watchers(){return{columns:["handleColumnsChange"]}}};r.style=o;export{r as six_layout_grid};
+//# sourceMappingURL=p-3eed2287.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixLayoutGridCss","SixLayoutGridStyle0","SixLayoutGrid","handleColumnsChange","this","columns","host","style","setProperty","String","componentWillLoad","render","h","Host","key"],"sources":["src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(var(--no-of-columns), 1fr);\n  grid-column-gap: 1rem;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host!: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop({ mutable: true }) columns?: number;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    if (typeof this.columns !== 'number' || this.columns === 0) {\n      this.columns = 12;\n    }\n    this.host.style.setProperty('--no-of-columns', String(this.columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,mGACzB,MAAAC,EAAeD,E,MCaFE,EAAa,M,gDAOxB,mBAAAC,GACE,UAAWC,KAAKC,UAAY,UAAYD,KAAKC,UAAY,EAAG,CAC1DD,KAAKC,QAAU,E,CAEjBD,KAAKE,KAAKC,MAAMC,YAAY,kBAAmBC,OAAOL,KAAKC,S,CAG7D,iBAAAK,GACEN,KAAKD,qB,CAGP,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

package/dist/ui-library/p-45960b56.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i}from"./p-f93d8a4e.js";const s=":host{display:block}a{text-decoration:none;display:block}.sidebar-item{padding:8px 8px 16px 16px;font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";const t=s;const a=class{constructor(i){e(this,i);this.value="";this.selected=false;this.disabled=false;this.href=undefined}render(){const e=this.href!=null?"a":"div";return i(e,{key:"f788eac06884030c12500ba61fb96f711e7ab6b0",class:{"sidebar-item":true,"sidebar-item--selected":this.selected,"sidebar-item--disabled":this.disabled},role:"menuitem",href:this.href,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},i("slot",{key:"30c6ac2df0c6def1ae3baf90e5cd694d9db76538"}))}};a.style=t;export{a as six_sidebar_item};
+//# sourceMappingURL=p-45960b56.entry.js.map

package/dist/ui-library/p-45960b56.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSidebarItemCss","SixSidebarItemStyle0","SixSidebarItem","render","Tag","this","href","h","key","class","selected","disabled","role"],"sources":["src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na {\n  text-decoration: none;\n  display: block;\n}\n\n.sidebar-item {\n  padding: 8px 8px 16px 16px;\n  font-size: 0.9rem;\n  color: var(--six-sidebar-color);\n  cursor: pointer;\n  font-family: var(--six-font-family);\n\n  &:hover:not(.sidebar-item--disabled) {\n    color: var(--six-color-web-rock-600);\n  }\n\n  &.sidebar-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &.sidebar-item--selected {\n    font-weight: var(--six-font-weight-bold);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested displayed text of the item.\n */\n\n@Component({\n  tag: 'six-sidebar-item',\n  styleUrl: 'six-sidebar-item.scss',\n  shadow: true,\n})\nexport class SixSidebarItem {\n  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the item in a selected state. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Set to true to draw the sidebar item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  render() {\n    const Tag = this.href != null ? 'a' : 'div';\n    return (\n      <Tag\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        href={this.href}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </Tag>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAoB,mdAC1B,MAAAC,EAAeD,E,MCaFE,EAAc,M,oCAEQ,G,cAGG,M,cAGA,M,oBAQpC,MAAAC,GACE,MAAMC,EAAMC,KAAKC,MAAQ,KAAO,IAAM,MACtC,OACEC,EAACH,EAAG,CAAAI,IAAA,2CACFC,MAAO,CACL,eAAgB,KAChB,yBAA0BJ,KAAKK,SAC/B,yBAA0BL,KAAKM,UAEjCC,KAAK,WACLN,KAAMD,KAAKC,KAAI,gBACAD,KAAKK,SAAW,OAAS,QAAO,gBAChCL,KAAKM,SAAW,OAAS,SAExCJ,EAAA,QAAAC,IAAA,6C"}

package/dist/ui-library/p-49e5d8bb.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as i,H as r,g as s}from"./p-f93d8a4e.js";import{P as e}from"./p-7f856f00.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}';const n=a;let p=0;const l=class{constructor(i){t(this,i);this.sixShow=o(this,"six-tooltip-show",7);this.sixAfterShow=o(this,"six-tooltip-after-show",7);this.sixHide=o(this,"six-tooltip-hide",7);this.sixAfterHide=o(this,"six-tooltip-after-hide",7);this.componentId=`tooltip-${++p}`;this.isVisible=false;this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{const t=this.target;const o=this.getTarget();if(o!==t){if(t!=null){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",this.componentId)}};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus"}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){if(this.tooltipPositioner==null)return;this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner,{strategy:"fixed"});this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover!=null){this.popover.destroy()}this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)}async show(){var t;if(this.isVisible||this.disabled){return}const o=this.sixShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;(t=this.popover)===null||t===void 0?void 0:t.show()}async hide(){var t;if(!this.isVisible||this.disabled){return}const o=this.sixHide.emit();if(o.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;(t=this.popover)===null||t===void 0?void 0:t.hide()}getTarget(){const t=[...this.host.children].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(t==null){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){if(this.popover==null)return;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.sixAfterHide.emit(),onAfterShow:()=>this.sixAfterShow.emit()})}render(){return i(r,{key:"41afb0551e5034f5020688a714e691c40fa1f2b1",onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{key:"180b881497bb1e2ebab7a64301fce87bf8a3e55c",onSlotchange:this.handleSlotChange}),i("div",{key:"9310cdb7a4a7523489823310b37ba1cb360abc06",ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{key:"6006bd344ca13ea6d8afd7e5f36c5672ca943029",part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{key:"f9883f48ae9ba2957a033f906f1a797a1d66a9d6",name:"content"},this.content))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};l.style=n;export{l as six_tooltip};
+//# sourceMappingURL=p-49e5d8bb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixTooltipCss","SixTooltipStyle0","id","SixTooltip","this","componentId","isVisible","handleBlur","hasTrigger","hide","handleClick","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","handleOpenChange","componentDidLoad","tooltipPositioner","popover","Popover","strategy","syncOptions","host","addEventListener","hidden","componentDidUpdate","disconnectedCallback","destroy","removeEventListener","disabled","sixShow","emit","defaultPrevented","_a","sixHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","setOptions","placement","distance","skidding","transitionElement","tooltip","onAfterHide","sixAfterHide","onAfterShow","sixAfterShow","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","role","name","content"],"sources":["src/components/six-tooltip/six-tooltip.scss?tag=six-tooltip&encapsulation=shadow","src/components/six-tooltip/six-tooltip.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  display: contents;\n}\n\n.tooltip-positioner {\n  position: fixed;\n  z-index: var(--six-z-index-tooltip);\n  pointer-events: none;\n}\n\n.tooltip {\n  max-width: var(--max-width);\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-tooltip-background-color);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-tooltip-color);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-x-small);\n  transform: scale(0.8);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n  }\n}\n\n.tooltip-positioner {\n  &[data-popper-placement^='top'] .tooltip {\n    transform-origin: bottom;\n  }\n\n  &[data-popper-placement^='bottom'] .tooltip {\n    transform-origin: top;\n  }\n\n  &[data-popper-placement^='left'] .tooltip {\n    transform-origin: right;\n  }\n\n  &[data-popper-placement^='right'] .tooltip {\n    transform-origin: left;\n  }\n\n  &.popover-visible .tooltip {\n    opacity: 1;\n    transform: none;\n    transition-delay: var(--show-delay);\n    transition-duration: var(--show-duration);\n    transition-timing-function: var(--show-timing-function);\n  }\n}\n\n// Arrow + bottom\n.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {\n  bottom: 100%;\n  left: calc(50% - var(--six-tooltip-arrow-size));\n  border-bottom: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-left: var(--six-tooltip-arrow-size) solid transparent;\n  border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {\n  left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {\n  right: var(--six-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n// Arrow + top\n.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {\n  top: 100%;\n  left: calc(50% - var(--six-tooltip-arrow-size));\n  border-top: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-left: var(--six-tooltip-arrow-size) solid transparent;\n  border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {\n  left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {\n  right: var(--six-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n// Arrow + left\n.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {\n  top: calc(50% - var(--six-tooltip-arrow-size));\n  left: 100%;\n  border-left: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-top: var(--six-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {\n  top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {\n  top: auto;\n  bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n\n// Arrow + right\n.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {\n  top: calc(50% - var(--six-tooltip-arrow-size));\n  right: 100%;\n  border-right: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n  border-top: var(--six-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {\n  top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {\n  top: auto;\n  bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport Popover from '../../utils/popover';\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 tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tooltip',\n  styleUrl: 'six-tooltip.scss',\n  shadow: true,\n})\nexport class SixTooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover?: Popover;\n  private tooltipPositioner?: HTMLElement;\n  private target?: HTMLElement;\n  private tooltip?: HTMLElement;\n\n  @Element() host!: HTMLSixTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip, so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event({ eventName: 'six-tooltip-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event({ eventName: 'six-tooltip-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event({ eventName: 'six-tooltip-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event({ eventName: 'six-tooltip-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.tooltipPositioner == null) return;\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner, { strategy: 'fixed' });\n    this.syncOptions();\n\n    this.host.addEventListener('blur', this.handleBlur, true);\n    this.host.addEventListener('click', this.handleClick, true);\n    this.host.addEventListener('focus', this.handleFocus, true);\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover != null) {\n      this.popover.destroy();\n    }\n\n    this.host.removeEventListener('blur', this.handleBlur, true);\n    this.host.removeEventListener('click', this.handleClick, true);\n    this.host.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  /** Shows the tooltip. */\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.disabled) {\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    this.popover?.show();\n  }\n\n  /** Shows the tooltip. */\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.disabled) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover?.hide();\n  }\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...this.host.children].find(\n      (el) => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (target == null) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    const oldTarget = this.target;\n    const newTarget = this.getTarget();\n\n    if (newTarget !== oldTarget) {\n      if (oldTarget != null) {\n        oldTarget.removeAttribute('aria-describedby');\n      }\n      newTarget.setAttribute('aria-describedby', this.componentId);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    if (this.popover == null) return;\n\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.sixAfterHide.emit(),\n      onAfterShow: () => this.sixAfterShow.emit(),\n    });\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n        <slot onSlotchange={this.handleSlotChange} />\n        <div ref={(el) => (this.tooltipPositioner = el)} class=\"tooltip-positioner\">\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            id={this.componentId}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\">{this.content}</slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-4af73ea9.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s,g as i}from"./p-f93d8a4e.js";import{h as o,a as l}from"./p-0cebf1d2.js";import{F as r}from"./p-aa99a393.js";import{E as a}from"./p-8bfb4bfc.js";import{D as n,a as c}from"./p-a1502802.js";import{a as h}from"./p-e080d5b6.js";const d=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.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,.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.display__values{display:flex;flex:1 1 auto;align-items:center;user-select:none;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.display__values::-webkit-scrollbar{width:0;height:0}.display__values-values{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display__values-and-counter{display:flex;overflow:hidden}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.placeholder{color:var(--six-input-placeholder-color)}.select--disabled .placeholder{color:var(--six-input-placeholder-color-disabled)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .display__values{margin:0 0 0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .display__values{margin:0 0 0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .display__values{margin:0 0 0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{width:100%}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}.selection-container--border{border-bottom:solid var(--six-border-width) var(--six-menu-divider-color);padding-top:var(--six-spacing-xx-small);padding-bottom:var(--six-spacing-xx-small)}.display-value--hidden{display:none}.overflow-count{color:var(--six-color-web-rock-600);padding-left:var(--six-spacing-x-small)}.overflow-count-hidden{display:none}.separator--hidden{display:none}.select-all{border-top:1px solid var(--six-color-web-rock-300);display:flex;justify-content:end}';const u=d;let f=0;const x=class{constructor(i){e(this,i);this.sixChange=t(this,"six-select-change",7);this.sixFocus=t(this,"six-select-focus",7);this.sixBlur=t(this,"six-select-blur",7);this.inputId=`select-${++f}`;this.labelId=`select-label-${f}`;this.helpTextId=`select-help-text-${f}`;this.errorTextId=`select-error-text-${f}`;this.eventListeners=new a;this.activeItemIndex=-1;this.resizeObserver=new ResizeObserver((()=>this.updateDisplayedValues()));this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClearClick=async e=>{var t;e.stopPropagation();await this.clearValues();await((t=this.dropdown)===null||t===void 0?void 0:t.hide());this.sixChange.emit({value:this.value,isSelected:true})};this.handleKeyDown=e=>{var t,s,i,o;if(this.virtualScroll||this.autocomplete){return}if(["Control","Escape"].includes(e.key)){return}const l=this.getVisibleItems();if(this.isOpen&&this.multiple&&e.code==="KeyA"&&e.ctrlKey){e.preventDefault();this.selectAll();return}if(e.key==="Tab"){if(this.isOpen){(t=this.dropdown)===null||t===void 0?void 0:t.hide()}return}if(e.key===" "&&!this.multiple){return}if(this.activeItemIndex>=0&&["Enter"," "].includes(e.key)){const t=l.at(this.activeItemIndex);e.preventDefault();t===null||t===void 0?void 0:t.click();return}if(["ArrowDown","ArrowUp","Home","End"].includes(e.key)){if(!this.isOpen){(s=this.dropdown)===null||s===void 0?void 0:s.show()}if(l.length>0){e.preventDefault();if(e.key==="ArrowDown"){this.activeItemIndex++}else if(e.key==="ArrowUp"){this.activeItemIndex--}else if(e.key==="Home"){this.activeItemIndex=0}else if(e.key==="End"){this.activeItemIndex=l.length-1}if(this.activeItemIndex<0)this.activeItemIndex=0;if(this.activeItemIndex>l.length-1)this.activeItemIndex=l.length-1;(i=l.at(this.activeItemIndex))===null||i===void 0?void 0:i.setFocus()}}if(!this.isOpen){e.stopPropagation();e.preventDefault();(o=this.dropdown)===null||o===void 0?void 0:o.show()}};this.handleLabelClick=()=>{var e;(e=this.box)===null||e===void 0?void 0:e.focus()};this.handleMenuSelect=e=>{const t=e.detail.item;if(this.multiple){t.checked=!t.checked}else{this.getItems().forEach((e=>e.checked=false));t.checked=true}this.syncValueFromItems();this.sixChange.emit({value:this.value,isSelected:true})};this.handleMenuShow=e=>{if(this.disabled){e.preventDefault();return}this.activeItemIndex=-1;const t=this.getItems();t.forEach((e=>e.style.display="unset"));const i=p(this.getValueAsArray(),t);if(!this.virtualScroll&&this.multiple){i.forEach((e=>e.style.display="none"));this.selectionContainerItems=i.map((e=>s("six-menu-item",{key:e.value,checked:true,value:e.value,checkType:this.multiple?"checkbox":"check",onClick:t=>{t.stopPropagation();if(!this.disabled){const s=t.target;const i=s.checked;s.checked=!i;e.checked=!i;this.syncValueFromItems();this.sixChange.emit({value:this.value,isSelected:true})}}},this.getItemLabel(e))))}this.isOpen=true};this.handleMenuHide=()=>{this.isOpen=false};this.handleSlotChange=()=>{this.hasHelpTextSlot=o(this.host,"help-text");this.hasLabelSlot=o(this.host,"label");this.hasErrorTextSlot=o(this.host,"error-text");this.syncItemsFromValue()};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.isOpen=false;this.displayedValues=[];this.selectionContainerItems=[];this.multiple=false;this.selectAllButton=false;this.selectAllText=undefined;this.maxTagsVisible=3;this.disabled=false;this.name="";this.placeholder="";this.filterPlaceholder=undefined;this.filterDebounce=undefined;this.size="medium";this.hoist=false;this.value="";this.pill=false;this.helpText="";this.required=false;this.clearable=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.line=false;this.filter=false;this.asyncFilter=false;this.autocomplete=false;this.inputDebounce=n;this.options=null;this.virtualScroll=false}handleDisabledChange(){var e;if(this.disabled&&this.isOpen){(e=this.dropdown)===null||e===void 0?void 0:e.hide()}}handleLabelChange(){this.handleSlotChange()}handleMultipleChange(){const e=this.getValueAsArray();this.value=this.multiple?e:e[0]||"";this.syncItemsFromValue()}async handleValueChange(){if(this.multiple&&!Array.isArray(this.value)){this.value=[]}if(!this.multiple&&typeof this.value!=="string"){this.value=""}await this.syncItemsFromValue()}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}this.init()}componentWillLoad(){this.handleSlotChange();if(this.multiple&&this.value!=null){this.value=this.getValueAsArray()}}componentDidLoad(){this.init();requestAnimationFrame((()=>this.syncItemsFromValue()));if(this.autocomplete&&this.autocompleteInput!=null){const e=this.autocompleteInput;this.eventListeners.add(e,"six-input-input",c((t=>{this.value=e.value;this.sixChange.emit({value:this.value,isSelected:false});t.stopPropagation()}),this.inputDebounce));e.value=Array.isArray(this.value)?this.value.join(","):this.value}}disconnectedCallback(){var e;this.resizeObserver.disconnect();(e=this.host.shadowRoot)===null||e===void 0?void 0:e.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(e){var t;this.hasFocus=true;(t=this.box)===null||t===void 0?void 0:t.focus(e)}init(){var e;(e=this.host.shadowRoot)===null||e===void 0?void 0:e.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-select-change","change",this.host);this.eventListeners.forward("six-select-blur","blur",this.host);this.eventListeners.forward("six-select-focus","focus",this.host);if(this.displayValuesContainer){this.resizeObserver.observe(this.displayValuesContainer)}}getItemLabel(e){var t,s;const i=(t=e.shadowRoot)===null||t===void 0?void 0:t.querySelector("slot:not([name])");if(i!=null){return l(i)}else{return(s=e.textContent)!==null&&s!==void 0?s:""}}getItems(){if(this.options!==null&&this.menu!=null&&this.menu.shadowRoot!=null){return[...this.menu.shadowRoot.querySelectorAll("six-menu-item")]}return[...this.host.querySelectorAll("six-menu-item")]}getVisibleItems(){const e=this.getSelectionContainerItems();const t=this.getItems();return[...e,...t].filter((e=>e.style.display!=="none"))}getSelectionContainerItems(){var e;return[...((e=this.host.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("six-menu-item"))||[]]}getValueAsArray(){const e=Array.isArray(this.value)?this.value:this.value===""?[]:[this.value];return e.map(String)}async clearValues(){this.value=this.multiple?[]:"";this.selectionContainerItems=[];await this.syncItemsFromValue()}selectAll(){const e=this.getVisibleItems();const t=this.hasDeselectedOptions();e.filter((e=>!e.disabled)).forEach((e=>e.checked=t));const s=e.filter((e=>e.checked)).map((e=>e.value));this.value=t?s:[];this.sixChange.emit({value:this.value,isSelected:true})}async syncItemsFromValue(){const e=this.getSelectionContainerItems();const t=this.getItems();const s=this.getValueAsArray();e.forEach((e=>{e.checkType=this.multiple?"checkbox":"check";e.checked=s.includes(e.value)}));t.forEach((e=>{e.checkType=this.multiple?"checkbox":"check";e.checked=s.includes(e.value)}));const i=p(this.getValueAsArray(),t);this.displayedValues=i.map((e=>this.getItemLabel(e)));if(this.autocomplete&&this.autocompleteInput!=null){this.autocompleteInput.value=Array.isArray(this.value)?this.value.join(","):this.value}requestAnimationFrame((()=>{this.updateDisplayedValues()}))}syncValueFromItems(){const e=this.getItems();const t=e.filter((e=>e.checked)).map((e=>e.value));if(this.multiple){this.value=t}else{this.value=t.length>0?t[0]:""}}updateDisplayedValues(){var e,t;const s=[...(t=(e=this.displayValuesContainer)===null||e===void 0?void 0:e.querySelectorAll(".display-value"))!==null&&t!==void 0?t:[]];if(this.displayValuesContainer==null||s.length===0||this.overflowCount==null){return}s.forEach((e=>{y(e);g(e)}));const i=s[s.length-1].querySelector(".separator");if(i==null)return;let o=b(this.displayValuesContainer)+b(i);let{fitCount:l,overflowCount:r}=m(s,o);if(r===0){C(this.overflowCount);v(s,l)}else{k(this.overflowCount,r+1);z(this.overflowCount);o=o-b(this.overflowCount);({fitCount:l,overflowCount:r}=m(s,o));k(this.overflowCount,r);v(s,l)}}render(){var e;const t=this.hasSelection();const i=this.getItems();const o=i.length>0;const l=this.hasDeselectedOptions();let a=false;let n=o;if(this.clearable&&t){a=true;n=false}return s(r,{key:"cf4bbc5c8bdb3bd395b3223065ef7175f12fc750",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,onLabelClick:this.handleLabelClick,disabled:this.disabled,required:this.required,displayError:this.invalid},s("six-dropdown",{key:"5de198b2fc9ab517f9e6682394d881328f4da383",part:"base",ref:e=>this.dropdown=e,hoist:this.hoist,matchTriggerWidth:true,closeOnSelect:!this.multiple,containingElement:this.host,disableHideOnEnterAndSpace:this.autocomplete,class:{select:true,"select--open":this.isOpen,"select--empty":((e=this.value)===null||e===void 0?void 0:e.length)===0,"select--focused":this.hasFocus,"select--clearable":this.clearable,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--has-tags":this.multiple&&t,"select--placeholder-visible":this.displayedValues.length===0,"select--small":this.size==="small","select--medium":this.size==="medium","select--large":this.size==="large","select--pill":this.pill,"select--invalid":this.invalid},onKeyDown:this.handleKeyDown,"onSix-dropdown-show":this.handleMenuShow,"onSix-dropdown-hide":this.handleMenuHide,filterPlaceholder:this.filterPlaceholder,filterDebounce:this.filterDebounce,filter:this.filter,asyncFilter:this.asyncFilter,virtualScroll:this.virtualScroll},s("div",{key:"731e50e52df65db450e852209b091698d024d533",slot:"trigger",ref:e=>this.box=e,id:this.inputId,class:{select__box:true,"select__box--line":this.line,"select__box--autocomplete":this.autocomplete},role:"combobox","aria-labelledby":this.labelId,"aria-describedby":this.helpTextId,"aria-haspopup":"true","aria-expanded":this.isOpen?"true":"false",tabIndex:this.disabled?-1:0,onBlur:this.handleBlur,onFocus:this.handleFocus},s("div",{key:"4623418e42ad9d69891c582b7e88e2686b27eaa1",class:"display__values",ref:e=>this.displayValuesContainer=e},this.displayedValues.length>0?s("span",{class:"display__values-and-counter"},s("span",{class:"display__values-values"},this.displayedValues.map((e=>s("span",{key:e,class:"display-value"},e,s("span",{class:{separator:true}},", "))))),s("span",{ref:e=>this.overflowCount=e,class:"overflow-count"},"+10")):s("span",{class:"placeholder"},this.placeholder)),a&&s("six-icon-button",{exportparts:"base:clear-button",class:"select__clear",name:"clear",size:"small",onClick:this.handleClearClick,tabindex:"-1"}),n&&s("span",{part:"icon",class:"select__icon"},s("six-icon",{size:"medium"},"expand_more")),s("six-input",{key:"1c53a3b59a3f09c6707709c36afdcd62e90de43a",ref:e=>this.autocompleteInput=e,class:{select__input:true,"select__hidden-select":!this.autocomplete},"aria-hidden":"true",required:this.required,onFocus:this.handleFocus,clearable:this.clearable,placeholder:this.placeholder,pill:this.pill,disabled:this.disabled,size:this.size,tabIndex:-1})),s("div",{key:"65f3a8a73dd645a1098afc2b92104336b16fb80f",class:{"selection-container":true,"selection-container--border":this.selectionContainerItems.length>0&&i.length!==this.selectionContainerItems.length}},this.selectionContainerItems),s("six-menu",{key:"80ac8179cb1fd6bbccd9525254511dde6908af5f",ref:e=>this.menu=e,part:"menu",class:{select__menu:true,"select__menu--hidden":!o},"onSix-menu-item-selected":this.handleMenuSelect,items:this.options,virtualScroll:this.virtualScroll,"remove-box-shadow":true,"disable-keyboard-handling":true},s("slot",{key:"72f6447ad3dc14df92cf42b4a7b0984e970759c7",onSlotchange:this.handleSlotChange})),this.multiple&&this.selectAllButton&&s("div",{class:"select-all",slot:"dropdown-footer"},s("six-button",{type:"link",onClick:()=>this.selectAll()},this.selectAllText==null?S(l):this.selectAllText))))}hasSelection(){return this.multiple?this.value.length>0:this.value!==""}hasDeselectedOptions(){return this.getVisibleItems().some((e=>!e.disabled&&!e.checked))}get host(){return i(this)}static get watchers(){return{disabled:["handleDisabledChange"],helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],multiple:["handleMultipleChange"],value:["handleValueChange"]}}};function p(e,t){return t.filter((t=>e.includes(t.value)))}function b(e){return e.getBoundingClientRect().width}function m(e,t){let s=0;let i=0;for(let o=0;o<e.length;o++){const l=e[o];const r=b(l);if(o===0&&r>t){i=1;break}s+=r;if(s>t){break}else{i+=1}}const o=e.length-i;return{fitCount:i,overflowCount:o}}function v(e,t){if(e.length>0){e.slice(0,t).forEach(((e,t,s)=>{y(e);const i=t===s.length-1;if(i){_(e)}else{g(e)}}));e.slice(t).forEach((e=>{w(e);g(e)}))}}function _(e){var t;(t=e.querySelector(".separator"))===null||t===void 0?void 0:t.classList.add("separator--hidden")}function g(e){var t;(t=e.querySelector(".separator"))===null||t===void 0?void 0:t.classList.remove("separator--hidden")}function y(e){e.classList.remove("display-value--hidden")}function w(e){e.classList.add("display-value--hidden")}function k(e,t){e.textContent=`+${t}`}function z(e){e.classList.remove("overflow-count-hidden")}function C(e){e.classList.add("overflow-count-hidden")}function S(e){const t=h();switch(t){case"de":return e?"Alle auswählen":"Alle abwählen";case"fr":return e?"Tout sélectionner":"Tout désélectionner";case"it":return e?"Seleziona tutto":"Deseleziona tutto";case"en":return e?"Select all":"Deselect all";case"es":return e?"Seleccionar todo":"Deseleccionar todo"}}x.style=u;export{x as six_select};
+//# sourceMappingURL=p-4af73ea9.entry.js.map

package/dist/ui-library/p-4af73ea9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSelectCss","SixSelectStyle0","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","activeItemIndex","resizeObserver","ResizeObserver","updateDisplayedValues","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClearClick","async","event","stopPropagation","clearValues","_a","dropdown","hide","sixChange","value","isSelected","handleKeyDown","virtualScroll","autocomplete","includes","key","items","getVisibleItems","isOpen","multiple","code","ctrlKey","preventDefault","selectAll","activeItem","at","click","_b","show","length","_c","setFocus","_d","handleLabelClick","box","focus","handleMenuSelect","currentItem","detail","item","checked","getItems","forEach","i","syncValueFromItems","handleMenuShow","disabled","mainItems","style","display","checkedItems","getCheckedItems","getValueAsArray","selectionContainerItems","map","h","checkType","onClick","menuItem","target","isChecked","getItemLabel","handleMenuHide","handleSlotChange","hasHelpTextSlot","hasSlot","host","hasLabelSlot","hasErrorTextSlot","syncItemsFromValue","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","handleValueChange","Array","isArray","connectedCallback","options","console","error","init","componentWillLoad","componentDidLoad","requestAnimationFrame","autocompleteInput","add","debounce","inputDebounce","join","disconnectedCallback","disconnect","shadowRoot","removeEventListener","removeAll","addEventListener","forward","displayValuesContainer","observe","slot","querySelector","getTextContent","textContent","menu","querySelectorAll","getSelectionContainerItems","filter","values","String","visibleItems","hasDeselectedOptions","option","displayedValues","checkedValues","displayValueOptions","overflowCount","d","showDisplayValue","showSeparator","separator","availableWidth","getWidth","fitCount","computeFitCount","hideOverflowCount","showFittingValues","setOverflowCount","showOverflowCount","render","hasSelection","hasMenuItems","showClear","showExpand","clearable","FormControl","label","helpText","errorText","errorTextCount","size","onLabelClick","required","displayError","invalid","part","ref","el","hoist","matchTriggerWidth","closeOnSelect","containingElement","disableHideOnEnterAndSpace","class","select","pill","onKeyDown","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","placeholder","exportparts","name","tabindex","select__input","select__menu","onSlotchange","selectAllButton","type","selectAllText","selectAllDefaultText","some","opt","element","getBoundingClientRect","width","accumulatedWidth","displayOption","slice","displayValue","index","list","isLast","hideSeparator","hideDisplayValue","displayValueOption","classList","remove","count","lang","getLanguage"],"sources":["src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","src/components/six-select/six-select.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host,\n.select {\n  display: block;\n}\n\n.select__box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  font-size: var(--six-input-font-size-medium);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: pointer;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &--autocomplete {\n    border: none;\n    overflow: initial;\n  }\n}\n\n.select:not(.select--disabled) .select__box:hover {\n  background-color: var(--six-input-background-color-hover);\n  color: var(--six-input-color-hover);\n\n  border-bottom-color: var(--six-input-border-color-hover);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-hover);\n  }\n}\n\n.select:not(.select--disabled) .select__box:focus {\n  background-color: var(--six-input-background-color-focus);\n  outline: none;\n  color: var(--six-input-color-focus);\n\n  border-bottom-color: var(--six-input-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n  &:not(.select__box--line) {\n    border-color: var(--six-input-border-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n  }\n}\n\n.select--disabled {\n  .select__box {\n    background-color: var(--six-input-background-color-disabled);\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n    outline: none;\n\n    &:not(.select__box--line) {\n      border-color: var(--six-input-border-color-disabled);\n    }\n  }\n\n  .select__clear {\n    pointer-events: none;\n  }\n}\n\n.select--invalid:not(.select--disabled):not(.select--focused) {\n  .select__box {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.display__values {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  user-select: none;\n  overflow: hidden;\n  @include hide-scrollbar;\n}\n\n.display__values-values {\n  flex: 0 1 auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.display__values-and-counter {\n  display: flex;\n  overflow: hidden;\n}\n\n.select__clear {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n}\n\n.select__icon {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: inline;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n  transform: rotate(-180deg);\n}\n\n// Placeholder\n.placeholder {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled .placeholder {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n// Hidden input (for form control validation to show)\n.select__hidden-select {\n  @include visually-hidden();\n}\n\n.select__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--small {\n  .select__box {\n    border-radius: var(--six-input-border-radius-small);\n    font-size: var(--six-input-font-size-small);\n    min-height: var(--six-height-small);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .display__values {\n    margin: 0 0 0 var(--six-input-spacing-small);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.select--medium {\n  .select__box {\n    border-radius: var(--six-input-border-radius-medium);\n    font-size: var(--six-input-font-size-medium);\n    min-height: var(--six-height-medium);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .display__values {\n    margin: 0 0 0 var(--six-input-spacing-medium);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.select--large {\n  .select__box {\n    border-radius: var(--six-input-border-radius-large);\n    font-size: var(--six-input-font-size-large);\n    min-height: var(--six-height-large);\n\n    &--line {\n      border: none;\n      border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n    }\n  }\n\n  .display__values {\n    margin: 0 0 0 var(--six-input-spacing-large);\n  }\n\n  .select__clear {\n    margin-right: var(--six-spacing-xxx-small);\n  }\n\n  .select__icon {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.select--pill {\n  &.select--small .select__box {\n    border-radius: var(--six-height-small);\n  }\n\n  &.select--medium .select__box {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.select--large .select__box {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Menu\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.select {\n  &__menu {\n    width: 100%;\n\n    &--hidden {\n      // hide the menu panel if there are no menu items\n      display: none;\n    }\n  }\n}\n\n// fixes problem where six-select height changes when size=\"small\" and clearing button is visible\nsix-icon-button::part(base) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.selection-container--border {\n  border-bottom: solid var(--six-border-width) var(--six-menu-divider-color);\n  padding-top: var(--six-spacing-xx-small);\n  padding-bottom: var(--six-spacing-xx-small);\n}\n\n.display-value--hidden {\n  display: none;\n}\n\n.overflow-count {\n  color: var(--six-color-web-rock-600);\n  padding-left: var(--six-spacing-x-small);\n}\n\n.overflow-count-hidden {\n  display: none;\n}\n\n.separator--hidden {\n  display: none;\n}\n\n.select-all {\n  border-top: 1px solid var(--six-color-web-rock-300);\n  display: flex;\n  justify-content: end;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getTextContent, hasSlot } from '../../utils/slot';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { SixMenuItemData } from '../six-menu/six-menu';\nimport { getLanguage } from '../../utils/error-messages';\n\nexport interface SixSelectChangePayload {\n  value: string | string[];\n  isSelected: boolean;\n}\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 select's options in the form of menu items.\n * @slot label - The select's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the select.\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 clear-button - The input's clear button, exported from six-input.\n * @part form-control - The form control that wraps the label, input, and help text.\n * @part help-text - The select's help text.\n * @part icon - The select's icon.\n * @part label - The select's label.\n * @part menu - The select menu, a six-menu element.\n * @part tag - The multiselect option, a six-tag element.\n * @part tags - The container in which multiselect options are rendered.\n */\n\n@Component({\n  tag: 'six-select',\n  styleUrl: 'six-select.scss',\n  shadow: true,\n})\nexport class SixSelect {\n  private box?: HTMLElement;\n  private menu?: HTMLElement;\n  private dropdown?: HTMLSixDropdownElement;\n  private displayValuesContainer?: HTMLElement;\n  private overflowCount?: HTMLElement;\n  private autocompleteInput?: HTMLSixInputElement;\n  private inputId = `select-${++id}`;\n  private labelId = `select-label-${id}`;\n  private helpTextId = `select-help-text-${id}`;\n  private errorTextId = `select-error-text-${id}`;\n  private eventListeners = new EventListeners();\n  private activeItemIndex = -1;\n  private resizeObserver = new ResizeObserver(() => this.updateDisplayedValues());\n\n  @Element() host!: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() isOpen = false;\n  @State() displayedValues: string[] = [];\n\n  /** Menu items shown in the selection container.  */\n  @State() selectionContainerItems: HTMLSixMenuItemElement[] = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\n\n  /** Enables the select all button. */\n  @Prop() selectAllButton = false;\n\n  /**\n   * Custom text for the \"select all\" button. Defaults to \"Select all\" and equivalents in supported languages.\n   */\n  @Prop() selectAllText?: string;\n\n  /**\n   * The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\n   * number of additional items that are selected. Set to -1 to remove the limit.\n   *\n   * @deprecated: This property is ignored. The component now displays as many items as possible and computes the \"+n\" dynamically.\n   */\n  @Prop() maxTagsVisible = 3;\n\n  /** Set to true to disable the select control. */\n  @Prop() disabled = false;\n\n  /** The select's name. */\n  @Prop() name = '';\n\n  /** The select's placeholder text. */\n  @Prop() placeholder = '';\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder?: string;\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce?: number;\n\n  /** The select's size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /** The value of the control. This will be a string or an array depending on `multiple`. */\n  @Prop({ mutable: true }) value: string | string[] = '';\n\n  /** Set to true to draw a pill-style select with rounded edges. */\n  @Prop() pill = false;\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** Set to true to add a clear button when the select is populated. */\n  @Prop() clearable = 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 render as line */\n  @Prop() line = false;\n\n  /** Set to true to allow filtering for entries in the dropdown */\n  @Prop() filter = false;\n\n  /**\n   * Set to true to allow async filtering.\n   * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n   */\n  @Prop() asyncFilter = false;\n\n  /**\n   * Set to true to turn the six-select into an autocomplete.\n   */\n  @Prop() autocomplete = false;\n\n  /** The debounce for when the input changes for autocompletes should be emitted */\n  @Prop() inputDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */\n  @Prop() options: SixMenuItemData[] | null = null;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.isOpen) {\n      this.dropdown?.hide();\n    }\n  }\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('multiple')\n  handleMultipleChange() {\n    // Cast to array | string based on `this.multiple`\n    const value = this.getValueAsArray();\n    this.value = this.multiple ? value : value[0] || '';\n    this.syncItemsFromValue();\n  }\n\n  @Watch('value')\n  async handleValueChange() {\n    if (this.multiple && !Array.isArray(this.value)) {\n      this.value = [];\n    }\n\n    if (!this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n    await this.syncItemsFromValue();\n  }\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-select-change' }) sixChange!: EventEmitter<SixSelectChangePayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-select-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-select-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n    this.init();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    if (this.multiple && this.value != null) {\n      this.value = this.getValueAsArray();\n    }\n  }\n\n  componentDidLoad() {\n    this.init();\n\n    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning\n    requestAnimationFrame(() => this.syncItemsFromValue());\n\n    if (this.autocomplete && this.autocompleteInput != null) {\n      const autocompleteInput = this.autocompleteInput;\n      this.eventListeners.add(\n        autocompleteInput,\n        'six-input-input',\n        debounce((event) => {\n          this.value = autocompleteInput.value;\n          this.sixChange.emit({ value: this.value, isSelected: false });\n          event.stopPropagation();\n        }, this.inputDebounce)\n      );\n      autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the select. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.hasFocus = true;\n    this.box?.focus(options);\n  }\n\n  private init() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-select-change', 'change', this.host);\n    this.eventListeners.forward('six-select-blur', 'blur', this.host);\n    this.eventListeners.forward('six-select-focus', 'focus', this.host);\n    if (this.displayValuesContainer) {\n      this.resizeObserver.observe(this.displayValuesContainer);\n    }\n  }\n\n  private getItemLabel(item: HTMLSixMenuItemElement): string {\n    const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot != null) {\n      return getTextContent(slot);\n    } else {\n      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed\n      return item.textContent ?? '';\n    }\n  }\n\n  private getItems(): HTMLSixMenuItemElement[] {\n    if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {\n      return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  private getVisibleItems(): HTMLSixMenuItemElement[] {\n    const selectionContainerItems = this.getSelectionContainerItems();\n    const mainItems = this.getItems();\n    return [...selectionContainerItems, ...mainItems].filter((i) => i.style.display !== 'none');\n  }\n\n  private getSelectionContainerItems() {\n    return [...(this.host.shadowRoot?.querySelectorAll('six-menu-item') || [])];\n  }\n\n  private getValueAsArray() {\n    const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];\n    // enforce that the values are converted to 'string' before the value is compared\n    return values.map(String);\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 handleClearClick = async (event: MouseEvent) => {\n    event.stopPropagation();\n    await this.clearValues();\n    await this.dropdown?.hide();\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  };\n\n  private async clearValues() {\n    this.value = this.multiple ? [] : '';\n    this.selectionContainerItems = [];\n    await this.syncItemsFromValue();\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.virtualScroll || this.autocomplete) {\n      return;\n    }\n\n    if (['Control', 'Escape'].includes(event.key)) {\n      return;\n    }\n\n    const items = this.getVisibleItems();\n\n    // Ctrl-A selects all items\n    if (this.isOpen && this.multiple && event.code === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      this.selectAll();\n      return;\n    }\n\n    // Tabbing out of the control closes it\n    if (event.key === 'Tab') {\n      if (this.isOpen) {\n        this.dropdown?.hide();\n      }\n      return;\n    }\n\n    if (event.key === ' ' && !this.multiple) {\n      return;\n    }\n\n    // Enter and Space selects the active item\n    if (this.activeItemIndex >= 0 && ['Enter', ' '].includes(event.key)) {\n      const activeItem = items.at(this.activeItemIndex);\n      event.preventDefault();\n      activeItem?.click();\n      return;\n    }\n\n    // Move the selection when pressing up or down\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      // Show the menu if it's not already open\n      if (!this.isOpen) {\n        this.dropdown?.show();\n      }\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          this.activeItemIndex++;\n        } else if (event.key === 'ArrowUp') {\n          this.activeItemIndex--;\n        } else if (event.key === 'Home') {\n          this.activeItemIndex = 0;\n        } else if (event.key === 'End') {\n          this.activeItemIndex = items.length - 1;\n        }\n\n        if (this.activeItemIndex < 0) this.activeItemIndex = 0;\n        if (this.activeItemIndex > items.length - 1) this.activeItemIndex = items.length - 1;\n\n        items.at(this.activeItemIndex)?.setFocus();\n      }\n    }\n\n    // All other keys open the menu\n    if (!this.isOpen) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.dropdown?.show();\n    }\n  };\n\n  private selectAll() {\n    const visibleItems = this.getVisibleItems();\n    const hasDeselectedOptions = this.hasDeselectedOptions();\n    visibleItems.filter((option) => !option.disabled).forEach((option) => (option.checked = hasDeselectedOptions));\n    const checkedItems = visibleItems.filter((option) => option.checked).map((option) => option.value);\n    this.value = hasDeselectedOptions ? checkedItems : [];\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  }\n\n  private handleLabelClick = () => {\n    this.box?.focus();\n  };\n\n  private handleMenuSelect = (event: CustomEvent) => {\n    const currentItem = event.detail.item as HTMLSixMenuItemElement;\n    if (this.multiple) {\n      currentItem.checked = !currentItem.checked;\n    } else {\n      this.getItems().forEach((i) => (i.checked = false));\n      currentItem.checked = true;\n    }\n    this.syncValueFromItems();\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  };\n\n  private handleMenuShow = (event: CustomEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    this.activeItemIndex = -1;\n\n    // reset display style of main items\n    const mainItems = this.getItems();\n    mainItems.forEach((item) => (item.style.display = 'unset'));\n\n    // show selected menu items in the selection container and hide them in the main container\n    const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);\n    if (!this.virtualScroll && this.multiple) {\n      checkedItems.forEach((i) => (i.style.display = 'none'));\n      this.selectionContainerItems = checkedItems.map((item) => {\n        return (\n          <six-menu-item\n            key={item.value} // key makes sure the node is not re-used: https://stenciljs.com/docs/templating-jsx#conditionals\n            checked={true}\n            value={item.value}\n            checkType={this.multiple ? 'checkbox' : 'check'}\n            onClick={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                const menuItem = event.target as HTMLSixMenuItemElement;\n                const isChecked = menuItem.checked;\n                menuItem.checked = !isChecked;\n                item.checked = !isChecked;\n                this.syncValueFromItems();\n                this.sixChange.emit({ value: this.value, isSelected: true });\n              }\n            }}\n          >\n            {this.getItemLabel(item)}\n          </six-menu-item>\n        );\n      });\n    }\n\n    this.isOpen = true;\n  };\n\n  private handleMenuHide = () => {\n    this.isOpen = false;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.syncItemsFromValue();\n  };\n\n  /**\n   * Sets the checked state of menu items and renders the displayed values.\n   */\n  private async syncItemsFromValue() {\n    const selectionContainerItems = this.getSelectionContainerItems();\n    const mainItems = this.getItems();\n    const value = this.getValueAsArray();\n\n    selectionContainerItems.forEach((item) => {\n      item.checkType = this.multiple ? 'checkbox' : 'check';\n      item.checked = value.includes(item.value);\n    });\n    mainItems.forEach((item) => {\n      item.checkType = this.multiple ? 'checkbox' : 'check';\n      item.checked = value.includes(item.value);\n    });\n\n    const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);\n    this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));\n\n    if (this.autocomplete && this.autocompleteInput != null) {\n      this.autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n    }\n\n    requestAnimationFrame(() => {\n      this.updateDisplayedValues();\n    });\n  }\n\n  private syncValueFromItems() {\n    const items = this.getItems();\n    const checkedValues = items.filter((item) => item.checked).map((item) => item.value);\n    if (this.multiple) {\n      this.value = checkedValues;\n    } else {\n      this.value = checkedValues.length > 0 ? checkedValues[0] : '';\n    }\n  }\n\n  private updateDisplayedValues() {\n    const displayValueOptions = [...(this.displayValuesContainer?.querySelectorAll('.display-value') ?? [])];\n    if (this.displayValuesContainer == null || displayValueOptions.length === 0 || this.overflowCount == null) {\n      return;\n    }\n\n    // Show all options and separators to properly measure all widths.\n    displayValueOptions.forEach((d) => {\n      showDisplayValue(d);\n      showSeparator(d);\n    });\n\n    // Measure available width. The last separator is added to the available width, because it will be hidden later on.\n    const separator = displayValueOptions[displayValueOptions.length - 1].querySelector('.separator');\n    if (separator == null) return;\n    let availableWidth = getWidth(this.displayValuesContainer) + getWidth(separator);\n\n    // Compute how many display value elements fit in the available width\n    let { fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth);\n\n    if (overflowCount === 0) {\n      // All items fit, hide overflow count and show all values.\n      hideOverflowCount(this.overflowCount);\n      showFittingValues(displayValueOptions, fitCount);\n    } else {\n      // Not all items fit in the available width. Recompute the available width with the overflow-count visible.\n\n      // Increment overflow count by one to make sure the elements fit, even if the overflow count increases to the\n      // next higher power of ten, e.g. from 9 to 10 or 99 to 100.\n      setOverflowCount(this.overflowCount, overflowCount + 1);\n      showOverflowCount(this.overflowCount);\n\n      // Subtract the overflow count from the available width\n      availableWidth = availableWidth - getWidth(this.overflowCount);\n\n      // Compute how many display value elements fit in the new available width\n      ({ fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth));\n\n      // Show overflow count and items that fit.\n      setOverflowCount(this.overflowCount, overflowCount);\n      showFittingValues(displayValueOptions, fitCount);\n    }\n  }\n\n  render() {\n    const hasSelection = this.hasSelection();\n    const items = this.getItems();\n    const hasMenuItems = items.length > 0;\n    const hasDeselectedOptions = this.hasDeselectedOptions();\n    let showClear = false;\n    let showExpand = hasMenuItems;\n    if (this.clearable && hasSelection) {\n      showClear = true;\n      showExpand = false;\n    }\n\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <six-dropdown\n          part=\"base\"\n          ref={(el) => (this.dropdown = el)}\n          hoist={this.hoist}\n          matchTriggerWidth={true}\n          closeOnSelect={!this.multiple}\n          containingElement={this.host}\n          disableHideOnEnterAndSpace={this.autocomplete}\n          class={{\n            select: true,\n            'select--open': this.isOpen,\n            'select--empty': this.value?.length === 0,\n            'select--focused': this.hasFocus,\n            'select--clearable': this.clearable,\n            'select--disabled': this.disabled,\n            'select--multiple': this.multiple,\n            'select--has-tags': this.multiple && hasSelection,\n            'select--placeholder-visible': this.displayedValues.length === 0,\n            'select--small': this.size === 'small',\n            'select--medium': this.size === 'medium',\n            'select--large': this.size === 'large',\n            'select--pill': this.pill,\n            'select--invalid': this.invalid,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onSix-dropdown-show={this.handleMenuShow}\n          onSix-dropdown-hide={this.handleMenuHide}\n          filterPlaceholder={this.filterPlaceholder}\n          filterDebounce={this.filterDebounce}\n          filter={this.filter}\n          asyncFilter={this.asyncFilter}\n          virtualScroll={this.virtualScroll}\n        >\n          {/* Trigger */}\n          <div\n            slot=\"trigger\"\n            ref={(el) => (this.box = el)}\n            id={this.inputId}\n            class={{\n              select__box: true,\n              'select__box--line': this.line,\n              'select__box--autocomplete': this.autocomplete,\n            }}\n            role=\"combobox\"\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-haspopup=\"true\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            tabIndex={this.disabled ? -1 : 0}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          >\n            {/* Display values */}\n            <div class=\"display__values\" ref={(el) => (this.displayValuesContainer = el)}>\n              {this.displayedValues.length > 0 ? (\n                <span class=\"display__values-and-counter\">\n                  <span class=\"display__values-values\">\n                    {this.displayedValues.map((value) => (\n                      <span key={value} class=\"display-value\">\n                        {value}\n                        <span class={{ separator: true }}>, </span>\n                      </span>\n                    ))}\n                  </span>\n                  <span ref={(el) => (this.overflowCount = el)} class=\"overflow-count\">\n                    +10\n                  </span>\n                </span>\n              ) : (\n                <span class=\"placeholder\">{this.placeholder}</span>\n              )}\n            </div>\n\n            {/* Clear */}\n            {showClear && (\n              <six-icon-button\n                exportparts=\"base:clear-button\"\n                class=\"select__clear\"\n                name=\"clear\"\n                size=\"small\"\n                onClick={this.handleClearClick}\n                tabindex=\"-1\"\n              />\n            )}\n\n            {/* Expand */}\n            {showExpand && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/* Autocomplete */}\n            <six-input\n              ref={(el) => (this.autocompleteInput = el)}\n              class={{\n                select__input: true,\n                'select__hidden-select': !this.autocomplete,\n              }}\n              aria-hidden=\"true\"\n              required={this.required}\n              onFocus={this.handleFocus}\n              clearable={this.clearable}\n              placeholder={this.placeholder}\n              pill={this.pill}\n              disabled={this.disabled}\n              size={this.size}\n              tabIndex={-1}\n            />\n          </div>\n\n          {/* Selection container */}\n          <div\n            class={{\n              'selection-container': true,\n              'selection-container--border':\n                this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,\n            }}\n          >\n            {this.selectionContainerItems}\n          </div>\n\n          {/* Menu */}\n          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--hidden': !hasMenuItems,\n            }}\n            onSix-menu-item-selected={this.handleMenuSelect}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow={true}\n            disable-keyboard-handling={true}\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n\n          {/* Select all */}\n          {this.multiple && this.selectAllButton && (\n            <div class=\"select-all\" slot=\"dropdown-footer\">\n              <six-button type=\"link\" onClick={() => this.selectAll()}>\n                {this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText}\n              </six-button>\n            </div>\n          )}\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n\n  private hasSelection() {\n    return this.multiple ? this.value.length > 0 : this.value !== '';\n  }\n\n  private hasDeselectedOptions() {\n    return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);\n  }\n}\n\nfunction getCheckedItems(value: string[], items: HTMLSixMenuItemElement[]): HTMLSixMenuItemElement[] {\n  return items.filter((item) => value.includes(item.value));\n}\n\nfunction getWidth(element: Element) {\n  return element.getBoundingClientRect().width;\n}\n\nfunction computeFitCount(options: Element[], availableWidth: number): { fitCount: number; overflowCount: number } {\n  let accumulatedWidth = 0;\n  let fitCount = 0;\n\n  for (let i = 0; i < options.length; i++) {\n    const displayOption = options[i];\n    const width = getWidth(displayOption);\n    if (i === 0 && width > availableWidth) {\n      fitCount = 1;\n      break;\n    }\n    accumulatedWidth += width;\n    if (accumulatedWidth > availableWidth) {\n      break;\n    } else {\n      fitCount += 1;\n    }\n  }\n  const overflowCount = options.length - fitCount;\n  return { fitCount, overflowCount };\n}\n\nfunction showFittingValues(displayValueOptions: Element[], fitCount: number) {\n  if (displayValueOptions.length > 0) {\n    // show items that fit\n    displayValueOptions.slice(0, fitCount).forEach((displayValue, index, list) => {\n      showDisplayValue(displayValue);\n      const isLast = index === list.length - 1;\n      if (isLast) {\n        hideSeparator(displayValue);\n      } else {\n        showSeparator(displayValue);\n      }\n    });\n\n    // hide the rest\n    displayValueOptions.slice(fitCount).forEach((displayValue) => {\n      hideDisplayValue(displayValue);\n      showSeparator(displayValue);\n    });\n  }\n}\n\nfunction hideSeparator(displayValueOption: Element) {\n  displayValueOption.querySelector('.separator')?.classList.add('separator--hidden');\n}\n\nfunction showSeparator(displayValueOption: Element) {\n  displayValueOption.querySelector('.separator')?.classList.remove('separator--hidden');\n}\n\nfunction showDisplayValue(displayValueOption: Element) {\n  displayValueOption.classList.remove('display-value--hidden');\n}\n\nfunction hideDisplayValue(displayValueOption: Element) {\n  displayValueOption.classList.add('display-value--hidden');\n}\n\nfunction setOverflowCount(overflowCount: Element, count: number) {\n  overflowCount.textContent = `+${count}`;\n}\n\nfunction showOverflowCount(overflowCount: Element) {\n  overflowCount.classList.remove('overflow-count-hidden');\n}\n\nfunction hideOverflowCount(overflowCount: Element) {\n  overflowCount.classList.add('overflow-count-hidden');\n}\n\nfunction selectAllDefaultText(hasDeselectedOptions: boolean) {\n  const lang = getLanguage();\n  switch (lang) {\n    case 'de':\n      return hasDeselectedOptions ? 'Alle auswählen' : 'Alle abwählen';\n    case 'fr':\n      return hasDeselectedOptions ? 'Tout sélectionner' : 'Tout désélectionner';\n    case 'it':\n      return hasDeselectedOptions ? 'Seleziona tutto' : 'Deseleziona tutto';\n    case 'en':\n      return hasDeselectedOptions ? 'Select all' : 'Deselect all';\n    case 'es':\n      return hasDeselectedOptions ? 'Seleccionar todo' : 'Deseleccionar todo';\n  }\n}\n"],"mappings":"2PAAA,MAAMA,EAAe,yqPACrB,MAAAC,EAAeD,ECaf,IAAIE,EAAK,E,MA6BIC,EAAS,M,0JAOZC,KAAAC,QAAU,YAAYH,IACtBE,KAAAE,QAAU,gBAAgBJ,IAC1BE,KAAAG,WAAa,oBAAoBL,IACjCE,KAAAI,YAAc,qBAAqBN,IACnCE,KAAAK,eAAiB,IAAIC,EACrBN,KAAAO,iBAAmB,EACnBP,KAAAQ,eAAiB,IAAIC,gBAAe,IAAMT,KAAKU,0BAuP/CV,KAAAW,WAAa,KACnBX,KAAKY,SAAW,MAChBZ,KAAKa,QAAQC,MAAM,EAGbd,KAAAe,YAAc,KACpBf,KAAKY,SAAW,KAChBZ,KAAKgB,SAASF,MAAM,EAGdd,KAAAiB,iBAAmBC,MAAOC,I,MAChCA,EAAMC,wBACApB,KAAKqB,qBACLC,EAAAtB,KAAKuB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,QACrBxB,KAAKyB,UAAUX,KAAK,CAAEY,MAAO1B,KAAK0B,MAAOC,WAAY,MAAO,EAStD3B,KAAA4B,cAAiBT,I,YACvB,GAAInB,KAAK6B,eAAiB7B,KAAK8B,aAAc,CAC3C,M,CAGF,GAAI,CAAC,UAAW,UAAUC,SAASZ,EAAMa,KAAM,CAC7C,M,CAGF,MAAMC,EAAQjC,KAAKkC,kBAGnB,GAAIlC,KAAKmC,QAAUnC,KAAKoC,UAAYjB,EAAMkB,OAAS,QAAUlB,EAAMmB,QAAS,CAC1EnB,EAAMoB,iBACNvC,KAAKwC,YACL,M,CAIF,GAAIrB,EAAMa,MAAQ,MAAO,CACvB,GAAIhC,KAAKmC,OAAQ,EACfb,EAAAtB,KAAKuB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,M,CAEjB,M,CAGF,GAAIL,EAAMa,MAAQ,MAAQhC,KAAKoC,SAAU,CACvC,M,CAIF,GAAIpC,KAAKO,iBAAmB,GAAK,CAAC,QAAS,KAAKwB,SAASZ,EAAMa,KAAM,CACnE,MAAMS,EAAaR,EAAMS,GAAG1C,KAAKO,iBACjCY,EAAMoB,iBACNE,IAAU,MAAVA,SAAU,SAAVA,EAAYE,QACZ,M,CAIF,GAAI,CAAC,YAAa,UAAW,OAAQ,OAAOZ,SAASZ,EAAMa,KAAM,CAE/D,IAAKhC,KAAKmC,OAAQ,EAChBS,EAAA5C,KAAKuB,YAAQ,MAAAqB,SAAA,SAAAA,EAAEC,M,CAGjB,GAAIZ,EAAMa,OAAS,EAAG,CACpB3B,EAAMoB,iBAEN,GAAIpB,EAAMa,MAAQ,YAAa,CAC7BhC,KAAKO,iB,MACA,GAAIY,EAAMa,MAAQ,UAAW,CAClChC,KAAKO,iB,MACA,GAAIY,EAAMa,MAAQ,OAAQ,CAC/BhC,KAAKO,gBAAkB,C,MAClB,GAAIY,EAAMa,MAAQ,MAAO,CAC9BhC,KAAKO,gBAAkB0B,EAAMa,OAAS,C,CAGxC,GAAI9C,KAAKO,gBAAkB,EAAGP,KAAKO,gBAAkB,EACrD,GAAIP,KAAKO,gBAAkB0B,EAAMa,OAAS,EAAG9C,KAAKO,gBAAkB0B,EAAMa,OAAS,GAEnFC,EAAAd,EAAMS,GAAG1C,KAAKO,oBAAgB,MAAAwC,SAAA,SAAAA,EAAEC,U,EAKpC,IAAKhD,KAAKmC,OAAQ,CAChBhB,EAAMC,kBACND,EAAMoB,kBACNU,EAAAjD,KAAKuB,YAAQ,MAAA0B,SAAA,SAAAA,EAAEJ,M,GAaX7C,KAAAkD,iBAAmB,K,OACzB5B,EAAAtB,KAAKmD,OAAG,MAAA7B,SAAA,SAAAA,EAAE8B,OAAO,EAGXpD,KAAAqD,iBAAoBlC,IAC1B,MAAMmC,EAAcnC,EAAMoC,OAAOC,KACjC,GAAIxD,KAAKoC,SAAU,CACjBkB,EAAYG,SAAWH,EAAYG,O,KAC9B,CACLzD,KAAK0D,WAAWC,SAASC,GAAOA,EAAEH,QAAU,QAC5CH,EAAYG,QAAU,I,CAExBzD,KAAK6D,qBACL7D,KAAKyB,UAAUX,KAAK,CAAEY,MAAO1B,KAAK0B,MAAOC,WAAY,MAAO,EAGtD3B,KAAA8D,eAAkB3C,IACxB,GAAInB,KAAK+D,SAAU,CACjB5C,EAAMoB,iBACN,M,CAEFvC,KAAKO,iBAAmB,EAGxB,MAAMyD,EAAYhE,KAAK0D,WACvBM,EAAUL,SAASH,GAAUA,EAAKS,MAAMC,QAAU,UAGlD,MAAMC,EAAeC,EAAgBpE,KAAKqE,kBAAmBL,GAC7D,IAAKhE,KAAK6B,eAAiB7B,KAAKoC,SAAU,CACxC+B,EAAaR,SAASC,GAAOA,EAAEK,MAAMC,QAAU,SAC/ClE,KAAKsE,wBAA0BH,EAAaI,KAAKf,GAE7CgB,EAAA,iBACExC,IAAKwB,EAAK9B,MACV+B,QAAS,KACT/B,MAAO8B,EAAK9B,MACZ+C,UAAWzE,KAAKoC,SAAW,WAAa,QACxCsC,QAAUvD,IACRA,EAAMC,kBACN,IAAKpB,KAAK+D,SAAU,CAClB,MAAMY,EAAWxD,EAAMyD,OACvB,MAAMC,EAAYF,EAASlB,QAC3BkB,EAASlB,SAAWoB,EACpBrB,EAAKC,SAAWoB,EAChB7E,KAAK6D,qBACL7D,KAAKyB,UAAUX,KAAK,CAAEY,MAAO1B,KAAK0B,MAAOC,WAAY,M,IAIxD3B,KAAK8E,aAAatB,K,CAM3BxD,KAAKmC,OAAS,IAAI,EAGZnC,KAAA+E,eAAiB,KACvB/E,KAAKmC,OAAS,KAAK,EAGbnC,KAAAgF,iBAAmB,KACzBhF,KAAKiF,gBAAkBC,EAAQlF,KAAKmF,KAAM,aAC1CnF,KAAKoF,aAAeF,EAAQlF,KAAKmF,KAAM,SACvCnF,KAAKqF,iBAAmBH,EAAQlF,KAAKmF,KAAM,cAC3CnF,KAAKsF,oBAAoB,E,cA/ZP,M,qBACO,M,kBACH,M,sBACI,M,YACV,M,qBACmB,G,6BAGwB,G,cAG1C,M,qBAGO,M,iDAaD,E,cAGN,M,UAGJ,G,iBAGO,G,yEASuB,S,WAM7B,M,WAGoC,G,UAGrC,M,cAGI,G,cAGA,M,eAGC,M,WAGJ,G,eAGuB,G,2CAMJ,M,UAGpB,M,YAGE,M,iBAOK,M,kBAKC,M,mBAGCC,E,aAGoB,K,mBAIpB,K,CAGxB,oBAAAC,G,MACE,GAAIxF,KAAK+D,UAAY/D,KAAKmC,OAAQ,EAChCb,EAAAtB,KAAKuB,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,M,EAOnB,iBAAAiE,GACEzF,KAAKgF,kB,CAIP,oBAAAU,GAEE,MAAMhE,EAAQ1B,KAAKqE,kBACnBrE,KAAK0B,MAAQ1B,KAAKoC,SAAWV,EAAQA,EAAM,IAAM,GACjD1B,KAAKsF,oB,CAIP,uBAAMK,GACJ,GAAI3F,KAAKoC,WAAawD,MAAMC,QAAQ7F,KAAK0B,OAAQ,CAC/C1B,KAAK0B,MAAQ,E,CAGf,IAAK1B,KAAKoC,iBAAmBpC,KAAK0B,QAAU,SAAU,CACpD1B,KAAK0B,MAAQ,E,OAET1B,KAAKsF,oB,CAYb,iBAAAQ,GACE,GAAI9F,KAAK6B,eAAiB7B,KAAK+F,UAAY,KAAM,CAC/CC,QAAQC,MAAM,uD,CAEhBjG,KAAKkG,M,CAGP,iBAAAC,GACEnG,KAAKgF,mBACL,GAAIhF,KAAKoC,UAAYpC,KAAK0B,OAAS,KAAM,CACvC1B,KAAK0B,MAAQ1B,KAAKqE,iB,EAItB,gBAAA+B,GACEpG,KAAKkG,OAGLG,uBAAsB,IAAMrG,KAAKsF,uBAEjC,GAAItF,KAAK8B,cAAgB9B,KAAKsG,mBAAqB,KAAM,CACvD,MAAMA,EAAoBtG,KAAKsG,kBAC/BtG,KAAKK,eAAekG,IAClBD,EACA,kBACAE,GAAUrF,IACRnB,KAAK0B,MAAQ4E,EAAkB5E,MAC/B1B,KAAKyB,UAAUX,KAAK,CAAEY,MAAO1B,KAAK0B,MAAOC,WAAY,QACrDR,EAAMC,iBAAiB,GACtBpB,KAAKyG,gBAEVH,EAAkB5E,MAAQkE,MAAMC,QAAQ7F,KAAK0B,OAAS1B,KAAK0B,MAAMgF,KAAK,KAAO1G,KAAK0B,K,EAItF,oBAAAiF,G,MACE3G,KAAKQ,eAAeoG,cACpBtF,EAAAtB,KAAKmF,KAAK0B,cAAU,MAAAvF,SAAA,SAAAA,EAAEwF,oBAAoB,aAAc9G,KAAKgF,kBAC7DhF,KAAKK,eAAe0G,W,CAKtB,cAAM/D,CAAS+C,G,MACb/F,KAAKY,SAAW,MAChBU,EAAAtB,KAAKmD,OAAG,MAAA7B,SAAA,SAAAA,EAAE8B,MAAM2C,E,CAGV,IAAAG,G,OACN5E,EAAAtB,KAAKmF,KAAK0B,cAAU,MAAAvF,SAAA,SAAAA,EAAE0F,iBAAiB,aAAchH,KAAKgF,kBAC1DhF,KAAKK,eAAe4G,QAAQ,oBAAqB,SAAUjH,KAAKmF,MAChEnF,KAAKK,eAAe4G,QAAQ,kBAAmB,OAAQjH,KAAKmF,MAC5DnF,KAAKK,eAAe4G,QAAQ,mBAAoB,QAASjH,KAAKmF,MAC9D,GAAInF,KAAKkH,uBAAwB,CAC/BlH,KAAKQ,eAAe2G,QAAQnH,KAAKkH,uB,EAI7B,YAAApC,CAAatB,G,QACnB,MAAM4D,GAAO9F,EAAAkC,EAAKqD,cAAU,MAAAvF,SAAA,SAAAA,EAAE+F,cAAc,oBAC5C,GAAID,GAAQ,KAAM,CAChB,OAAOE,EAAeF,E,KACjB,CAEL,OAAOxE,EAAAY,EAAK+D,eAAW,MAAA3E,SAAA,EAAAA,EAAI,E,EAIvB,QAAAc,GACN,GAAI1D,KAAK+F,UAAY,MAAQ/F,KAAKwH,MAAQ,MAAQxH,KAAKwH,KAAKX,YAAc,KAAM,CAC9E,MAAO,IAAI7G,KAAKwH,KAAKX,WAAWY,iBAAiB,iB,CAGnD,MAAO,IAAIzH,KAAKmF,KAAKsC,iBAAiB,iB,CAGhC,eAAAvF,GACN,MAAMoC,EAA0BtE,KAAK0H,6BACrC,MAAM1D,EAAYhE,KAAK0D,WACvB,MAAO,IAAIY,KAA4BN,GAAW2D,QAAQ/D,GAAMA,EAAEK,MAAMC,UAAY,Q,CAG9E,0BAAAwD,G,MACN,MAAO,MAAKpG,EAAAtB,KAAKmF,KAAK0B,cAAU,MAAAvF,SAAA,SAAAA,EAAEmG,iBAAiB,mBAAoB,G,CAGjE,eAAApD,GACN,MAAMuD,EAAShC,MAAMC,QAAQ7F,KAAK0B,OAAS1B,KAAK0B,MAAQ1B,KAAK0B,QAAU,GAAK,GAAK,CAAC1B,KAAK0B,OAEvF,OAAOkG,EAAOrD,IAAIsD,O,CAoBZ,iBAAMxG,GACZrB,KAAK0B,MAAQ1B,KAAKoC,SAAW,GAAK,GAClCpC,KAAKsE,wBAA0B,SACzBtE,KAAKsF,oB,CA4EL,SAAA9C,GACN,MAAMsF,EAAe9H,KAAKkC,kBAC1B,MAAM6F,EAAuB/H,KAAK+H,uBAClCD,EAAaH,QAAQK,IAAYA,EAAOjE,WAAUJ,SAASqE,GAAYA,EAAOvE,QAAUsE,IACxF,MAAM5D,EAAe2D,EAAaH,QAAQK,GAAWA,EAAOvE,UAASc,KAAKyD,GAAWA,EAAOtG,QAC5F1B,KAAK0B,MAAQqG,EAAuB5D,EAAe,GACnDnE,KAAKyB,UAAUX,KAAK,CAAEY,MAAO1B,KAAK0B,MAAOC,WAAY,M,CA4E/C,wBAAM2D,GACZ,MAAMhB,EAA0BtE,KAAK0H,6BACrC,MAAM1D,EAAYhE,KAAK0D,WACvB,MAAMhC,EAAQ1B,KAAKqE,kBAEnBC,EAAwBX,SAASH,IAC/BA,EAAKiB,UAAYzE,KAAKoC,SAAW,WAAa,QAC9CoB,EAAKC,QAAU/B,EAAMK,SAASyB,EAAK9B,MAAM,IAE3CsC,EAAUL,SAASH,IACjBA,EAAKiB,UAAYzE,KAAKoC,SAAW,WAAa,QAC9CoB,EAAKC,QAAU/B,EAAMK,SAASyB,EAAK9B,MAAM,IAG3C,MAAMyC,EAAeC,EAAgBpE,KAAKqE,kBAAmBL,GAC7DhE,KAAKiI,gBAAkB9D,EAAaI,KAAKX,GAAM5D,KAAK8E,aAAalB,KAEjE,GAAI5D,KAAK8B,cAAgB9B,KAAKsG,mBAAqB,KAAM,CACvDtG,KAAKsG,kBAAkB5E,MAAQkE,MAAMC,QAAQ7F,KAAK0B,OAAS1B,KAAK0B,MAAMgF,KAAK,KAAO1G,KAAK0B,K,CAGzF2E,uBAAsB,KACpBrG,KAAKU,uBAAuB,G,CAIxB,kBAAAmD,GACN,MAAM5B,EAAQjC,KAAK0D,WACnB,MAAMwE,EAAgBjG,EAAM0F,QAAQnE,GAASA,EAAKC,UAASc,KAAKf,GAASA,EAAK9B,QAC9E,GAAI1B,KAAKoC,SAAU,CACjBpC,KAAK0B,MAAQwG,C,KACR,CACLlI,KAAK0B,MAAQwG,EAAcpF,OAAS,EAAIoF,EAAc,GAAK,E,EAIvD,qBAAAxH,G,QACN,MAAMyH,EAAsB,KAAKvF,GAAAtB,EAAAtB,KAAKkH,0BAAsB,MAAA5F,SAAA,SAAAA,EAAEmG,iBAAiB,qBAAiB,MAAA7E,SAAA,EAAAA,EAAI,IACpG,GAAI5C,KAAKkH,wBAA0B,MAAQiB,EAAoBrF,SAAW,GAAK9C,KAAKoI,eAAiB,KAAM,CACzG,M,CAIFD,EAAoBxE,SAAS0E,IAC3BC,EAAiBD,GACjBE,EAAcF,EAAE,IAIlB,MAAMG,EAAYL,EAAoBA,EAAoBrF,OAAS,GAAGuE,cAAc,cACpF,GAAImB,GAAa,KAAM,OACvB,IAAIC,EAAiBC,EAAS1I,KAAKkH,wBAA0BwB,EAASF,GAGtE,IAAIG,SAAEA,EAAQP,cAAEA,GAAkBQ,EAAgBT,EAAqBM,GAEvE,GAAIL,IAAkB,EAAG,CAEvBS,EAAkB7I,KAAKoI,eACvBU,EAAkBX,EAAqBQ,E,KAClC,CAKLI,EAAiB/I,KAAKoI,cAAeA,EAAgB,GACrDY,EAAkBhJ,KAAKoI,eAGvBK,EAAiBA,EAAiBC,EAAS1I,KAAKoI,iBAG7CO,WAAUP,iBAAkBQ,EAAgBT,EAAqBM,IAGpEM,EAAiB/I,KAAKoI,cAAeA,GACrCU,EAAkBX,EAAqBQ,E,EAI3C,MAAAM,G,MACE,MAAMC,EAAelJ,KAAKkJ,eAC1B,MAAMjH,EAAQjC,KAAK0D,WACnB,MAAMyF,EAAelH,EAAMa,OAAS,EACpC,MAAMiF,EAAuB/H,KAAK+H,uBAClC,IAAIqB,EAAY,MAChB,IAAIC,EAAaF,EACjB,GAAInJ,KAAKsJ,WAAaJ,EAAc,CAClCE,EAAY,KACZC,EAAa,K,CAGf,OACE7E,EAAC+E,EAAW,CAAAvH,IAAA,2CACV/B,QAASD,KAAKC,QACduJ,MAAOxJ,KAAKwJ,MACZtJ,QAASF,KAAKE,QACdkF,aAAcpF,KAAKoF,aACnBjF,WAAYH,KAAKG,WACjBsJ,SAAUzJ,KAAKyJ,SACfxE,gBAAiBjF,KAAKiF,gBACtB7E,YAAaJ,KAAKI,YAClBsJ,UAAW1J,KAAK0J,UAChBC,eAAgB3J,KAAK2J,eACrBtE,iBAAkBrF,KAAKqF,iBACvBuE,KAAM5J,KAAK4J,KACXC,aAAc7J,KAAKkD,iBACnBa,SAAU/D,KAAK+D,SACf+F,SAAU9J,KAAK8J,SACfC,aAAc/J,KAAKgK,SAEnBxF,EAAA,gBAAAxC,IAAA,2CACEiI,KAAK,OACLC,IAAMC,GAAQnK,KAAKuB,SAAW4I,EAC9BC,MAAOpK,KAAKoK,MACZC,kBAAmB,KACnBC,eAAgBtK,KAAKoC,SACrBmI,kBAAmBvK,KAAKmF,KACxBqF,2BAA4BxK,KAAK8B,aACjC2I,MAAO,CACLC,OAAQ,KACR,eAAgB1K,KAAKmC,OACrB,kBAAiBb,EAAAtB,KAAK0B,SAAK,MAAAJ,SAAA,SAAAA,EAAEwB,UAAW,EACxC,kBAAmB9C,KAAKY,SACxB,oBAAqBZ,KAAKsJ,UAC1B,mBAAoBtJ,KAAK+D,SACzB,mBAAoB/D,KAAKoC,SACzB,mBAAoBpC,KAAKoC,UAAY8G,EACrC,8BAA+BlJ,KAAKiI,gBAAgBnF,SAAW,EAC/D,gBAAiB9C,KAAK4J,OAAS,QAC/B,iBAAkB5J,KAAK4J,OAAS,SAChC,gBAAiB5J,KAAK4J,OAAS,QAC/B,eAAgB5J,KAAK2K,KACrB,kBAAmB3K,KAAKgK,SAE1BY,UAAW5K,KAAK4B,cAAa,sBACR5B,KAAK8D,eAAc,sBACnB9D,KAAK+E,eAC1B8F,kBAAmB7K,KAAK6K,kBACxBC,eAAgB9K,KAAK8K,eACrBnD,OAAQ3H,KAAK2H,OACboD,YAAa/K,KAAK+K,YAClBlJ,cAAe7B,KAAK6B,eAGpB2C,EAAA,OAAAxC,IAAA,2CACEoF,KAAK,UACL8C,IAAMC,GAAQnK,KAAKmD,IAAMgH,EACzBrK,GAAIE,KAAKC,QACTwK,MAAO,CACLO,YAAa,KACb,oBAAqBhL,KAAKiL,KAC1B,4BAA6BjL,KAAK8B,cAEpCoJ,KAAK,WAAU,kBACElL,KAAKE,QAAO,mBACXF,KAAKG,WAAU,gBACnB,OAAM,gBACLH,KAAKmC,OAAS,OAAS,QACtCgJ,SAAUnL,KAAK+D,UAAY,EAAI,EAC/BqH,OAAQpL,KAAKW,WACb0K,QAASrL,KAAKe,aAGdyD,EAAA,OAAAxC,IAAA,2CAAKyI,MAAM,kBAAkBP,IAAMC,GAAQnK,KAAKkH,uBAAyBiD,GACtEnK,KAAKiI,gBAAgBnF,OAAS,EAC7B0B,EAAA,QAAMiG,MAAM,+BACVjG,EAAA,QAAMiG,MAAM,0BACTzK,KAAKiI,gBAAgB1D,KAAK7C,GACzB8C,EAAA,QAAMxC,IAAKN,EAAO+I,MAAM,iBACrB/I,EACD8C,EAAA,QAAMiG,MAAO,CAAEjC,UAAW,OAAM,UAItChE,EAAA,QAAM0F,IAAMC,GAAQnK,KAAKoI,cAAgB+B,EAAKM,MAAM,kBAAgB,QAKtEjG,EAAA,QAAMiG,MAAM,eAAezK,KAAKsL,cAKnClC,GACC5E,EAAA,mBACE+G,YAAY,oBACZd,MAAM,gBACNe,KAAK,QACL5B,KAAK,QACLlF,QAAS1E,KAAKiB,iBACdwK,SAAS,OAKZpC,GACC7E,EAAA,QAAMyF,KAAK,OAAOQ,MAAM,gBACtBjG,EAAA,YAAUoF,KAAK,UAAQ,gBAK3BpF,EAAA,aAAAxC,IAAA,2CACEkI,IAAMC,GAAQnK,KAAKsG,kBAAoB6D,EACvCM,MAAO,CACLiB,cAAe,KACf,yBAA0B1L,KAAK8B,cAChC,cACW,OACZgI,SAAU9J,KAAK8J,SACfuB,QAASrL,KAAKe,YACduI,UAAWtJ,KAAKsJ,UAChBgC,YAAatL,KAAKsL,YAClBX,KAAM3K,KAAK2K,KACX5G,SAAU/D,KAAK+D,SACf6F,KAAM5J,KAAK4J,KACXuB,UAAW,KAKf3G,EAAA,OAAAxC,IAAA,2CACEyI,MAAO,CACL,sBAAuB,KACvB,8BACEzK,KAAKsE,wBAAwBxB,OAAS,GAAKb,EAAMa,SAAW9C,KAAKsE,wBAAwBxB,SAG5F9C,KAAKsE,yBAIRE,EAAA,YAAAxC,IAAA,2CACEkI,IAAMC,GAAQnK,KAAKwH,KAAO2C,EAC1BF,KAAK,OACLQ,MAAO,CACLkB,aAAc,KACd,wBAAyBxC,GAC1B,2BACyBnJ,KAAKqD,iBAC/BpB,MAAOjC,KAAK+F,QACZlE,cAAe7B,KAAK6B,cAAa,oBACd,KAAI,4BACI,MAE3B2C,EAAA,QAAAxC,IAAA,2CAAM4J,aAAc5L,KAAKgF,oBAI1BhF,KAAKoC,UAAYpC,KAAK6L,iBACrBrH,EAAA,OAAKiG,MAAM,aAAarD,KAAK,mBAC3B5C,EAAA,cAAYsH,KAAK,OAAOpH,QAAS,IAAM1E,KAAKwC,aACzCxC,KAAK+L,eAAiB,KAAOC,EAAqBjE,GAAwB/H,KAAK+L,iB,CAStF,YAAA7C,GACN,OAAOlJ,KAAKoC,SAAWpC,KAAK0B,MAAMoB,OAAS,EAAI9C,KAAK0B,QAAU,E,CAGxD,oBAAAqG,GACN,OAAO/H,KAAKkC,kBAAkB+J,MAAMC,IAASA,EAAInI,WAAamI,EAAIzI,S,sPAItE,SAASW,EAAgB1C,EAAiBO,GACxC,OAAOA,EAAM0F,QAAQnE,GAAS9B,EAAMK,SAASyB,EAAK9B,QACpD,CAEA,SAASgH,EAASyD,GAChB,OAAOA,EAAQC,wBAAwBC,KACzC,CAEA,SAASzD,EAAgB7C,EAAoB0C,GAC3C,IAAI6D,EAAmB,EACvB,IAAI3D,EAAW,EAEf,IAAK,IAAI/E,EAAI,EAAGA,EAAImC,EAAQjD,OAAQc,IAAK,CACvC,MAAM2I,EAAgBxG,EAAQnC,GAC9B,MAAMyI,EAAQ3D,EAAS6D,GACvB,GAAI3I,IAAM,GAAKyI,EAAQ5D,EAAgB,CACrCE,EAAW,EACX,K,CAEF2D,GAAoBD,EACpB,GAAIC,EAAmB7D,EAAgB,CACrC,K,KACK,CACLE,GAAY,C,EAGhB,MAAMP,EAAgBrC,EAAQjD,OAAS6F,EACvC,MAAO,CAAEA,WAAUP,gBACrB,CAEA,SAASU,EAAkBX,EAAgCQ,GACzD,GAAIR,EAAoBrF,OAAS,EAAG,CAElCqF,EAAoBqE,MAAM,EAAG7D,GAAUhF,SAAQ,CAAC8I,EAAcC,EAAOC,KACnErE,EAAiBmE,GACjB,MAAMG,EAASF,IAAUC,EAAK7J,OAAS,EACvC,GAAI8J,EAAQ,CACVC,EAAcJ,E,KACT,CACLlE,EAAckE,E,KAKlBtE,EAAoBqE,MAAM7D,GAAUhF,SAAS8I,IAC3CK,EAAiBL,GACjBlE,EAAckE,EAAa,G,CAGjC,CAEA,SAASI,EAAcE,G,OACrBzL,EAAAyL,EAAmB1F,cAAc,iBAAa,MAAA/F,SAAA,SAAAA,EAAE0L,UAAUzG,IAAI,oBAChE,CAEA,SAASgC,EAAcwE,G,OACrBzL,EAAAyL,EAAmB1F,cAAc,iBAAa,MAAA/F,SAAA,SAAAA,EAAE0L,UAAUC,OAAO,oBACnE,CAEA,SAAS3E,EAAiByE,GACxBA,EAAmBC,UAAUC,OAAO,wBACtC,CAEA,SAASH,EAAiBC,GACxBA,EAAmBC,UAAUzG,IAAI,wBACnC,CAEA,SAASwC,EAAiBX,EAAwB8E,GAChD9E,EAAcb,YAAc,IAAI2F,GAClC,CAEA,SAASlE,EAAkBZ,GACzBA,EAAc4E,UAAUC,OAAO,wBACjC,CAEA,SAASpE,EAAkBT,GACzBA,EAAc4E,UAAUzG,IAAI,wBAC9B,CAEA,SAASyF,EAAqBjE,GAC5B,MAAMoF,EAAOC,IACb,OAAQD,GACN,IAAK,KACH,OAAOpF,EAAuB,iBAAmB,gBACnD,IAAK,KACH,OAAOA,EAAuB,oBAAsB,sBACtD,IAAK,KACH,OAAOA,EAAuB,kBAAoB,oBACpD,IAAK,KACH,OAAOA,EAAuB,aAAe,eAC/C,IAAK,KACH,OAAOA,EAAuB,mBAAqB,qBAEzD,C"}

package/dist/ui-library/p-50dbe99f.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as o,g as r}from"./p-f93d8a4e.js";import{F as e}from"./p-aa99a393.js";import{h as s}from"./p-0cebf1d2.js";import{E as n}from"./p-8bfb4bfc.js";import{s as l}from"./p-842b492e.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.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:block}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}';const u=a;const p={large:"medium",medium:"small",small:"xSmall"};let h=0;const c=class{constructor(o){i(this,o);this.sixChange=t(this,"six-input-change",7);this.sixClear=t(this,"six-input-clear",7);this.sixInput=t(this,"six-input-input",7);this.sixFocus=t(this,"six-input-focus",7);this.sixBlur=t(this,"six-input-blur",7);this.inputId=`input-${++h}`;this.labelId=`input-label-${h}`;this.helpTextId=`input-help-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new n;this.handleChange=i=>{i.stopPropagation();if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixChange.emit()}};this.handleInput=i=>{i.stopPropagation();if(this.nativeInput!=null){this.value=this.nativeInput.value;this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClearClick=i=>{this.value="";this.sixClear.emit();this.sixInput.emit();this.sixChange.emit();if(this.nativeInput!=null){this.nativeInput.focus()}i.stopPropagation()};this.handleKeyDown=i=>{const t=i.metaKey||i.ctrlKey||i.shiftKey||i.altKey;if(i.key==="Enter"&&!t){setTimeout((()=>{if(!i.defaultPrevented&&!i.isComposing){l(this.host)}}))}};this.handlePasswordToggle=()=>{this.isPasswordVisible=!this.isPasswordVisible};this.handleSlotChange=()=>{this.hasHelpTextSlot=s(this.host,"help-text");this.hasLabelSlot=s(this.host,"label");this.hasErrorSlot=s(this.host,"error-text")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.isPasswordVisible=false;this.type="text";this.size="medium";this.name="";this.value="";this.pill=false;this.helpText="";this.placeholder=undefined;this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.pattern=undefined;this.dropdownSearch=false;this.required=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.clearable=false;this.togglePassword=false;this.inputmode=undefined;this.line=false}handleLabelChange(){this.handleSlotChange()}handleValueChange(){this.value=this.getValue();if(this.nativeInput!=null&&this.nativeInput.value!==this.value){this.nativeInput.value=this.value}}connectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-input-input","input",this.host);this.eventListeners.forward("six-input-change","change",this.host);this.eventListeners.forward("six-input-focus","focus",this.host);this.eventListeners.forward("six-input-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){var i;(i=this.host.shadowRoot)===null||i===void 0?void 0:i.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(i){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}async select(){var i;return(i=this.nativeInput)===null||i===void 0?void 0:i.select()}async setSelectionRange(i,t,o="none"){var r;return(r=this.nativeInput)===null||r===void 0?void 0:r.setSelectionRange(i,t,o)}async setRangeText(i,t,o,r="preserve"){if(this.nativeInput==null){return}this.nativeInput.setRangeText(i,t,o,r);if(this.getValue()!==this.nativeInput.value){this.value=this.nativeInput.value;this.sixChange.emit();this.sixInput.emit()}}getValue(){var i;return((i=this.value)!==null&&i!==void 0?i:"").toString()}render(){return o(e,{key:"5710dd4df8e2833ebcea698d46945d07083a4580",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},o("div",{key:"b5812726191ae11b8ccac0ac17403299c49348fe",part:"base",class:{input:true,"input--small":this.size==="small","input--medium":this.size==="medium","input--large":this.size==="large","input--line":this.line,"input--pill":this.pill,"input--disabled":this.disabled,"input--dropdown-search":this.dropdownSearch,"input--focused":this.hasFocus,"input--empty":this.getValue().length===0,"input--invalid":this.invalid}},o("span",{key:"6068c91f240cbe044f3b4c43c9b2b2c8e4150bf5",part:"prefix",class:"input__prefix"},o("slot",{key:"36166b5cdb2696d52985c60b7771ebcc943dd750",name:"prefix"})),o("input",{key:"37e14f53d5fc24e14eb93a6522d537722f8c739b",part:"input",ref:i=>this.nativeInput=i,id:this.inputId,size:1,class:{input__control:true,input__control__prefix:s(this.host,"prefix")},type:this.type==="password"&&this.isPasswordVisible?"text":this.type,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,minLength:this.minlength,maxLength:this.maxlength,min:this.min,max:this.max,step:this.step,value:this.getValue(),autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,pattern:this.pattern,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,"aria-describedby":this.helpTextId,"aria-invalid":this.invalid?"true":"false",onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,"data-testid":"input-control"}),this.clearable&&o("button",{part:"clear-button",class:"input__clear",type:"button",onClick:this.handleClearClick,tabindex:"-1","data-testid":"input-clear-button"},o("slot",{name:"clear-icon"},o("six-icon",{size:p[this.size]},"clear"))),this.togglePassword&&o("button",{part:"password-toggle-button",class:"input__password-toggle",type:"button",onClick:this.handlePasswordToggle,tabindex:"-1"},this.isPasswordVisible?o("slot",{name:"show-password-icon"},o("six-icon",{size:p[this.size]},"visibility_off")):o("slot",{name:"hide-password-icon"},o("six-icon",{size:p[this.size]},"visibility"))),o("span",{key:"f1b2b407390c5f1a00ae30b5853aafc7e2f3738a",part:"suffix",class:"input__suffix"},o("slot",{key:"f7844f40590b6cb4f39e49796272fa8de6754767",name:"suffix"}))))}get host(){return r(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],value:["handleValueChange"]}}};c.style=u;export{c as six_input};
+//# sourceMappingURL=p-50dbe99f.entry.js.map

package/dist/ui-library/p-50dbe99f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixInputCss","SixInputStyle0","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleChange","event","stopPropagation","nativeInput","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleClearClick","sixClear","focus","handleKeyDown","hasModifier","metaKey","ctrlKey","shiftKey","altKey","key","setTimeout","defaultPrevented","isComposing","submitForm","host","handlePasswordToggle","isPasswordVisible","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","hasErrorSlot","handleLabelChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","disconnectedCallback","removeEventListener","removeAll","setFocus","options","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","toString","render","h","FormControl","label","helpText","errorText","errorTextCount","hasErrorTextSlot","size","disabled","required","displayError","invalid","part","class","input","line","pill","dropdownSearch","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","onKeyDown","clearable","onClick","tabindex","togglePassword"],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.input {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &--line {\n    border: none;\n    border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n  }\n\n  &:hover:not(.input--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .input__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &:hover.input--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search {\n    border-color: transparent;\n  }\n\n  &--dropdown-search.input--focused {\n    border-color: var(--six-input-border-color);\n  }\n\n  &.input--focused:not(.input--disabled) {\n    background-color: var(--six-input-background-color-focus);\n\n    border-bottom-color: var(--six-input-border-color-focus);\n    box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-focus);\n      box-shadow: var(--six-input-focus-shadow);\n    }\n\n    .input__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.input--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .input__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n\n  &.input--invalid:not(.input--disabled):not(.input--focused) {\n    border-bottom-color: var(--six-input-border-color-danger);\n\n    &:not(.input--line) {\n      border-color: var(--six-input-border-color-danger);\n    }\n  }\n}\n\n.input__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  min-width: 0;\n  color: var(--six-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--six-color-primary-500);\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-ms-reveal {\n    display: none;\n  }\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  cursor: default;\n\n  ::slotted(six-icon) {\n    color: var(--six-input-icon-color);\n  }\n}\n\n.input {\n  &.input--disabled {\n    ::slotted(six-icon) {\n      cursor: not-allowed;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n  height: var(--six-height-small);\n\n  .input__control {\n    height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-small);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-small);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-small);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-small);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-small);\n  }\n}\n\n.input--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n  height: var(--six-height-medium);\n\n  .input__control {\n    height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-medium);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-medium);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-medium);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-medium);\n  }\n}\n\n.input--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n  height: var(--six-height-large);\n\n  .input__control {\n    height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n    margin: 0 var(--six-input-spacing-large);\n  }\n\n  .input__control__prefix {\n    margin: 0 var(--six-input-prefix-spacing-large);\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    margin-right: var(--six-input-spacing-large);\n  }\n\n  .input__prefix ::slotted(*) {\n    margin-left: var(--six-input-prefix-spacing-large);\n  }\n\n  .input__suffix ::slotted(*) {\n    margin-right: var(--six-input-prefix-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n  &.input--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.input--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.input--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  border: none;\n  background: none;\n  padding: 0;\n  transition: var(--six-transition-fast) color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.input--empty .input__clear {\n  visibility: hidden;\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';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n  large: 'medium',\n  medium: 'small',\n  small: 'xSmall',\n};\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 input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n */\n\n@Component({\n  tag: 'six-input',\n  styleUrl: 'six-input.scss',\n  shadow: true,\n})\nexport class SixInput {\n  private inputId = `input-${++id}`;\n  private labelId = `input-label-${id}`;\n  private helpTextId = `input-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixInputElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n  @State() isPasswordVisible = false;\n\n  /** The input's type. */\n  @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Set to true to draw a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to make the input readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** The input's minimum value. */\n  @Prop({ reflect: true }) min?: number;\n\n  /** The input's maximum value. */\n  @Prop({ reflect: true }) max?: number;\n\n  /** The input's step attribute. */\n  @Prop({ reflect: true }) step?: number;\n\n  /** A pattern to validate input against. */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /**\n   * Internal: Styles the input for the dropdown filter search.\n   */\n  @Prop() dropdownSearch = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The input's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The input's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The input's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** Enables spell checking on the input. */\n  @Prop() spellcheck = 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 add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set to true to add a password toggle button for password inputs. */\n  @Prop() togglePassword = false;\n\n  /** The input's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n      this.nativeInput.value = this.value;\n    }\n  }\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value.  */\n  @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-input-input', 'input', this.host);\n    this.eventListeners.forward('six-input-change', 'change', this.host);\n    this.eventListeners.forward('six-input-focus', 'focus', this.host);\n    this.eventListeners.forward('six-input-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeInput?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeInput.value) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    event.stopPropagation();\n    if (this.nativeInput != null) {\n      this.value = this.nativeInput.value;\n      this.sixInput.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 handleClearClick = (event: MouseEvent) => {\n    this.value = '';\n    this.sixClear.emit();\n    this.sixInput.emit();\n    this.sixChange.emit();\n    if (this.nativeInput != null) {\n      this.nativeInput.focus();\n    }\n    event.stopPropagation();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          submitForm(this.host);\n        }\n      });\n    }\n  };\n\n  private handlePasswordToggle = () => {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  };\n\n  private handleSlotChange = () => {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\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        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            input: true,\n\n            // Sizes\n            'input--small': this.size === 'small',\n            'input--medium': this.size === 'medium',\n            'input--large': this.size === 'large',\n\n            // States\n            'input--line': this.line,\n            'input--pill': this.pill,\n            'input--disabled': this.disabled,\n            'input--dropdown-search': this.dropdownSearch,\n            'input--focused': this.hasFocus,\n            'input--empty': this.getValue().length === 0,\n            'input--invalid': this.invalid,\n          }}\n        >\n          <span part=\"prefix\" class=\"input__prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            part=\"input\"\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            size={1} // needed for firefox to overrule the default of 20\n            class={{\n              input__control: true,\n              input__control__prefix: hasSlot(this.host, 'prefix'),\n            }}\n            type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            pattern={this.pattern}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            aria-describedby={this.helpTextId}\n            aria-invalid={this.invalid ? 'true' : 'false'}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            onKeyDown={this.handleKeyDown}\n            data-testid=\"input-control\"\n          />\n\n          {this.clearable && (\n            <button\n              part=\"clear-button\"\n              class=\"input__clear\"\n              type=\"button\"\n              onClick={this.handleClearClick}\n              tabindex=\"-1\"\n              data-testid=\"input-clear-button\"\n            >\n              <slot name=\"clear-icon\">\n                <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n              </slot>\n            </button>\n          )}\n\n          {this.togglePassword && (\n            <button\n              part=\"password-toggle-button\"\n              class=\"input__password-toggle\"\n              type=\"button\"\n              onClick={this.handlePasswordToggle}\n              tabindex=\"-1\"\n            >\n              {this.isPasswordVisible ? (\n                <slot name=\"show-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n                </slot>\n              ) : (\n                <slot name=\"hide-password-icon\">\n                  <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n                </slot>\n              )}\n            </button>\n          )}\n\n          <span part=\"suffix\" class=\"input__suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-52c04973.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i}from"./p-f93d8a4e.js";const t=".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";const n=t;const r={403:{en:"Access Denied",de:"Kein Zugriff"},404:{en:"Not Found",de:"Seite nicht gefunden"},500:{en:"Ooops!",de:"Ups!"}};const s={403:{en:["You don’t have permission to access this page. ","Please contact an administrator or click the SIX logo on top left."],de:["Sie haben keine Zugriffsberechtigung auf diese Seite.","Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links."]},404:{en:["We have not found the page you requested.","Please click the SIX logo on top left."],de:["Wir haben die angeforderte Seite nicht gefunden.","Bitte klicken Sie auf das SIX-Logo oben links."]},500:{en:["Sorry, we messed up! We try to fix this.","Please click the SIX logo on top left."],de:["Sorry, das war unser Fehler! Wir versuchen das zu beheben.","Bitte klicken Sie auf das SIX-Logo oben links."]}};const o=class{constructor(i){e(this,i);this.errorCode=undefined;this.language="en";this.customTitle=undefined;this.customDescription=undefined;this.customIcon=undefined}getIconName(){if(this.customIcon!=null){return this.customIcon}if(this.errorCode==null){return}if(this.errorCode===403){return"lock"}if(this.errorCode===404){return"find-in-page"}if(this.errorCode===500){return"sentiment-dissatisfied"}}getErrorTitle(){if(this.customTitle!=null){return this.customTitle}if(this.errorCode==null){return}return r[this.errorCode][this.language]}getErrorDescription(){var e;if(this.errorCode==null&&this.customDescription==null){return}const t=(e=this.getDescriptions())!==null&&e!==void 0?e:[];return t.map((e=>i("div",null,e)))}getDescriptions(){if(this.customDescription!==undefined){return this.customDescription}if(this.errorCode==null){return}return s[this.errorCode][this.language]}render(){return i("div",{key:"ed449c11128a99a7ff01033a272fde353836427a",part:"container"},i("div",{key:"d8d429ea654b7c456f04056ce4559fc06ce19097",class:"six-error-page__icon-container",part:"icon-container"},i("six-picto",{key:"a3acb3bba824b6488144e92405b4b90a13a8d668",size:"4xl",class:"six-error-page__icon",part:"icon"},this.getIconName())),i("div",{key:"3208af509a702f9dc675eab9c5124465eb39a0bb",class:"six-error-page__title",part:"title"},this.getErrorTitle()),i("div",{key:"28f883358e09da5c67b056defacaf89f43dfdcee",class:"six-error-page__description",part:"description"},this.getErrorDescription()))}};o.style=n;export{o as six_error_page};
+//# sourceMappingURL=p-52c04973.entry.js.map

package/dist/ui-library/p-52c04973.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixErrorPageCss","SixErrorPageStyle0","TITLE_PER_ERROR_CODE","en","de","DESCRIPTION_PER_ERROR_CODE","SixErrorPage","getIconName","this","customIcon","errorCode","getErrorTitle","customTitle","language","getErrorDescription","customDescription","descriptions","_a","getDescriptions","map","errorMessage","h","undefined","render","key","part","class","size"],"sources":["src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n  &__title {\n    display: flex;\n    justify-content: center;\n    font-size: var(--six-font-size-xx-large);\n    font-weight: bold;\n    margin-bottom: var(--six-spacing-large);\n  }\n\n  &__description {\n    & > * {\n      text-align: center;\n    }\n  }\n\n  &__icon-container {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__icon::part(icon) {\n    background-color: var(--six-color-web-rock-300);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  404: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  500: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode?: 404 | 403 | 500;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions() ?? [];\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,oWACxB,MAAAC,EAAeD,ECGf,MAAME,EAMF,CACF,IAAK,CACHC,GAAI,gBACJC,GAAI,gBAEN,IAAK,CACHD,GAAI,YACJC,GAAI,wBAEN,IAAK,CACHD,GAAI,SACJC,GAAI,SAIR,MAAMC,EAAgF,CACpF,IAAK,CACHF,GAAI,CACF,kDACA,sEAEFC,GAAI,CACF,wDACA,+FAGJ,IAAK,CACHD,GAAI,CAAC,4CAA6C,0CAClDC,GAAI,CAAC,mDAAoD,mDAE3D,IAAK,CACHD,GAAI,CAAC,2CAA4C,0CACjDC,GAAI,CACF,6DACA,oD,MAiBOE,EAAY,M,gEASS,K,sFAiBxB,WAAAC,GACN,GAAIC,KAAKC,YAAc,KAAM,CAC3B,OAAOD,KAAKC,U,CAGd,GAAID,KAAKE,WAAa,KAAM,CAC1B,M,CAGF,GAAIF,KAAKE,YAAc,IAAK,CAC1B,MAAO,M,CAGT,GAAIF,KAAKE,YAAc,IAAK,CAC1B,MAAO,c,CAGT,GAAIF,KAAKE,YAAc,IAAK,CAC1B,MAAO,wB,EAIH,aAAAC,GACN,GAAIH,KAAKI,aAAe,KAAM,CAC5B,OAAOJ,KAAKI,W,CAGd,GAAIJ,KAAKE,WAAa,KAAM,CAC1B,M,CAGF,OAAOR,EAAqBM,KAAKE,WAAWF,KAAKK,S,CAG3C,mBAAAC,G,MACN,GAAIN,KAAKE,WAAa,MAAQF,KAAKO,mBAAqB,KAAM,CAC5D,M,CAGF,MAAMC,GAAeC,EAAAT,KAAKU,qBAAiB,MAAAD,SAAA,EAAAA,EAAI,GAC/C,OAAOD,EAAaG,KAAKC,GAAiBC,EAAA,WAAMD,I,CAG1C,eAAAF,GACN,GAAIV,KAAKO,oBAAsBO,UAAW,CACxC,OAAOd,KAAKO,iB,CAGd,GAAIP,KAAKE,WAAa,KAAM,CAC1B,M,CAGF,OAAOL,EAA2BG,KAAKE,WAAWF,KAAKK,S,CAGzD,MAAAU,GACE,OACEF,EAAA,OAAAG,IAAA,2CAAKC,KAAK,aACRJ,EAAA,OAAAG,IAAA,2CAAKE,MAAM,iCAAiCD,KAAK,kBAC/CJ,EAAA,aAAAG,IAAA,2CAAWG,KAAK,MAAMD,MAAM,uBAAuBD,KAAK,QACrDjB,KAAKD,gBAGVc,EAAA,OAAAG,IAAA,2CAAKE,MAAM,wBAAwBD,KAAK,SACrCjB,KAAKG,iBAERU,EAAA,OAAAG,IAAA,2CAAKE,MAAM,8BAA8BD,KAAK,eAC3CjB,KAAKM,uB"}

package/dist/ui-library/p-5f810571.entry.js

@@ -0,0 +1,2 @@
+import{r,h as i}from"./p-f93d8a4e.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";const e=s;const n=class{constructor(i){r(this,i);this.six=false}renderSIXLogo(){return i("span",{class:"six-spinner","aria-busy":"true","aria-live":"polite"},i("div",{class:"six-spinner__container"},i("svg",{viewBox:"0 0 40 40",part:"svg"},i("path",{fill:"none",stroke:"#de3919","stroke-width":"5","stroke-linecap":"round",d:"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42"}))))}renderSimple(){return i("span",{part:"base",class:"spinner","aria-busy":"true","aria-live":"polite"})}render(){return this.six?this.renderSIXLogo():this.renderSimple()}};n.style=e;export{n as six_spinner};
+//# sourceMappingURL=p-5f810571.entry.js.map

package/dist/ui-library/p-5f810571.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSpinnerCss","SixSpinnerStyle0","SixSpinner","renderSIXLogo","h","class","viewBox","part","fill","stroke","d","renderSimple","render","this","six"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\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 * @part base - The component's base wrapper.\n * @part svg - The spinner icon\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\" part=\"svg\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAgB,+vCACtB,MAAAC,EAAeD,E,MCeFE,EAAU,M,kCAEP,K,CAEN,aAAAC,GACN,OACEC,EAAA,QAAMC,MAAM,cAAa,YAAW,OAAM,YAAW,UACnDD,EAAA,OAAKC,MAAM,0BACTD,EAAA,OAAKE,QAAQ,YAAYC,KAAK,OAC5BH,EAAA,QACEI,KAAK,OACLC,OAAO,UAAS,eACH,IAAG,iBACD,QACfC,EAAE,wH,CAQN,YAAAC,GACN,OAAOP,EAAA,QAAMG,KAAK,OAAOF,MAAM,UAAS,YAAW,OAAM,YAAW,U,CAGtE,MAAAO,GACE,OAAOC,KAAKC,IAAMD,KAAKV,gBAAkBU,KAAKF,c"}

package/dist/ui-library/p-651293e7.js

@@ -0,0 +1,2 @@
+let t=[];class i{constructor(t,i){this.element=t;this.options=i;this.handleFocusIn=this.handleFocusIn.bind(this)}activate(){t.push(this.element);document.addEventListener("focusin",this.handleFocusIn)}deactivate(){t=t.filter((t=>t!==this.element));document.removeEventListener("focusin",this.handleFocusIn)}isActive(){return t[t.length-1]===this.element}handleFocusIn(t){var i,s;const h=t.target;const o=this.element.tagName.toLowerCase();if(this.isActive()&&h.closest(o)!==this.element&&typeof((i=this.options)===null||i===void 0?void 0:i.onFocusOut)==="function"){(s=this.options)===null||s===void 0?void 0:s.onFocusOut(t)}}}export{i as M};
+//# sourceMappingURL=p-651293e7.js.map

package/dist/ui-library/p-651293e7.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["activeModals","Modal","constructor","element","options","this","handleFocusIn","bind","activate","push","document","addEventListener","deactivate","filter","modal","removeEventListener","isActive","length","event","target","tagName","toLowerCase","closest","_a","onFocusOut","_b"],"sources":["src/utils/modal.ts"],"sourcesContent":["interface ModalOptions {\n  onFocusOut?: (event: Event) => void;\n}\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  options?: ModalOptions;\n\n  constructor(element: HTMLElement, options?: ModalOptions) {\n    this.element = element;\n    this.options = options;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const target = event.target as HTMLElement;\n    const tagName = this.element.tagName.toLowerCase();\n\n    // If focus is lost while the modal is active, run the onFocusOut callback\n    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options?.onFocusOut === 'function') {\n      this.options?.onFocusOut(event);\n    }\n  }\n}\n"],"mappings":"AAIA,IAAIA,EAA8B,G,MAEbC,EAInB,WAAAC,CAAYC,EAAsBC,GAChCC,KAAKF,QAAUA,EACfE,KAAKD,QAAUA,EACfC,KAAKC,cAAgBD,KAAKC,cAAcC,KAAKF,K,CAG/C,QAAAG,GACER,EAAaS,KAAKJ,KAAKF,SACvBO,SAASC,iBAAiB,UAAWN,KAAKC,c,CAG5C,UAAAM,GACEZ,EAAeA,EAAaa,QAAQC,GAAUA,IAAUT,KAAKF,UAC7DO,SAASK,oBAAoB,UAAWV,KAAKC,c,CAG/C,QAAAU,GAEE,OAAOhB,EAAaA,EAAaiB,OAAS,KAAOZ,KAAKF,O,CAGxD,aAAAG,CAAcY,G,QACZ,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAUf,KAAKF,QAAQiB,QAAQC,cAGrC,GAAIhB,KAAKW,YAAcG,EAAOG,QAAQF,KAAaf,KAAKF,iBAAkBoB,EAAAlB,KAAKD,WAAO,MAAAmB,SAAA,SAAAA,EAAEC,cAAe,WAAY,EACjHC,EAAApB,KAAKD,WAAO,MAAAqB,SAAA,SAAAA,EAAED,WAAWN,E"}

package/dist/ui-library/p-6c96b62e.entry.js

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

package/dist/ui-library/p-6c96b62e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSearchFieldCss","SixSearchFieldStyle0","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":"4HAAA,MAAMA,EAAoB,qNAC1B,MAAAC,EAAeD,E,MCmBFE,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,OAAAJ,IAAA,2CAAKK,MAAM,cACTD,EAAA,aAAAJ,IAAA,2CACEM,IAAMC,GAAQtB,KAAKI,aAAekB,EAClCC,YAAavB,KAAKuB,YAClBhB,MAAOP,KAAKO,MACZiB,SAAUxB,KAAKwB,SACfC,UAAWzB,KAAKyB,WAEhBN,EAAA,YAAAJ,IAAA,2CAAUK,MAAM,mBAAmBM,KAAK,SAASC,KAAK,QAAQC,QAAS5B,KAAKG,mBAAiB,WAI/FgB,EAAA,QAAAJ,IAAA,6C"}

package/dist/ui-library/p-724d0458.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-f93d8a4e.js";import{I as n,a as r}from"./p-862d474e.js";import{D as h,b as o,a as l}from"./p-a1502802.js";import{E as c}from"./p-8bfb4bfc.js";const u=".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__container:focus-visible{outline:var(--six-focus-ring);outline-offset:0}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}.item_picker__btn:focus-visible{outline:var(--six-focus-ring);outline-offset:0}";const a=u;const d="ABCDEFGHIJKLMNOPQRSTUVWXYZ";const m=[...d].flatMap((t=>[t,t.toLowerCase()]));const b={alphabet:m,letterIndexes:Object.fromEntries(m.map(((t,e)=>[t,e])))};const p={alphabet:[...d].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...d].map(((t,e)=>[t,e])))};const f={alphabet:[...d.toLowerCase()].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...d.toLowerCase()].map(((t,e)=>[t,e])))};const g=t=>Object.fromEntries([...t].map(((t,e)=>[t,e])));const x=`[SIX-ITEM-PICKER]`;const I=(t,e)=>t-e;const v=(t,e)=>t+e;const _="debounced-item-picker";const N=class{constructor(i){t(this,i);this.sixChange=e(this,"six-item-picker-change",7);this.sixChangeDebounced=e(this,"six-item-picker-change-debounced",7);this.eventListeners=new c;this.handleSixItemPickerChangeDebounced=()=>{this.sixChangeDebounced.emit(this.value)};this.value="";this.type=n.NUMBER;this.min=undefined;this.max=undefined;this.roundtrip=true;this.step=1;this.items=undefined;this.padded=false;this.paddingLength=2;this.paddingChar="0";this.paddingDirection=r.BEFORE;this.timeout=h;this.interval=o;this.debounce=h;this._items=[];this._itemIndexes={}}handleValueChange(){this.setup()}debounceChanged(){this.eventListeners.removeByIdentifier(_);this.eventListeners.add(this.host,"six-item-picker-change",l(this.handleSixItemPickerChangeDebounced,this.debounce),_)}handleSetChange(){this.setup();this.min=this._items[0];this.max=this.getLastStringItem()}componentWillLoad(){this.setup()}componentDidLoad(){this.eventListeners.add(this.host,"six-item-picker-change",l(this.handleSixItemPickerChangeDebounced,this.debounce),_)}disconnectedCallback(){this.eventListeners.removeAll()}setup(){if(this.isNumber()){this.setupNumberItems()}else{this.setUpStringItems()}}setupNumberItems(){var t;if(this.isInvalidNumber()){console.warn(`${x} Expected number but value is not a number: "${this.value}"`);console.info(`${x} Will set value to either minimum or if not provided to zero.`);this.value=(t=this.min)!==null&&t!==void 0?t:0}}setUpStringItems(){this._items=this.getStringItems();this._itemIndexes=this.getItemIndexes();const t=this._items.find((t=>String(t)===String(this.value)))===undefined;if(t){console.warn(`${x} Expected item from item set but value was not found in set: "${this.value}"`);console.info(`${x} Will set value to either minimum or if not provided to "${this._items[0]}".`);this.value=this._items[0]}if(this.min===undefined){if(!this.roundtrip){console.warn(`${x} Expected a min value`);console.info(`${x} Will set min value to ${this._items[0]}`)}this.min=this._items[0]}if(this.max===undefined){const t=this.getLastStringItem();if(!this.roundtrip){console.warn(`${x} Expected a min value if roundtrip is enabled`);console.info(`${x} Will set min value to ${t}`)}this.max=t}}getLastStringItem(){return this._items[this._items.length-1]}getStringItems(){switch(this.type){case n.NUMBER:console.warn(`${x}: unexpected type ${this.type}`);return[];case n.LETTER:return b.alphabet;case n.CAPITAL_LETTER:return p.alphabet;case n.LOWER_LETTER:return f.alphabet;case n.CUSTOM:if(this.items==null||this.items.length===0){console.warn(`${x}: no items defined for type ${this.type}`);return[]}return this.items}}getItemIndexes(){switch(this.type){case n.NUMBER:console.warn(`${x}: unexpected type ${this.type}`);return{};case n.LETTER:return b.letterIndexes;case n.CAPITAL_LETTER:return p.letterIndexes;case n.LOWER_LETTER:return f.letterIndexes;case n.CUSTOM:return g(this._items)}}previousItem(){if(this.isNumber()){this.previousNumber()}else{this.previousStringItem()}this.sixChange.emit(this.value)}previousNumber(){this.changeValue({isNextItemAllowed:()=>!this.isPreviousNumberDisabled(),getNextItem:()=>Number(this.value)-this.step,getRoundtripItem:()=>Number(this.max),isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}previousStringItem(){const t=String(this.value);const e=String(this.min);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)>this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(I),getRoundtripItem:()=>String(this.max),isRoundtripPossible:()=>this.max==null&&this.roundtrip})}nextItem(){if(this.isNumber()){this.nextNumber()}else{this.nextStringItem()}this.sixChange.emit(this.value)}nextNumber(){this.changeValue({isNextItemAllowed:()=>!this.isNextNumberDisabled(),getNextItem:()=>Number(this.value)+this.step,getRoundtripItem:()=>Number(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getStringItemIndex(t){return this._itemIndexes[t]}nextStringItem(){const t=String(this.value);const e=String(this.max);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)<this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(v),getRoundtripItem:()=>String(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getNextItemByOperation(t,e=this.step){const i=String(this.value);const s=t(this.getStringItemIndex(i),e);const n=this._items.length;const r=(s%n+n)%n;return this._items[r]}changeValue(t){if(t.isNextItemAllowed()){this.value=t.getNextItem();return}if(t.isRoundtripPossible()){console.error(`${x} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);return}if(this.roundtrip){this.value=t.getRoundtripItem();return}console.warn(`${x} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`);this.sixChange.emit(this.value)}isNumber(){return this.type===n.NUMBER}isInvalidNumber(){return this.value===""||isNaN(this.value)}isNextDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isNextNumberDisabled()}else{return this._itemIndexes[String(this.value)]+this.step>this._itemIndexes[String(this.max)]}}isNextNumberDisabled(){var t;return Number(this.value)+this.step>Number((t=this.max)!==null&&t!==void 0?t:Infinity)}isPrevDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isPreviousNumberDisabled()}else{return this._itemIndexes[String(this.value)]-this.step<this._itemIndexes[String(this.min)]}}isPreviousNumberDisabled(){var t;return Number(this.value)-this.step<Number((t=this.min)!==null&&t!==void 0?t:-Infinity)}onMouseDownNext(){if(this.isNextDisabled()){return}this.nextItem();this._timeoutNext=setTimeout((()=>{this._intervalNext=setInterval((()=>{this.nextItem()}),this.interval)}),this.timeout)}onMouseUpNext(){clearTimeout(this._timeoutNext);clearInterval(this._intervalNext)}onMouseDownPrev(){if(this.isPrevDisabled()){return}this.previousItem();this._timeoutPrev=setTimeout((()=>{this._intervalPrev=setInterval((()=>{this.previousItem()}),this.interval)}),this.timeout)}onMouseUpPrev(){clearTimeout(this._timeoutPrev);clearInterval(this._intervalPrev)}getFormattedValue(){if(this.value===undefined||this.value===null){return this.value}if(!this.padded){return this.value}if(this.paddingDirection===r.BEFORE){return String(this.value).padStart(this.paddingLength,this.paddingChar)}else if(this.paddingDirection===r.AFTER){return String(this.value).padEnd(this.paddingLength,this.paddingChar)}return this.value}handleKeyPress(t){if(t.key==="Enter"){t.preventDefault();if(t.target===this.upButton){this.nextItem()}else if(t.target===this.downButton){this.previousItem()}}else if(t.key==="ArrowUp"){t.preventDefault();this.nextItem()}else if(t.key==="ArrowDown"){t.preventDefault();this.previousItem()}else if(t.key==="PageUp"){t.preventDefault();this.pageUp()}else if(t.key==="PageDown"){t.preventDefault();this.pageDown()}else if(t.key==="Home"){t.preventDefault();this.goToMin()}else if(t.key==="End"){t.preventDefault();this.goToMax()}}pageUp(){if(this.isNumber()){this.changeValue({isNextItemAllowed:()=>!this.isNextNumberDisabled(),getNextItem:()=>Number(this.value)+5*this.step,getRoundtripItem:()=>Number(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}else{const t=String(this.value);const e=String(this.min);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)>this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(v,5),getRoundtripItem:()=>String(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}}pageDown(){if(this.isNumber()){this.changeValue({isNextItemAllowed:()=>!this.isPreviousNumberDisabled(),getNextItem:()=>Number(this.value)-5*this.step,getRoundtripItem:()=>Number(this.max),isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}else{const t=String(this.value);const e=String(this.max);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)<this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(I,5),getRoundtripItem:()=>String(this.max),isRoundtripPossible:()=>this.max==null&&this.roundtrip})}}goToMin(){var t;if(this.isNumber()){this.value=(t=this.min)!==null&&t!==void 0?t:0}else{this.value=this._items[0]}this.sixChange.emit(this.value)}goToMax(){var t;if(this.isNumber()){this.value=(t=this.max)!==null&&t!==void 0?t:Infinity}else{this.value=this.getLastStringItem()}this.sixChange.emit(this.value)}render(){return i("div",{key:"773e773a55e33b7486a7d2928ad605c6efadf119",part:"container",class:"item_picker__container",onKeyDown:t=>this.handleKeyPress(t),tabindex:"0"},i("div",{key:"3cb5fd7c07ea6b0b8778be5b316ba0d788b900be",ref:t=>this.upButton=t,part:"up",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isNextDisabled()},onMouseDown:()=>this.onMouseDownNext(),onMouseUp:()=>this.onMouseUpNext(),tabindex:"-1"},i("six-icon",{key:"606bfc7a65c8b5312a952bc9bb85324c95111d17",size:"large"},"expand_less")),i("div",{key:"181dec86bb4b8d9762595b38f719af4c8a91ea42",part:"content",class:"item_picker__content"},this.getFormattedValue()),i("div",{key:"195fefb352bbb5d202b3357e429959f4c887d357",ref:t=>this.downButton=t,part:"down",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isPrevDisabled()},onMouseDown:()=>this.onMouseDownPrev(),onMouseUp:()=>this.onMouseUpPrev(),tabindex:"-1"},i("six-icon",{key:"525c90105edea5208737b49c8b2831498c326197",size:"large"},"expand_more")))}get host(){return s(this)}static get watchers(){return{value:["handleValueChange"],debounce:["debounceChanged"],items:["handleSetChange"]}}};N.style=a;export{N as six_item_picker};
+//# sourceMappingURL=p-724d0458.entry.js.map