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

package/dist/ui-library/p-33f7e22b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixRootCss","SixRoot","this","resizeObserver","ResizeObserver","host","width","contentRect","collapse","breakpoint","handleCollapsed","collapsed","collapsedEvent","emit","componentWillLoad","observe","disconnectedCallback","disconnect","render","h","class","part","stage","version","name","value","open","padded"],"sources":["./src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","./src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the side bar on the left side.\n * @slot right-sidebar - Used to define the side bar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse: boolean;\n\n  resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,mlB,MCuBNC,EAAO,M,4EAoBlBC,KAAAC,eAAiB,IAAIC,gBAAe,EAAEC,MACpC,MAAMC,MAAEA,GAAUD,EAAKE,YACvBL,KAAKM,SAAWF,EAAQJ,KAAKO,UAAU,I,gBAlBpB,K,YAGJ,K,WAGU,K,aAGT,G,wBAalBC,gBAAgBC,GACdT,KAAKU,eAAeC,KAAK,CAAEF,a,CAG7BG,oBACEZ,KAAKC,eAAeY,QAAQb,KAAKG,K,CAGnCW,uBACEd,KAAKC,eAAec,Y,CAGtBC,SACE,OACEC,EAAA,QAAMC,MAAM,YACVD,EAAA,UAAQE,KAAK,UACVnB,KAAKoB,OAASH,EAAA,uBAAqBG,MAAOpB,KAAKoB,OAAQpB,KAAKqB,SAC7DJ,EAAA,QAAMK,KAAK,YAEbL,EAAA,OAAKC,MAAM,yBAAyBC,KAAK,gBACvCF,EAAA,kBAAgBM,MAAO,CAAEC,MAAOxB,KAAKM,WACnCW,EAAA,QAAMK,KAAK,mBAGfL,EAAA,QAAME,KAAK,QACTF,EAAA,OAAKC,MAAO,CAAE,sBAAuB,KAAM,8BAA+BlB,KAAKyB,QAAUN,KAAK,aAC5FF,EAAA,QAAMK,KAAK,UAEbL,EAAA,OAAKC,MAAM,oBACTD,EAAA,QAAMK,KAAK,aAGfL,EAAA,OAAKC,MAAM,0BAA0BC,KAAK,iBACxCF,EAAA,QAAMK,KAAK,mB"}

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

@@ -1,2 +0,0 @@
-import{r as s,h as i,g as t}from"./p-ac4f4d45.js";import{h as e}from"./p-b4dfb7cf.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";const a=class{constructor(t){s(this,t);this.provideSlot=s=>{if(this.summaryIconHasContent){return i("div",{slot:s},i("slot",{name:s}))}return i("slot",{name:s,onSlotchange:()=>{this.summaryIconHasContent=this.host.shadowRoot.querySelector(`slot[name="${s}"]`).assignedNodes().length>0}})};this.hasItems=false;this.name="";this.icon="";this.value="";this.open=false;this.summaryIcon=undefined;this.summaryIconHasContent=undefined}connectedCallback(){this.handleSlotChange=this.handleSlotChange.bind(this)}componentWillLoad(){this.handleSlotChange()}handleSlotChange(){this.hasItems=e(this.host)}isSubgroup(){return!!this.host.parentElement.closest("six-sidebar-item-group")}render(){return i("six-details",{class:{"six-sidebar-item-group--childless":!this.hasItems,"six-sidebar-item-group--subgroup":this.isSubgroup()},inline:true,open:this.open,"summary-icon":this.summaryIcon,hasContent:this.hasItems},i("div",{slot:"summary"},i("div",{class:"six-sidebar-details__header"},this.icon&&i("six-icon",{class:"six-sidebar-details__header-icon"},this.icon),this.name)),this.provideSlot("summary-icon"),i("slot",null))}get host(){return t(this)}};a.style=r;export{a as six_sidebar_item_group};
-//# sourceMappingURL=p-4ae91795.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixSidebarItemGroupCss","SixSidebarItemGroup","this","provideSlot","name","summaryIconHasContent","h","slot","onSlotchange","host","shadowRoot","querySelector","assignedNodes","length","connectedCallback","handleSlotChange","bind","componentWillLoad","hasItems","hasSlot","isSubgroup","parentElement","closest","render","class","inline","open","summaryIcon","hasContent","icon"],"sources":["./src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","./src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon: string;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  isSubgroup() {\n    return !!this.host.parentElement.closest('six-sidebar-item-group');\n  }\n\n  @State() summaryIconHasContent: boolean;\n\n  provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          this.summaryIconHasContent =\n            this.host.shadowRoot.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`).assignedNodes().length > 0;\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAyB,8c,MCelBC,EAAmB,M,yBAqC9BC,KAAAC,YAAeC,IACb,GAAIF,KAAKG,sBAAuB,CAC9B,OACEC,EAAA,OAAKC,KAAMH,GACTE,EAAA,QAAMF,KAAMA,I,CAKlB,OACEE,EAAA,QACEF,KAAMA,EACNI,aAAc,KACZN,KAAKG,sBACHH,KAAKO,KAAKC,WAAWC,cAA+B,cAAcP,OAAUQ,gBAAgBC,OAAS,CAAC,GAEpG,E,cAlDQ,M,UAGL,G,UAGA,G,WAGkB,G,UAED,M,gEAKhCC,oBACEZ,KAAKa,iBAAmBb,KAAKa,iBAAiBC,KAAKd,K,CAGrDe,oBACEf,KAAKa,kB,CAGPA,mBACEb,KAAKgB,SAAWC,EAAQjB,KAAKO,K,CAG/BW,aACE,QAASlB,KAAKO,KAAKY,cAAcC,QAAQ,yB,CAyB3CC,SACE,OACEjB,EAAA,eACEkB,MAAO,CACL,qCAAsCtB,KAAKgB,SAC3C,mCAAoChB,KAAKkB,cAE3CK,OAAQ,KACRC,KAAMxB,KAAKwB,KAAI,eACDxB,KAAKyB,YACnBC,WAAY1B,KAAKgB,UAEjBZ,EAAA,OAAKC,KAAK,WACRD,EAAA,OAAKkB,MAAM,+BACRtB,KAAK2B,MAAQvB,EAAA,YAAUkB,MAAM,oCAAoCtB,KAAK2B,MACtE3B,KAAKE,OAGTF,KAAKC,YAAY,gBAClBG,EAAA,a"}

package/dist/ui-library/p-4f8394d7.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isPreventScrollSupported","supported","element","document","createElement","focus","preventScroll","activeModals","Modal","constructor","options","this","handleFocusIn","bind","activate","push","addEventListener","deactivate","filter","modal","removeEventListener","isActive","length","event","target","tagName","toLowerCase","closest","onFocusOut"],"sources":["./src/utils/support.ts","./src/utils/modal.ts"],"sourcesContent":["//\n// Determines if the browser supports focus({ preventScroll })\n//\nexport const isPreventScrollSupported = () => {\n  let supported = false;\n\n  const element = document.createElement('div');\n  element.focus &&\n    element.focus({\n      get preventScroll() {\n        supported = true;\n        return false;\n      },\n    });\n\n  return supported;\n};\n","interface ModalOptions {\n  onFocusOut?: (event: Event) => any;\n}\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  options: ModalOptions;\n\n  constructor(element: HTMLElement, options?: ModalOptions) {\n    this.element = element;\n    this.options = options;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const target = event.target as HTMLElement;\n    const tagName = this.element.tagName.toLowerCase();\n\n    // If focus is lost while the modal is active, run the onFocusOut callback\n    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {\n      this.options.onFocusOut(event);\n    }\n  }\n}\n"],"mappings":"MAGaA,EAA2B,KACtC,IAAIC,EAAY,MAEhB,MAAMC,EAAUC,SAASC,cAAc,OACvCF,EAAQG,OACNH,EAAQG,MAAM,CACRC,oBACFL,EAAY,KACZ,OAAO,K,IAIb,OAAOA,CAAS,ECXlB,IAAIM,EAA8B,G,MAEbC,EAInBC,YAAYP,EAAsBQ,GAChCC,KAAKT,QAAUA,EACfS,KAAKD,QAAUA,EACfC,KAAKC,cAAgBD,KAAKC,cAAcC,KAAKF,K,CAG/CG,WACEP,EAAaQ,KAAKJ,KAAKT,SACvBC,SAASa,iBAAiB,UAAWL,KAAKC,c,CAG5CK,aACEV,EAAeA,EAAaW,QAAQC,GAAUA,IAAUR,KAAKT,UAC7DC,SAASiB,oBAAoB,UAAWT,KAAKC,c,CAG/CS,WAEE,OAAOd,EAAaA,EAAae,OAAS,KAAOX,KAAKT,O,CAGxDU,cAAcW,GACZ,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAUd,KAAKT,QAAQuB,QAAQC,cAGrC,GAAIf,KAAKU,YAAcG,EAAOG,QAAQF,KAAad,KAAKT,gBAAkBS,KAAKD,QAAQkB,aAAe,WAAY,CAChHjB,KAAKD,QAAQkB,WAAWL,E"}

