@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.d16ec8e

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-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"}

package/dist/ui-library/p-9328e5bc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixAvatarCss","SixAvatar","connectedCallback","this","handleImageError","bind","hasError","render","h","part","class","avatar","shape","role","alt","tabIndex","initials","name","image","src","onError"],"sources":["./src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","./src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n\n  --size: 2rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--six-avatar-background-color);\n  font-family: var(--six-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-avatar-color);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  outline: none;\n\n  &:hover {\n    box-shadow: var(--six-elevation-4dp);\n  }\n}\n\n.avatar--circle {\n  border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n  border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n  border-radius: 0;\n}\n\n.avatar__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.avatar__initials {\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.avatar__image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  connectedCallback() {\n    this.handleImageError = this.handleImageError.bind(this);\n  }\n\n  handleImageError() {\n    this.hasError = true;\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {!this.initials && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAe,w/B,MCoBRC,EAAS,M,uCACA,M,WAGJ,G,SAGF,G,cAGK,G,WAG8B,Q,CAEjDC,oBACEC,KAAKC,iBAAmBD,KAAKC,iBAAiBC,KAAKF,K,CAGrDC,mBACED,KAAKG,SAAW,I,CAGlBC,SACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACLC,OAAQ,KACR,iBAAkBR,KAAKS,QAAU,SACjC,kBAAmBT,KAAKS,QAAU,UAClC,iBAAkBT,KAAKS,QAAU,UAEnCC,KAAK,QAAO,aACAV,KAAKW,IACjBC,SAAU,IAERZ,KAAKa,UACLR,EAAA,OAAKC,KAAK,OAAOC,MAAM,gBACrBF,EAAA,QAAMS,KAAK,QACTT,EAAA,4BAKLL,KAAKa,UACJR,EAAA,OAAKC,KAAK,WAAWC,MAAM,oBACxBP,KAAKa,UAITb,KAAKe,QAAUf,KAAKG,UACnBE,EAAA,OAAKC,KAAK,QAAQC,MAAM,gBAAgBS,IAAKhB,KAAKe,MAAOE,QAASjB,KAAKC,mB"}

package/dist/ui-library/p-97cc839c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultState","handleChange","nativeInput","checked","indeterminate","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleMouseDown","event","preventDefault","_a","focus","handleCheckedChange","invalid","checkValidity","sixChange","handleLabelChange","handleSlotChange","connectedCallback","host","shadowRoot","addEventListener","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","add","hasErrorTextSlot","errorText","validationMessage","async","options","blur","reportValidity","validity","valid","message","setCustomValidity","hasSlot","hasLabelSlot","displayError","errorOnBlur","render","h","FormControl","label","size","disabled","required","part","class","checkbox","htmlFor","onMouseDown","viewBox","stroke","fill","transform","d","ref","el","type","name","value","role","onChange","onBlur","onFocus"],"sources":["./src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","./src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the checkbox a required field. */\n  @Prop() required = false;\n\n  /** The checkbox label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** 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  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.checked = this.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n    this.invalid = !this.nativeInput.checkValidity();\n    this.sixChange.emit();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      this.invalid = true;\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.nativeInput?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.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.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"qKAAA,MAAMA,EAAiB,knJCMvB,IAAIC,EAAK,E,MAuBIC,EAAW,M,gKACdC,KAAAC,QAAU,cAAcH,IACxBE,KAAAE,QAAU,kBAAkBJ,IAC5BE,KAAAG,OAAS,iBAAiBL,IAC1BE,KAAAI,YAAc,oBAAoBN,IAElCE,KAAAK,gBAAkB,GAClBL,KAAAM,iBAAmB,MACnBN,KAAAO,eAAiB,IAAIC,EAwErBR,KAAAS,aAAe,MAgFfT,KAAAU,aAAe,KACrB,GAAIV,KAAKW,aAAe,KAAM,CAC5BX,KAAKY,QAAUZ,KAAKW,YAAYC,QAChCZ,KAAKa,cAAgB,K,GAIjBb,KAAAc,WAAa,KACnBd,KAAKe,SAAW,MAChBf,KAAKgB,QAAQC,MAAM,EAGbjB,KAAAkB,YAAc,KACpBlB,KAAKe,SAAW,KAChBf,KAAKmB,SAASF,MAAM,EAGdjB,KAAAoB,gBAAmBC,I,MAEzBA,EAAMC,kBACNC,EAAAvB,KAAKW,eAAW,MAAAY,SAAA,SAAAA,EAAEC,OAAO,E,cAxKP,M,kBACI,M,sBACI,M,UAGb,G,WASC,K,cAGG,M,cAGA,M,WAGH,G,eAGI,G,aAG8B,M,mBAGM,M,aAGN,M,iBAG5B,K,CAatBC,sBACE,GAAIzB,KAAKW,aAAe,KAAM,CAC5B,M,CAEFX,KAAKW,YAAYC,QAAUZ,KAAKY,QAChCZ,KAAKW,YAAYE,cAAgBb,KAAKa,cACtCb,KAAK0B,SAAW1B,KAAKW,YAAYgB,gBACjC3B,KAAK4B,UAAUX,M,CAKjBY,oBACE7B,KAAK8B,kB,CAMPC,oB,OACER,EAAAvB,KAAKgC,KAAKC,cAAU,MAAAV,SAAA,SAAAA,EAAEW,iBAAiB,aAAclC,KAAK8B,iB,CAG5DK,uB,OACEZ,EAAAvB,KAAKgC,KAAKC,cAAU,MAAAV,SAAA,SAAAA,EAAEa,oBAAoB,aAAcpC,KAAK8B,kBAC7D9B,KAAKO,eAAe8B,W,CAGtBC,oBACEtC,KAAKS,aAAeT,KAAKY,QACzBZ,KAAK8B,kB,CAGPS,mBACE,MAAM5B,EAAcX,KAAKW,YACzB,GAAIA,GAAe,KAAM,CACvB,M,CAGFA,EAAYE,cAAgBb,KAAKa,cACjCb,KAAKO,eAAeiC,IAAI7B,EAAa,WAAYU,IAC/CrB,KAAK0B,QAAU,KACf,GAAI1B,KAAKM,mBAAsBN,KAAKyC,kBAAoBzC,KAAK0C,YAAc,IAAM1C,KAAKK,kBAAoB,GAAK,CAC7GL,KAAKK,gBAAkBM,EAAYgC,iB,CAErCtB,EAAMC,gBAAgB,G,CAM1BsB,eAAeC,G,OACbtB,EAAAvB,KAAKW,eAAW,MAAAY,SAAA,SAAAA,EAAEC,MAAMqB,E,CAK1BD,oB,OACErB,EAAAvB,KAAKW,eAAW,MAAAY,SAAA,SAAAA,EAAEuB,M,CAKpBF,uB,MACE,OAAOrB,EAAAvB,KAAKW,eAAW,MAAAY,SAAA,SAAAA,EAAEwB,gB,CAK3BH,sBACE,GAAI5C,KAAKW,aAAe,KAAM,CAC5B,OAAO,I,CAET,OAAOX,KAAKW,YAAYqC,SAASC,K,CAKnCL,wBAAwBM,GACtBlD,KAAKK,gBAAkB,GACvBL,KAAKM,iBAAmB4C,IAAY,GACpC,GAAIlD,KAAKW,aAAe,KAAM,CAC5BX,KAAKW,YAAYwC,kBAAkBD,GACnClD,KAAK0B,SAAW1B,KAAKW,YAAYgB,e,EAMrCiB,c,MACE5C,KAAKY,QAAUZ,KAAKS,aACpBT,KAAKK,gBAAkB,GACvBL,KAAKM,iBAAmB,OACxBiB,EAAAvB,KAAKW,eAAW,MAAAY,SAAA,SAAAA,EAAE4B,kBAAkB,IACpCnD,KAAK0B,QAAU,K,CA0BTI,mBACN9B,KAAKyC,iBAAmBW,EAAQpD,KAAKgC,KAAM,cAC3ChC,KAAKqD,aAAeD,EAAQpD,KAAKgC,KAAM,Q,CAGjCsB,eACN,OAAOtD,KAAK0B,WAAa1B,KAAKuD,cAAgBvD,KAAKe,S,CAGrDyC,SACE,OACEC,EAACC,EAAW,CACVzD,QAASD,KAAKC,QACd0D,MAAO3D,KAAK2D,MACZzD,QAASF,KAAKE,QACdmD,aAAcrD,KAAKqD,aACnBjD,YAAaJ,KAAKI,YAClBsC,UAAW1C,KAAKK,iBAAmB,KAAOL,KAAKK,gBAAkBL,KAAK0C,UACtED,iBAAkBzC,KAAKyC,iBACvBmB,KAAK,SACLC,SAAU7D,KAAK6D,SACfC,SAAU9D,KAAK8D,SACfR,aAActD,KAAKsD,gBAEnBG,EAAA,SACEM,KAAK,OACLC,MAAO,CACLC,SAAU,KACV,oBAAqBjE,KAAKY,QAC1B,qBAAsBZ,KAAK6D,SAC3B,oBAAqB7D,KAAKe,SAC1B,oBAAqBf,KAAK0B,QAC1B,0BAA2B1B,KAAKa,eAElCqD,QAASlE,KAAKC,QACdkE,YAAanE,KAAKoB,iBAElBqC,EAAA,QAAMM,KAAK,UAAUC,MAAM,qBACxBhE,KAAKY,SACJ6C,EAAA,QAAMM,KAAK,eAAeC,MAAM,kBAC9BP,EAAA,OAAKW,QAAQ,aACXX,EAAA,KAAGY,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,UAAS,iBAAgB,SAC/Eb,EAAA,KAAGY,OAAO,eAAc,eAAc,KACpCZ,EAAA,KAAGc,UAAU,iCACXd,EAAA,QAAMe,EAAE,yCACRf,EAAA,QAAMe,EAAE,+CAQlBxE,KAAKY,SAAWZ,KAAKa,eACrB4C,EAAA,QAAMM,KAAK,qBAAqBC,MAAM,kBACpCP,EAAA,OAAKW,QAAQ,aACXX,EAAA,KAAGY,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,UAAS,iBAAgB,SAC/Eb,EAAA,KAAGY,OAAO,eAAc,eAAc,KACpCZ,EAAA,KAAGc,UAAU,iCACXd,EAAA,QAAMe,EAAE,uDAQpBf,EAAA,SACEgB,IAAMC,GAAQ1E,KAAKW,YAAc+D,EACjC5E,GAAIE,KAAKC,QACT0E,KAAK,WACLC,KAAM5E,KAAK4E,KACXC,MAAO7E,KAAK6E,MACZjE,QAASZ,KAAKY,QACdiD,SAAU7D,KAAK6D,SACfC,SAAU9D,KAAK8D,SACfgB,KAAK,WAAU,eACD9E,KAAKY,QAAU,OAAS,QAAO,kBAC5BZ,KAAKE,QACtB6E,SAAU/E,KAAKU,aACfsE,OAAQhF,KAAKc,WACbmE,QAASjF,KAAKkB,eAIlBuC,EAAA,QAAMM,KAAK,OAAOjE,GAAIE,KAAKG,OAAQ6D,MAAM,kBACvCP,EAAA,e"}

package/dist/ui-library/p-9a860acc.js

@@ -1,2 +0,0 @@
-const t=t=>e=>Object.keys(t).every((s=>t[s]===e[s]));class e{constructor(){this.eventListeners=[];this.add=(t,e,s,i=null)=>{this.eventListeners.push({el:t,name:e,listener:s,identifier:i});t.addEventListener(e,s)};this.remove=(e,s,i)=>{const n=t({el:e,name:s,listener:i});this.eventListeners=this.getFilteredEventListeners(n)};this.removeByIdentifier=t=>{const e=e=>e.identifier===t;const s=this.eventListeners.find(e)!==undefined;if(!s){return}this.eventListeners=this.getFilteredEventListeners(e)};this.removeAll=()=>{while(this.eventListeners.length){const{el:t,name:e,listener:s}=this.eventListeners.pop();t.removeEventListener(e,s)}}}getFilteredEventListeners(t){return this.eventListeners.filter((e=>{if(t(e)){e.el.removeEventListener(e.name,e.listener);return false}else{return true}}))}}export{e as E};
-//# sourceMappingURL=p-9a860acc.js.map

package/dist/ui-library/p-9a860acc.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["equals","a","b","Object","keys","every","key","EventListeners","constructor","this","eventListeners","add","el","name","listener","identifier","push","addEventListener","remove","sameItem","getFilteredEventListeners","removeByIdentifier","foundListener","find","undefined","removeAll","length","pop","removeEventListener","filter","item"],"sources":["./src/utils/event-listeners.ts"],"sourcesContent":["interface EventListener {\n  el: DocumentAndElementEventHandlers;\n  name: string;\n  listener: EventListenerOrEventListenerObject;\n  identifier?: string | null;\n}\n\nconst equals =\n  <A extends Object>(a: A) =>\n  <B extends Object>(b: B) =>\n    Object.keys(a).every((key) => a[key] === b[key]);\n\nexport class EventListeners {\n  eventListeners: EventListener[] = [];\n\n  add = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject,\n    identifier = null\n  ) => {\n    this.eventListeners.push({ el, name, listener, identifier });\n    el.addEventListener(name, listener);\n  };\n\n  remove = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject\n  ) => {\n    const sameItem = equals({ el, name, listener });\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  removeByIdentifier = (identifier: string) => {\n    const sameItem = (el) => el.identifier === identifier;\n    const foundListener = this.eventListeners.find(sameItem) !== undefined;\n\n    if (!foundListener) {\n      return;\n    }\n\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  private getFilteredEventListeners(sameItem: (el) => boolean) {\n    return this.eventListeners.filter((item) => {\n      if (sameItem(item)) {\n        item.el.removeEventListener(item.name, item.listener);\n        return false;\n      } else {\n        return true;\n      }\n    });\n  }\n\n  removeAll = () => {\n    while (this.eventListeners.length) {\n      const { el, name, listener } = this.eventListeners.pop();\n      el.removeEventListener(name, listener);\n    }\n  };\n}\n"],"mappings":"AAOA,MAAMA,EACeC,GACAC,GACjBC,OAAOC,KAAKH,GAAGI,OAAOC,GAAQL,EAAEK,KAASJ,EAAEI,K,MAElCC,EAAbC,cACEC,KAAAC,eAAkC,GAElCD,KAAAE,IAAM,CACJC,EACAC,EACAC,EACAC,EAAa,QAEbN,KAAKC,eAAeM,KAAK,CAAEJ,KAAIC,OAAMC,WAAUC,eAC/CH,EAAGK,iBAAiBJ,EAAMC,EAAS,EAGrCL,KAAAS,OAAS,CACPN,EACAC,EACAC,KAEA,MAAMK,EAAWnB,EAAO,CAAEY,KAAIC,OAAMC,aACpCL,KAAKC,eAAiBD,KAAKW,0BAA0BD,EAAS,EAGhEV,KAAAY,mBAAsBN,IACpB,MAAMI,EAAYP,GAAOA,EAAGG,aAAeA,EAC3C,MAAMO,EAAgBb,KAAKC,eAAea,KAAKJ,KAAcK,UAE7D,IAAKF,EAAe,CAClB,M,CAGFb,KAAKC,eAAiBD,KAAKW,0BAA0BD,EAAS,EAchEV,KAAAgB,UAAY,KACV,MAAOhB,KAAKC,eAAegB,OAAQ,CACjC,MAAMd,GAAEA,EAAEC,KAAEA,EAAIC,SAAEA,GAAaL,KAAKC,eAAeiB,MACnDf,EAAGgB,oBAAoBf,EAAMC,E,GAdzBM,0BAA0BD,GAChC,OAAOV,KAAKC,eAAemB,QAAQC,IACjC,GAAIX,EAASW,GAAO,CAClBA,EAAKlB,GAAGgB,oBAAoBE,EAAKjB,KAAMiB,EAAKhB,UAC5C,OAAO,K,KACF,CACL,OAAO,I"}

package/dist/ui-library/p-9d1d222f.entry.js

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

package/dist/ui-library/p-9d1d222f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixAlertCss","toastStack","Object","assign","document","createElement","className","SixAlert","Infinity","handleOpenChange","this","open","show","hide","handleDurationChange","restartAutoHide","connectedCallback","handleCloseClick","bind","handleMouseMove","handleTransitionEnd","componentWillLoad","async","isVisible","sixShow","emit","defaultPrevented","duration","autoHideTimeout","setTimeout","sixHide","clearTimeout","Promise","resolve","parentElement","body","append","host","requestAnimationFrame","addEventListener","remove","querySelector","once","event","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","alert","part","class","closable","type","role","onMouseMove","onTransitionEnd","name","exportparts","onClick"],"sources":["./src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","./src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n\n  ::slotted(*) {\n    margin-left: var(--six-spacing-large);\n  }\n}\n\n.alert--primary {\n  border-top-color: var(--six-color-web-rock-900);\n\n  .alert__icon {\n    color: var(--six-color-web-rock-900);\n  }\n}\n\n.alert--success {\n  border-top-color: var(--six-color-success-600);\n\n  .alert__icon {\n    color: var(--six-color-success-600);\n  }\n}\n\n.alert--info {\n  border-top-color: var(--six-color-action-500);\n\n  .alert__icon {\n    color: var(--six-color-action-500);\n  }\n}\n\n.alert--warning {\n  border-top-color: var(--six-color-warning-800);\n\n  .alert__icon {\n    color: var(--six-color-warning-800);\n  }\n}\n\n.alert--danger {\n  border-top-color: var(--six-color-danger-900);\n\n  .alert__icon {\n    color: var(--six-color-danger-900);\n  }\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n  padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n  tag: 'six-alert',\n  styleUrl: 'six-alert.scss',\n  shadow: true,\n})\nexport class SixAlert {\n  alert: HTMLElement;\n  autoHideTimeout: any;\n\n  @Element() host: HTMLSixAlertElement;\n\n  @State() isVisible = false;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-alert-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-alert-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    clearTimeout(this.autoHideTimeout);\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  @Method()\n  async toast() {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.append(this.host);\n      requestAnimationFrame(() => this.show());\n\n      this.host.addEventListener(\n        'six-alert-after-hide',\n        () => {\n          this.host.remove();\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('six-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleMouseMove() {\n    this.restartAutoHide();\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 === 'opacity' && target.classList.contains('alert')) {\n      this.isVisible = this.open;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  }\n\n  restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.alert = el)}\n        part=\"base\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--visible': this.isVisible,\n          'alert--closable': this.closable,\n          'alert--primary': this.type === 'primary',\n          'alert--success': this.type === 'success',\n          'alert--info': this.type === 'info',\n          'alert--warning': this.type === 'warning',\n          'alert--danger': this.type === 'danger',\n        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </span>\n\n        <span part=\"message\" class=\"alert__message\">\n          <slot />\n        </span>\n\n        {this.closable && (\n          <span class=\"alert__close\">\n            <six-icon-button\n              name=\"clear\"\n              exportparts=\"base:close-button\"\n              onClick={this.handleCloseClick}\n            ></six-icon-button>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,w1DCGpB,MAAMC,EAAaC,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAAEC,UAAW,oB,MAsBhEC,EAAQ,M,8NAME,M,UAG0B,M,cAGX,M,UAGmD,U,cAMpEC,Q,CAGnBC,mBACEC,KAAKC,KAAOD,KAAKE,OAASF,KAAKG,M,CAIjCC,uBACEJ,KAAKK,iB,CAePC,oBACEN,KAAKO,iBAAmBP,KAAKO,iBAAiBC,KAAKR,MACnDA,KAAKS,gBAAkBT,KAAKS,gBAAgBD,KAAKR,MACjDA,KAAKU,oBAAsBV,KAAKU,oBAAoBF,KAAKR,K,CAG3DW,oBAEE,GAAIX,KAAKC,KAAM,CACbD,KAAKE,M,EAMTU,aAEE,GAAIZ,KAAKa,UAAW,CAClB,M,CAGF,MAAMC,EAAUd,KAAKc,QAAQC,OAC7B,GAAID,EAAQE,iBAAkB,CAC5BhB,KAAKC,KAAO,MACZ,M,CAGFD,KAAKa,UAAY,KACjBb,KAAKC,KAAO,KAEZ,GAAID,KAAKiB,SAAWnB,SAAU,CAC5BE,KAAKkB,gBAAkBC,YAAW,IAAMnB,KAAKG,QAAQH,KAAKiB,S,EAM9DL,aAEE,IAAKZ,KAAKa,UAAW,CACnB,M,CAGF,MAAMO,EAAUpB,KAAKoB,QAAQL,OAC7B,GAAIK,EAAQJ,iBAAkB,CAC5BhB,KAAKC,KAAO,KACZ,M,CAGFoB,aAAarB,KAAKkB,iBAClBlB,KAAKa,UAAY,MACjBb,KAAKC,KAAO,K,CASdW,cACE,OAAO,IAAIU,SAAeC,IACxB,IAAKhC,EAAWiC,cAAe,CAC7B9B,SAAS+B,KAAKC,OAAOnC,E,CAGvBA,EAAWmC,OAAO1B,KAAK2B,MACvBC,uBAAsB,IAAM5B,KAAKE,SAEjCF,KAAK2B,KAAKE,iBACR,wBACA,KACE7B,KAAK2B,KAAKG,SACVP,IAGA,GAAIhC,EAAWwC,cAAc,eAAiB,KAAM,CAClDxC,EAAWuC,Q,IAGf,CAAEE,KAAM,MACT,G,CAILzB,mBACEP,KAAKG,M,CAGPM,kBACET,KAAKK,iB,CAGPK,oBAAoBuB,GAClB,MAAMC,EAASD,EAAMC,OAGrB,GAAID,EAAME,eAAiB,WAAaD,EAAOE,UAAUC,SAAS,SAAU,CAC1ErC,KAAKa,UAAYb,KAAKC,KACtBD,KAAKC,KAAOD,KAAKsC,aAAavB,OAASf,KAAKuC,aAAaxB,M,EAI7DV,kBACEgB,aAAarB,KAAKkB,iBAClB,GAAIlB,KAAKC,MAAQD,KAAKiB,SAAWnB,SAAU,CACzCE,KAAKkB,gBAAkBC,YAAW,IAAMnB,KAAKG,QAAQH,KAAKiB,S,EAI9DuB,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQ3C,KAAK4C,MAAQD,EAC3BE,KAAK,OACLC,MAAO,CACLF,MAAO,KACP,cAAe5C,KAAKC,KACpB,iBAAkBD,KAAKa,UACvB,kBAAmBb,KAAK+C,SACxB,iBAAkB/C,KAAKgD,OAAS,UAChC,iBAAkBhD,KAAKgD,OAAS,UAChC,cAAehD,KAAKgD,OAAS,OAC7B,iBAAkBhD,KAAKgD,OAAS,UAChC,gBAAiBhD,KAAKgD,OAAS,UAEjCC,KAAK,QAAO,YACF,YAAW,cACT,OAAM,cACLjD,KAAKC,KAAO,QAAU,OACnCiD,YAAalD,KAAKS,gBAClB0C,gBAAiBnD,KAAKU,qBAEtB+B,EAAA,QAAMI,KAAK,OAAOC,MAAM,eACtBL,EAAA,QAAMW,KAAK,UAGbX,EAAA,QAAMI,KAAK,UAAUC,MAAM,kBACzBL,EAAA,cAGDzC,KAAK+C,UACJN,EAAA,QAAMK,MAAM,gBACVL,EAAA,mBACEW,KAAK,QACLC,YAAY,oBACZC,QAAStD,KAAKO,oB"}

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

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