@six-group/ui-library 0.0.0-insider.bc75fdf → 0.0.0-insider.bea5ab5

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

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

package/dist/ui-library/p-ac099e6b.entry.js

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

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

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

package/dist/ui-library/p-ae601a0f.entry.js

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

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

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

package/dist/ui-library/p-b351f889.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as a}from"./p-6153045b.js";const t=".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-red)}.language-switcher__label--selected{color:var(--six-color-red)}";const r=["EN","DE","ES"];const i=class{constructor(a){e(this,a);this.sixChange=s(this,"six-language-switcher-change",7);this.handleLanguageSwitching=(e,s)=>()=>{if(s!==undefined){this.sixChange.emit(s)}else{this.sixChange.emit(e)}this.selected=e};this.selected=undefined;this.languages=r}handleChangesLanguages(e){if(!Array.isArray(e)){throw new Error("languages is expected to be an array")}this.updateSelectedLanguage()}componentWillLoad(){if(this.selected===undefined){this.updateSelectedLanguage()}}updateSelectedLanguage(){const e=this.languages[0];if(typeof e==="string"){this.selected=e;this.sixChange.emit(this.selected)}else{this.selected=e.key;this.sixChange.emit(e.value)}}render(){return a("div",{part:"container",class:"language-switcher__container"},this.languages.map(((e,s)=>{const t=typeof e==="string"?e:e.key;return a("div",{onClick:this.handleLanguageSwitching(t,typeof e==="string"?e:e.value)},a("span",{part:"label",class:{"language-switcher__label":true,"language-switcher__label--selected":this.selected===t}},t),s<this.languages.length-1&&a("span",{part:"separator",class:"language-switcher__separator"},"/"))})))}static get watchers(){return{languages:["handleChangesLanguages"]}}};i.style=t;export{i as six_language_switcher};
-//# sourceMappingURL=p-b351f889.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixLanguageSwitcherCss","DEFAULT_LANGUAGES","SixLanguageSwitcher","this","handleLanguageSwitching","newLanguage","languageValue","undefined","sixChange","emit","selected","handleChangesLanguages","newValue","Array","isArray","Error","updateSelectedLanguage","componentWillLoad","selectedLanguage","languages","key","value","render","h","part","class","map","lang","index","language","onClick","length"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n  &__container {\n    display: flex;\n  }\n\n  &__separator {\n    padding: 0 0.25rem;\n  }\n\n  &__label {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-color-red);\n    }\n\n    &--selected {\n      color: var(--six-color-red);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\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@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n              <span\n                part=\"label\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  /\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAyB,iQCa/B,MAAMC,EAAoB,CAAC,KAAM,KAAM,M,MAc1BC,EAAmB,M,iFAqCtBC,KAAAC,wBAA0B,CAACC,EAAqBC,IAA2B,KACjF,GAAIA,IAAkBC,UAAW,CAC/BJ,KAAKK,UAAUC,KAAKH,E,KACf,CACLH,KAAKK,UAAUC,KAAKJ,E,CAEtBF,KAAKO,SAAWL,CAAW,E,uCAtC8BJ,C,CAG3D,sBAAAU,CAAuBC,GACrB,IAAKC,MAAMC,QAAQF,GAAW,CAC5B,MAAM,IAAIG,MAAM,uC,CAGlBZ,KAAKa,wB,CAOP,iBAAAC,GACE,GAAId,KAAKO,WAAaH,UAAW,CAC/BJ,KAAKa,wB,EAID,sBAAAA,GACN,MAAME,EAAmBf,KAAKgB,UAAU,GACxC,UAAWD,IAAqB,SAAU,CACxCf,KAAKO,SAAWQ,EAChBf,KAAKK,UAAUC,KAAKN,KAAKO,S,KACpB,CACLP,KAAKO,SAAWQ,EAAiBE,IACjCjB,KAAKK,UAAUC,KAAKS,EAAiBG,M,EAazC,MAAAC,GACE,OACEC,EAAA,OAAKC,KAAK,YAAYC,MAAM,gCACzBtB,KAAKgB,UAAUO,KAAI,CAACC,EAAMC,KACzB,MAAMC,SAAkBF,IAAS,SAAWA,EAAOA,EAAKP,IACxD,OACEG,EAAA,OAAKO,QAAS3B,KAAKC,wBAAwByB,SAAiBF,IAAS,SAAWA,EAAOA,EAAKN,QAC1FE,EAAA,QACEC,KAAK,QACLC,MAAO,CACL,2BAA4B,KAC5B,qCAAsCtB,KAAKO,WAAamB,IAGzDA,GAEFD,EAAQzB,KAAKgB,UAAUY,OAAS,GAC/BR,EAAA,QAAMC,KAAK,YAAYC,MAAM,gCAA8B,KAIzD,I"}