package/dist/ui-library/p-53a13db5.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as r}from"./p-ac4f4d45.js";import{u as s,l as a}from"./p-eb8f05a9.js";import{h as o}from"./p-b4dfb7cf.js";import{i as n,M as h}from"./p-4f8394d7.js";const l=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";const d=n();let f=0;const p=class{constructor(e){t(this,e);this.sixShow=i(this,"six-drawer-show",7);this.sixAfterShow=i(this,"six-drawer-after-show",7);this.sixHide=i(this,"six-drawer-hide",7);this.sixAfterHide=i(this,"six-drawer-after-hide",7);this.sixInitialFocus=i(this,"six-drawer-initial-focus",7);this.sixOverlayDismiss=i(this,"six-drawer-overlay-dismiss",7);this.componentId=`drawer-${++f}`;this.willShow=false;this.willHide=false;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="right";this.contained=false;this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleOverlayClick=this.handleOverlayClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.modal=new h(this.host,{onFocusOut:()=>this.contained?null:this.panel.focus()})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show();this.resetTransitionVariables()}}disconnectedCallback(){s(this.host)}async show(){if(this.willShow){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();a(this.host)}if(this.open){if(d){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){this.panel.focus({preventScroll:true})}}))}else{this.drawer.addEventListener("transitionend",(()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){this.panel.focus()}}),{once:true})}}}async hide(){if(this.willHide){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();s(this.host)}handleCloseClick(){this.hide()}handleKeyDown(t){if(t.key==="Escape"){this.hide()}}handleOverlayClick(){const t=this.sixOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}}handleSlotChange(){this.hasFooter=o(this.host,"footer")}handleTransitionEnd(t){const i=t.target;if(t.propertyName==="transform"&&i.classList.contains("drawer__panel")){this.resetTransitionVariables()}}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return e("div",{ref:t=>this.drawer=t,part:"base",class:{drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible,"drawer--top":this.placement==="top","drawer--right":this.placement==="right","drawer--bottom":this.placement==="bottom","drawer--left":this.placement==="left","drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},e("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick,tabIndex:-1}),e("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&e("header",{part:"header",class:"drawer__header"},e("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},e("slot",{name:"label"},this.label||String.fromCharCode(65279))),e("six-icon-button",{exportparts:"base:close-button",class:"drawer__close",name:"x",onClick:this.handleCloseClick})),e("div",{part:"body",class:"drawer__body"},e("slot",null)),e("footer",{part:"footer",class:"drawer__footer"},e("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=l;export{p as six_drawer};
-//# sourceMappingURL=p-53a13db5.entry.js.map

package/dist/ui-library/p-53a13db5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixDrawerCss","hasPreventScroll","isPreventScrollSupported","id","SixDrawer","this","componentId","willShow","willHide","handleOpenChange","open","show","hide","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","host","onFocusOut","contained","panel","focus","componentWillLoad","resetTransitionVariables","disconnectedCallback","unlockBodyScrolling","async","sixShow","emit","defaultPrevented","isVisible","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","drawer","addEventListener","once","sixHide","deactivate","event","key","sixOverlayDismiss","hasFooter","hasSlot","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","part","class","placement","onKeyDown","onTransitionEnd","onClick","tabIndex","role","noHeader","label","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["./src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","./src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\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 drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  componentId = `drawer-${++id}`;\n  drawer: HTMLElement;\n  modal: Modal;\n  panel: HTMLElement;\n  willShow = false;\n  willHide = false;\n\n  @Element() host: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              this.panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-559c87f0.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as i,H as t,g as h}from"./p-ac4f4d45.js";import{E as r}from"./p-9a860acc.js";import{g as a}from"./p-b4dfb7cf.js";const o=":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 n;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["Notifications"]=2]="Notifications";e[e["AppSwitcher"]=3]="AppSwitcher";e[e["Profile"]=4]="Profile"})(n||(n={}));var c;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(c||(c={}));const d=a(c);const l=class{constructor(i){e(this,i);this.sixAppNameClicked=s(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=s(this,"six-header-app-switcher-select",7);this.sixProfileSelect=s(this,"six-header-profile-select",7);this.sixHamburgerClick=s(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=s(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=s(this,"six-header-search-field-toggle",7);this.eventListeners=new r;this.has=e=>this.slots[e];this.selected=e=>e===this.selectedSection;this.select=e=>()=>{this.selectedSection=e};this.toggleSearch=e=>()=>{var s;if(e===n.Search){const i=this.selectedSection!==e;if(i){(s=this.host.querySelector(`[slot="${c.Search}"]`).shadowRoot.querySelector("six-input"))===null||s===void 0?void 0:s.setFocus()}this.sixSearchFieldToggle.emit({visible:i})}this.selectedSection=this.selectedSection===e?n.None:e};this.setupMenu=e=>{this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo){return}this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{this.eventListeners.add(e,"six-dropdown-show",this.select(n.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.select(n.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:s,item:i}=e.detail;this.sixProfileSelect.emit({selectedLabel:i.innerText,name:s,item:i})}))};this.setupAppSwitcher=e=>{this.eventListeners.add(e,"six-dropdown-show",this.select(n.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.select(n.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:s,item:i}=e.detail;this.selectedApp=i.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:i.innerText,name:s,item:i})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?n.Search:n.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===n.Search&&!e){this.selectedSection=n.None}else if(e&&this.selectedSection!==n.Search){this.selectedSection=n.Search}}async getIsSearchOpen(){return this.selectedSection===n.Search}componentWillLoad(){this.slots=d(this.host);if(this.has(c.AppSwitcher)){this.selectedApp=this.getSelectedApp()}if(this.has(c.Search)){this.computeSearchOpenState()}}getSelectedApp(){const e=this.host.querySelector(`[slot="${c.AppSwitcher}"]`);const s=Array.from(e.querySelectorAll("six-menu-item"));const i=s.find((e=>e.hasAttribute("checked")));return i===null||i===void 0?void 0:i.textContent}disconnectedCallback(){this.eventListeners.removeAll()}render(){const e=this.has(c.Search)&&i("section",{class:{"six-header__search":true,"six-header__search--open":this.selected(n.Search)}},i("six-icon-button",{name:"search",onClick:this.toggleSearch(n.Search),"data-testid":"search-trigger"}));const s=this.has(c.Notifications)&&i("section",{class:"six-header__notification"},i("slot",{name:c.Notifications}));const h=this.has(c.AppSwitcher)&&i("section",{class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.selected(n.AppSwitcher)}},i("a",{onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),i("six-dropdown",{distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},i("six-icon-button",{name:"apps",slot:"trigger"}),i("slot",{name:c.AppSwitcher})));const r=this.has(c.Profile)&&i("section",{class:{"six-header__profile":true,"six-header__profile--open":this.selected(n.Profile)}},i("six-dropdown",{distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},i("slot",{name:"profile-avatar",slot:"trigger"}),i("slot",{name:"profile-menu"})));const a=this.has(c.Logo)?i("section",null,i("slot",{name:"logo"})):i("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},i("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},i("title",null,"SIX"),i("g",{fill:"#DE3919","fill-rule":"nonzero"},i("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"}),i("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),i("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 i(t,null,i("header",{class:"six-header"},i("section",{class:"six-header__menu"},i("six-icon-button",{name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu})),a,i("section",{class:"six-header__placeholder"}),i("section",{class:"six-header__custom"},i("slot",null)),e,s,h,r),i("div",{class:{"six-header__search-field":true,"six-header__search-field--visible":this.selected(n.Search),"six-header__search-field--shift-content":this.shiftContent}},i("slot",{name:c.Search})))}static get assetsDirs(){return["assets"]}get host(){return h(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};l.style=o;export{l as six_header};
-//# sourceMappingURL=p-559c87f0.entry.js.map

package/dist/ui-library/p-559c87f0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixHeaderCss","Section","Slot","getSlots","getAvailableSlots","SixHeader","this","eventListeners","EventListeners","has","slot","slots","selected","value","selectedSection","select","toggleSearch","Search","visible","_a","host","querySelector","shadowRoot","setFocus","sixSearchFieldToggle","emit","None","setupMenu","el","add","sixHamburgerClick","setupLogo","clickableLogo","sixLogoClick","setupProfile","Profile","event","name","item","detail","sixProfileSelect","selectedLabel","innerText","setupAppSwitcher","AppSwitcher","selectedApp","sixAppSwitcherSelect","appNameClicked","sixAppNameClicked","computeSearchOpenState","openSearch","handleOpenSearchChange","async","openState","componentWillLoad","getSelectedApp","element","items","Array","from","querySelectorAll","firstCheckedMenuItem","find","hasAttribute","textContent","disconnectedCallback","removeAll","render","search","h","class","onClick","notifications","Notifications","appSwitcher","distance","skidding","placement","ref","profile","logo","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 { getAvailableSlots } 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  Notifications,\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\nconst getSlots = getAvailableSlots(Slot);\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' })\n  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' })\n  sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /** Emitted when the hamburger menu is clicked. */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' })\n  sixHamburgerClick: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the header logo is clicked. */\n  @Event({ eventName: 'six-header-logo-clicked' })\n  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  readonly eventListeners = new EventListeners();\n\n  slots: { readonly [K: string]: boolean };\n\n  @State() selectedApp: string;\n  @State() selectedSection: Section;\n\n  has = (slot: Slot) => this.slots[slot];\n\n  selected = (value: Section) => value === this.selectedSection;\n\n  select = (value: Section) => () => {\n    this.selectedSection = value;\n  };\n\n  toggleSearch = (value: Section) => () => {\n    if (value === Section.Search) {\n      const visible = this.selectedSection !== value;\n      if (visible) {\n        this.host.querySelector(`[slot=\"${Slot.Search}\"]`).shadowRoot.querySelector('six-input')?.setFocus();\n      }\n      this.sixSearchFieldToggle.emit({ visible });\n    }\n    this.selectedSection = this.selectedSection === value ? Section.None : value;\n  };\n\n  setupMenu = (el: HTMLSixIconButtonElement) => {\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  setupLogo = (el: HTMLSixIconButtonElement) => {\n    if (!this.clickableLogo) {\n      return;\n    }\n\n    this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n  };\n\n  setupProfile = (el: HTMLSixDropdownElement) => {\n    this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n      const { name, item } = event.detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  setupAppSwitcher = (el: HTMLSixDropdownElement) => {\n    this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n      const { name, item } = event.detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  appNameClicked = () => this.sixAppNameClicked.emit();\n\n  computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = getSlots(this.host);\n\n    if (this.has(Slot.AppSwitcher)) {\n      this.selectedApp = this.getSelectedApp();\n    }\n\n    if (this.has(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  private getSelectedApp() {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = this.host.querySelector(`[slot=\"${Slot.AppSwitcher}\"]`);\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n    return firstCheckedMenuItem?.textContent;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    const search = this.has(Slot.Search) && (\n      <section\n        class={{\n          'six-header__search': true,\n          'six-header__search--open': this.selected(Section.Search),\n        }}\n      >\n        <six-icon-button name=\"search\" onClick={this.toggleSearch(Section.Search)} data-testid=\"search-trigger\" />\n      </section>\n    );\n\n    const notifications = this.has(Slot.Notifications) && (\n      <section class=\"six-header__notification\">\n        <slot name={Slot.Notifications} />\n      </section>\n    );\n\n    const appSwitcher = this.has(Slot.AppSwitcher) && (\n      <section\n        class={{\n          'six-header__app-switcher': true,\n          'six-header__app-switcher--open': this.selected(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.has(Slot.Profile) && (\n      <section\n        class={{\n          'six-header__profile': true,\n          'six-header__profile--open': this.selected(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.has(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.selected(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-6403fd87.entry.js

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

package/dist/ui-library/p-6403fd87.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSearchFieldCss","SixSearchField","this","eventListeners","EventListeners","handleInputChange","searchFieldChange","emit","value","inputElement","DEFAULT_DEBOUNCE_FAST","handleValueChange","componentDidLoad","add","debounce","event","key","disconnectedCallback","removeAll","render","h","class","ref","el","placeholder","disabled","clearable","slot","size","onClick"],"sources":["./src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","./src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;\n\n  inputElement: HTMLSixInputElement;\n\n  readonly eventListeners = new EventListeners();\n\n  handleInputChange = () => {\n    this.searchFieldChange.emit({ value: this.inputElement.value });\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,kN,MCoBbC,EAAc,M,oFAqBhBC,KAAAC,eAAiB,IAAIC,EAE9BF,KAAAG,kBAAoB,KAClBH,KAAKI,kBAAkBC,KAAK,CAAEC,MAAON,KAAKO,aAAaD,OAAQ,E,yCAnB7BE,E,cAGA,M,WAGH,G,eAGb,K,CAcpBC,oBACE,GAAIT,KAAKO,aAAc,CACrBP,KAAKO,aAAaD,MAAQN,KAAKM,K,EAInCI,mBACEV,KAAKC,eAAeU,IAAIX,KAAKO,aAAc,kBAAmBK,EAASZ,KAAKG,kBAAmBH,KAAKY,WACpGZ,KAAKC,eAAeU,IAAIX,KAAKO,aAAc,WAAYM,IACrD,GAAIA,EAAMC,MAAQ,QAAS,CAEzBd,KAAKG,mB,KAKXY,uBACEf,KAAKC,eAAee,W,CAGtBC,SACE,OACEC,EAAA,OAAKC,MAAM,cACTD,EAAA,aACEE,IAAMC,GAAQrB,KAAKO,aAAec,EAClCC,YAAatB,KAAKsB,YAClBhB,MAAON,KAAKM,MACZiB,SAAUvB,KAAKuB,SACfC,UAAWxB,KAAKwB,WAEhBN,EAAA,YAAUC,MAAM,mBAAmBM,KAAK,SAASC,KAAK,QAAQC,QAAS3B,KAAKG,mBAAiB,WAI/Fe,EAAA,a"}

package/dist/ui-library/p-6433c0da.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as r,h as i}from"./p-ac4f4d45.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";const o=class{constructor(i){a(this,i);this.sixClear=r(this,"six-tag-clear",7);this.type="primary";this.size="medium";this.pill=false;this.clearable=false}connectedCallback(){this.handleClearClick=this.handleClearClick.bind(this)}handleClearClick(){this.sixClear.emit()}render(){return i("span",{ref:a=>this.tag=a,part:"base",class:{tag:true,"tag--primary":this.type==="primary","tag--success":this.type==="success","tag--info":this.type==="info","tag--warning":this.type==="warning","tag--danger":this.type==="danger","tag--action":this.type==="action","tag--text":this.type==="text","tag--small":this.size==="small","tag--medium":this.size==="medium","tag--large":this.size==="large","tag--pill":this.pill,"tag--clear":this.clearable}},i("span",{part:"content",class:"tag__content"},i("slot",null)),this.clearable&&i("six-icon-button",{exportparts:"base:clear-button",size:"xSmall",name:"clear",class:"tag__clear",onClick:this.handleClearClick}))}};o.style=s;export{o as six_tag};
-//# sourceMappingURL=p-6433c0da.entry.js.map

package/dist/ui-library/p-6433c0da.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixTagCss","SixTag","connectedCallback","this","handleClearClick","bind","sixClear","emit","render","h","ref","el","tag","part","class","type","size","pill","clearable","exportparts","name","onClick"],"sources":["./src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","./src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  font-family: var(--six-font-family);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n  color: var(--six-color-white);\n  background-color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-success-500);\n  background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-clay-50);\n  background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-warning-700);\n  background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n  color: var(--six-color-white);\n  border-color: var(--six-color-danger-800);\n  background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n  color: var(--six-color-white);\n  border-color: var(--six-color-action-500);\n  background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--six-button-font-size-small);\n  height: calc(var(--six-height-small) * 0.8);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-small);\n  padding: 0 var(--six-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: calc(var(--six-height-medium) * 0.8);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-medium);\n  padding: 0 var(--six-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--six-button-font-size-large);\n  height: calc(var(--six-height-large) * 0.8);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-large);\n  padding: 0 var(--six-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n","import { Component, h, Prop, EventEmitter, Event } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  tag: HTMLElement;\n\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleClearClick = this.handleClearClick.bind(this);\n  }\n\n  handleClearClick() {\n    this.sixClear.emit();\n  }\n\n  render() {\n    return (\n      <span\n        ref={(el) => (this.tag = el)}\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot />\n        </span>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,qwE,MCqBLC,EAAM,M,2EAI0F,U,UAG7C,S,UAG9B,M,eAGK,K,CAKrCC,oBACEC,KAAKC,iBAAmBD,KAAKC,iBAAiBC,KAAKF,K,CAGrDC,mBACED,KAAKG,SAASC,M,CAGhBC,SACE,OACEC,EAAA,QACEC,IAAMC,GAAQR,KAAKS,IAAMD,EACzBE,KAAK,OACLC,MAAO,CACLF,IAAK,KAGL,eAAgBT,KAAKY,OAAS,UAC9B,eAAgBZ,KAAKY,OAAS,UAC9B,YAAaZ,KAAKY,OAAS,OAC3B,eAAgBZ,KAAKY,OAAS,UAC9B,cAAeZ,KAAKY,OAAS,SAC7B,cAAeZ,KAAKY,OAAS,SAC7B,YAAaZ,KAAKY,OAAS,OAG3B,aAAcZ,KAAKa,OAAS,QAC5B,cAAeb,KAAKa,OAAS,SAC7B,aAAcb,KAAKa,OAAS,QAG5B,YAAab,KAAKc,KAClB,aAAcd,KAAKe,YAGrBT,EAAA,QAAMI,KAAK,UAAUC,MAAM,gBACzBL,EAAA,cAGDN,KAAKe,WACJT,EAAA,mBACEU,YAAY,oBACZH,KAAK,SACLI,KAAK,QACLN,MAAM,aACNO,QAASlB,KAAKC,mB"}

package/dist/ui-library/p-79eee01b.js

@@ -1,2 +0,0 @@
-import{h as r}from"./p-ac4f4d45.js";const o=(o,t)=>{const l=o.label?true:o.hasLabelSlot;const e=o.helpText?true:o.hasHelpTextSlot;const a=o.errorText&&o.errorText!==""||!o.hasErrorTextSlot;return r("div",{part:"form-control",class:{"form-control":true,"form-control--small":o.size==="small","form-control--medium":o.size==="medium","form-control--large":o.size==="large","form-control--has-label":l,"form-control--has-help-text":e,"form-control--has-error-text":o.displayError,"form-control--disabled":o.disabled,"form-control--invalid":o.displayError&&!o.disabled}},r("label",{part:"label",id:o.labelId,class:{"form-control__label":true,"form-control__label__required":o.required},htmlFor:o.inputId,"aria-hidden":l?"false":"true",onClick:o.onLabelClick},r("slot",{name:"label"},o.label)),r("div",{class:"form-control__input"},t),r("div",{part:"error-text",id:o.errorTextId,class:"form-control__error-text","aria-hidden":o.displayError?"false":"true"},a?o.errorText:r("slot",{name:"error-text"})),r("div",{part:"help-text",id:o.helpTextId,class:"form-control__help-text","aria-hidden":e?"false":"true"},r("slot",{name:"help-text"},o.helpText)))};export{o as F};
-//# sourceMappingURL=p-79eee01b.js.map

package/dist/ui-library/p-79eee01b.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FormControl","props","children","hasLabel","label","hasLabelSlot","hasHelpText","helpText","hasHelpTextSlot","useErrorTextAttribute","errorText","hasErrorTextSlot","h","part","class","size","displayError","disabled","id","labelId","required","htmlFor","inputId","onClick","onLabelClick","name","errorTextId","helpTextId"],"sources":["./src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether or not a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether or not a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  errorText?: string;\n\n  /** Whether or not a error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children) => {\n  const hasLabel = props.label ? true : props.hasLabelSlot;\n  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;\n  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */\n  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': props.displayError,\n        'form-control--disabled': props.disabled,\n        'form-control--invalid': props.displayError && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={props.displayError ? 'false' : 'true'}\n      >\n        {useErrorTextAttribute ? props.errorText : <slot name=\"error-text\" />}\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":"0CAiDMA,EAAc,CAACC,EAAyBC,KAC5C,MAAMC,EAAWF,EAAMG,MAAQ,KAAOH,EAAMI,aAC5C,MAAMC,EAAcL,EAAMM,SAAW,KAAON,EAAMO,gBAElD,MAAMC,EAAyBR,EAAMS,WAAaT,EAAMS,YAAc,KAAQT,EAAMU,iBAEpF,OACEC,EAAA,OACEC,KAAK,eACLC,MAAO,CACL,eAAgB,KAChB,sBAAuBb,EAAMc,OAAS,QACtC,uBAAwBd,EAAMc,OAAS,SACvC,sBAAuBd,EAAMc,OAAS,QACtC,0BAA2BZ,EAC3B,8BAA+BG,EAC/B,+BAAgCL,EAAMe,aACtC,yBAA0Bf,EAAMgB,SAChC,wBAAyBhB,EAAMe,eAAiBf,EAAMgB,WAGxDL,EAAA,SACEC,KAAK,QACLK,GAAIjB,EAAMkB,QACVL,MAAO,CACL,sBAAuB,KACvB,gCAAiCb,EAAMmB,UAEzCC,QAASpB,EAAMqB,QAAO,cACTnB,EAAW,QAAU,OAClCoB,QAAStB,EAAMuB,cAEfZ,EAAA,QAAMa,KAAK,SAASxB,EAAMG,QAG5BQ,EAAA,OAAKE,MAAM,uBAAuBZ,GAElCU,EAAA,OACEC,KAAK,aACLK,GAAIjB,EAAMyB,YACVZ,MAAM,2BAA0B,cACnBb,EAAMe,aAAe,QAAU,QAE3CP,EAAwBR,EAAMS,UAAYE,EAAA,QAAMa,KAAK,gBAGxDb,EAAA,OACEC,KAAK,YACLK,GAAIjB,EAAM0B,WACVb,MAAM,0BAAyB,cAClBR,EAAc,QAAU,QAErCM,EAAA,QAAMa,KAAK,aAAaxB,EAAMM,WAE5B,S"}

package/dist/ui-library/p-7e0cc4ae.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixRangeCss","id","SixRange","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","value","toString","handleLabelChange","handleSlotChange","handleValueChange","input","calculateColorRunnableTrack","invalid","checkValidity","connectedCallback","handleInput","bind","handleBlur","handleFocus","handleTouchStart","host","shadowRoot","addEventListener","componentWillLoad","undefined","min","max","componentDidLoad","syncTooltip","resizeObserver","ResizeObserver","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","removeEventListener","removeAll","async","options","focus","blur","message","setCustomValidity","Number","sixChange","emit","requestAnimationFrame","hasFocus","hasTooltip","sixBlur","unobserve","sixFocus","observe","hasHelpTextSlot","hasSlot","hasLabelSlot","setFocus","displayError","errorOnBlur","tooltip","percent","Math","inputWidth","offsetWidth","tooltipWidth","output","thumbSize","getComputedStyle","getPropertyValue","x","style","transform","marginLeft","isFirefox","parseInt","ceil","background","navigator","userAgent","toLowerCase","indexOf","render","h","FormControl","label","helpText","size","disabled","required","part","class","range","onTouchStart","ref","el","type","name","step","onInput","onFocus","onBlur","tooltipFormatter"],"sources":["./src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","./src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  --thumb-size: 14px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--six-color-web-rock-900);\n  --thumb-color: var(--six-color-web-rock-900);\n  --track-height: 3px;\n\n  display: block;\n}\n\n.range {\n  position: relative;\n\n  .range__control {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--six-input-height-medium);\n    background: transparent;\n    line-height: var(--six-input-height-medium);\n    vertical-align: middle;\n\n    &::-webkit-slider-runnable-track {\n      width: 100%;\n      height: var(--track-height);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-webkit-slider-thumb {\n      border: none;\n      width: var(--thumb-size);\n      height: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-color);\n      -webkit-appearance: none;\n      margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\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, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-webkit-slider-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-webkit-slider-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  Firefox\n    &::-moz-focus-outer {\n      border: 0;\n    }\n\n    &::-moz-range-track {\n      width: 100%;\n      height: var(--track-height);\n      background-color: var(--six-progress-track-color);\n      border-radius: 3px;\n      border: none;\n    }\n\n    &::-moz-range-progress {\n      height: var(--track-height);\n      border-radius: 3px;\n      background-color: var(--track-color);\n      border: none;\n    }\n\n    &::-moz-range-thumb {\n      border: none;\n      height: var(--thumb-size);\n      width: var(--thumb-size);\n      border-radius: 50%;\n      background-color: var(--thumb-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, var(--six-transition-fast) transform;\n      cursor: pointer;\n    }\n\n    &:not(:disabled)::-moz-range-thumb:hover {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled):focus::-moz-range-thumb {\n      background-color: var(--thumb-color);\n    }\n\n    &:not(:disabled)::-moz-range-thumb:active {\n      background-color: var(--thumb-color);\n      cursor: grabbing;\n    }\n\n    //  States\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      &::-webkit-slider-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n\n      &::-moz-range-thumb {\n        cursor: not-allowed;\n        color: var(--six-color-web-rock-300);\n        border-color: var(--six-color-web-rock-300);\n        background-color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n\n// Tooltip\n.range__tooltip {\n  position: absolute;\n  z-index: var(--six-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--six-border-radius-medium);\n  background-color: var(--six-color-web-rock-900);\n  font-family: var(--six-font-family);\n  font-size: var(--six-tooltip-font-size);\n  font-weight: var(--six-tooltip-font-weight);\n  line-height: var(--six-tooltip-line-height);\n  color: var(--six-color-white);\n  opacity: 0;\n  padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n  transition: var(--six-transition-fast) opacity;\n  pointer-events: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    left: 50%;\n    margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n  }\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    top: 100%;\n  }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n  &::after {\n    border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n    border-left: var(--six-tooltip-arrow-size) solid transparent;\n    border-right: var(--six-tooltip-arrow-size) solid transparent;\n    bottom: 100%;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } 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 input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n */\n@Component({\n  tag: 'six-range',\n  styleUrl: 'six-range.scss',\n  shadow: true,\n})\nexport class SixRange {\n  inputId = `input-${++id}`;\n  labelId = `input-label-${id}`;\n  helpTextId = `input-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n\n  output: HTMLElement;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixRangeElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasTooltip = false;\n\n  /** The input's name attribute. */\n  @Prop() name = '';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value: number;\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /** The range's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The range's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to disable the input. */\n  @Prop() disabled = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The input's min attribute. */\n  @Prop() min = 0;\n\n  /** The input's max attribute. */\n  @Prop() max = 100;\n\n  /** The input's step attribute. */\n  @Prop() step = 1;\n\n  /** The preferred placedment of the tooltip. */\n  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'top';\n\n  /** A function used to format the tooltip's value. */\n  @Prop() tooltipFormatter = (value: number) => value.toString();\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. */\n  @Event({ eventName: 'six-range-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-range-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-range-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** default value the slider will be reverted to when reset is executed */\n  private defaultValue = 0;\n\n  @Watch('label')\n  @Watch('errorText')\n  @Watch('helpText')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.input) {\n      this.input.value = this.value as any;\n      this.calculateColorRunnableTrack();\n    }\n    // In rare cases, the watcher may be called before render so we need to make sure the input exists\n    this.invalid = this.input ? !this.input.checkValidity() : false;\n  }\n\n  connectedCallback() {\n    this.handleInput = this.handleInput.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.handleTouchStart = this.handleTouchStart.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    if (this.value === undefined || this.value === null) this.value = this.min;\n    if (this.value < this.min) this.value = this.min;\n    if (this.value > this.max) this.value = this.max;\n    this.defaultValue = this.value;\n\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.syncTooltip();\n    this.calculateColorRunnableTrack();\n    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the input. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleInput() {\n    this.value = Number(this.input.value);\n    this.sixChange.emit();\n\n    requestAnimationFrame(() => this.syncTooltip());\n    requestAnimationFrame(() => this.calculateColorRunnableTrack());\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.hasTooltip = false;\n    this.sixBlur.emit();\n    this.resizeObserver.unobserve(this.input);\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.hasTooltip = true;\n    this.sixFocus.emit();\n    this.resizeObserver.observe(this.input);\n  }\n\n  handleSlotChange() {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  handleTouchStart() {\n    this.setFocus();\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  syncTooltip() {\n    if (this.tooltip !== 'none') {\n      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));\n      const inputWidth = this.input.offsetWidth;\n      const tooltipWidth = this.output.offsetWidth;\n      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');\n      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n      this.output.style.transform = `translateX(${x})`;\n      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n    }\n  }\n\n  /**\n   * For Firefox this functionality is not needed because it is supported by standard CSS.\n   */\n  calculateColorRunnableTrack() {\n    if (!this.isFirefox()) {\n      const value = parseInt(this.input.value, 10);\n      const min = parseInt(this.input.min, 10);\n      const max = parseInt(this.input.max, 10);\n      const percent = Math.ceil(((value - min) / (max - min)) * 100);\n      this.input.style.background =\n        '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n        percent +\n        '%, var(--six-color-web-rock-300) ' +\n        percent +\n        '%)';\n    }\n  }\n\n  isFirefox() {\n    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size=\"medium\"\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            range: true,\n\n            // States\n            'range--disabled': this.disabled,\n            'range--focused': this.hasFocus,\n            'range--tooltip-visible': this.hasTooltip,\n            'range--tooltip-top': this.tooltip === 'top',\n            'range--tooltip-bottom': this.tooltip === 'bottom',\n          }}\n          onTouchStart={this.handleTouchStart}\n        >\n          <input\n            part=\"input\"\n            ref={(el) => (this.input = el)}\n            type=\"range\"\n            class=\"range__control\"\n            name={this.name}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          {this.tooltip !== 'none' && (\n            <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n              {this.tooltipFormatter(this.value)}\n            </output>\n          )}\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"qKAAA,MAAMA,EAAc,29MCMpB,IAAIC,EAAK,E,MAqBIC,EAAQ,M,uJACnBC,KAAAC,QAAU,WAAWH,IACrBE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,IAChCE,KAAAI,YAAc,oBAAoBN,IAKlCE,KAAAK,gBAAkB,GAClBL,KAAAM,iBAAmB,MAEVN,KAAAO,eAAiB,IAAIC,EAiEtBR,KAAAS,aAAe,E,cA7DH,M,qBACO,M,kBACH,M,sBACI,M,gBACN,M,UAGP,G,wDASC,G,cAGG,G,eAGC,G,cAGD,M,aAM+B,M,SAGpC,E,SAGA,I,UAGC,E,aAG8B,M,sBAGjBC,GAAkBA,EAAMC,W,iBAG9B,K,CAiBtBC,oBACEZ,KAAKa,kB,CAIPC,oBACE,GAAId,KAAKe,MAAO,CACdf,KAAKe,MAAML,MAAQV,KAAKU,MACxBV,KAAKgB,6B,CAGPhB,KAAKiB,QAAUjB,KAAKe,OAASf,KAAKe,MAAMG,gBAAkB,K,CAG5DC,oBACEnB,KAAKoB,YAAcpB,KAAKoB,YAAYC,KAAKrB,MACzCA,KAAKsB,WAAatB,KAAKsB,WAAWD,KAAKrB,MACvCA,KAAKuB,YAAcvB,KAAKuB,YAAYF,KAAKrB,MACzCA,KAAKa,iBAAmBb,KAAKa,iBAAiBQ,KAAKrB,MACnDA,KAAKwB,iBAAmBxB,KAAKwB,iBAAiBH,KAAKrB,MAEnDA,KAAKyB,KAAKC,WAAWC,iBAAiB,aAAc3B,KAAKa,iB,CAG3De,oBACE,GAAI5B,KAAKU,QAAUmB,WAAa7B,KAAKU,QAAU,KAAMV,KAAKU,MAAQV,KAAK8B,IACvE,GAAI9B,KAAKU,MAAQV,KAAK8B,IAAK9B,KAAKU,MAAQV,KAAK8B,IAC7C,GAAI9B,KAAKU,MAAQV,KAAK+B,IAAK/B,KAAKU,MAAQV,KAAK+B,IAC7C/B,KAAKS,aAAeT,KAAKU,MAEzBV,KAAKa,kB,CAGPmB,mBACEhC,KAAKiC,cACLjC,KAAKgB,8BACLhB,KAAKkC,eAAiB,IAAIC,gBAAe,IAAMnC,KAAKiC,gBACpDjC,KAAKO,eAAe6B,IAAIpC,KAAKe,MAAO,WAAYsB,IAC9C,GAAIrC,KAAKM,mBAAsBN,KAAKsC,mBAAqBtC,KAAKuC,YAAcvC,KAAKK,gBAAkB,CACjGL,KAAKK,gBAAkBL,KAAKe,MAAMyB,iB,CAEpCH,EAAMI,gBAAgB,G,CAI1BC,uBACE1C,KAAKyB,KAAKC,WAAWiB,oBAAoB,aAAc3C,KAAKa,kBAC5Db,KAAKO,eAAeqC,W,CAKtBC,eAAeC,GACb9C,KAAKe,MAAMgC,MAAMD,E,CAKnBD,oBACE7C,KAAKe,MAAMiC,M,CAKbH,wBAAwBI,GACtBjD,KAAKK,gBAAkB,GACvBL,KAAKM,iBAAmB2C,IAAY,GACpCjD,KAAKe,MAAMmC,kBAAkBD,GAC7BjD,KAAKiB,SAAWjB,KAAKe,MAAMG,e,CAK7B2B,cACE7C,KAAKU,MAAQV,KAAKS,aAClBT,KAAKK,gBAAkB,GACvBL,KAAKM,iBAAmB,MACxBN,KAAKe,MAAMmC,kBAAkB,IAC7BlD,KAAKiB,QAAU,K,CAGjBG,cACEpB,KAAKU,MAAQyC,OAAOnD,KAAKe,MAAML,OAC/BV,KAAKoD,UAAUC,OAEfC,uBAAsB,IAAMtD,KAAKiC,gBACjCqB,uBAAsB,IAAMtD,KAAKgB,+B,CAGnCM,aACEtB,KAAKuD,SAAW,MAChBvD,KAAKwD,WAAa,MAClBxD,KAAKyD,QAAQJ,OACbrD,KAAKkC,eAAewB,UAAU1D,KAAKe,M,CAGrCQ,cACEvB,KAAKuD,SAAW,KAChBvD,KAAKwD,WAAa,KAClBxD,KAAK2D,SAASN,OACdrD,KAAKkC,eAAe0B,QAAQ5D,KAAKe,M,CAGnCF,mBACEb,KAAK6D,gBAAkBC,EAAQ9D,KAAKyB,KAAM,aAC1CzB,KAAKsC,iBAAmBwB,EAAQ9D,KAAKyB,KAAM,cAC3CzB,KAAK+D,aAAeD,EAAQ9D,KAAKyB,KAAM,Q,CAGzCD,mBACExB,KAAKgE,U,CAGPC,eACE,OAAOjE,KAAKiB,WAAajB,KAAKkE,cAAgBlE,KAAKuD,S,CAGrDtB,cACE,GAAIjC,KAAKmE,UAAY,OAAQ,CAC3B,MAAMC,EAAUC,KAAKtC,IAAI,GAAI/B,KAAKU,MAAQV,KAAK8B,MAAQ9B,KAAK+B,IAAM/B,KAAK8B,MACvE,MAAMwC,EAAatE,KAAKe,MAAMwD,YAC9B,MAAMC,EAAexE,KAAKyE,OAAOF,YACjC,MAAMG,EAAYC,iBAAiB3E,KAAKe,OAAO6D,iBAAiB,gBAChE,MAAMC,EAAI,QAAQP,EAAaF,mBAAyBA,OAAaM,aAAqBA,WAC1F1E,KAAKyE,OAAOK,MAAMC,UAAY,cAAcF,KAC5C7E,KAAKyE,OAAOK,MAAME,WAAa,IAAIR,EAAe,K,EAOtDxD,8BACE,IAAKhB,KAAKiF,YAAa,CACrB,MAAMvE,EAAQwE,SAASlF,KAAKe,MAAML,MAAO,IACzC,MAAMoB,EAAMoD,SAASlF,KAAKe,MAAMe,IAAK,IACrC,MAAMC,EAAMmD,SAASlF,KAAKe,MAAMgB,IAAK,IACrC,MAAMqC,EAAUC,KAAKc,MAAOzE,EAAQoB,IAAQC,EAAMD,GAAQ,KAC1D9B,KAAKe,MAAM+D,MAAMM,WACf,2EACAhB,EACA,oCACAA,EACA,I,EAINa,YACE,OAAOI,UAAUC,UAAUC,cAAcC,QAAQ,YAAc,C,CAGjEC,SACE,OACEC,EAACC,EAAW,CACV1F,QAASD,KAAKC,QACd2F,MAAO5F,KAAK4F,MACZ1F,QAASF,KAAKE,QACd6D,aAAc/D,KAAK+D,aACnB5D,WAAYH,KAAKG,WACjB0F,SAAU7F,KAAK6F,SACfhC,gBAAiB7D,KAAK6D,gBACtBiC,KAAK,SACL1F,YAAaJ,KAAKI,YAClBmC,UAAWvC,KAAKK,gBAAkBL,KAAKK,gBAAkBL,KAAKuC,UAC9DD,iBAAkBtC,KAAKsC,iBACvByD,SAAU/F,KAAK+F,SACfC,SAAUhG,KAAKgG,SACf/B,aAAcjE,KAAKiE,gBAEnByB,EAAA,OACEO,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,kBAAmBnG,KAAK+F,SACxB,iBAAkB/F,KAAKuD,SACvB,yBAA0BvD,KAAKwD,WAC/B,qBAAsBxD,KAAKmE,UAAY,MACvC,wBAAyBnE,KAAKmE,UAAY,UAE5CiC,aAAcpG,KAAKwB,kBAEnBkE,EAAA,SACEO,KAAK,QACLI,IAAMC,GAAQtG,KAAKe,MAAQuF,EAC3BC,KAAK,QACLL,MAAM,iBACNM,KAAMxG,KAAKwG,KACXT,SAAU/F,KAAK+F,SACfjE,IAAK9B,KAAK8B,IACVC,IAAK/B,KAAK+B,IACV0E,KAAMzG,KAAKyG,KACX/F,MAAOV,KAAKU,MACZgG,QAAS1G,KAAKoB,YACduF,QAAS3G,KAAKuB,YACdqF,OAAQ5G,KAAKsB,aAEdtB,KAAKmE,UAAY,QAChBuB,EAAA,UAAQO,KAAK,UAAUI,IAAMC,GAAQtG,KAAKyE,OAAS6B,EAAKJ,MAAM,kBAC3DlG,KAAK6G,iBAAiB7G,KAAKU,S"}

package/dist/ui-library/p-835c3ff7.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,g as i}from"./p-ac4f4d45.js";import{a as l,h as o}from"./p-b4dfb7cf.js";import{F as r}from"./p-79eee01b.js";import{E as a}from"./p-9a860acc.js";import{D as n,a as h}from"./p-0786fa7c.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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;color:var(--six-color-danger-800);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;overflow:hidden;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;white-space:nowrap}.select__label::-webkit-scrollbar{width:0;height:0}.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:inline-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}.select--small .select__tags six-tag:not(:last-of-type){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}.select--medium .select__tags six-tag:not(:last-of-type){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}.select--large .select__tags six-tag:not(:last-of-type){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 d=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-${++d}`;this.labelId=`select-label-${d}`;this.helpTextId=`select-help-text-${d}`;this.errorTextId=`select-error-text-${d}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new a;this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=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.label="";this.helpText="";this.errorText="";this.required=false;this.clearable=false;this.invalid=false;this.line=false;this.errorOnBlur=false;this.filter=false;this.asyncFilter=false;this.autocomplete=false;this.inputDebounce=n;this.options=null;this.virtualScroll=false;this.defaultValue=undefined}handleDisabledChange(){if(this.disabled&&this.isOpen){this.dropdown.hide()}}handleLabelChange(){this.handleSlotChange()}handleMultipleChange(){const t=this.getValueAsArray();this.value=this.multiple?t:t[0]||"";this.syncItemsFromValue()}handleValueChange(){this.syncItemsFromValue();if(this.input){this.sixChange.emit({value:this.value,isSelected:true})}}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleClearClick=this.handleClearClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleSelectAll=this.handleSelectAll.bind(this);this.handleLabelClick=this.handleLabelClick.bind(this);this.handleMenuHide=this.handleMenuHide.bind(this);this.handleMenuShow=this.handleMenuShow.bind(this);this.handleMenuSelect=this.handleMenuSelect.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.handleInvalid=this.handleInvalid.bind(this);this.handleTagInteraction=this.handleTagInteraction.bind(this);this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.handleSlotChange();if(this.multiple&&this.value){this.value=this.getValueAsArray()}}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>this.resizeMenu()));requestAnimationFrame((()=>this.syncItemsFromValue()));this.eventListeners.add(this.input,"invalid",(async t=>{if(this.customValidation||!this.hasErrorTextSlot&&!this.errorText&&!this.customErrorText){this.customErrorText=await this.input.getValidationMessage()}t.preventDefault()}));this.eventListeners.add(this.input,"six-input-input",h((t=>{const e=this.input.value;this.clearValues();this.sixChange.emit({value:e,isSelected:false});t.stopPropagation()}),this.inputDebounce));this.input.value=this.hasSelection()?this.displayLabel:""}disconnectedCallback(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.isValid()}async setCustomValidity(t){this.customErrorText="";this.customValidation=t!=="";this.input.setCustomValidity(t);this.invalid=!this.input.checkValidity()}async reset(){this.clearValues();this.customErrorText="";this.customValidation=false;this.input.setCustomValidity("");this.invalid=false}getItemLabel(t){const e=t.shadowRoot.querySelector("slot:not([name])");if(e){return l(e)}else{return t.textContent}}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}getValueAsStringArray(){const t=this.getValueAsArray();return t.map(String)}getValueAsArray(){return Array.isArray(this.value)?this.value:[this.value]}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleInvalid(){this.invalid=true}handleClearClick(t){t.stopPropagation();this.clearValues()}clearValues(){var t;this.value=(t=this.defaultValue)!==null&&t!==void 0?t:this.multiple?[]:"";this.syncItemsFromValue()}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:[]}}handleKeyDown(t){const e=t.target;const s=this.getItems();const i=s[0];const l=s[s.length-1];if(e.tagName.toLowerCase()==="six-tag"){return}if(t.key==="Tab"){if(this.isOpen){this.dropdown.hide()}return}if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.isOpen){this.dropdown.show()}if(t.key==="ArrowDown"&&i){i.setFocus();return}if(t.key==="ArrowUp"&&l){l.setFocus();return}}if(!this.isOpen){t.stopPropagation();t.preventDefault();this.dropdown.show();this.menu.typeToSelect(t.key)}}handleLabelClick(){this.box.focus()}handleMenuSelect(t){const e=t.detail.item;if(this.multiple){if(this.value==null||this.value===""){this.value=[]}else if(!Array.isArray(this.value)){this.value=[this.value]}this.value=this.value.includes(e.value)?this.value.filter((t=>t!==e.value)):[...this.value,e.value]}else{this.value=e.value}this.syncItemsFromValue()}handleMenuShow(t){if(this.disabled){t.preventDefault();return}this.resizeMenu();this.resizeObserver.observe(this.host);this.isOpen=true}handleMenuHide(){this.resizeObserver.unobserve(this.host);this.isOpen=false}handleSlotChange(){this.hasHelpTextSlot=o(this.host,"help-text");this.hasErrorTextSlot=o(this.host,"error-text");this.hasLabelSlot=o(this.host,"label");this.syncItemsFromValue()}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()}}resizeMenu(){this.menu.style.minWidth=`${this.box.clientWidth}px`;if(this.dropdown){this.dropdown.reposition()}}syncItemsFromValue(){const t=this.getItems();const e=this.getValueAsStringArray();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=[]}const i=this.hasSelection();if(i){this.touched=true}if(this.input&&this.touched){if(!this.autocomplete){this.input.value=i?this.displayLabel:""}else if(i){this.input.value=Array.isArray(this.value)?this.value.join(","):this.value}this.invalid=!this.input.checkValidity()}}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.getValueAsStringArray().filter((t=>s.includes(t))):s.length>0?s[0]:""}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus&&!this.isOpen)}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.customErrorText?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,onLabelClick:this.handleLabelClick,disabled:this.disabled,required:this.required,displayError:this.displayError()},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"},this.displayTags.length?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,onInvalid:this.handleInvalid,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(){if(this.multiple){return Array.isArray(this.value)?this.value.length>0:false}return 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=c;export{x as six_select};
-//# sourceMappingURL=p-835c3ff7.entry.js.map

package/dist/ui-library/p-835c3ff7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSelectCss","id","SixSelect","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","DEFAULT_DEBOUNCE_FAST","handleDisabledChange","disabled","isOpen","dropdown","hide","handleLabelChange","handleSlotChange","handleMultipleChange","value","getValueAsArray","multiple","syncItemsFromValue","handleValueChange","input","sixChange","emit","isSelected","connectedCallback","virtualScroll","options","console","error","handleBlur","bind","handleFocus","handleClearClick","handleKeyDown","handleSelectAll","handleLabelClick","handleMenuHide","handleMenuShow","handleMenuSelect","handleInvalid","handleTagInteraction","host","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","resizeObserver","ResizeObserver","resizeMenu","requestAnimationFrame","add","async","event","hasErrorTextSlot","errorText","getValidationMessage","preventDefault","debounce","enteredValue","clearValues","stopPropagation","inputDebounce","hasSelection","displayLabel","disconnectedCallback","removeEventListener","removeAll","reportValidity","isValid","message","setCustomValidity","invalid","checkValidity","getItemLabel","item","slot","querySelector","getTextContent","textContent","getItems","map","option","h","label","querySelectorAll","hasMenuItems","length","getValueAsStringArray","values","String","Array","isArray","hasFocus","sixBlur","sixFocus","_a","defaultValue","nonFilteredItems","filter","style","display","keyName","key","keyCode","code","ctrlKey","hasDeselectedOptions","some","opt","checked","forEach","checkedItems","target","items","firstItem","lastItem","tagName","toLowerCase","includes","show","setFocus","menu","typeToSelect","box","focus","detail","v","observe","unobserve","hasHelpTextSlot","hasSlot","hasLabelSlot","path","composedPath","clearButton","find","el","HTMLElement","element","classList","contains","minWidth","clientWidth","reposition","val","push","displayTags","exportparts","type","size","pill","clearable","onClick","onKeyDown","syncValueFromItems","maxTagsVisible","total","slice","extractLabelForSelectedItem","touched","autocomplete","join","selectedOption","checkedItem","checkedValues","displayError","errorOnBlur","render","FormControl","helpText","onLabelClick","required","part","ref","hoist","closeOnSelect","containingElement","disableHideOnEnterAndSpace","class","select","filterPlaceholder","filterDebounce","asyncFilter","select__box","line","role","tabIndex","onBlur","onFocus","placeholder","name","tabindex","select__input","onInvalid","select__menu","onSlotchange"],"sources":["./src/components/six-select/six-select.scss?tag=six-select&encapsulation=shadow","./src/components/six-select/six-select.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  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  overflow: hidden;\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  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: inline-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    }\n\n    six-tag:not(:last-of-type) {\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    }\n\n    six-tag:not(:last-of-type) {\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    }\n\n    six-tag:not(:last-of-type) {\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';\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  box: HTMLElement;\n  dropdown: HTMLSixDropdownElement;\n  input: HTMLSixInputElement;\n  inputId = `select-${++id}`;\n  labelId = `select-label-${id}`;\n  helpTextId = `select-help-text-${id}`;\n  errorTextId = `select-error-text-${id}`;\n  menu: HTMLSixMenuElement;\n  resizeObserver: ResizeObserver;\n  touched: boolean;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixSelectElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() isOpen = false;\n  @State() displayLabel = '';\n  @State() displayTags = [];\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 label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The select's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The select's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The select's required attribute. */\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  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true }) invalid = false;\n\n  /** Set to render as line */\n  @Prop() line = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = 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  /** The default value the select will be reverted to when reset is executed */\n  @Prop() defaultValue: string | string[] | undefined;\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  handleValueChange() {\n    this.syncItemsFromValue();\n    if (this.input) {\n      this.sixChange.emit({ value: this.value, isSelected: true });\n    }\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\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClearClick = this.handleClearClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleSelectAll = this.handleSelectAll.bind(this);\n    this.handleLabelClick = this.handleLabelClick.bind(this);\n    this.handleMenuHide = this.handleMenuHide.bind(this);\n    this.handleMenuShow = this.handleMenuShow.bind(this);\n    this.handleMenuSelect = this.handleMenuSelect.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleTagInteraction = this.handleTagInteraction.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    if (this.multiple && this.value) {\n      this.value = this.getValueAsArray();\n    }\n  }\n\n  componentDidLoad() {\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(this.input, 'invalid', async (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = await this.input.getValidationMessage();\n      }\n      event.preventDefault();\n    });\n\n    this.eventListeners.add(\n      this.input,\n      'six-input-input',\n      debounce((event) => {\n        const enteredValue = this.input.value;\n        this.clearValues();\n        this.sixChange.emit({ value: enteredValue, isSelected: false });\n        event.stopPropagation();\n      }, this.inputDebounce)\n    );\n\n    this.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  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.isValid();\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.clearValues();\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  getItemLabel(item: HTMLSixMenuItemElement) {\n    const slot = item.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot) {\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  getItems() {\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  hasMenuItems() {\n    return this.getItems().length > 0;\n  }\n\n  getValueAsStringArray() {\n    const values = this.getValueAsArray();\n    // enforce that the values are converted to 'string' before the value is compared\n    return values.map(String);\n  }\n\n  getValueAsArray() {\n    return Array.isArray(this.value) ? this.value : [this.value];\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleClearClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.clearValues();\n  }\n\n  clearValues() {\n    this.value = this.defaultValue ?? (this.multiple ? [] : '');\n    this.syncItemsFromValue();\n  }\n\n  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    }\n  }\n\n  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  handleLabelClick() {\n    this.box.focus();\n  }\n\n  handleMenuSelect(event: CustomEvent) {\n    const item = event.detail.item;\n    if (this.multiple) {\n      if (this.value == null || this.value === '') {\n        this.value = [];\n      } else if (!Array.isArray(this.value)) {\n        this.value = [this.value];\n      }\n      this.value = this.value.includes(item.value)\n        ? this.value.filter((v) => v !== item.value)\n        : [...this.value, item.value];\n    } else {\n      this.value = item.value;\n    }\n    this.syncItemsFromValue();\n  }\n\n  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  handleMenuHide() {\n    this.resizeObserver.unobserve(this.host);\n    this.isOpen = false;\n  }\n\n  handleSlotChange() {\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.syncItemsFromValue();\n  }\n\n  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    }\n  }\n\n  resizeMenu() {\n    this.menu.style.minWidth = `${this.box.clientWidth}px`;\n\n    if (this.dropdown) {\n      this.dropdown.reposition();\n    }\n  }\n\n  syncItemsFromValue() {\n    const items = this.getItems();\n    const value = this.getValueAsStringArray();\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 = [];\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    const hasSelection = this.hasSelection();\n    if (hasSelection) {\n      this.touched = true;\n    }\n    if (this.input && this.touched) {\n      if (!this.autocomplete) {\n        this.input.value = hasSelection ? this.displayLabel : '';\n      } else if (hasSelection) {\n        this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;\n      }\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private extractLabelForSelectedItem(value: string[], items: HTMLSixMenuItemElement[]) {\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  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.getValueAsStringArray().filter((val) => checkedValues.includes(val))\n      : checkedValues.length > 0\n      ? checkedValues[0]\n      : '';\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));\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.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        onLabelClick={this.handleLabelClick}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\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\">\n              {this.displayTags.length ? (\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              onInvalid={this.handleInvalid}\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    if (this.multiple) {\n      return Array.isArray(this.value) ? this.value.length > 0 : false;\n    }\n    return this.value !== '';\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-8a970a40.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixGroupLabelCss","id","SixGroupLabel","this","wrapperLabelId","labelId","helpTextId","handleLabelChange","handleSlotChange","connectedCallback","bind","host","shadowRoot","addEventListener","componentWillLoad","disconnectedCallback","removeEventListener","hasLabelSlot","hasSlot","hasHelpTextSlot","render","h","FormControl","inputId","label","helpText","size","disabled","required"],"sources":["./src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","./src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\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 form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  wrapperLabelId = `label-${++id}`;\n  labelId = `label-label-${id}`;\n  helpTextId = `label-help-text-${id}`;\n\n  @Element() host: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The label's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\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        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"0HAAA,MAAMA,EAAmB,u7ECIzB,IAAIC,EAAK,E,MAoBIC,EAAa,M,yBACxBC,KAAAC,eAAiB,WAAWH,IAC5BE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,I,qBAIL,M,kBACH,M,UAGsC,S,WAG9C,G,cAGG,G,cAGiB,M,wBAOpCM,oBACEJ,KAAKK,kB,CAGPC,oBACEN,KAAKK,iBAAmBL,KAAKK,iBAAiBE,KAAKP,MACnDA,KAAKQ,KAAKC,WAAWC,iBAAiB,aAAcV,KAAKK,iB,CAG3DM,oBACEX,KAAKK,kB,CAGPO,uBACEZ,KAAKQ,KAAKC,WAAWI,oBAAoB,aAAcb,KAAKK,iB,CAG9DA,mBACEL,KAAKc,aAAeC,EAAQf,KAAKQ,KAAM,SACvCR,KAAKgB,gBAAkBD,EAAQf,KAAKQ,KAAM,Y,CAG5CS,SACE,OACEC,EAACC,EAAW,CACVC,QAASpB,KAAKC,eACdoB,MAAOrB,KAAKqB,MACZnB,QAASF,KAAKE,QACdY,aAAcd,KAAKc,aACnBX,WAAYH,KAAKG,WACjBmB,SAAUtB,KAAKsB,SACfN,gBAAiBhB,KAAKgB,gBACtBO,KAAMvB,KAAKuB,KACXC,SAAUxB,KAAKwB,SACfC,SAAUzB,KAAKyB,UAEfP,EAAA,a"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s}from"./p-ac4f4d45.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}";let e=0;const h=class{constructor(s){t(this,s);this.sixBlur=i(this,"six-switch-blur",7);this.sixChange=i(this,"six-switch-change",7);this.sixFocus=i(this,"six-switch-focus",7);this.switchId=`switch-${++e}`;this.labelId=`switch-label-${e}`;this.defaultValue="";this.hasFocus=false;this.name=undefined;this.value=undefined;this.disabled=false;this.required=false;this.checked=false;this.invalid=false}handleCheckedChange(){this.input.checked=this.checked;this.sixChange.emit(this.checked)}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleMouseDown=this.handleMouseDown.bind(this)}componentWillLoad(){this.defaultValue=this.value}async setFocus(t){this.input.focus(t)}async removeFocus(){this.input.blur()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(t){this.input.setCustomValidity(t);this.invalid=!this.input.checkValidity()}async reset(){this.value=this.defaultValue;this.input.setCustomValidity("");this.invalid=false}handleClick(){this.checked=this.input.checked}handleBlur(){this.hasFocus=false;this.sixBlur.emit(this.checked)}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleKeyDown(t){if(t.key==="ArrowLeft"){t.preventDefault();this.checked=false}if(t.key==="ArrowRight"){t.preventDefault();this.checked=true}}handleMouseDown(t){t.preventDefault();this.input.focus()}render(){return s("label",{part:"base",htmlFor:this.switchId,class:{switch:true,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus},onMouseDown:this.handleMouseDown},s("span",{part:"control",class:"switch__control"},s("span",{part:"thumb",class:"switch__thumb"}),s("input",{ref:t=>this.input=t,id:this.switchId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"switch","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown})),s("span",{part:"label",id:this.labelId,class:"switch__label"},s("slot",null)))}static get watchers(){return{checked:["handleCheckedChange"]}}};h.style=o;export{h as six_switch};
-//# sourceMappingURL=p-90824648.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixSwitchCss","id","SixSwitch","this","switchId","labelId","defaultValue","handleCheckedChange","input","checked","sixChange","emit","connectedCallback","handleClick","bind","handleBlur","handleFocus","handleKeyDown","handleMouseDown","componentWillLoad","value","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","invalid","checkValidity","hasFocus","sixBlur","sixFocus","event","key","preventDefault","render","h","part","htmlFor","class","switch","disabled","onMouseDown","ref","el","type","name","required","role","onClick","onBlur","onFocus","onKeyDown"],"sources":["./src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","./src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n  --height: var(--six-selection-control-toggle-size);\n  --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n  --width: calc(var(--height) * 2);\n\n  display: inline-block;\n}\n\n.switch {\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.switch__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  background-color: var(--six-selection-control-color-disabled);\n  border-radius: var(--height);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;\n\n  .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--six-input-background-color);\n    border-radius: 50%;\n    transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n    transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color,\n      var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;\n  }\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n  background-color: var(--six-selection-control-color);\n\n  .switch__thumb {\n    background-color: var(--six-color-white);\n    transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n  }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n  cursor: not-allowed;\n  color: var(--six-selection-control-color-disabled);\n\n  .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n\n  &.switch--checked .switch__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.switch__label {\n  line-height: var(--height);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The switch's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n */\n\n@Component({\n  tag: 'six-switch',\n  styleUrl: 'six-switch.scss',\n  shadow: true,\n})\nexport class SixSwitch {\n  switchId = `switch-${++id}`;\n  labelId = `switch-label-${id}`;\n  input: HTMLInputElement;\n\n  @State() hasFocus = false;\n\n  /** The switch's name attribute. */\n  @Prop() name: string;\n\n  /** The switch's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the switch. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the switch a required field. */\n  @Prop() required = false;\n\n  /** Set to true to draw the switch in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    this.input.checked = this.checked;\n    this.sixChange.emit(this.checked);\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-switch-blur' }) sixBlur: EventEmitter<boolean>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-switch-change' }) sixChange: EventEmitter<boolean>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-switch-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** default value the switch will be reverted to when reset is executed */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value;\n  }\n\n  /** Sets focus on the switch. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleClick() {\n    this.checked = this.input.checked;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit(this.checked);\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n    }\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        htmlFor={this.switchId}\n        class={{\n          switch: true,\n          'switch--checked': this.checked,\n          'switch--disabled': this.disabled,\n          'switch--focused': this.hasFocus,\n        }}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"switch__control\">\n          <span part=\"thumb\" class=\"switch__thumb\" />\n\n          <input\n            ref={(el) => (this.input = el)}\n            id={this.switchId}\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=\"switch\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onKeyDown={this.handleKeyDown}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"switch__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,ivECGrB,IAAIC,EAAK,E,MAqBIC,EAAS,M,0JACpBC,KAAAC,SAAW,YAAYH,IACvBE,KAAAE,QAAU,gBAAgBJ,IAuClBE,KAAAG,aAAe,G,cApCH,M,uDASD,M,cAGA,M,aAG+B,M,aAGA,K,CAGlDC,sBACEJ,KAAKK,MAAMC,QAAUN,KAAKM,QAC1BN,KAAKO,UAAUC,KAAKR,KAAKM,Q,CAe3BG,oBACET,KAAKU,YAAcV,KAAKU,YAAYC,KAAKX,MACzCA,KAAKY,WAAaZ,KAAKY,WAAWD,KAAKX,MACvCA,KAAKa,YAAcb,KAAKa,YAAYF,KAAKX,MACzCA,KAAKc,cAAgBd,KAAKc,cAAcH,KAAKX,MAC7CA,KAAKe,gBAAkBf,KAAKe,gBAAgBJ,KAAKX,K,CAGnDgB,oBACEhB,KAAKG,aAAeH,KAAKiB,K,CAK3BC,eAAeC,GACbnB,KAAKK,MAAMe,MAAMD,E,CAKnBD,oBACElB,KAAKK,MAAMgB,M,CAKbH,uBACE,OAAOlB,KAAKK,MAAMiB,gB,CAKpBJ,sBACE,OAAOlB,KAAKK,MAAMkB,SAASC,K,CAK7BN,wBAAwBO,GACtBzB,KAAKK,MAAMqB,kBAAkBD,GAC7BzB,KAAK2B,SAAW3B,KAAKK,MAAMuB,e,CAK7BV,cACElB,KAAKiB,MAAQjB,KAAKG,aAClBH,KAAKK,MAAMqB,kBAAkB,IAC7B1B,KAAK2B,QAAU,K,CAGjBjB,cACEV,KAAKM,QAAUN,KAAKK,MAAMC,O,CAG5BM,aACEZ,KAAK6B,SAAW,MAChB7B,KAAK8B,QAAQtB,KAAKR,KAAKM,Q,CAGzBO,cACEb,KAAK6B,SAAW,KAChB7B,KAAK+B,SAASvB,M,CAGhBM,cAAckB,GACZ,GAAIA,EAAMC,MAAQ,YAAa,CAC7BD,EAAME,iBACNlC,KAAKM,QAAU,K,CAGjB,GAAI0B,EAAMC,MAAQ,aAAc,CAC9BD,EAAME,iBACNlC,KAAKM,QAAU,I,EAInBS,gBAAgBiB,GAEdA,EAAME,iBACNlC,KAAKK,MAAMe,O,CAGbe,SACE,OACEC,EAAA,SACEC,KAAK,OACLC,QAAStC,KAAKC,SACdsC,MAAO,CACLC,OAAQ,KACR,kBAAmBxC,KAAKM,QACxB,mBAAoBN,KAAKyC,SACzB,kBAAmBzC,KAAK6B,UAE1Ba,YAAa1C,KAAKe,iBAElBqB,EAAA,QAAMC,KAAK,UAAUE,MAAM,mBACzBH,EAAA,QAAMC,KAAK,QAAQE,MAAM,kBAEzBH,EAAA,SACEO,IAAMC,GAAQ5C,KAAKK,MAAQuC,EAC3B9C,GAAIE,KAAKC,SACT4C,KAAK,WACLC,KAAM9C,KAAK8C,KACX7B,MAAOjB,KAAKiB,MACZX,QAASN,KAAKM,QACdmC,SAAUzC,KAAKyC,SACfM,SAAU/C,KAAK+C,SACfC,KAAK,SAAQ,eACChD,KAAKM,QAAU,OAAS,QAAO,kBAC5BN,KAAKE,QACtB+C,QAASjD,KAAKU,YACdwC,OAAQlD,KAAKY,WACbuC,QAASnD,KAAKa,YACduC,UAAWpD,KAAKc,iBAIpBsB,EAAA,QAAMC,KAAK,QAAQvC,GAAIE,KAAKE,QAASqC,MAAM,iBACzCH,EAAA,c"}