package/dist/ui-library/p-b57afbe4.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,g as i}from"./p-6153045b.js";import{h as l,a as o}from"./p-15559d38.js";import{F as r}from"./p-e5020f0d.js";import{E as a}from"./p-7d95def3.js";import{D as n,a as h}from"./p-698bb2c8.js";function c(t){if(Array.isArray(t)){return t.length===0}return t===""}const d=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.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}.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__tags,.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)}.select__label{flex-shrink:1;flex-grow:1;align-items:center;user-select:none;width:0;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:hidden;text-overflow:ellipsis}.select__label::-webkit-scrollbar{width:0;height:0}.select__label--single{white-space:nowrap}.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)}.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color)}.select--disabled.select--placeholder-visible .select__label{color:var(--six-input-placeholder-color-disabled)}.select__tags{display:flex;align-items:center;flex-wrap:wrap;justify-content:left;margin-left:var(--six-spacing-xx-small)}.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 .select__label{margin: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--small .select__tags{padding-bottom:2px}.select--small .select__tags six-tag{padding-top:2px;margin-right:var(--six-spacing-xx-small)}.select--small.select--has-tags .select__label{margin-left:0}.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 .select__label{margin: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--medium .select__tags{padding-bottom:3px}.select--medium .select__tags six-tag{padding-top:3px;margin-right:var(--six-spacing-xx-small)}.select--medium.select--has-tags .select__label{margin-left:0}.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 .select__label{margin: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--large .select__tags{padding-bottom:4px}.select--large .select__tags six-tag{padding-top:4px;margin-right:var(--six-spacing-xx-small)}.select--large.select--has-tags .select__label{margin-left:0}.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{max-width:50vw;width:fit-content}.select__menu--filtered{width:100% !important}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}';let u=0;const x=class{constructor(s){t(this,s);this.sixChange=e(this,"six-select-change",7);this.sixFocus=e(this,"six-select-focus",7);this.sixBlur=e(this,"six-select-blur",7);this.inputId=`select-${++u}`;this.labelId=`select-label-${u}`;this.helpTextId=`select-help-text-${u}`;this.errorTextId=`select-error-text-${u}`;this.touched=false;this.eventListeners=new a;this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClearClick=t=>{t.stopPropagation();this.clearValues();this.sixChange.emit({value:this.value,isSelected:true})};this.handleSelectAll=t=>{const e=this.getItems().filter((t=>t.style.display!=="none"));const s=t.key;const i=t.code;if(s==="Control"){return}if(this.isOpen&&this.multiple&&i==="KeyA"&&t.ctrlKey){t.preventDefault();const s=e.some((t=>!t.disabled&&!t.checked));e.filter((t=>!t.disabled)).forEach((t=>t.checked=s));const i=e.filter((t=>t.checked)).map((t=>t.value));this.value=s?i:[];this.sixChange.emit({value:this.value,isSelected:true})}};this.handleKeyDown=t=>{var e,s,i,l;const o=t.target;const r=this.getItems();const a=r[0];const n=r[r.length-1];if(o.tagName.toLowerCase()==="six-tag"){return}if(t.key==="Tab"){if(this.isOpen){(e=this.dropdown)===null||e===void 0?void 0:e.hide()}return}if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.isOpen){(s=this.dropdown)===null||s===void 0?void 0:s.show()}if(t.key==="ArrowDown"&&a){a.setFocus();return}if(t.key==="ArrowUp"&&n){n.setFocus();return}}if(!this.isOpen){t.stopPropagation();t.preventDefault();(i=this.dropdown)===null||i===void 0?void 0:i.show();(l=this.menu)===null||l===void 0?void 0:l.typeToSelect(t.key)}};this.handleLabelClick=()=>{var t;(t=this.box)===null||t===void 0?void 0:t.focus()};this.handleMenuSelect=t=>{const e=t.detail.item;const s=()=>{if(this.multiple){return this.value.includes(e.value)?this.value.filter((t=>t!==e.value)):[...this.value,e.value]}else{return e.value}};this.value=s();this.syncItemsFromValue();this.sixChange.emit({value:this.value,isSelected:true})};this.handleMenuShow=t=>{var e;if(this.disabled){t.preventDefault();return}this.resizeMenu();(e=this.resizeObserver)===null||e===void 0?void 0:e.observe(this.host);this.isOpen=true};this.handleMenuHide=()=>{var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.unobserve(this.host);this.isOpen=false};this.handleSlotChange=()=>{this.hasHelpTextSlot=l(this.host,"help-text");this.hasLabelSlot=l(this.host,"label");this.hasErrorTextSlot=l(this.host,"error-text");this.syncItemsFromValue()};this.handleTagInteraction=t=>{const e=t.composedPath();const s=e.find((t=>{if(t instanceof HTMLElement){const e=t;return e.classList.contains("tag__clear")}}));if(s){t.stopPropagation();this.sixChange.emit({value:this.value,isSelected:true})}};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.isOpen=false;this.displayLabel="";this.displayTags=[];this.multiple=false;this.maxTagsVisible=3;this.disabled=false;this.name="";this.placeholder="";this.filterPlaceholder=undefined;this.filterDebounce=n;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 t;if(this.disabled&&this.isOpen){(t=this.dropdown)===null||t===void 0?void 0:t.hide()}}handleLabelChange(){this.handleSlotChange()}handleMultipleChange(){const t=this.getValueAsArray();this.value=this.multiple?t:t[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(){var t;if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.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)}componentWillLoad(){this.handleSlotChange();if(this.multiple&&this.value!=null){this.value=this.getValueAsArray()}}componentDidLoad(){if(this.input==null)return;const t=this.input;this.resizeObserver=new ResizeObserver((()=>this.resizeMenu()));requestAnimationFrame((()=>this.syncItemsFromValue()));this.eventListeners.add(t,"six-input-input",h((e=>{const s=t.value;this.clearValues();this.sixChange.emit({value:s,isSelected:false});e.stopPropagation()}),this.inputDebounce));t.value=this.hasSelection()?this.displayLabel:""}disconnectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;this.hasFocus=true;(e=this.box)===null||e===void 0?void 0:e.focus(t)}getItemLabel(t){var e,s;const i=(e=t.shadowRoot)===null||e===void 0?void 0:e.querySelector("slot:not([name])");if(i!=null){return o(i)}else{return(s=t.textContent)!==null&&s!==void 0?s:""}}getItems(){if(this.options!==null){return this.options.map((t=>s("six-menu-item",{value:t.value},t.label)))}return[...this.host.querySelectorAll("six-menu-item")]}hasMenuItems(){return this.getItems().length>0}getValueAsArray(){const t=Array.isArray(this.value)?this.value:this.value===""?[]:[this.value];return t.map(String)}clearValues(){this.value=this.multiple?[]:"";this.syncItemsFromValue()}resizeMenu(){if(this.menu==null||this.box==null)return;this.menu.style.minWidth=`${this.box.clientWidth}px`;if(this.dropdown){this.dropdown.reposition()}}async syncItemsFromValue(){const t=this.getItems();const e=this.getValueAsArray();t.forEach((t=>t.checked=e.includes(t.value)));if(this.multiple){const i=[];e.forEach((e=>t.map((t=>t.value===e?i.push(t):null))));this.displayTags=i.map((t=>s("six-tag",{exportparts:"base:tag",type:"primary",size:this.size,pill:this.pill,clearable:true,onClick:this.handleTagInteraction,onKeyDown:this.handleTagInteraction,"onSix-tag-clear":e=>{e.stopPropagation();if(!this.disabled){t.checked=false;this.syncValueFromItems()}}},this.getItemLabel(t))));if(this.maxTagsVisible>0&&this.displayTags.length>this.maxTagsVisible){const t=this.displayTags.length;this.displayLabel="";this.displayTags=this.displayTags.slice(0,this.maxTagsVisible);this.displayTags.push(s("six-tag",{exportparts:"base:tag",type:"info",size:this.size},"+",t-this.maxTagsVisible))}}else{this.displayLabel=this.extractLabelForSelectedItem(e,t);this.displayTags=[]}if(!c(this.value)){this.touched=true}if(this.touched&&this.input!=null){this.input.value=Array.isArray(this.value)?this.value.join(","):this.value}}extractLabelForSelectedItem(t,e){if(t.length===0||t.length===1&&t[0]===""){return""}if(this.options!==null){const e=this.options.find((e=>e.value===t[0]));return(e===null||e===void 0?void 0:e.value)||""}const s=e.find((e=>e.value===t[0]));return s?this.getItemLabel(s):""}syncValueFromItems(){const t=this.getItems();const e=t.filter((t=>t.checked));const s=e.map((t=>t.value));this.value=this.multiple?this.getValueAsArray().filter((t=>s.includes(t))):s.length>0?s[0]:""}render(){var t;const e=this.hasSelection();return s(r,{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",{part:"base",ref:t=>this.dropdown=t,hoist:this.hoist,closeOnSelect:!this.multiple,containingElement:this.host,disableHideOnEnterAndSpace:this.autocomplete,class:{select:true,"select--open":this.isOpen,"select--empty":((t=this.value)===null||t===void 0?void 0:t.length)===0,"select--focused":this.hasFocus,"select--clearable":this.clearable,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--has-tags":this.multiple&&e,"select--placeholder-visible":this.displayLabel==="","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.handleSelectAll,"onSix-dropdown-show":this.handleMenuShow,"onSix-dropdown-hide":this.handleMenuHide,filterPlaceholder:this.filterPlaceholder,filterDebounce:this.filterDebounce,filter:this.filter,asyncFilter:this.asyncFilter},s("div",{slot:"trigger",ref:t=>this.box=t,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,onKeyDown:this.handleKeyDown},s("span",{class:{select__label:true,"select__label--single":!this.displayTags.length}},this.displayTags.length>0?s("span",{part:"tags",class:"select__tags"},this.displayTags):this.displayLabel||this.placeholder),this.clearable&&e&&s("six-icon-button",{exportparts:"base:clear-button",class:"select__clear",name:"clear",size:"small",onClick:this.handleClearClick,tabindex:"-1"}),this.hasMenuItems()&&s("span",{part:"icon",class:"select__icon"},s("six-icon",{size:"medium"},"expand_more")),s("six-input",{ref:t=>this.input=t,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("six-menu",{ref:t=>this.menu=t,part:"menu",class:{select__menu:true,"select__menu--filtered":this.filter||this.asyncFilter,"select__menu--hidden":!this.hasMenuItems()},"onSix-menu-item-selected":this.handleMenuSelect,items:this.options,virtualScroll:this.virtualScroll,"remove-box-shadow":true},s("slot",{onSlotchange:this.handleSlotChange}))))}hasSelection(){return this.multiple?this.value.length>0:this.value!==""}get host(){return i(this)}static get watchers(){return{disabled:["handleDisabledChange"],helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],multiple:["handleMultipleChange"],value:["handleValueChange"]}}};x.style=d;export{x as six_select};
-//# sourceMappingURL=p-b57afbe4.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["isValueEmpty","value","Array","isArray","length","sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","touched","eventListeners","EventListeners","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClearClick","event","stopPropagation","clearValues","sixChange","isSelected","handleSelectAll","nonFilteredItems","getItems","filter","item","style","display","keyName","key","keyCode","code","isOpen","multiple","ctrlKey","preventDefault","hasDeselectedOptions","some","opt","disabled","checked","option","forEach","checkedItems","map","handleKeyDown","target","items","firstItem","lastItem","tagName","toLowerCase","_a","dropdown","hide","includes","_b","show","setFocus","_c","_d","menu","typeToSelect","handleLabelClick","box","focus","handleMenuSelect","detail","getValue","v","syncItemsFromValue","handleMenuShow","resizeMenu","resizeObserver","observe","host","handleMenuHide","unobserve","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","hasErrorTextSlot","handleTagInteraction","path","composedPath","clearButton","find","el","HTMLElement","element","classList","contains","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","handleLabelChange","handleMultipleChange","getValueAsArray","handleValueChange","connectedCallback","virtualScroll","options","console","error","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","input","ResizeObserver","requestAnimationFrame","add","debounce","enteredValue","inputDebounce","hasSelection","displayLabel","disconnectedCallback","removeEventListener","removeAll","getItemLabel","slot","querySelector","getTextContent","textContent","h","label","querySelectorAll","hasMenuItems","values","String","minWidth","clientWidth","reposition","val","push","displayTags","exportparts","type","size","pill","clearable","onClick","onKeyDown","syncValueFromItems","maxTagsVisible","total","slice","extractLabelForSelectedItem","join","selectedOption","checkedItem","checkedValues","render","FormControl","helpText","errorText","errorTextCount","onLabelClick","required","displayError","invalid","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","autocomplete","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","select__label","placeholder","name","tabindex","select__input","select__menu","onSlotchange"],"sources":["src/components/six-select/util.ts","src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","src/components/six-select/six-select.tsx"],"sourcesContent":["export interface MenuItem {\n  value: string;\n}\n\nexport function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[] {\n  if (multiple) {\n    if (Array.isArray(value)) {\n      return getSelectedValues(value, menuItems);\n    } else {\n      return getSelectedValuesFromString(value, menuItems);\n    }\n  }\n\n  return getSelectedMenuItem(value, menuItems)?.value ?? '';\n}\n\nexport function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean {\n  if (value === '') {\n    return true;\n  }\n\n  if (multiple) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) {\n        return true;\n      }\n      return getSelectedValues(value, menuItems).length === value.length;\n    }\n    return getSelectedValuesFromString(value, menuItems).length > 0;\n  }\n\n  return getSelectedMenuItem(value, menuItems) != null;\n}\n\nexport function valueEquals(a: string | string[], b: string | string[]): boolean {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return a.length === b.length && a.every((element, index) => element === b[index]);\n  } else if (typeof a === 'string' && typeof b === 'string') {\n    return a === b;\n  }\n  return false;\n}\n\nexport function isValueEmpty(value: string | string[]): boolean {\n  if (Array.isArray(value)) {\n    return value.length === 0;\n  }\n  return value === '';\n}\n\nfunction getSelectedValues(values: unknown[], menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => values.includes(menuItem.value)).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedValuesFromString(value: unknown, menuItems: MenuItem[]): string[] {\n  return menuItems.filter((menuItem) => value === menuItem.value).map((menuItem) => menuItem.value);\n}\n\nfunction getSelectedMenuItem(value: unknown, menuItems: MenuItem[]): MenuItem | undefined {\n  return menuItems.find((item) => value === item.value);\n}\n","@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  display: block;\n}\n\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__tags,\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.select__label {\n  flex-shrink: 1;\n  flex-grow: 1;\n  align-items: center;\n  user-select: none;\n  width: 0; /* needed for firefox because due to \"white-space: nowrap\" the default is set to max-content */\n\n  @include hide-scrollbar;\n  overflow-x: auto;\n  overflow-y: hidden;\n  text-overflow: ellipsis;\n}\n\n.select__label--single {\n  white-space: nowrap;\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.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n  color: var(--six-input-placeholder-color-disabled);\n}\n\n// Tags\n.select__tags {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: left;\n  margin-left: var(--six-spacing-xx-small);\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  .select__label {\n    margin: 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  .select__tags {\n    padding-bottom: 2px;\n\n    six-tag {\n      padding-top: 2px;\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\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  .select__label {\n    margin: 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  .select__tags {\n    padding-bottom: 3px;\n\n    six-tag {\n      padding-top: 3px;\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\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  .select__label {\n    margin: 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  .select__tags {\n    padding-bottom: 4px;\n\n    six-tag {\n      padding-top: 4px;\n      margin-right: var(--six-spacing-xx-small);\n    }\n  }\n\n  &.select--has-tags .select__label {\n    margin-left: 0;\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    max-width: 50vw;\n    width: fit-content;\n\n    &--filtered {\n      // fixes problem where when filter is enabled the popup has the width of the input field but the menu has the width\n      // of the trigger element and we thus get weird UI glitches when trigger is narrower than filter input field\n      width: 100% !important;\n    }\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","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 { isValueEmpty } from './util';\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 dropdown?: HTMLSixDropdownElement;\n  private input?: 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 menu?: HTMLSixMenuElement;\n  private resizeObserver?: ResizeObserver;\n  private touched = false;\n  private eventListeners = new EventListeners();\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() displayLabel = '';\n  @State() displayTags: HTMLSixTagElement[] = [];\n\n  /** Set to true to enable multiselect. */\n  @Prop() multiple = false;\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  @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 = DEFAULT_DEBOUNCE_FAST;\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\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.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  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    if (this.multiple && this.value != null) {\n      this.value = this.getValueAsArray();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.input == null) return;\n    const input = this.input;\n    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());\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    this.eventListeners.add(\n      input,\n      'six-input-input',\n      debounce((event) => {\n        const enteredValue = input.value;\n        this.clearValues();\n        this.sixChange.emit({ value: enteredValue, isSelected: false });\n        event.stopPropagation();\n      }, this.inputDebounce)\n    );\n\n    input.value = this.hasSelection() ? this.displayLabel : '';\n  }\n\n  disconnectedCallback() {\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 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) {\n      return this.options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    return [...this.host.querySelectorAll('six-menu-item')];\n  }\n\n  private hasMenuItems() {\n    return this.getItems().length > 0;\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 = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clearValues();\n    this.sixChange.emit({ value: this.value, isSelected: true });\n  };\n\n  private clearValues() {\n    this.value = this.multiple ? [] : '';\n    this.syncItemsFromValue();\n  }\n\n  private handleSelectAll = (event: KeyboardEvent) => {\n    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');\n    const keyName = event.key;\n    const keyCode = event.code;\n\n    if (keyName === 'Control') {\n      return;\n    }\n\n    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {\n      event.preventDefault();\n      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);\n\n      nonFilteredItems\n        .filter((option) => !option.disabled)\n        .forEach((option) => (option.checked = hasDeselectedOptions));\n      const checkedItems = nonFilteredItems.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\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n\n    const items = this.getItems();\n    const firstItem = items[0];\n    const lastItem = items[items.length - 1];\n\n    // Ignore key presses on tags\n    if (target.tagName.toLowerCase() === 'six-tag') {\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    // Up/down opens the menu\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.isOpen) {\n        this.dropdown?.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstItem) {\n        firstItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastItem) {\n        lastItem.setFocus();\n        return;\n      }\n    }\n\n    // All other keys open the menu and initiate type to select\n    if (!this.isOpen) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.dropdown?.show();\n      this.menu?.typeToSelect(event.key);\n    }\n  };\n\n  private handleLabelClick = () => {\n    this.box?.focus();\n  };\n\n  private handleMenuSelect = (event: CustomEvent) => {\n    const item = event.detail.item;\n\n    const getValue = () => {\n      if (this.multiple) {\n        return this.value.includes(item.value)\n          ? (this.value as []).filter((v) => v !== item.value)\n          : [...this.value, item.value];\n      } else {\n        return item.value;\n      }\n    };\n\n    this.value = getValue();\n\n    this.syncItemsFromValue();\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\n    this.resizeMenu();\n    this.resizeObserver?.observe(this.host);\n    this.isOpen = true;\n  };\n\n  private handleMenuHide = () => {\n    this.resizeObserver?.unobserve(this.host);\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  private handleTagInteraction = (event: KeyboardEvent | MouseEvent) => {\n    // Don't toggle the menu when a tag's clear button is activated\n    const path = event.composedPath() as EventTarget[];\n    const clearButton = path.find((el) => {\n      if (el instanceof HTMLElement) {\n        const element = el as HTMLElement;\n        return element.classList.contains('tag__clear');\n      }\n    });\n\n    if (clearButton) {\n      event.stopPropagation();\n      this.sixChange.emit({ value: this.value, isSelected: true });\n    }\n  };\n\n  private resizeMenu() {\n    if (this.menu == null || this.box == null) return;\n    this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n    if (this.dropdown) {\n      this.dropdown.reposition();\n    }\n  }\n\n  private async syncItemsFromValue() {\n    const items = this.getItems();\n    const value = this.getValueAsArray();\n\n    // Sync checked states\n    items.forEach((item) => (item.checked = value.includes(item.value)));\n\n    // Sync display label\n    if (this.multiple) {\n      const checkedItems: HTMLSixMenuItemElement[] = [];\n      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));\n\n      this.displayTags = checkedItems.map((item) => {\n        return (\n          <six-tag\n            exportparts=\"base:tag\"\n            type=\"primary\"\n            size={this.size}\n            pill={this.pill}\n            clearable\n            onClick={this.handleTagInteraction}\n            onKeyDown={this.handleTagInteraction}\n            onSix-tag-clear={(event) => {\n              event.stopPropagation();\n              if (!this.disabled) {\n                item.checked = false;\n                this.syncValueFromItems();\n              }\n            }}\n          >\n            {this.getItemLabel(item)}\n          </six-tag>\n        );\n      });\n\n      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {\n        const total = this.displayTags.length;\n        this.displayLabel = '';\n        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);\n        this.displayTags.push(\n          <six-tag exportparts=\"base:tag\" type=\"info\" size={this.size}>\n            +{total - this.maxTagsVisible}\n          </six-tag>\n        );\n      }\n    } else {\n      this.displayLabel = this.extractLabelForSelectedItem(value, items);\n      this.displayTags = [];\n    }\n\n    if (!isValueEmpty(this.value)) {\n      this.touched = true;\n    }\n    if (this.touched && this.input != null) {\n      this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n    }\n  }\n\n  private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]): string {\n    if (value.length === 0 || (value.length === 1 && value[0] === '')) {\n      return '';\n    }\n\n    if (this.options !== null) {\n      const selectedOption = this.options.find((item) => item.value === value[0]);\n      return selectedOption?.value || '';\n    }\n\n    const checkedItem = items.find((item) => item.value === value[0]);\n    return checkedItem ? this.getItemLabel(checkedItem) : '';\n  }\n\n  private syncValueFromItems() {\n    const items = this.getItems();\n    const checkedItems = items.filter((item) => item.checked);\n    const checkedValues = checkedItems.map((item) => item.value);\n    this.value = this.multiple\n      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))\n      : checkedValues.length > 0\n      ? checkedValues[0]\n      : '';\n  }\n\n  render() {\n    const hasSelection = this.hasSelection();\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          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.displayLabel === '',\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.handleSelectAll}\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        >\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            onKeyDown={this.handleKeyDown}\n          >\n            <span class={{ select__label: true, 'select__label--single': !this.displayTags.length }}>\n              {this.displayTags.length > 0 ? (\n                <span part=\"tags\" class=\"select__tags\">\n                  {this.displayTags}\n                </span>\n              ) : (\n                this.displayLabel || this.placeholder\n              )}\n            </span>\n\n            {this.clearable && hasSelection && (\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            {this.hasMenuItems() && (\n              <span part=\"icon\" class=\"select__icon\">\n                <six-icon size=\"medium\">expand_more</six-icon>\n              </span>\n            )}\n\n            {/*\n              The hidden input tricks the browser's built-in validation so it works as expected. We use an input instead\n              of a select because, otherwise, iOS will show a list of options during validation.\n            */}\n            <six-input\n              ref={(el) => (this.input = 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          <six-menu\n            ref={(el) => (this.menu = el)}\n            part=\"menu\"\n            class={{\n              select__menu: true,\n              'select__menu--filtered': this.filter || this.asyncFilter,\n              'select__menu--hidden': !this.hasMenuItems(),\n            }}\n            onSix-menu-item-selected={this.handleMenuSelect}\n            items={this.options}\n            virtualScroll={this.virtualScroll}\n            remove-box-shadow\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </six-menu>\n        </six-dropdown>\n      </FormControl>\n    );\n  }\n\n  private hasSelection() {\n    return this.multiple ? this.value.length > 0 : this.value !== '';\n  }\n}\n"],"mappings":"gOA2CgBA,EAAaC,GAC3B,GAAIC,MAAMC,QAAQF,GAAQ,CACxB,OAAOA,EAAMG,SAAW,C,CAE1B,OAAOH,IAAU,EACnB,CChDA,MAAMI,EAAe,+6PCcrB,IAAIC,EAAK,E,MA6BIC,EAAS,M,0JAIZC,KAAAC,QAAU,YAAYH,IACtBE,KAAAE,QAAU,gBAAgBJ,IAC1BE,KAAAG,WAAa,oBAAoBL,IACjCE,KAAAI,YAAc,qBAAqBN,IAGnCE,KAAAK,QAAU,MACVL,KAAAM,eAAiB,IAAIC,EA+NrBP,KAAAQ,WAAa,KACnBR,KAAKS,SAAW,MAChBT,KAAKU,QAAQC,MAAM,EAGbX,KAAAY,YAAc,KACpBZ,KAAKS,SAAW,KAChBT,KAAKa,SAASF,MAAM,EAGdX,KAAAc,iBAAoBC,IAC1BA,EAAMC,kBACNhB,KAAKiB,cACLjB,KAAKkB,UAAUP,KAAK,CAAElB,MAAOO,KAAKP,MAAO0B,WAAY,MAAO,EAQtDnB,KAAAoB,gBAAmBL,IACzB,MAAMM,EAAmBrB,KAAKsB,WAAWC,QAAQC,GAASA,EAAKC,MAAMC,UAAY,SACjF,MAAMC,EAAUZ,EAAMa,IACtB,MAAMC,EAAUd,EAAMe,KAEtB,GAAIH,IAAY,UAAW,CACzB,M,CAGF,GAAI3B,KAAK+B,QAAU/B,KAAKgC,UAAYH,IAAY,QAAUd,EAAMkB,QAAS,CACvElB,EAAMmB,iBACN,MAAMC,EAAuBd,EAAiBe,MAAMC,IAASA,EAAIC,WAAaD,EAAIE,UAElFlB,EACGE,QAAQiB,IAAYA,EAAOF,WAC3BG,SAASD,GAAYA,EAAOD,QAAUJ,IACzC,MAAMO,EAAerB,EAAiBE,QAAQiB,GAAWA,EAAOD,UAASI,KAAKH,GAAWA,EAAO/C,QAChGO,KAAKP,MAAQ0C,EAAuBO,EAAe,GACnD1C,KAAKkB,UAAUP,KAAK,CAAElB,MAAOO,KAAKP,MAAO0B,WAAY,M,GAIjDnB,KAAA4C,cAAiB7B,I,YACvB,MAAM8B,EAAS9B,EAAM8B,OAErB,MAAMC,EAAQ9C,KAAKsB,WACnB,MAAMyB,EAAYD,EAAM,GACxB,MAAME,EAAWF,EAAMA,EAAMlD,OAAS,GAGtC,GAAIiD,EAAOI,QAAQC,gBAAkB,UAAW,CAC9C,M,CAIF,GAAInC,EAAMa,MAAQ,MAAO,CACvB,GAAI5B,KAAK+B,OAAQ,EACfoB,EAAAnD,KAAKoD,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,M,CAEjB,M,CAIF,GAAI,CAAC,YAAa,WAAWC,SAASvC,EAAMa,KAAM,CAChDb,EAAMmB,iBAGN,IAAKlC,KAAK+B,OAAQ,EAChBwB,EAAAvD,KAAKoD,YAAQ,MAAAG,SAAA,SAAAA,EAAEC,M,CAIjB,GAAIzC,EAAMa,MAAQ,aAAemB,EAAW,CAC1CA,EAAUU,WACV,M,CAGF,GAAI1C,EAAMa,MAAQ,WAAaoB,EAAU,CACvCA,EAASS,WACT,M,EAKJ,IAAKzD,KAAK+B,OAAQ,CAChBhB,EAAMC,kBACND,EAAMmB,kBACNwB,EAAA1D,KAAKoD,YAAQ,MAAAM,SAAA,SAAAA,EAAEF,QACfG,EAAA3D,KAAK4D,QAAI,MAAAD,SAAA,SAAAA,EAAEE,aAAa9C,EAAMa,I,GAI1B5B,KAAA8D,iBAAmB,K,OACzBX,EAAAnD,KAAK+D,OAAG,MAAAZ,SAAA,SAAAA,EAAEa,OAAO,EAGXhE,KAAAiE,iBAAoBlD,IAC1B,MAAMS,EAAOT,EAAMmD,OAAO1C,KAE1B,MAAM2C,EAAW,KACf,GAAInE,KAAKgC,SAAU,CACjB,OAAOhC,KAAKP,MAAM6D,SAAS9B,EAAK/B,OAC3BO,KAAKP,MAAa8B,QAAQ6C,GAAMA,IAAM5C,EAAK/B,QAC5C,IAAIO,KAAKP,MAAO+B,EAAK/B,M,KACpB,CACL,OAAO+B,EAAK/B,K,GAIhBO,KAAKP,MAAQ0E,IAEbnE,KAAKqE,qBACLrE,KAAKkB,UAAUP,KAAK,CAAElB,MAAOO,KAAKP,MAAO0B,WAAY,MAAO,EAGtDnB,KAAAsE,eAAkBvD,I,MACxB,GAAIf,KAAKsC,SAAU,CACjBvB,EAAMmB,iBACN,M,CAGFlC,KAAKuE,cACLpB,EAAAnD,KAAKwE,kBAAc,MAAArB,SAAA,SAAAA,EAAEsB,QAAQzE,KAAK0E,MAClC1E,KAAK+B,OAAS,IAAI,EAGZ/B,KAAA2E,eAAiB,K,OACvBxB,EAAAnD,KAAKwE,kBAAc,MAAArB,SAAA,SAAAA,EAAEyB,UAAU5E,KAAK0E,MACpC1E,KAAK+B,OAAS,KAAK,EAGb/B,KAAA6E,iBAAmB,KACzB7E,KAAK8E,gBAAkBC,EAAQ/E,KAAK0E,KAAM,aAC1C1E,KAAKgF,aAAeD,EAAQ/E,KAAK0E,KAAM,SACvC1E,KAAKiF,iBAAmBF,EAAQ/E,KAAK0E,KAAM,cAC3C1E,KAAKqE,oBAAoB,EAGnBrE,KAAAkF,qBAAwBnE,IAE9B,MAAMoE,EAAOpE,EAAMqE,eACnB,MAAMC,EAAcF,EAAKG,MAAMC,IAC7B,GAAIA,aAAcC,YAAa,CAC7B,MAAMC,EAAUF,EAChB,OAAOE,EAAQC,UAAUC,SAAS,a,KAItC,GAAIN,EAAa,CACftE,EAAMC,kBACNhB,KAAKkB,UAAUP,KAAK,CAAElB,MAAOO,KAAKP,MAAO0B,WAAY,M,iBAlXrC,M,qBACO,M,kBACH,M,sBACI,M,YACV,M,kBACM,G,iBACoB,G,cAGzB,M,oBAMM,E,cAGN,M,UAGJ,G,iBAGO,G,qDAMGyE,E,UAGoB,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,mBAGCA,E,aAGoB,K,mBAIpB,K,CAGxB,oBAAAC,G,MACE,GAAI7F,KAAKsC,UAAYtC,KAAK+B,OAAQ,EAChCoB,EAAAnD,KAAKoD,YAAQ,MAAAD,SAAA,SAAAA,EAAEE,M,EAOnB,iBAAAyC,GACE9F,KAAK6E,kB,CAIP,oBAAAkB,GAEE,MAAMtG,EAAQO,KAAKgG,kBACnBhG,KAAKP,MAAQO,KAAKgC,SAAWvC,EAAQA,EAAM,IAAM,GACjDO,KAAKqE,oB,CAIP,uBAAM4B,GACJ,GAAIjG,KAAKgC,WAAatC,MAAMC,QAAQK,KAAKP,OAAQ,CAC/CO,KAAKP,MAAQ,E,CAGf,IAAKO,KAAKgC,iBAAmBhC,KAAKP,QAAU,SAAU,CACpDO,KAAKP,MAAQ,E,OAGTO,KAAKqE,oB,CAYb,iBAAA6B,G,MACE,GAAIlG,KAAKmG,eAAiBnG,KAAKoG,UAAY,KAAM,CAC/CC,QAAQC,MAAM,uD,EAEhBnD,EAAAnD,KAAK0E,KAAK6B,cAAU,MAAApD,SAAA,SAAAA,EAAEqD,iBAAiB,aAAcxG,KAAK6E,kBAC1D7E,KAAKM,eAAemG,QAAQ,oBAAqB,SAAUzG,KAAK0E,MAChE1E,KAAKM,eAAemG,QAAQ,kBAAmB,OAAQzG,KAAK0E,MAC5D1E,KAAKM,eAAemG,QAAQ,mBAAoB,QAASzG,KAAK0E,K,CAGhE,iBAAAgC,GACE1G,KAAK6E,mBACL,GAAI7E,KAAKgC,UAAYhC,KAAKP,OAAS,KAAM,CACvCO,KAAKP,MAAQO,KAAKgG,iB,EAItB,gBAAAW,GACE,GAAI3G,KAAK4G,OAAS,KAAM,OACxB,MAAMA,EAAQ5G,KAAK4G,MACnB5G,KAAKwE,eAAiB,IAAIqC,gBAAe,IAAM7G,KAAKuE,eAGpDuC,uBAAsB,IAAM9G,KAAKqE,uBAEjCrE,KAAKM,eAAeyG,IAClBH,EACA,kBACAI,GAAUjG,IACR,MAAMkG,EAAeL,EAAMnH,MAC3BO,KAAKiB,cACLjB,KAAKkB,UAAUP,KAAK,CAAElB,MAAOwH,EAAc9F,WAAY,QACvDJ,EAAMC,iBAAiB,GACtBhB,KAAKkH,gBAGVN,EAAMnH,MAAQO,KAAKmH,eAAiBnH,KAAKoH,aAAe,E,CAG1D,oBAAAC,G,OACElE,EAAAnD,KAAK0E,KAAK6B,cAAU,MAAApD,SAAA,SAAAA,EAAEmE,oBAAoB,aAActH,KAAK6E,kBAC7D7E,KAAKM,eAAeiH,W,CAKtB,cAAM9D,CAAS2C,G,MACbpG,KAAKS,SAAW,MAChB0C,EAAAnD,KAAK+D,OAAG,MAAAZ,SAAA,SAAAA,EAAEa,MAAMoC,E,CAGV,YAAAoB,CAAahG,G,QACnB,MAAMiG,GAAOtE,EAAA3B,EAAK+E,cAAU,MAAApD,SAAA,SAAAA,EAAEuE,cAAc,oBAC5C,GAAID,GAAQ,KAAM,CAChB,OAAOE,EAAeF,E,KACjB,CAEL,OAAOlE,EAAA/B,EAAKoG,eAAW,MAAArE,SAAA,EAAAA,EAAI,E,EAIvB,QAAAjC,GACN,GAAItB,KAAKoG,UAAY,KAAM,CACzB,OAAOpG,KAAKoG,QAAQzD,KAAKH,GAAWqF,EAAA,iBAAepI,MAAO+C,EAAO/C,OAAQ+C,EAAOsF,Q,CAGlF,MAAO,IAAI9H,KAAK0E,KAAKqD,iBAAiB,iB,CAGhC,YAAAC,GACN,OAAOhI,KAAKsB,WAAW1B,OAAS,C,CAG1B,eAAAoG,GACN,MAAMiC,EAASvI,MAAMC,QAAQK,KAAKP,OAASO,KAAKP,MAAQO,KAAKP,QAAU,GAAK,GAAK,CAACO,KAAKP,OAEvF,OAAOwI,EAAOtF,IAAIuF,O,CAmBZ,WAAAjH,GACNjB,KAAKP,MAAQO,KAAKgC,SAAW,GAAK,GAClChC,KAAKqE,oB,CAyIC,UAAAE,GACN,GAAIvE,KAAK4D,MAAQ,MAAQ5D,KAAK+D,KAAO,KAAM,OAC3C/D,KAAK4D,KAAKnC,MAAM0G,SAAW,GAAGnI,KAAK+D,IAAIqE,gBAEvC,GAAIpI,KAAKoD,SAAU,CACjBpD,KAAKoD,SAASiF,Y,EAIV,wBAAMhE,GACZ,MAAMvB,EAAQ9C,KAAKsB,WACnB,MAAM7B,EAAQO,KAAKgG,kBAGnBlD,EAAML,SAASjB,GAAUA,EAAKe,QAAU9C,EAAM6D,SAAS9B,EAAK/B,SAG5D,GAAIO,KAAKgC,SAAU,CACjB,MAAMU,EAAyC,GAC/CjD,EAAMgD,SAAS6F,GAAQxF,EAAMH,KAAKnB,GAAUA,EAAK/B,QAAU6I,EAAM5F,EAAa6F,KAAK/G,GAAQ,SAE3FxB,KAAKwI,YAAc9F,EAAaC,KAAKnB,GAEjCqG,EAAA,WACEY,YAAY,WACZC,KAAK,UACLC,KAAM3I,KAAK2I,KACXC,KAAM5I,KAAK4I,KACXC,UAAS,KACTC,QAAS9I,KAAKkF,qBACd6D,UAAW/I,KAAKkF,qBAAoB,kBAClBnE,IAChBA,EAAMC,kBACN,IAAKhB,KAAKsC,SAAU,CAClBd,EAAKe,QAAU,MACfvC,KAAKgJ,oB,IAIRhJ,KAAKwH,aAAahG,MAKzB,GAAIxB,KAAKiJ,eAAiB,GAAKjJ,KAAKwI,YAAY5I,OAASI,KAAKiJ,eAAgB,CAC5E,MAAMC,EAAQlJ,KAAKwI,YAAY5I,OAC/BI,KAAKoH,aAAe,GACpBpH,KAAKwI,YAAcxI,KAAKwI,YAAYW,MAAM,EAAGnJ,KAAKiJ,gBAClDjJ,KAAKwI,YAAYD,KACfV,EAAA,WAASY,YAAY,WAAWC,KAAK,OAAOC,KAAM3I,KAAK2I,MAAI,IACvDO,EAAQlJ,KAAKiJ,gB,MAIhB,CACLjJ,KAAKoH,aAAepH,KAAKoJ,4BAA4B3J,EAAOqD,GAC5D9C,KAAKwI,YAAc,E,CAGrB,IAAKhJ,EAAaQ,KAAKP,OAAQ,CAC7BO,KAAKK,QAAU,I,CAEjB,GAAIL,KAAKK,SAAWL,KAAK4G,OAAS,KAAM,CACtC5G,KAAK4G,MAAMnH,MAAQC,MAAMC,QAAQK,KAAKP,OAASO,KAAKP,MAAM4J,KAAK,KAAOrJ,KAAKP,K,EAIvE,2BAAA2J,CAA4B3J,EAAiBqD,GACnD,GAAIrD,EAAMG,SAAW,GAAMH,EAAMG,SAAW,GAAKH,EAAM,KAAO,GAAK,CACjE,MAAO,E,CAGT,GAAIO,KAAKoG,UAAY,KAAM,CACzB,MAAMkD,EAAiBtJ,KAAKoG,QAAQd,MAAM9D,GAASA,EAAK/B,QAAUA,EAAM,KACxE,OAAO6J,IAAc,MAAdA,SAAc,SAAdA,EAAgB7J,QAAS,E,CAGlC,MAAM8J,EAAczG,EAAMwC,MAAM9D,GAASA,EAAK/B,QAAUA,EAAM,KAC9D,OAAO8J,EAAcvJ,KAAKwH,aAAa+B,GAAe,E,CAGhD,kBAAAP,GACN,MAAMlG,EAAQ9C,KAAKsB,WACnB,MAAMoB,EAAeI,EAAMvB,QAAQC,GAASA,EAAKe,UACjD,MAAMiH,EAAgB9G,EAAaC,KAAKnB,GAASA,EAAK/B,QACtDO,KAAKP,MAAQO,KAAKgC,SACdhC,KAAKgG,kBAAkBzE,QAAQ+G,GAAQkB,EAAclG,SAASgF,KAC9DkB,EAAc5J,OAAS,EACvB4J,EAAc,GACd,E,CAGN,MAAAC,G,MACE,MAAMtC,EAAenH,KAAKmH,eAE1B,OACEU,EAAC6B,EAAW,CACVzJ,QAASD,KAAKC,QACd6H,MAAO9H,KAAK8H,MACZ5H,QAASF,KAAKE,QACd8E,aAAchF,KAAKgF,aACnB7E,WAAYH,KAAKG,WACjBwJ,SAAU3J,KAAK2J,SACf7E,gBAAiB9E,KAAK8E,gBACtB1E,YAAaJ,KAAKI,YAClBwJ,UAAW5J,KAAK4J,UAChBC,eAAgB7J,KAAK6J,eACrB5E,iBAAkBjF,KAAKiF,iBACvB0D,KAAM3I,KAAK2I,KACXmB,aAAc9J,KAAK8D,iBACnBxB,SAAUtC,KAAKsC,SACfyH,SAAU/J,KAAK+J,SACfC,aAAchK,KAAKiK,SAEnBpC,EAAA,gBACEqC,KAAK,OACLC,IAAM5E,GAAQvF,KAAKoD,SAAWmC,EAC9B6E,MAAOpK,KAAKoK,MACZC,eAAgBrK,KAAKgC,SACrBsI,kBAAmBtK,KAAK0E,KACxB6F,2BAA4BvK,KAAKwK,aACjCC,MAAO,CACLC,OAAQ,KACR,eAAgB1K,KAAK+B,OACrB,kBAAiBoB,EAAAnD,KAAKP,SAAK,MAAA0D,SAAA,SAAAA,EAAEvD,UAAW,EACxC,kBAAmBI,KAAKS,SACxB,oBAAqBT,KAAK6I,UAC1B,mBAAoB7I,KAAKsC,SACzB,mBAAoBtC,KAAKgC,SACzB,mBAAoBhC,KAAKgC,UAAYmF,EACrC,8BAA+BnH,KAAKoH,eAAiB,GACrD,gBAAiBpH,KAAK2I,OAAS,QAC/B,iBAAkB3I,KAAK2I,OAAS,SAChC,gBAAiB3I,KAAK2I,OAAS,QAC/B,eAAgB3I,KAAK4I,KACrB,kBAAmB5I,KAAKiK,SAE1BlB,UAAW/I,KAAKoB,gBAAe,sBACVpB,KAAKsE,eAAc,sBACnBtE,KAAK2E,eAC1BgG,kBAAmB3K,KAAK2K,kBACxBC,eAAgB5K,KAAK4K,eACrBrJ,OAAQvB,KAAKuB,OACbsJ,YAAa7K,KAAK6K,aAElBhD,EAAA,OACEJ,KAAK,UACL0C,IAAM5E,GAAQvF,KAAK+D,IAAMwB,EACzBzF,GAAIE,KAAKC,QACTwK,MAAO,CACLK,YAAa,KACb,oBAAqB9K,KAAK+K,KAC1B,4BAA6B/K,KAAKwK,cAEpCQ,KAAK,WAAU,kBACEhL,KAAKE,QAAO,mBACXF,KAAKG,WAAU,gBACnB,OAAM,gBACLH,KAAK+B,OAAS,OAAS,QACtCkJ,SAAUjL,KAAKsC,UAAY,EAAI,EAC/B4I,OAAQlL,KAAKQ,WACb2K,QAASnL,KAAKY,YACdmI,UAAW/I,KAAK4C,eAEhBiF,EAAA,QAAM4C,MAAO,CAAEW,cAAe,KAAM,yBAA0BpL,KAAKwI,YAAY5I,SAC5EI,KAAKwI,YAAY5I,OAAS,EACzBiI,EAAA,QAAMqC,KAAK,OAAOO,MAAM,gBACrBzK,KAAKwI,aAGRxI,KAAKoH,cAAgBpH,KAAKqL,aAI7BrL,KAAK6I,WAAa1B,GACjBU,EAAA,mBACEY,YAAY,oBACZgC,MAAM,gBACNa,KAAK,QACL3C,KAAK,QACLG,QAAS9I,KAAKc,iBACdyK,SAAS,OAIZvL,KAAKgI,gBACJH,EAAA,QAAMqC,KAAK,OAAOO,MAAM,gBACtB5C,EAAA,YAAUc,KAAK,UAAQ,gBAQ3Bd,EAAA,aACEsC,IAAM5E,GAAQvF,KAAK4G,MAAQrB,EAC3BkF,MAAO,CACLe,cAAe,KACf,yBAA0BxL,KAAKwK,cAChC,cACW,OACZT,SAAU/J,KAAK+J,SACfoB,QAASnL,KAAKY,YACdiI,UAAW7I,KAAK6I,UAChBwC,YAAarL,KAAKqL,YAClBzC,KAAM5I,KAAK4I,KACXtG,SAAUtC,KAAKsC,SACfqG,KAAM3I,KAAK2I,KACXsC,UAAW,KAIfpD,EAAA,YACEsC,IAAM5E,GAAQvF,KAAK4D,KAAO2B,EAC1B2E,KAAK,OACLO,MAAO,CACLgB,aAAc,KACd,yBAA0BzL,KAAKuB,QAAUvB,KAAK6K,YAC9C,wBAAyB7K,KAAKgI,gBAC/B,2BACyBhI,KAAKiE,iBAC/BnB,MAAO9C,KAAKoG,QACZD,cAAenG,KAAKmG,cAAa,0BAGjC0B,EAAA,QAAM6D,aAAc1L,KAAK6E,qB,CAO3B,YAAAsC,GACN,OAAOnH,KAAKgC,SAAWhC,KAAKP,MAAMG,OAAS,EAAII,KAAKP,QAAU,E"}

package/dist/ui-library/p-b6f47c9d.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,g as e}from"./p-6153045b.js";import{I as r}from"./p-0f510624.js";import{D as n,b as o,a as h}from"./p-698bb2c8.js";import{E as a}from"./p-7d95def3.js";import{h as c}from"./p-15559d38.js";import{a as l,m as p}from"./p-59210f0b.js";const u=()=>{const i=new Date;return{hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:true}};const m=12;const d=i=>i>m?i-m:i;const f=()=>{const i=new Date;const t=i.getHours();return{hours:d(t),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:false,period:t>=m?"PM":"AM"}};const g=(i=true)=>i?u():f();const x=(i,t)=>{const s=i.split(":");const e=t.split(":");return s.length===e.length};const k=(i,t)=>{const s=i.split(":");const e=t.split(":");if(!x(i,t)){console.error(`Timestring did not match expected format.\nExpected format: ${t}\nReceived timestring: ${i}`)}const r={};s.forEach(((i,t)=>{const s=e[t];switch(s){case"HH":r.hours=Number(i);r.has24Hours=true;break;case"hh":r.hours=Number(i);r.has24Hours=false;break;case"mm":r.minutes=Number(i);break;case"ss":r.seconds=Number(i);break;case"ms":r.milliseconds=Number(i);break;case"aa":r.period=i.toUpperCase()==="PM"?"PM":"AM"}}));return r};const b=(i,t)=>{if(i==null){return""}const s=t.split(":");return s.map((t=>{switch(t){case"HH":case"hh":return String(i.hours).padStart(2,"0");case"mm":return String(i.minutes).padStart(2,"0");case"ss":return String(i.seconds).padStart(2,"0");case"ms":return String(i.milliseconds).padStart(3,"0");case"aa":return String(i.period)}})).join(":")};const v=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{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}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";const _=145;const y=class{constructor(s){i(this,s);this.sixChange=t(this,"six-timepicker-change",7);this.sixChangeDebounced=t(this,"six-timepicker-change-debounced",7);this.sixClear=t(this,"six-timepicker-clear",7);this.eventListeners=new a;this.handlePickerChange=(i,t)=>{i.stopPropagation();if(this.popupValue==null){return}this.popupValue[t]=i.detail;const s=b(this.popupValue,this.format);this.value=s;this.sixChange.emit({changedProperty:t,value:this.popupValue,valueAsString:s})};this.handleDocumentMouseDown=i=>{const t=i.composedPath();if(!t.includes(this.host)){this.closePopup();return}};this.handleClearClick=i=>{i.stopPropagation();this.value="";this.sixClear.emit();this.sixChange.emit({value:{},valueAsString:""})};this.format="HH:mm:ss";this.separator=":";this.value="";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.placement=undefined;this.size="medium";this.required=false;this.placeholder=undefined;this.errorText="";this.errorTextCount=undefined;this.label="";this.invalid=false;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false;this.timeout=n;this.interval=o;this.defaultTime=undefined;this.debounce=n;this.isPopupContentUp=false;this.isDropDownContentUp=false;this.popupValue={}}async resizeHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}async scrollHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}valueChanged(){this.updateValue()}async setFocus(i){var t;(t=this.inputElement)===null||t===void 0?void 0:t.setFocus(i)}connectedCallback(){this.eventListeners.forward("six-timepicker-change","change",this.host)}componentWillLoad(){this.updateValue();if(this.inline){this.open=true}if(this.open){this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}componentDidLoad(){if(this.inputElement==null)return;const i=this.inputElement;this.eventListeners.add(this.host,"six-timepicker-change",h((i=>this.sixChangeDebounced.emit(i.detail)),this.debounce));this.eventListeners.add(i,"six-input-input",h((t=>{t.stopPropagation();if(!x(i.value,this.format)){this.value=i.value;this.sixChange.emit({value:{},valueAsString:""});return}this.value=i.value;this.popupValue=k(i.value,this.format);this.sixChange.emit({value:this.popupValue,valueAsString:b(this.popupValue,this.format)})}),this.debounce))}componentDidRender(){l(this.hoist,this.popup,this.inputElement,this.wrapper,_,(i=>this.isDropDownContentUp=i))}disconnectedCallback(){this.eventListeners.removeAll()}updateValue(){if(typeof this.value!=="string"||!x(this.value,this.format)){this.value=""}if(this.value===""){if(this.defaultTime==null){this.popupValue=g(this.is24HourClock())}else{this.popupValue=k(this.defaultTime,this.format)}}else{this.popupValue=k(this.value,this.format)}}calcIsPopupContentUp(){if(this.inputElement==null||this.wrapper==null){return}const i=this.inputElement.getBoundingClientRect();const t=this.wrapper.getBoundingClientRect();const s=Math.max(t.height,_);const e=i.y>window.innerHeight/2;this.isPopupContentUp=e&&window.innerHeight<i.bottom+s}moveOpenHoistedPopup(){p(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,_)}getSixTimeUnitPicker(i){return s("six-item-picker",{class:i.class,timeout:this.timeout,interval:this.interval,padded:true,min:i.min,max:i.max,value:this.popupValue[i.propertyName],items:i.items,type:i.type||r.NUMBER,"padding-length":i.paddingLength,"onSix-item-picker-change":t=>this.handlePickerChange(t,i.propertyName)})}getHour24Picker(){if(!this.is24HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:23,propertyName:"hours"})}is24HourClock(){return this.format.includes("HH")}getHour12Picker(){if(!this.is12HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:11,propertyName:"hours"})}is12HourClock(){return this.format.includes("hh")}getAmPmPicker(){if(!this.is12HourClock()){return}const i=["AM","PM"];return this.getSixTimeUnitPicker({items:i,type:r.CUSTOM,propertyName:"period"})}getMinutePicker(){if(!this.format.includes("mm")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"minutes"})}getSecondsPicker(){if(!this.format.includes("ss")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"seconds"})}getMillisecondsPicker(){if(!this.format.includes("ms")){return}return this.getSixTimeUnitPicker({min:0,max:999,class:"timepicker__item--wide",paddingLength:3,propertyName:"milliseconds"})}getSeparator(){return s("div",{class:"timepicker__separator"},s("span",null,this.separator))}getContent(){const i=[this.getHour24Picker(),this.getHour12Picker(),this.getMinutePicker(),this.getSecondsPicker(),this.getMillisecondsPicker()];const t=i.filter((i=>i!==undefined));return t.map(((i,s)=>{if(s===t.length-1){return[i]}return[i,this.getSeparator()]}))}openPopup(){if(!this.open&&!this.disabled){this.open=true;this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown)}renderClearable(){return this.clearable&&s("button",{slot:"suffix",class:{timepicker_clear:true,"timepicker_clear--right":this.iconPosition==="left","timepicker_clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},s("six-icon",{size:"small"},"clear"))}renderCustomIcon(){const i=c(this.host,"custom-icon")?s("slot",{name:"custom-icon"}):s("six-icon",{size:this.size==="large"?"medium":this.size},"watch_later");return s("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},i)}render(){return s("div",{part:"container",ref:i=>this.wrapper=i,class:"timepicker__container"},s("six-input",{ref:i=>this.inputElement=i,part:"input",onClick:()=>this.openPopup(),value:this.value,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,errorTextCount:this.errorTextCount,errorText:this.errorText,invalid:this.invalid,size:this.size,name:this.name,label:this.label,required:this.required,class:{"input--empty":this.value==="","input--hide":this.inline}},this.renderCustomIcon(),this.renderClearable(),c(this.host,"label")?s("span",{slot:"label"},s("slot",{name:"label"})):null,c(this.host,"error-text")?s("span",{slot:"error-text"},s("slot",{name:"error-text"})):null),this.open&&s("div",{ref:i=>this.popup=i,part:"popup",class:{timepicker__popup:true,"timepicker__popup--is-up":this.placement==null?this.placement==="top":this.isPopupContentUp,"timepicker__popup--is-inline":this.inline}},...this.getContent(),this.getAmPmPicker()))}get host(){return e(this)}static get watchers(){return{value:["valueChanged"]}}};y.style=v;export{y as six_timepicker};
-//# sourceMappingURL=p-b6f47c9d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","getCurrentTime","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","timeParts","formatParts","console","error","time","forEach","timeStringPart","i","formatStringPart","Number","toUpperCase","createTimeString","map","timeFormatPart","String","padStart","join","sixTimepickerCss","MIN_POPUP_HEIGHT","SixTimepicker","this","eventListeners","EventListeners","handlePickerChange","event","property","stopPropagation","popupValue","detail","timeString","value","sixChange","emit","changedProperty","valueAsString","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","sixClear","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","resizeHandler","calcIsPopupContentUp","moveOpenHoistedPopup","scrollHandler","valueChanged","updateValue","setFocus","options","_a","inputElement","connectedCallback","forward","componentWillLoad","inline","open","add","document","componentDidLoad","debounce","sixChangeDebounced","componentDidRender","adjustPopupForHoisting","hoist","popup","wrapper","isUp","isDropDownContentUp","disconnectedCallback","removeAll","defaultTime","is24HourClock","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","isPopupContentUp","bottom","movePopup","getSixTimeUnitPicker","params","h","class","timeout","interval","padded","min","propertyName","items","type","ItemPickerType","NUMBER","paddingLength","getHour24Picker","getHour12Picker","is12HourClock","getAmPmPicker","CUSTOM","getMinutePicker","getSecondsPicker","getMillisecondsPicker","getSeparator","separator","getContent","elementsInOrder","visibleElements","filter","el","undefined","idx","openPopup","disabled","remove","renderClearable","clearable","slot","timepicker_clear","iconPosition","onClick","tabindex","size","renderCustomIcon","icon","hasSlot","name","part","prefix","render","ref","placeholder","readonly","errorTextCount","errorText","invalid","label","required","timepicker__popup","placement"],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' | 'PM';\n\nexport interface Time {\n  hours?: number;\n  minutes?: number;\n  seconds?: number;\n  milliseconds?: number;\n  has24Hours?: boolean; // true => 24h, false => 12h\n  period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n  | 'HH' // 24h\n  | 'hh' // 12h\n  | 'mm' // minutes\n  | 'ss' // seconds\n  | 'ms' // milliseconds\n  | 'aa'; // period (AM/PM)\n\n/*\n * Supported time formats\n */\nexport type TimeFormat =\n  | 'HH:mm:ss'\n  | 'hh:mm:ss:aa'\n  | 'HH:mm:ss:ms'\n  | 'hh:mm:ss:ms:aa'\n  | 'HH:mm'\n  | 'hh:mm:aa'\n  | 'HH'\n  | 'hh:aa'\n  | 'mm'\n  | 'ss'\n  | 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n  const now = new Date();\n  return {\n    hours: now.getHours(),\n    minutes: now.getMinutes(),\n    seconds: now.getSeconds(),\n    milliseconds: now.getMilliseconds(),\n    has24Hours: true,\n  };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n  hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n  const now = new Date();\n  const hours = now.getHours();\n  return {\n    hours: getHoursIn12HourFormat(hours),\n    minutes: now.getMinutes(),\n    seconds: now.getSeconds(),\n    milliseconds: now.getMilliseconds(),\n    has24Hours: false,\n    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n  };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n  return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n  const timeStringParts = timeStr.split(':');\n  const timeFormatParts = format.split(':');\n  return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n  const timeParts = timeStr.split(':');\n  const formatParts = format.split(':') as TimeFormatChar[];\n\n  if (!isValidTimeString(timeStr, format)) {\n    console.error(\n      `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n    );\n  }\n\n  const time: Time = {};\n\n  timeParts.forEach((timeStringPart, i) => {\n    const formatStringPart: TimeFormatChar = formatParts[i];\n    switch (formatStringPart) {\n      case 'HH':\n        time.hours = Number(timeStringPart);\n        time.has24Hours = true;\n        break;\n      case 'hh':\n        time.hours = Number(timeStringPart);\n        time.has24Hours = false;\n        break;\n      case 'mm':\n        time.minutes = Number(timeStringPart);\n        break;\n      case 'ss':\n        time.seconds = Number(timeStringPart);\n        break;\n      case 'ms':\n        time.milliseconds = Number(timeStringPart);\n        break;\n      case 'aa':\n        time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n    }\n  });\n  return time;\n};\n\nexport const createTimeString = (time: Time | undefined, format: TimeFormat): string => {\n  if (time == null) {\n    return '';\n  }\n\n  const formatParts = format.split(':') as TimeFormatChar[];\n\n  return formatParts\n    .map((timeFormatPart) => {\n      switch (timeFormatPart) {\n        case 'HH':\n        case 'hh':\n          return String(time.hours).padStart(2, '0');\n        case 'mm':\n          return String(time.minutes).padStart(2, '0');\n        case 'ss':\n          return String(time.seconds).padStart(2, '0');\n        case 'ms':\n          return String(time.milliseconds).padStart(3, '0');\n        case 'aa':\n          return String(time.period);\n      }\n    })\n    .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n  display: block;\n  font-family: var(--six-font-family);\n}\n\n.timepicker {\n  &_clear {\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    &--right {\n      right: 0;\n      position: absolute;\n    }\n\n    &--left {\n      right: 35px;\n      position: absolute;\n    }\n  }\n\n  &__container {\n    position: relative;\n  }\n\n  &__popup {\n    display: flex;\n    justify-content: center;\n    min-width: min-content;\n    min-height: 145px;\n    background-color: white;\n    padding: 0.5em 0.5em 1.5em;\n    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n    user-select: none;\n    position: absolute;\n    z-index: var(--six-z-index-dropdown);\n    right: 0;\n    left: 0;\n\n    &--is-up {\n      bottom: 100%;\n    }\n\n    &--is-inline {\n      position: initial;\n      box-shadow: none;\n      border: 1px solid var(--six-color-web-rock-400);\n    }\n  }\n\n  &__separator {\n    display: flex;\n    align-items: center;\n  }\n\n  &__item {\n    &--wide {\n      padding-left: 0.5rem;\n      padding-right: 0.5rem;\n    }\n  }\n}\n\n.input--empty .timepicker_clear {\n  visibility: hidden;\n}\n\n.input--hide {\n  display: none;\n}\n\n// Icon position\n.prefix {\n  cursor: pointer;\n\n  &--right {\n    right: 0;\n    display: inline-flex;\n    position: absolute;\n    font-size: inherit;\n    color: var(--six-input-icon-color);\n    border: none;\n    background: none;\n    margin-right: var(--six-input-spacing-medium);\n    transition: var(--six-transition-fast) color;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n  createTimeString,\n  getCurrentTime,\n  isValidTimeString,\n  parseTimeString,\n  Time,\n  TimeFormat,\n  TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n  value?: Time;\n  valueAsString: string;\n  changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n  min?: number;\n  max?: number;\n  items?: string[];\n  type?: ItemPickerType;\n  class?: string;\n  paddingLength?: number;\n  propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n *\n */\n@Component({\n  tag: 'six-timepicker',\n  styleUrl: 'six-timepicker.scss',\n  shadow: true,\n})\nexport class SixTimepicker {\n  private eventListeners = new EventListeners();\n  private popup?: HTMLElement;\n  private wrapper?: HTMLElement;\n  private inputElement?: HTMLSixInputElement;\n\n  @Element() host!: HTMLSixTimepickerElement;\n\n  /**\n   * Define the time format. Valid formats are:\n   *\n   * HH:mm:ss\n   * hh:mm:ss:aa\n   * HH:mm:ss:ms\n   * hh:mm:ss:ms:aa\n   * HH:mm\n   * hh:mm:aa\n   * HH\n   * hh:aa\n   * mm\n   * ss\n   * ms\n   *\n   * where HH is the 24 hour format\n   * and hh is the 12 hour format\n   *\n   * Please notice that when using the 12-hour-clock (hh)\n   * you always need a period indicator (aa). So the time can be parsed as either am or pm\n   * */\n  @Prop() format: TimeFormat = 'HH:mm:ss';\n\n  /**\n   * Define the separator to be shown between the time unit pickers.\n   * Please be aware that this property will modify the displayed separator only.\n   * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n   * */\n  @Prop() separator = ':';\n\n  /**\n   * The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Indicates whether the timepicker should be shown as an inline (always open) component */\n  @Prop({ reflect: true }) inline = false;\n\n  /**\n   * If `true` the user can only select a time via the timepicker but not directly edit the input field.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true` the component is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The enforced placement of the dropdown panel.\n   */\n  @Prop() placement?: 'top' | 'bottom';\n\n  /** Timepicker size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /**\n   * The placeholder defines what text to be shown on the input element\n   */\n  @Prop() placeholder?: string;\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\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  /** The input's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\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  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set the position of the icon */\n  @Prop() iconPosition: 'left' | 'right' = 'left';\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  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n   */\n  @Prop() defaultTime?: string;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n   * (and keep pressed) and once you release\n   */\n  @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Emitted when the timepicker's value changes\n   */\n  @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the timepicker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the clear button is activated.\n   */\n  @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  @State() isPopupContentUp = false;\n\n  @State() isDropDownContentUp = false;\n\n  @Listen('resize', { target: 'window' })\n  async resizeHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  @Listen('scroll', { target: 'window' })\n  async scrollHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.updateValue();\n  }\n\n  /** Sets focus on the datepickers input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.inputElement?.setFocus(options);\n  }\n\n  /*\n   * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n   * when switching between formats\n   */\n  @State() private popupValue: Time = {};\n\n  connectedCallback() {\n    this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n  }\n\n  componentWillLoad() {\n    this.updateValue();\n\n    if (this.inline) {\n      this.open = true;\n    }\n\n    if (this.open) {\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n    const inputElement = this.inputElement;\n\n    // emit debounced change event\n    this.eventListeners.add(\n      this.host,\n      'six-timepicker-change',\n      debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n    );\n\n    // update value and popup value based on input-element value\n    this.eventListeners.add(\n      inputElement,\n      'six-input-input',\n      debounce((event: Event) => {\n        event.stopPropagation();\n\n        // emit empty event if time string is invalid\n        if (!isValidTimeString(inputElement.value, this.format)) {\n          this.value = inputElement.value;\n          this.sixChange.emit({\n            value: {},\n            valueAsString: '',\n          });\n          return;\n        }\n\n        // update value and popup value, and emit the new value\n        this.value = inputElement.value;\n        this.popupValue = parseTimeString(inputElement.value, this.format);\n        this.sixChange.emit({\n          value: this.popupValue,\n          valueAsString: createTimeString(this.popupValue, this.format),\n        });\n      }, this.debounce)\n    );\n  }\n\n  componentDidRender() {\n    adjustPopupForHoisting(\n      this.hoist,\n      this.popup,\n      this.inputElement,\n      this.wrapper,\n      MIN_POPUP_HEIGHT,\n      (isUp) => (this.isDropDownContentUp = isUp)\n    );\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n  private updateValue() {\n    // normalize value\n    if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {\n      this.value = '';\n    }\n\n    // update popup value\n    if (this.value === '') {\n      if (this.defaultTime == null) {\n        this.popupValue = getCurrentTime(this.is24HourClock());\n      } else {\n        this.popupValue = parseTimeString(this.defaultTime, this.format);\n      }\n    } else {\n      this.popupValue = parseTimeString(this.value, this.format);\n    }\n  }\n\n  private calcIsPopupContentUp() {\n    if (this.inputElement == null || this.wrapper == null) {\n      return;\n    }\n\n    const inputBoundingRect = this.inputElement.getBoundingClientRect();\n    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n    this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n  }\n\n  private moveOpenHoistedPopup() {\n    movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n  }\n\n  private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n    // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n    event.stopPropagation();\n    if (this.popupValue == null) {\n      return;\n    }\n\n    // update the internal state\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this.popupValue[property] = event.detail;\n\n    const timeString = createTimeString(this.popupValue, this.format);\n\n    // update the input value\n    this.value = timeString;\n\n    // emit change event\n    this.sixChange.emit({\n      changedProperty: property,\n      value: this.popupValue,\n      valueAsString: timeString,\n    });\n  };\n\n  private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n    return (\n      <six-item-picker\n        class={params.class}\n        timeout={this.timeout}\n        interval={this.interval}\n        padded\n        min={params.min}\n        max={params.max}\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        value={this.popupValue[params.propertyName]}\n        items={params.items}\n        type={params.type || ItemPickerType.NUMBER}\n        padding-length={params.paddingLength}\n        onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n      ></six-item-picker>\n    );\n  }\n\n  private getHour24Picker() {\n    if (!this.is24HourClock()) {\n      return;\n    }\n    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n  }\n\n  private is24HourClock() {\n    return this.format.includes('HH');\n  }\n\n  private getHour12Picker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n  }\n\n  private is12HourClock() {\n    return this.format.includes('hh');\n  }\n\n  private getAmPmPicker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n    const items = ['AM', 'PM'];\n    return this.getSixTimeUnitPicker({\n      items,\n      type: ItemPickerType.CUSTOM,\n      propertyName: 'period',\n    });\n  }\n\n  private getMinutePicker() {\n    if (!this.format.includes('mm')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n  }\n\n  private getSecondsPicker() {\n    if (!this.format.includes('ss')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n  }\n\n  private getMillisecondsPicker() {\n    if (!this.format.includes('ms')) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({\n      min: 0,\n      max: 999,\n      class: 'timepicker__item--wide',\n      paddingLength: 3,\n      propertyName: 'milliseconds',\n    });\n  }\n\n  private getSeparator() {\n    return (\n      <div class=\"timepicker__separator\">\n        <span>{this.separator}</span>\n      </div>\n    );\n  }\n\n  private getContent() {\n    const elementsInOrder = [\n      this.getHour24Picker(),\n      this.getHour12Picker(),\n      this.getMinutePicker(),\n      this.getSecondsPicker(),\n      this.getMillisecondsPicker(),\n    ];\n\n    const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n    return visibleElements.map((el, idx) => {\n      if (idx === visibleElements.length - 1) {\n        return [el];\n      }\n\n      return [el, this.getSeparator()];\n    });\n  }\n\n  private openPopup() {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  private closePopup() {\n    if (this.inline) {\n      return;\n    }\n\n    this.open = false;\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n  }\n\n  private handleDocumentMouseDown = (event: Event) => {\n    // Close when clicking outside the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.host)) {\n      this.closePopup();\n      return;\n    }\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.value = '';\n    this.sixClear.emit();\n    this.sixChange.emit({\n      value: {},\n      valueAsString: '',\n    });\n  };\n\n  private renderClearable() {\n    return (\n      this.clearable && (\n        <button\n          slot=\"suffix\"\n          class={{\n            timepicker_clear: true,\n            'timepicker_clear--right': this.iconPosition === 'left',\n            'timepicker_clear--left': this.iconPosition === 'right',\n          }}\n          type=\"button\"\n          onClick={this.handleClearClick}\n          tabindex=\"-1\"\n        >\n          <six-icon size=\"small\">clear</six-icon>\n        </button>\n      )\n    );\n  }\n\n  private renderCustomIcon() {\n    const icon = hasSlot(this.host, 'custom-icon') ? (\n      <slot name=\"custom-icon\"></slot>\n    ) : (\n      <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n    );\n\n    return (\n      <span\n        slot=\"prefix\"\n        part=\"icon\"\n        class={{\n          prefix: true,\n          'prefix--right': this.iconPosition === 'right',\n        }}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  render() {\n    return (\n      <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          part=\"input\"\n          onClick={() => this.openPopup()}\n          value={this.value}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          disabled={this.disabled}\n          errorTextCount={this.errorTextCount}\n          errorText={this.errorText}\n          invalid={this.invalid}\n          size={this.size}\n          name={this.name}\n          label={this.label}\n          required={this.required}\n          class={{\n            'input--empty': this.value === '',\n            'input--hide': this.inline,\n          }}\n        >\n          {this.renderCustomIcon()}\n          {this.renderClearable()}\n          {hasSlot(this.host, 'label') ? (\n            <span slot=\"label\">\n              <slot name=\"label\" />\n            </span>\n          ) : null}\n          {hasSlot(this.host, 'error-text') ? (\n            <span slot=\"error-text\">\n              <slot name=\"error-text\" />\n            </span>\n          ) : null}\n        </six-input>\n        {this.open && (\n          <div\n            ref={(el) => (this.popup = el)}\n            part=\"popup\"\n            class={{\n              timepicker__popup: true,\n              'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n              'timepicker__popup--is-inline': this.inline,\n            }}\n          >\n            {...this.getContent()}\n            {this.getAmPmPicker()}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-c03ebf7d.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,g as s}from"./p-6153045b.js";import{h as l,g as a}from"./p-15559d38.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:"header" "middle" "footer"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-elevation-8dp)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}';const r=class{constructor(t){i(this,t);this.sixTileClose=e(this,"six-tile-closed",7);this.sixTileSelected=e(this,"six-tile-selected",7);this.handleSlotChange=()=>{this.hasIconSlot=l(this.host,"icon");this.hasLabelSlot=l(this.host,"label");if(this.hasIconSlot){const i=a(this.host,"icon");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}if(this.hasLabelSlot){const i=a(this.host,"label");i===null||i===void 0?void 0:i.addEventListener("click",this.handleClickEvent)}};this.handleCloseClickEvent=()=>{this.visible=false;this.sixTileClose.emit()};this.handleClickEvent=()=>{this.sixTileSelected.emit()};this.label="";this.iconName=undefined;this.closeable=true;this.elevated=false;this.disableTooltip=true;this.disabled=false;this.size="medium";this.visible=true;this.hasIconSlot=false;this.hasLabelSlot=false}async hide(){this.visible=false}async show(){this.visible=true}componentWillLoad(){this.handleSlotChange()}render(){return t("six-tooltip",{disabled:this.disableTooltip||this.label==="",content:this.label},t("div",{part:"base",class:{tile:true,"tile--visible":this.visible,"tile--small":this.size==="small","tile--medium":this.size==="medium","tile--large":this.size==="large","tile--elevated":this.elevated}},t("div",{part:"header",class:"tile__header"},t("six-icon-button",{class:{"tile__header--hidden":!this.closeable},name:"close",size:d(this.size),onClick:this.handleCloseClickEvent})),t("div",{part:"body",class:"tile__body"},this.iconName&&t("six-icon",{onClick:this.handleClickEvent,size:n(this.size)},this.iconName),this.hasIconSlot&&t("slot",{name:"icon"})),t("div",{part:"footer",class:{"tile__footer--small":this.size==="small","tile__footer--medium":this.size==="medium","tile__footer--large":this.size==="large"}},this.label&&t("div",{class:{".label__footer":true},onClick:this.handleClickEvent},this.label),this.hasLabelSlot&&t("slot",{name:"label"}))))}get host(){return s(this)}};const d=i=>({small:"xxSmall",medium:"medium",large:"medium"}[i]);const n=i=>({small:"xLarge",medium:"xxLarge",large:"xxxLarge"}[i]);r.style=o;export{r as six_tile};
-//# sourceMappingURL=p-c03ebf7d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixTileCss","SixTile","this","handleSlotChange","hasIconSlot","hasSlot","host","hasLabelSlot","slot","getSlot","addEventListener","handleClickEvent","handleCloseClickEvent","visible","sixTileClose","emit","sixTileSelected","hide","show","componentWillLoad","render","h","disabled","disableTooltip","label","content","part","class","tile","size","elevated","closeable","name","closeIconSize","onClick","iconName","iconSize","small","medium","large"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-elevation-8dp);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"mappings":"oGAAA,MAAMA,EAAa,moE,MCcNC,EAAO,M,0HAoDVC,KAAAC,iBAAmB,KACzBD,KAAKE,YAAcC,EAAQH,KAAKI,KAAM,QACtCJ,KAAKK,aAAeF,EAAQH,KAAKI,KAAM,SAEvC,GAAIJ,KAAKE,YAAa,CACpB,MAAMI,EAAOC,EAAQP,KAAKI,KAAM,QAChCE,IAAI,MAAJA,SAAI,SAAJA,EAAME,iBAAiB,QAASR,KAAKS,iB,CAGvC,GAAIT,KAAKK,aAAc,CACrB,MAAMC,EAAOC,EAAQP,KAAKI,KAAM,SAChCE,IAAI,MAAJA,SAAI,SAAJA,EAAME,iBAAiB,QAASR,KAAKS,iB,GA+DjCT,KAAAU,sBAAwB,KAC9BV,KAAKW,QAAU,MACfX,KAAKY,aAAaC,MAAM,EAGlBb,KAAAS,iBAAmB,KACzBT,KAAKc,gBAAgBD,MAAM,E,WAhIb,G,uCAMI,K,cAGD,M,oBAGM,K,cAGW,M,UAG0B,S,aAE3C,K,iBAoBI,M,kBAEC,K,CAZxB,UAAME,GACJf,KAAKW,QAAU,K,CAKjB,UAAMK,GACJhB,KAAKW,QAAU,I,CAOjB,iBAAAM,GACEjB,KAAKC,kB,CAkBP,MAAAiB,GACE,OACEC,EAAA,eAAaC,SAAUpB,KAAKqB,gBAAkBrB,KAAKsB,QAAU,GAAIC,QAASvB,KAAKsB,OAC7EH,EAAA,OACEK,KAAK,OACLC,MAAO,CACLC,KAAM,KACN,gBAAiB1B,KAAKW,QACtB,cAAeX,KAAK2B,OAAS,QAC7B,eAAgB3B,KAAK2B,OAAS,SAC9B,cAAe3B,KAAK2B,OAAS,QAC7B,iBAAkB3B,KAAK4B,WAGzBT,EAAA,OAAKK,KAAK,SAASC,MAAM,gBACvBN,EAAA,mBACEM,MAAO,CACL,wBAAyBzB,KAAK6B,WAEhCC,KAAK,QACLH,KAAMI,EAAc/B,KAAK2B,MACzBK,QAAShC,KAAKU,yBAIlBS,EAAA,OAAKK,KAAK,OAAOC,MAAM,cACpBzB,KAAKiC,UACJd,EAAA,YAAUa,QAAShC,KAAKS,iBAAkBkB,KAAMO,EAASlC,KAAK2B,OAC3D3B,KAAKiC,UAGTjC,KAAKE,aAAeiB,EAAA,QAAMW,KAAK,UAGlCX,EAAA,OACEK,KAAK,SACLC,MAAO,CACL,sBAAuBzB,KAAK2B,OAAS,QACrC,uBAAwB3B,KAAK2B,OAAS,SACtC,sBAAuB3B,KAAK2B,OAAS,UAGtC3B,KAAKsB,OACJH,EAAA,OACEM,MAAO,CACL,iBAAkB,MAEpBO,QAAShC,KAAKS,kBAEbT,KAAKsB,OAGTtB,KAAKK,cAAgBc,EAAA,QAAMW,KAAK,Y,6BAiB7C,MAAMC,EAAiBJ,IACd,CACLQ,MAAO,UACPC,OAAQ,SACRC,MAAO,UACPV,IAGJ,MAAMO,EAAYP,IACT,CACLQ,MAAO,SACPC,OAAQ,UACRC,MAAO,YACPV,I"}

package/dist/ui-library/p-cba69e9d.entry.js

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

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

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

package/dist/ui-library/p-cd67da3d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as a,g as e}from"./p-6153045b.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";let o=0;const r=class{constructor(s){t(this,s);this.componentId=`tab-panel-${++o}`;this.name="";this.active=false}render(){return s(a,{id:this.host.id||this.componentId,style:{display:this.active?"block":"none"}},s("div",{part:"base",class:"tab-panel",role:"tabpanel","aria-selected":this.active?"true":"false","aria-hidden":this.active?"false":"true"},s("slot",null)))}get host(){return e(this)}};r.style=i;export{r as six_tab_panel};
-//# sourceMappingURL=p-cd67da3d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixTabPanelCss","id","SixTabPanel","this","componentId","render","h","Host","host","style","display","active","part","class","role"],"sources":["src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  font-family: var(--six-font-family);\n}\n\n.tab-panel {\n  border: solid 1px transparent;\n  padding: 20px 20px;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  private componentId = `tab-panel-${++id}`;\n\n  @Element() host!: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,0NCEvB,IAAIC,EAAK,E,MAkBIC,EAAW,M,yBACdC,KAAAC,YAAc,eAAeH,I,UAKtB,G,YAGmB,K,CAElC,MAAAI,GACE,OAEEC,EAACC,EAAI,CAACN,GAAIE,KAAKK,KAAKP,IAAME,KAAKC,YAAaK,MAAO,CAAEC,QAASP,KAAKQ,OAAS,QAAU,SACpFL,EAAA,OACEM,KAAK,OACLC,MAAM,YACNC,KAAK,WAAU,gBACAX,KAAKQ,OAAS,OAAS,QAAO,cAChCR,KAAKQ,OAAS,QAAU,QAErCL,EAAA,c"}

package/dist/ui-library/p-cdaed936.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as l,g as e}from"./p-6153045b.js";const o=".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:inherit}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload.sc-six-file-upload six-card.kyc-file-upload__container--compact.sc-six-file-upload{width:inherit}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__label-icon.sc-six-file-upload{margin-right:0.5rem}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}";const a=class{constructor(l){i(this,l);this.success=s(this,"six-file-upload-success",7);this.failure=s(this,"six-file-upload-failure",7);this.handleFiles=i=>{if(this.disabled||i.length===0){return}if(!this.multiple&&i.length>1){return this.failure.emit({reason:"Only one file is allowed."})}for(const s of i){if(s==null){return}let l=[];if(this.accept!=null){l=this.accept.replace(/\s/g,"").split(",")}if(l.length>0&&l.indexOf(s.type)===-1){const s=i.length>1?"One or more files have invalid MIME type.":"File has invalid MIME type.";return this.failure.emit({reason:s})}if(this.maxFileSize!=null&&s.size>this.maxFileSize){const s=i.length>1?"One or more files are too big":"File is too big.";return this.failure.emit({reason:s})}}const s=this.multiple?{files:i}:{file:i[0]};this.success.emit(s)};this.onChange=()=>{var i;if(((i=this.fileInput)===null||i===void 0?void 0:i.files)!=null){const i=this.fileInput.files;this.handleFiles(i);this.fileInput.value=""}};this.isOver=false;this.compact=false;this.label=undefined;this.disabled=false;this.accept=undefined;this.multiple=false;this.maxFileSize=undefined}dragenterHandler(){if(!this.disabled){this.isOver=true}}dragoverHandler(){if(!this.disabled){this.isOver=true}}dragleaveHandler(){if(!this.disabled){this.isOver=false}}dropHandler({dataTransfer:i}){if(!this.disabled){this.isOver=false;if(i!=null){this.handleFiles(i.files)}}}componentDidLoad(){["dragenter","dragover","dragleave","drop"].forEach((i=>{this.host.addEventListener(i,this.preventDefaults,false);document.body.addEventListener(i,this.preventDefaults,false)}))}disconnectedCallback(){["dragenter","dragover","dragleave","drop"].forEach((i=>{this.host.removeEventListener(i,this.preventDefaults,false);document.body.removeEventListener(i,this.preventDefaults,false)}))}preventDefaults(i){i.preventDefault();i.stopPropagation()}renderLabel(){var i;return(i=this.label)!==null&&i!==void 0?i:this.compact?"Upload":l("span",null,"Drop files to upload, or ",l("span",{class:"six-file-upload__label--highlighted"},"browse"))}render(){const i=this.compact?"six-button":"six-card";return l("div",{class:{"six-file-upload":true,"six-file-upload--disabled":this.disabled}},l(i,{class:{"six-file-upload__container--compact":this.compact,"six-file-upload__container--full":!this.compact}},this.compact&&l("span",{slot:"prefix"},l("six-icon",{class:"six-file-upload__label-icon"},"arrow_circle_up")),l("div",{class:{"six-file-upload__drop-zone":true,"six-file-upload__drop-zone--hover":this.isOver,"six-file-upload__drop-zone--compact":this.compact}},l("span",null,this.renderLabel()),l("input",{class:"six-file-upload__input",type:"file",name:"resume",disabled:this.disabled,accept:this.accept,multiple:this.multiple,onChange:this.onChange,ref:i=>this.fileInput=i}))))}get host(){return e(this)}};a.style=o;export{a as six_file_upload};
-//# sourceMappingURL=p-cdaed936.entry.js.map