@six-group/ui-library 4.0.0-beta.0 → 4.0.0-beta.2

package/dist/ui-library/p-28e6c2eb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixErrorPageCss","ERROR_CODE","TITLE_PER_ERROR_CODE","FORBIDDEN","en","de","NOT_FOUND","INTERNAL_SERVER_ERROR","DESCRIPTION_PER_ERROR_CODE","SixErrorPage","getIconName","this","customIcon","undefined","errorCode","getErrorTitle","customTitle","language","getErrorDescription","customDescription","descriptions","getDescriptions","map","errorMessage","h","render","part","class","size"],"sources":["./src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","./src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n  &__title {\n    display: flex;\n    justify-content: center;\n    font-size: var(--six-font-size-xx-large);\n    font-weight: bold;\n    margin-bottom: var(--six-spacing-large);\n  }\n\n  &__description {\n    & > * {\n      text-align: center;\n    }\n  }\n\n  &__icon-container {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__icon::part(icon) {\n    background-color: var(--six-color-web-rock-300);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nenum ERROR_CODE {\n  FORBIDDEN = 403,\n  NOT_FOUND = 404,\n  INTERNAL_SERVER_ERROR = 500,\n}\nconst TITLE_PER_ERROR_CODE = {\n  [ERROR_CODE.FORBIDDEN]: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  [ERROR_CODE.NOT_FOUND]: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE = {\n  [ERROR_CODE.FORBIDDEN]: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  [ERROR_CODE.NOT_FOUND]: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode: number;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon !== undefined) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode === undefined) {\n      return;\n    }\n\n    if (this.errorCode === ERROR_CODE.FORBIDDEN) {\n      return 'lock';\n    }\n\n    if (this.errorCode === ERROR_CODE.NOT_FOUND) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === ERROR_CODE.INTERNAL_SERVER_ERROR) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle() {\n    if (this.customTitle !== undefined) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode === undefined) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode === undefined && this.customDescription === undefined) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions();\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,oWCExB,IAAKC,GAAL,SAAKA,GACHA,IAAA,8BACAA,IAAA,8BACAA,IAAA,qDACD,EAJD,CAAKA,MAAU,KAKf,MAAMC,EAAuB,CAC3B,CAACD,EAAWE,WAAY,CACtBC,GAAI,gBACJC,GAAI,gBAEN,CAACJ,EAAWK,WAAY,CACtBF,GAAI,YACJC,GAAI,wBAEN,CAACJ,EAAWM,uBAAwB,CAClCH,GAAI,SACJC,GAAI,SAIR,MAAMG,EAA6B,CACjC,CAACP,EAAWE,WAAY,CACtBC,GAAI,CACF,kDACA,sEAEFC,GAAI,CACF,wDACA,+FAGJ,CAACJ,EAAWK,WAAY,CACtBF,GAAI,CAAC,4CAA6C,0CAClDC,GAAI,CAAC,mDAAoD,mDAE3D,CAACJ,EAAWM,uBAAwB,CAClCH,GAAI,CAAC,2CAA4C,0CACjDC,GAAI,CACF,6DACA,oD,MAiBOI,EAAY,M,gEASS,K,sFAiBxBC,cACN,GAAIC,KAAKC,aAAeC,UAAW,CACjC,OAAOF,KAAKC,U,CAGd,GAAID,KAAKG,YAAcD,UAAW,CAChC,M,CAGF,GAAIF,KAAKG,YAAcb,EAAWE,UAAW,CAC3C,MAAO,M,CAGT,GAAIQ,KAAKG,YAAcb,EAAWK,UAAW,CAC3C,MAAO,c,CAGT,GAAIK,KAAKG,YAAcb,EAAWM,sBAAuB,CACvD,MAAO,wB,EAIHQ,gBACN,GAAIJ,KAAKK,cAAgBH,UAAW,CAClC,OAAOF,KAAKK,W,CAGd,GAAIL,KAAKG,YAAcD,UAAW,CAChC,M,CAGF,OAAOX,EAAqBS,KAAKG,WAAWH,KAAKM,S,CAG3CC,sBACN,GAAIP,KAAKG,YAAcD,WAAaF,KAAKQ,oBAAsBN,UAAW,CACxE,M,CAGF,MAAMO,EAAeT,KAAKU,kBAC1B,OAAOD,EAAaE,KAAKC,GAAiBC,EAAA,WAAMD,I,CAG1CF,kBACN,GAAIV,KAAKQ,oBAAsBN,UAAW,CACxC,OAAOF,KAAKQ,iB,CAGd,OAAOX,EAA2BG,KAAKG,WAAWH,KAAKM,S,CAGzDQ,SACE,OACED,EAAA,OAAKE,KAAK,aACRF,EAAA,OAAKG,MAAM,iCAAiCD,KAAK,kBAC/CF,EAAA,aAAWI,KAAK,MAAMD,MAAM,uBAAuBD,KAAK,QACrDf,KAAKD,gBAGVc,EAAA,OAAKG,MAAM,wBAAwBD,KAAK,SACrCf,KAAKI,iBAERS,EAAA,OAAKG,MAAM,8BAA8BD,KAAK,eAC3Cf,KAAKO,uB"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as i}from"./p-16b99232.js";const r=class{constructor(o){t(this,o);this.value={}}componentWillLoad(){this.injectAttrs()}attrsUpdated(){this.injectAttrs()}injectAttrs(){const t=this.host.firstElementChild;if(typeof(t===null||t===void 0?void 0:t.assignedElements)!=="function"){return}const o=t.assignedElements().pop();if(!o){return}const i={undefined:t=>o.removeAttribute(t),boolean:(t,i)=>{if(i){o.setAttribute(t,"")}else{o.removeAttribute(t)}},number:(t,i)=>o.setAttribute(t,i),string:(t,i)=>o.setAttribute(t,i),object:(t,i)=>o.setAttribute(t,JSON.stringify(i))};for(const[t,o]of Object.entries(this.value)){i[typeof o](t,o)}}render(){return o("slot",null)}get host(){return i(this)}static get watchers(){return{value:["attrsUpdated"]}}};const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";const n=class{constructor(o){t(this,o);this.stage=null}render(){return this.stage==null||this.stage=="PROD"?null:o("div",{class:`indicator--${this.stage.toLowerCase()}`},o("div",{class:"center-content"},o("six-icon",{class:"align-item",size:"small"},"error_outline"),o("span",{class:"align-item"},o("slot",null))))}};n.style=s;export{r as set_attributes,n as six_stage_indicator};
-//# sourceMappingURL=p-2a02734a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["SetAttributes","componentWillLoad","this","injectAttrs","attrsUpdated","slot","host","firstElementChild","assignedElements","child","pop","types","undefined","key","removeAttribute","boolean","value","setAttribute","number","string","object","JSON","stringify","Object","entries","render","h","sixStageIndicatorCss","SixStageIndicator","stage","class","toLowerCase","size"],"sources":["./src/wrappers/set-attributes/set-attributes.tsx","./src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","./src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["import { Component, Element, Watch, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'set-attributes',\n})\nexport class SetAttributes {\n  @Element() host: HTMLSetAttributesElement;\n\n  /** Attributes map */\n  @Prop() value = {};\n\n  componentWillLoad() {\n    this.injectAttrs();\n  }\n\n  @Watch('value')\n  attrsUpdated() {\n    this.injectAttrs();\n  }\n\n  injectAttrs() {\n    const slot = this.host.firstElementChild as HTMLSlotElement;\n\n    if (typeof slot?.assignedElements !== 'function') {\n      return;\n    }\n\n    const child = slot.assignedElements().pop();\n\n    if (!child) {\n      return;\n    }\n\n    const types = {\n      // no need for function and bigint\n      undefined: (key) => child.removeAttribute(key),\n      boolean: (key, value) => {\n        if (value) {\n          child.setAttribute(key, '');\n        } else {\n          child.removeAttribute(key);\n        }\n      },\n      number: (key, value) => child.setAttribute(key, value),\n      string: (key, value) => child.setAttribute(key, value),\n      object: (key, value) => child.setAttribute(key, JSON.stringify(value)),\n    };\n\n    for (const [key, value] of Object.entries(this.value)) {\n      types[typeof value](key, value);\n    }\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: grid;\n}\n\n.center-content {\n  display: grid;\n  align-self: center;\n  justify-self: center;\n  grid-gap: 5px;\n  grid-auto-flow: column;\n}\n\n.align-item {\n  margin: auto;\n}\n\n.indicator {\n  font-family: var(--six-font-family);\n  font-size: 14px;\n  font-weight: var(--six-font-weight-bold);\n  display: grid;\n  align-content: center;\n  width: 100%;\n  height: 24px;\n\n  &--itu {\n    @extend .indicator;\n    background-color: var(--six-color-success-600);\n    color: var(--six-color-web-rock-900);\n  }\n\n  &--dev {\n    @extend .indicator;\n    background-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n  }\n\n  &--etu {\n    @extend .indicator;\n    background-color: var(--six-color-action-600);\n    color: var(--six-color-white);\n  }\n\n  &--acceptance {\n    @extend .indicator;\n    background-color: var(--six-color-warning-800);\n    color: var(--six-color-web-rock-900);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"wDAKaA,EAAa,M,oCAIR,E,CAEhBC,oBACEC,KAAKC,a,CAIPC,eACEF,KAAKC,a,CAGPA,cACE,MAAME,EAAOH,KAAKI,KAAKC,kBAEvB,UAAWF,IAAI,MAAJA,SAAI,SAAJA,EAAMG,oBAAqB,WAAY,CAChD,M,CAGF,MAAMC,EAAQJ,EAAKG,mBAAmBE,MAEtC,IAAKD,EAAO,CACV,M,CAGF,MAAME,EAAQ,CAEZC,UAAYC,GAAQJ,EAAMK,gBAAgBD,GAC1CE,QAAS,CAACF,EAAKG,KACb,GAAIA,EAAO,CACTP,EAAMQ,aAAaJ,EAAK,G,KACnB,CACLJ,EAAMK,gBAAgBD,E,GAG1BK,OAAQ,CAACL,EAAKG,IAAUP,EAAMQ,aAAaJ,EAAKG,GAChDG,OAAQ,CAACN,EAAKG,IAAUP,EAAMQ,aAAaJ,EAAKG,GAChDI,OAAQ,CAACP,EAAKG,IAAUP,EAAMQ,aAAaJ,EAAKQ,KAAKC,UAAUN,KAGjE,IAAK,MAAOH,EAAKG,KAAUO,OAAOC,QAAQtB,KAAKc,OAAQ,CACrDL,SAAaK,GAAOH,EAAKG,E,EAI7BS,SACE,OAAOC,EAAA,Y,kFCtDX,MAAMC,EAAuB,g2B,MCShBC,EAAiB,M,oCAED,I,CAE3BH,SACE,OAAOvB,KAAK2B,OAAS,MAAQ3B,KAAK2B,OAAS,OAAS,KAClDH,EAAA,OAAKI,MAAO,cAAc5B,KAAK2B,MAAME,iBACnCL,EAAA,OAAKI,MAAM,kBACTJ,EAAA,YAAUI,MAAM,aAAaE,KAAK,SAAO,iBAGzCN,EAAA,QAAMI,MAAO,cACXJ,EAAA,e"}

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

@@ -1,2 +0,0 @@
-import{h as t,F as e,r as o,c as s,H as n,g as r}from"./p-16b99232.js";const i=[t=>typeof t==="object",t=>typeof t.columns==="object",t=>Array.isArray(t.rows),t=>t.sort===undefined||typeof t.sort==="object"];const c=t=>e=>e(t);const l=t=>i.every(c(t));const a={Term:t=>typeof t!=="string"||t.length<1};const d={in:(t,e)=>t.includes(e),ni:(t,e)=>!t.includes(e),eq:(t,e)=>t===e,ne:(t,e)=>t!==e};const h=(t={})=>e=>{var o;const s=Object.keys(t);if(s.length===0){return true}for(const n of s){const s=t[n];if(!s){return true}for(const[t,r]of Object.entries(s)){if(a.Term(r)){continue}const s=String((o=e[n])!==null&&o!==void 0?o:"");if(a.Term(s)){continue}if(!d[t](s,r)){return false}}}return true};const b=t=>t==="none";const u=(t,e)=>String(t).localeCompare(String(e));const f=(t={},e={})=>o=>{const s=Object.values(t);if(s.length===0||s.every(b)){return o}return[...o].sort(((o,s)=>Object.entries(t).reduce(((t,[n,r],i)=>{if(r==="none"){return t}const c=e[n];const l={asc:+1,desc:-1}[r];if(c){return t+l*(c(o,s)<<i)}return t+l*(u(o[n],s[n])<<i)}),0)))};const p=(t,e)=>o=>{if(a.Term(e)){return true}const s=e.toLowerCase();const n=t.map((t=>{var e;return(e=o[t])!==null&&e!==void 0?e:""})).map(String).join().toLowerCase();return n.includes(s)};const x=t=>(e={},o)=>e[t]||o;const g=({data:o,handleRowClick:s,handleCellClick:n})=>{if(!l(o)){return}const r=Object.keys(o.columns);const i=r.map((e=>{const s=x(e);const n=s(o.sort,undefined);const[[r,i]=[]]=Object.entries(s(o.filter,{}));return t("six-table-header-cell",{name:e,sort:n,filter:r,value:i},o.columns[e])}));const c=p(Object.keys(o.columns),o.quickFilter);const a=h(o.filter);const d=f(o.sort,o.compare);const b=d(o.rows.filter(c).filter(a)).map(((e,i)=>{const c=r.map((s=>{const r=o.render&&o.render[s];const c=typeof r==="function"?r(e):String(e[s]);return t("six-table-cell",{onClick:n(e,s),"data-testid":`table-cell-${s}-${i}`,innerHTML:c})}));return t("six-table-row",{onClick:s(e),"data-testid":`table-row-${i}`},c)}));return t(e,null,t("six-table-header",{"data-testid":"table-header"},i),b)};const v=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:table;border-collapse:collapse;user-select:none;border:none;width:100%;height:100%}:host([loading]){border-collapse:separate}:host([striped]) six-table-row:nth-child(odd):not(:hover),:host([striped]) ::slotted(six-table-row:nth-child(odd):not(:hover)){background-color:var(--six-table-row-background-color)}:host(:not(striped)) ::slotted(six-table-row){border-bottom:solid 1px var(--six-table-row-border-color)}.loading{position:absolute;background-color:var(--six-table-background-color);top:0;left:0;width:100%;height:100%}.loading six-spinner{top:calc(50% - 0.5em);left:50%;transform:scale(3)}";const w=class{handleData({detail:t}){if(!l(t)){return}this.data=t}async setData(t){if(!l(t)){return}this.data=t}componentDidLoad(){this.tableReady.emit()}constructor(t){o(this,t);this.tableReady=s(this,"six-table-ready",7);this.tableRowClicked=s(this,"six-table-row-clicked",7);this.tableCellClicked=s(this,"six-table-cell-clicked",7);this.handleRowClick=t=>e=>{this.tableRowClicked.emit({event:e,item:t})};this.handleCellClick=(t,e)=>o=>{this.tableCellClicked.emit({event:o,item:t,key:e})};this.striped=false;this.loading=false;this.data={columns:{},rows:[]};console.warn("six-table will be removed with the next table. Use fate table instead. In case of any question contact Daniel Häusler")}render(){const e=this.loading&&t("div",{class:"loading"},t("six-spinner",{"data-testid":"loading-spinner"}));return t(n,null,t("slot",null,g(this)),e)}get host(){return r(this)}};w.style=v;export{w as six_table};
-//# sourceMappingURL=p-2a61cc66.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["assertions","value","columns","Array","isArray","rows","sort","undefined","apply","f","isData","every","Invalid","Term","length","modes","in","a","b","includes","ni","eq","ne","filterBy","filterModel","item","keys","Object","key","filter","mode","term","entries","String","_a","unordered","DEFAULT_COMPARATOR","localeCompare","sortBy","compare","items","values","reduce","acc","k","v","index","comparator","direction","asc","desc","quickFilterBy","toLowerCase","source","map","join","propOr","o","defaults","fromData","data","handleRowClick","handleCellClick","byKey","h","name","quickFilter","cells","renderer","render","html","onClick","innerHTML","Fragment","sixTableCss","SixTable","handleData","detail","this","async","componentDidLoad","tableReady","emit","constructor","hostRef","event","tableRowClicked","tableCellClicked","console","warn","loading","class","Host"],"sources":["./src/components/six-table/types.ts","./src/components/six-table/util/is.ts","./src/components/six-table/util/filter-by.ts","./src/components/six-table/util/sort-by.ts","./src/components/six-table/util/quick-filter-by.ts","./src/components/six-table/util/from-data.tsx","./src/components/six-table/six-table.scss?tag=six-table&encapsulation=shadow","./src/components/six-table/six-table.tsx"],"sourcesContent":["import { SortDirection, FilterMode } from '../six-table-header-cell/types';\n\nexport type Item = Record<string, unknown>;\n\nexport type BasedOnKeys<T extends keyof any, B> = {\n  [K in T]?: B;\n};\n\nexport type Columns<T> = BasedOnKeys<keyof T, string>;\n\nexport type SortModel<T> = BasedOnKeys<keyof T, SortDirection>;\n\nexport type Comparator<T> = (a: T, b: T) => number;\n\nexport type CompareModel<T> = BasedOnKeys<keyof T, Comparator<T>>;\n\nexport type FilterModel<T> = BasedOnKeys<keyof T, BasedOnKeys<FilterMode, string>>;\n\nexport type Renderer<T> = (value: T) => string;\n\nexport type RenderModel<T> = BasedOnKeys<keyof T, Renderer<T>>;\n\nexport type Data<T> = {\n  columns: Columns<T>;\n  sort?: SortModel<T>;\n  compare?: CompareModel<T>;\n  render?: RenderModel<T>;\n  filter?: FilterModel<T>;\n  quickFilter?: string;\n  rows: T[];\n};\n\nconst assertions = [\n  (value) => typeof value === 'object',\n  (value) => typeof value.columns === 'object',\n  (value) => Array.isArray(value.rows),\n  (value) => value.sort === undefined || typeof value.sort === 'object',\n];\n\nconst apply =\n  <T>(value: T) =>\n  (f: (value: T) => boolean) =>\n    f(value);\n\nexport const isData = <T>(value?: unknown): value is Data<T> => assertions.every(apply(value));\n\nexport interface TableReadyPayload {}\n\nexport interface TableRowClickedPayload<T extends Item> {\n  event: MouseEvent;\n  item: T;\n}\n\nexport interface TableCellClickedPayload<T extends Item> {\n  event: MouseEvent;\n  item: T;\n  key: string;\n}\n","export const Invalid = {\n  Term: (value?: unknown) => typeof value !== 'string' || value.length < 1,\n};\n","import { FilterModel, Item } from '../types';\nimport { FilterMode } from '../../six-table-header-cell/types';\nimport { Invalid } from './is';\n\ntype Filter = (a: string, b: string) => boolean;\n\nconst modes: Record<FilterMode, Filter> = {\n  in: (a, b) => a.includes(b),\n  ni: (a, b) => !a.includes(b),\n  eq: (a, b) => a === b,\n  ne: (a, b) => a !== b,\n};\n\nexport const filterBy =\n  <T extends Item>(filterModel: FilterModel<T> = {}) =>\n  (item: T): boolean => {\n    const keys = Object.keys(filterModel);\n\n    if (keys.length === 0) {\n      return true;\n    }\n\n    for (const key of keys) {\n      const filter = filterModel[key];\n\n      if (!filter) {\n        return true;\n      }\n\n      for (const [mode, term] of Object.entries(filter)) {\n        if (Invalid.Term(term)) {\n          continue;\n        }\n\n        const value = String(item[key] ?? '');\n\n        if (Invalid.Term(value)) {\n          continue;\n        }\n\n        if (!modes[mode](value, term)) {\n          return false;\n        }\n      }\n    }\n\n    return true;\n  };\n","import { Comparator, CompareModel, Item, SortModel } from '../types';\nimport { SortDirection } from '../../six-table-header-cell/types';\n\nconst unordered = (value: SortDirection) => value === 'none';\n\nconst DEFAULT_COMPARATOR: Comparator<unknown> = (a, b) => String(a).localeCompare(String(b));\n\nexport const sortBy =\n  <T extends Item>(sort: SortModel<T> = {}, compare: CompareModel<T> = {}) =>\n  (items: T[]) => {\n    const values = Object.values(sort);\n\n    if (values.length === 0 || values.every(unordered)) {\n      return items;\n    }\n\n    return [...items].sort((a, b) => {\n      return Object.entries(sort).reduce((acc, [k, v], index) => {\n        if (v === 'none') {\n          return acc;\n        }\n\n        const comparator = compare[k];\n\n        const direction = {\n          asc: +1,\n          desc: -1,\n        }[v];\n\n        if (comparator) {\n          return acc + direction * (comparator(a, b) << index);\n        }\n\n        return acc + direction * (DEFAULT_COMPARATOR(a[k], b[k]) << index);\n      }, 0);\n    });\n  };\n","import { Item } from '../types';\nimport { Invalid } from './is';\n\nexport const quickFilterBy =\n  <T extends Item>(keys: string[], value?: string) =>\n  (item: T): boolean => {\n    if (Invalid.Term(value)) {\n      return true;\n    }\n\n    const term = value.toLowerCase();\n\n    const source = keys\n      .map((key) => item[key] ?? '')\n      .map(String)\n      .join()\n      .toLowerCase();\n\n    return source.includes(term);\n  };\n","import { Data, isData, Item } from '../types';\nimport { filterBy } from './filter-by';\nimport { Fragment, h } from '@stencil/core';\nimport { sortBy } from './sort-by';\nimport { quickFilterBy } from './quick-filter-by';\nimport { FilterMode } from '../../six-table-header-cell/types';\n\ninterface FromDataProps<T extends Item> {\n  data: Data<T>;\n  handleRowClick: (item: T) => (event: MouseEvent) => void;\n  handleCellClick: (item: T, key: string) => (event: MouseEvent) => void;\n}\n\nconst propOr =\n  (k: string) =>\n  <T extends unknown>(o = {}, defaults: T): T =>\n    o[k] || defaults;\n\nexport const fromData = <T extends Item>({ data, handleRowClick, handleCellClick }: FromDataProps<T>) => {\n  if (!isData(data)) {\n    return;\n  }\n\n  const keys = Object.keys(data.columns);\n\n  const columns = keys.map((key) => {\n    const byKey = propOr(key);\n\n    const sort = byKey(data.sort, undefined);\n    const [[filter, value] = []] = Object.entries<string>(byKey(data.filter, {}));\n\n    return (\n      <six-table-header-cell name={key} sort={sort} filter={filter as FilterMode} value={value}>\n        {data.columns[key]}\n      </six-table-header-cell>\n    );\n  });\n\n  const quickFilter = quickFilterBy(Object.keys(data.columns), data.quickFilter);\n  const filter = filterBy(data.filter);\n  const sort = sortBy(data.sort, data.compare);\n\n  const rows = sort(data.rows.filter(quickFilter).filter(filter)).map((item, index) => {\n    const cells = keys.map((key) => {\n      const renderer = data.render && data.render[key];\n      // HTML is not escaped, responsibility lays on the caller\n      const html = typeof renderer === 'function' ? renderer(item) : String(item[key]);\n\n      return (\n        <six-table-cell\n          onClick={handleCellClick(item, key)}\n          data-testid={`table-cell-${key}-${index}`}\n          innerHTML={html}\n        />\n      );\n    });\n\n    return (\n      <six-table-row onClick={handleRowClick(item)} data-testid={`table-row-${index}`}>\n        {cells}\n      </six-table-row>\n    );\n  });\n\n  return (\n    <Fragment>\n      <six-table-header data-testid=\"table-header\">{columns}</six-table-header>\n      {rows}\n    </Fragment>\n  );\n};\n","@import 'src/global/component';\n\n//$six-table-loading-overlay: rgba(0, 0, 0, 0.12);\n$six-table-loading-spinner: scale(3);\n\n:host {\n  display: table;\n  border-collapse: collapse;\n  user-select: none;\n  border: none;\n  width: 100%;\n  height: 100%;\n}\n\n:host([loading]) {\n  border-collapse: separate;\n}\n\n:host([striped]) {\n  six-table-row:nth-child(odd):not(:hover),\n  ::slotted(six-table-row:nth-child(odd):not(:hover)) {\n    background-color: var(--six-table-row-background-color);\n  }\n}\n\n:host(:not(striped)) {\n  ::slotted(six-table-row) {\n    border-bottom: solid 1px var(--six-table-row-border-color);\n  }\n}\n\n.loading {\n  position: absolute;\n  //background-color: $six-table-loading-overlay;\n  background-color: var(--six-table-background-color);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.loading six-spinner {\n  top: calc(50% - 0.5em);\n  left: 50%;\n  transform: $six-table-loading-spinner;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State, Listen, Method, Element } from '@stencil/core';\nimport { Data, isData, TableReadyPayload, TableRowClickedPayload, TableCellClickedPayload, Item } from './types';\nimport { fromData } from './util/from-data';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define header and the rows of the table.\n * @Deprecated - six-table will be removed with the next table. Use fate table instead.\n */\n\n@Component({\n  tag: 'six-table',\n  styleUrl: 'six-table.scss',\n  shadow: true,\n})\nexport class SixTable {\n  @Element() host: HTMLSixTableElement;\n\n  /** Set to true to stripe the table. */\n  @Prop() striped = false;\n  /** Set to true to display loading indicator. */\n  @Prop() loading = false;\n\n  /** Emitted when table is ready. */\n  @Event({ eventName: 'six-table-ready' }) tableReady: EventEmitter<TableReadyPayload>;\n  /** Emitted when table row is clicked. */\n  @Event({ eventName: 'six-table-row-clicked' }) tableRowClicked: EventEmitter<TableRowClickedPayload<Item>>;\n  /** Emitted when table cell is clicked. */\n  @Event({ eventName: 'six-table-cell-clicked' }) tableCellClicked: EventEmitter<TableCellClickedPayload<Item>>;\n\n  @Listen('data')\n  handleData<T extends Item>({ detail }: CustomEvent<Data<T>>) {\n    if (!isData(detail)) {\n      return;\n    }\n\n    this.data = detail;\n  }\n\n  @Method()\n  async setData<T extends Item>(value: Data<T>) {\n    if (!isData(value)) {\n      return;\n    }\n\n    this.data = value;\n  }\n\n  @State() data: Data<Item> = {\n    columns: {},\n    rows: [],\n  };\n\n  componentDidLoad() {\n    this.tableReady.emit();\n  }\n\n  handleRowClick =\n    <T extends Item>(item: T) =>\n    (event: MouseEvent) => {\n      this.tableRowClicked.emit({ event, item });\n    };\n\n  handleCellClick =\n    <T extends Item>(item: T, key: string) =>\n    (event: MouseEvent) => {\n      this.tableCellClicked.emit({ event, item, key });\n    };\n\n  constructor() {\n    console.warn(\n      'six-table will be removed with the next table. Use fate table instead. In case of any question contact Daniel Häusler'\n    );\n  }\n\n  render() {\n    const loading = this.loading && (\n      <div class=\"loading\">\n        <six-spinner data-testid=\"loading-spinner\" />\n      </div>\n    );\n\n    return (\n      <Host>\n        <slot>{fromData(this)}</slot>\n        {loading}\n      </Host>\n    );\n  }\n}\n"],"mappings":"uEAgCA,MAAMA,EAAa,CAChBC,UAAiBA,IAAU,SAC3BA,UAAiBA,EAAMC,UAAY,SACnCD,GAAUE,MAAMC,QAAQH,EAAMI,MAC9BJ,GAAUA,EAAMK,OAASC,kBAAoBN,EAAMK,OAAS,UAG/D,MAAME,EACAP,GACHQ,GACCA,EAAER,GAEC,MAAMS,EAAaT,GAAsCD,EAAWW,MAAMH,EAAMP,IC5ChF,MAAMW,EAAU,CACrBC,KAAOZ,UAA2BA,IAAU,UAAYA,EAAMa,OAAS,GCKzE,MAAMC,EAAoC,CACxCC,GAAI,CAACC,EAAGC,IAAMD,EAAEE,SAASD,GACzBE,GAAI,CAACH,EAAGC,KAAOD,EAAEE,SAASD,GAC1BG,GAAI,CAACJ,EAAGC,IAAMD,IAAMC,EACpBI,GAAI,CAACL,EAAGC,IAAMD,IAAMC,GAGf,MAAMK,EACX,CAAiBC,EAA8B,KAC9CC,I,MACC,MAAMC,EAAOC,OAAOD,KAAKF,GAEzB,GAAIE,EAAKZ,SAAW,EAAG,CACrB,OAAO,I,CAGT,IAAK,MAAMc,KAAOF,EAAM,CACtB,MAAMG,EAASL,EAAYI,GAE3B,IAAKC,EAAQ,CACX,OAAO,I,CAGT,IAAK,MAAOC,EAAMC,KAASJ,OAAOK,QAAQH,GAAS,CACjD,GAAIjB,EAAQC,KAAKkB,GAAO,CACtB,Q,CAGF,MAAM9B,EAAQgC,QAAOC,EAAAT,EAAKG,MAAI,MAAAM,SAAA,EAAAA,EAAI,IAElC,GAAItB,EAAQC,KAAKZ,GAAQ,CACvB,Q,CAGF,IAAKc,EAAMe,GAAM7B,EAAO8B,GAAO,CAC7B,OAAO,K,GAKb,OAAO,IAAI,EC3Cf,MAAMI,EAAalC,GAAyBA,IAAU,OAEtD,MAAMmC,EAA0C,CAACnB,EAAGC,IAAMe,OAAOhB,GAAGoB,cAAcJ,OAAOf,IAElF,MAAMoB,EACX,CAAiBhC,EAAqB,GAAIiC,EAA2B,KACpEC,IACC,MAAMC,EAASd,OAAOc,OAAOnC,GAE7B,GAAImC,EAAO3B,SAAW,GAAK2B,EAAO9B,MAAMwB,GAAY,CAClD,OAAOK,C,CAGT,MAAO,IAAIA,GAAOlC,MAAK,CAACW,EAAGC,IAClBS,OAAOK,QAAQ1B,GAAMoC,QAAO,CAACC,GAAMC,EAAGC,GAAIC,KAC/C,GAAID,IAAM,OAAQ,CAChB,OAAOF,C,CAGT,MAAMI,EAAaR,EAAQK,GAE3B,MAAMI,EAAY,CAChBC,KAAM,EACNC,MAAO,GACPL,GAEF,GAAIE,EAAY,CACd,OAAOJ,EAAMK,GAAaD,EAAW9B,EAAGC,IAAM4B,E,CAGhD,OAAOH,EAAMK,GAAaZ,EAAmBnB,EAAE2B,GAAI1B,EAAE0B,KAAOE,EAAM,GACjE,IACH,EChCC,MAAMK,EACX,CAAiBzB,EAAgBzB,IAChCwB,IACC,GAAIb,EAAQC,KAAKZ,GAAQ,CACvB,OAAO,I,CAGT,MAAM8B,EAAO9B,EAAMmD,cAEnB,MAAMC,EAAS3B,EACZ4B,KAAK1B,IAAG,IAAAM,EAAK,OAAAA,EAAAT,EAAKG,MAAI,MAAAM,SAAA,EAAAA,EAAI,EAAE,IAC5BoB,IAAIrB,QACJsB,OACAH,cAEH,OAAOC,EAAOlC,SAASY,EAAK,ECLhC,MAAMyB,EACHZ,GACD,CAAoBa,EAAI,GAAIC,IAC1BD,EAAEb,IAAMc,EAEL,MAAMC,EAAW,EAAmBC,OAAMC,iBAAgBC,sBAC/D,IAAKpD,EAAOkD,GAAO,CACjB,M,CAGF,MAAMlC,EAAOC,OAAOD,KAAKkC,EAAK1D,SAE9B,MAAMA,EAAUwB,EAAK4B,KAAK1B,IACxB,MAAMmC,EAAQP,EAAO5B,GAErB,MAAMtB,EAAOyD,EAAMH,EAAKtD,KAAMC,WAC9B,OAAQsB,EAAQ5B,GAAS,IAAM0B,OAAOK,QAAgB+B,EAAMH,EAAK/B,OAAQ,KAEzE,OACEmC,EAAA,yBAAuBC,KAAMrC,EAAKtB,KAAMA,EAAMuB,OAAQA,EAAsB5B,MAAOA,GAChF2D,EAAK1D,QAAQ0B,GACQ,IAI5B,MAAMsC,EAAcf,EAAcxB,OAAOD,KAAKkC,EAAK1D,SAAU0D,EAAKM,aAClE,MAAMrC,EAASN,EAASqC,EAAK/B,QAC7B,MAAMvB,EAAOgC,EAAOsB,EAAKtD,KAAMsD,EAAKrB,SAEpC,MAAMlC,EAAOC,EAAKsD,EAAKvD,KAAKwB,OAAOqC,GAAarC,OAAOA,IAASyB,KAAI,CAAC7B,EAAMqB,KACzE,MAAMqB,EAAQzC,EAAK4B,KAAK1B,IACtB,MAAMwC,EAAWR,EAAKS,QAAUT,EAAKS,OAAOzC,GAE5C,MAAM0C,SAAcF,IAAa,WAAaA,EAAS3C,GAAQQ,OAAOR,EAAKG,IAE3E,OACEoC,EAAA,kBACEO,QAAST,EAAgBrC,EAAMG,GAAI,cACtB,cAAcA,KAAOkB,IAClC0B,UAAWF,GACX,IAIN,OACEN,EAAA,iBAAeO,QAASV,EAAepC,GAAK,cAAe,aAAaqB,KACrEqB,EACa,IAIpB,OACEH,EAACS,EAAQ,KACPT,EAAA,kCAA8B,gBAAgB9D,GAC7CG,EACQ,ECpEf,MAAMqE,EAAc,2sB,MCiBPC,EAAQ,MAgBnBC,YAA2BC,OAAEA,IAC3B,IAAKnE,EAAOmE,GAAS,CACnB,M,CAGFC,KAAKlB,KAAOiB,C,CAIdE,cAA8B9E,GAC5B,IAAKS,EAAOT,GAAQ,CAClB,M,CAGF6E,KAAKlB,KAAO3D,C,CAQd+E,mBACEF,KAAKG,WAAWC,M,CAelBC,YAAAC,G,sKAZAN,KAAAjB,eACmBpC,GAChB4D,IACCP,KAAKQ,gBAAgBJ,KAAK,CAAEG,QAAO5D,QAAO,EAG9CqD,KAAAhB,gBACE,CAAiBrC,EAASG,IACzByD,IACCP,KAAKS,iBAAiBL,KAAK,CAAEG,QAAO5D,OAAMG,OAAM,E,aA/ClC,M,aAEA,M,UA2BU,CAC1B1B,QAAS,GACTG,KAAM,IAoBNmF,QAAQC,KACN,wH,CAIJpB,SACE,MAAMqB,EAAUZ,KAAKY,SACnB1B,EAAA,OAAK2B,MAAM,WACT3B,EAAA,6BAAyB,qBAI7B,OACEA,EAAC4B,EAAI,KACH5B,EAAA,YAAOL,EAASmB,OACfY,E"}

package/dist/ui-library/p-3c100309.js

@@ -1,2 +0,0 @@
-import{h as r}from"./p-16b99232.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-3c100309.js.map

package/dist/ui-library/p-3c100309.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-3d5cad2d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as r,g as i}from"./p-16b99232.js";import{s,g as a}from"./p-eb8f05a9.js";import{f as e}from"./p-b1e66136.js";const b=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--tabs-border-color:var(--six-tab-border-color);display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group .tab-group__active-tab-indicator{position:absolute;transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease}.tab-group:not(.focus-visible) ::slotted(six-tab){--focus-ring:none}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-bottom:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--top .tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;border-top:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--bottom .tab-group__active-tab-indicator{top:-2px;border-top:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-right:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--left .tab-group__active-tab-indicator{right:-2px;border-right:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column;border-left:solid var(--six-tab-border-width) var(--tabs-border-color)}.tab-group--right .tab-group__active-tab-indicator{left:-2px;border-left:solid var(--six-tab-border-width-active) var(--six-tab-border-color-active)}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const l=class{constructor(r){t(this,r);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.hasScrollControls=false;this.placement="top";this.noScrollControls=false}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleScrollLeft=this.handleScrollLeft.bind(this);this.handleScrollRight=this.handleScrollRight.bind(this);this.syncActiveTabIndicator=this.syncActiveTabIndicator.bind(this)}componentDidLoad(){const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>!["aria-labelledby","aria-controls"].includes(t.attributeName)))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){this.mutationObserver.disconnect();e.unobserve(this.tabGroup);this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const r=o.find((o=>o.panel===t));if(r){this.setActiveTab(r)}}getAllTabs(t=false){const o=this.tabs.querySelector("slot");return[...o.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){const t=this.body.querySelector("slot");return[...t.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}handleClick(t){const o=t.target;const r=o.closest("six-tab");const i=r===null||r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(r){this.setActiveTab(r)}}handleKeyDown(t){const o=t.target;const r=o.closest("six-tab");const i=r===null||r===void 0?void 0:r.closest("six-tab-group");if(i!==this.host){return false}if(["Enter"," "].includes(t.key)){if(r){this.setActiveTab(r);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const r=this.getAllTabs();let i=r.indexOf(o);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus({preventScroll:true});if(["top","bottom"].includes(this.placement)){s(r[i],this.nav,"horizontal")}t.preventDefault()}}}handleScrollLeft(){this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollRight(){this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}updateScrollControls(){this.hasScrollControls=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth}setActiveTab(t,o=true){if(t&&t!==this.activeTab&&!t.disabled){const r=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>t.active=t.name===this.activeTab.panel));this.syncActiveTabIndicator();if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(r){this.sixTabHide.emit({name:r.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{const r=o.find((o=>o.name===t.panel));if(r){t.setAttribute("aria-controls",r.getAttribute("id"));r.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){const t=this.getActiveTab();if(t){this.activeTabIndicator.style.display="block"}else{this.activeTabIndicator.style.display="none";return}const o=t.clientWidth;const r=t.clientHeight;const i=a(t,this.nav);const s=i.top+this.nav.scrollTop;const e=i.left+this.nav.scrollLeft;switch(this.placement){case"top":case"bottom":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"left":case"right":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${r}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}}render(){return r("div",{part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasScrollControls},onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("div",{class:"tab-group__nav-container"},this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),r("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},r("div",{ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},r("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"tab-group__active-tab-indicator"}),r("slot",{name:"nav",onSlotchange:this.syncActiveTabIndicator}))),this.hasScrollControls&&r("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),r("div",{ref:t=>this.body=t,part:"body",class:"tab-group__body"},r("slot",{onSlotchange:this.syncActiveTabIndicator})))}get host(){return i(this)}static get watchers(){return{placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"]}}};l.style=b;export{l as six_tab_group};
-//# sourceMappingURL=p-3d5cad2d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixTabGroupCss","SixTabGroup","handlePlacementChange","this","syncActiveTabIndicator","handleNoScrollControlsChange","updateScrollControls","connectedCallback","handleClick","bind","handleKeyDown","handleScrollLeft","handleScrollRight","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","setActiveTab","getActiveTab","getAllTabs","unobserve","target","observe","host","focusVisible","tabGroup","resizeObserver","ResizeObserver","nav","requestAnimationFrame","mutationObserver","MutationObserver","mutations","some","mutation","includes","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","async","panel","tabs","tab","find","el","includeDisabled","slot","querySelector","assignedElements","filter","tagName","toLowerCase","disabled","getAllPanels","body","active","event","closest","key","preventDefault","activeEl","document","activeElement","index","indexOf","length","Math","max","min","setFocus","preventScroll","placement","scrollIntoView","scroll","left","scrollLeft","clientWidth","behavior","hasScrollControls","noScrollControls","scrollWidth","emitEvents","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","activeTabIndicator","style","display","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","transform","render","h","part","ref","class","onClick","onKeyDown","exportparts","role","onSlotchange"],"sources":["./src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","./src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n/**\n * @prop --tabs-border-color: The color of the border that separates tabs.\n */\n:host {\n  --tabs-border-color: var(--six-tab-border-color);\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n\n  .tab-group__active-tab-indicator {\n    position: absolute;\n    transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease;\n  }\n\n  // Remove the focus ring when the user isn't interacting with a keyboard\n  &:not(.focus-visible) ::slotted(six-tab) {\n    --focus-ring: none;\n  }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Top\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--top {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    bottom: -2px;\n    border-bottom: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    order: 2;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Bottom\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--bottom {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    top: calc(-1 * 2px);\n    border-top: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    order: 1;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Left\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--left {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-right: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    right: calc(-1 * 2px);\n    border-right: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Right\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tab-group--right {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--six-tab-border-width) var(--tabs-border-color);\n  }\n\n  .tab-group__active-tab-indicator {\n    left: calc(-1 * 2px);\n    border-left: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { getOffset } from '../../utils/offset';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\n\nexport interface SixTabShowPayload {\n  name: string;\n}\n\nexport interface SixTabHidePayload {\n  name: string;\n}\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 nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n  tag: 'six-tab-group',\n  styleUrl: 'six-tab-group.scss',\n  shadow: true,\n})\nexport class SixTabGroup {\n  activeTab: HTMLSixTabElement;\n  activeTabIndicator: HTMLElement;\n  body: HTMLElement;\n  mutationObserver: MutationObserver;\n  nav: HTMLElement;\n  resizeObserver: ResizeObserver;\n  tabGroup: HTMLElement;\n  tabs: HTMLElement;\n\n  @Element() host: HTMLSixTabGroupElement;\n\n  @State() hasScrollControls = false;\n\n  /** The placement of the tabs. */\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @Prop() noScrollControls = false;\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event({ eventName: 'six-tab-show' }) sixTabShow: EventEmitter<SixTabShowPayload>;\n\n  /** Emitted when a tab is hidden. */\n  @Event({ eventName: 'six-tab-hide' }) sixTabHide: EventEmitter<SixTabHidePayload>;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleScrollLeft = this.handleScrollLeft.bind(this);\n    this.handleScrollRight = this.handleScrollRight.bind(this);\n    this.syncActiveTabIndicator = this.syncActiveTabIndicator.bind(this);\n  }\n\n  componentDidLoad() {\n    // Set initial tab state when the tabs first become visible\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n\n    focusVisible.observe(this.tabGroup);\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    // Update aria labels if the DOM changes\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n    });\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    focusVisible.unobserve(this.tabGroup);\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  getAllTabs(includeDisabled = false) {\n    const slot = this.tabs.querySelector('slot');\n\n    return [...slot.assignedElements()].filter((el: any) => {\n      return includeDisabled\n        ? el.tagName.toLowerCase() === 'six-tab'\n        : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;\n    }) as [HTMLSixTabElement];\n  }\n\n  getAllPanels() {\n    const slot = this.body.querySelector('slot');\n    return [...slot.assignedElements()].filter((el: any) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n      HTMLSixTabPanelElement\n    ];\n  }\n\n  getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (event.key === 'ArrowLeft') {\n          index = Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n\n        tabs[index].setFocus({ preventScroll: true });\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  }\n\n  handleScrollLeft() {\n    this.nav.scroll({\n      left: this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  }\n\n  handleScrollRight() {\n    this.nav.scroll({\n      left: this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  }\n\n  updateScrollControls() {\n    this.hasScrollControls = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n  }\n\n  setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n    if (tab && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab.panel));\n      this.syncActiveTabIndicator();\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.sixTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.sixTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  syncActiveTabIndicator() {\n    const tab = this.getActiveTab();\n\n    if (tab) {\n      this.activeTabIndicator.style.display = 'block';\n    } else {\n      this.activeTabIndicator.style.display = 'none';\n      return;\n    }\n\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\n\n    switch (this.placement) {\n      case 'top':\n      case 'bottom':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'left':\n      case 'right':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={(el) => (this.tabGroup = el)}\n        class={{\n          'tab-group': true,\n\n          // Placements\n          'tab-group--top': this.placement === 'top',\n          'tab-group--bottom': this.placement === 'bottom',\n          'tab-group--left': this.placement === 'left',\n          'tab-group--right': this.placement === 'right',\n\n          'tab-group--has-scroll-controls': this.hasScrollControls,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tab-group__nav-container\">\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_left\"\n              onClick={this.handleScrollLeft}\n            />\n          )}\n          <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n            <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n              <div\n                ref={(el) => (this.activeTabIndicator = el)}\n                part=\"active-tab-indicator\"\n                class=\"tab-group__active-tab-indicator\"\n              />\n              <slot name=\"nav\" onSlotchange={this.syncActiveTabIndicator} />\n            </div>\n          </div>\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_right\"\n              onClick={this.handleScrollRight}\n            />\n          )}\n        </div>\n\n        <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n          <slot onSlotchange={this.syncActiveTabIndicator} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s}from"./p-16b99232.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-3e3edcbc.entry.js.map

package/dist/ui-library/p-3e3edcbc.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-3efe46cf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixFooterCss","SixFooter","render","h","class"],"sources":["./src/components/six-footer/six-footer.scss?tag=six-footer&encapsulation=shadow","./src/components/six-footer/six-footer.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-footer {\n  color: var(--six-color-web-rock-900);\n  padding: var(--six-spacing-x-small) 0;\n  text-align: center;\n  width: 100%;\n  background-color: var(--six-footer-background-color);\n  box-shadow: var(--six-shadow-x-large-top);\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the footer.\n */\n\n@Component({\n  tag: 'six-footer',\n  styleUrl: 'six-footer.scss',\n  shadow: true,\n})\nexport class SixFooter {\n  render() {\n    return (\n      <footer class=\"six-footer\">\n        <slot />\n      </footer>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAe,4U,MCcRC,EAAS,M,yBACpBC,SACE,OACEC,EAAA,UAAQC,MAAM,cACZD,EAAA,a"}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-16b99232.js";import{I as n}from"./p-25a3bf57.js";import{d as r,T as o,e as h,i as a,S as c}from"./p-d12c6092.js";import{D as p,b as l,a as u}from"./p-0786fa7c.js";import{E as m}from"./p-9a860acc.js";import{h as d}from"./p-b4dfb7cf.js";var f;(function(t){t["HHmmss"]="HH:mm:ss";t["hhmmssaa"]="hh:mm:ss:aa";t["HHmmssms"]="HH:mm:ss:ms";t["hhmmssmsaa"]="hh:mm:ss:ms:aa";t["HHmm"]="HH:mm";t["hhmmaa"]="hh:mm:aa";t["HH"]="HH";t["hhaa"]="hh:aa";t["mm"]="mm";t["ss"]="ss";t["ms"]="ms"})(f||(f={}));const x=()=>{const t=new Date;return{hours:t.getHours(),minutes:t.getMinutes(),seconds:t.getSeconds(),milliseconds:t.getMilliseconds(),has24Hours:true}};const g=12;const k=t=>t>g?t-g:t;const b=()=>{const t=new Date;const i=t.getHours();return{hours:k(i),minutes:t.getMinutes(),seconds:t.getSeconds(),milliseconds:t.getMilliseconds(),has24Hours:false,period:i>=g?r.PM:r.AM}};const v=(t=true)=>t?x():b();const _=":";const y=(t,i)=>{const s=t.split(_);const e=i.split(_);return s.length===e.length};const w=(t,i)=>{const s=t.split(_);const e=i.split(_);if(!y(t,i)){console.error(`Timestring did not match expected format.\nExpected format: ${i}\nReceived timestring: ${t}`)}const n={};s.forEach(((t,i)=>{const s=e[i];const a=h[s];if(a!==undefined){if(s===o.PERIOD){n.period=t.toUpperCase()===r.PM?r.PM:r.AM}else{n[a]=Number(t)}}if(s===o.HOUR_24){n.has24Hours=true}else if(s===o.HOUR_12){n.has24Hours=false}}));return n};const H=(t,i)=>i.split(_).map((i=>{const s=h[i];const e=i===o.MILLISECOND?3:2;return String(t[s]).padStart(e,"0")})).join(_);const C=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";const P=`[SIX-TIMEPICKER]`;const S="debounced-timepicker";const z=145;const j=class{constructor(s){t(this,s);this.sixChange=i(this,"six-timepicker-change",7);this.sixChangeDebounced=i(this,"six-timepicker-change-debounced",7);this.sixClear=i(this,"six-timepicker-clear",7);this.eventListeners=new m;this.defaultValue=null;this.handleInputChange=t=>{t.stopPropagation();const i=this.inputElement.value;if(!y(i,this.format)){this.sixChange.emit({value:{},valueAsString:""});return}this.internalValue=w(i,this.format);this.sixChange.emit({value:this.internalValue,valueAsString:H(this.internalValue,this.format)})};this.handleSixTimepickerChangeDebounced=({detail:t})=>{this.sixChangeDebounced.emit(t)};this.handleChange=(t,i)=>{t.stopPropagation();this.internalValue[i]=t.detail;const s=H(this.internalValue,this.format);this.sixChange.emit({changedProperty:i,value:this.internalValue,valueAsString:s});this.value=s};this.handleDocumentMouseDown=t=>{const i=t.composedPath();if(!i.includes(this.host)){this.closePopup();return}};this.handleClearClick=t=>{t.stopPropagation();this.value=undefined;this.sixClear.emit()};this.format=f.HHmmss;this.separator=_;this.value=undefined;this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.placement=undefined;this.size="medium";this.required=undefined;this.placeholder=undefined;this.errorOnBlur=false;this.errorText="";this.label="";this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false;this.timeout=p;this.interval=l;this.defaultTime=undefined;this.debounce=p;this.isPopupContentUp=false;this.isDropDownContentUp=false;this.internalValue=undefined}async resizeHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}async scrollHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}debounceChanged(){this.eventListeners.removeByIdentifier(S);this.eventListeners.add(this.host,"six-timepicker-change",u(this.handleSixTimepickerChangeDebounced,this.debounce),S)}valueChanged(t){if(this.value!==t){this.value=t}this.setupInternalTime();this.sixChange.emit({value:this.internalValue,valueAsString:H(this.internalValue,this.format)})}async reportValidity(){return this.inputElement.reportValidity()}async checkValidity(){return this.inputElement.checkValidity()}async setCustomValidity(t){await this.inputElement.setCustomValidity(t)}async reset(){this.internalValue=this.defaultValue;this.inputElement.value=H(this.internalValue,this.format);await this.inputElement.reset()}componentWillLoad(){this.setupInternalTime();if(this.inline){this.open=true}if(this.open){this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}componentDidLoad(){this.eventListeners.add(this.host,"six-timepicker-change",u(this.handleSixTimepickerChangeDebounced,this.debounce),S);this.eventListeners.add(this.inputElement,"six-input-input",u(this.handleInputChange,this.debounce))}disconnectedCallback(){this.eventListeners.removeAll()}calcIsPopupContentUp(){if(!this.inputElement||!this.wrapper){return}const t=this.inputElement.getBoundingClientRect();const i=this.wrapper.getBoundingClientRect();const s=Math.max(i.height,z);const e=t.y>window.innerHeight/2;this.isPopupContentUp=e&&window.innerHeight<t.bottom+s}moveOpenHoistedPopup(){if(!this.hoist||!this.open){return}const t=this.popup.getBoundingClientRect();const i=t.height;const s=this.inputElement.getBoundingClientRect();const e=s.top;const n=s.height;this.calcIsPopupContentUp();if(this.isPopupContentUp){this.popup.style.top=`${e-i}px`}else{this.popup.style.top=`${e+n}px`}}getSixTimeUnitPicker(t){return s("six-item-picker",{class:t.class,timeout:this.timeout,interval:this.interval,padded:true,min:t.min,max:t.max,value:this.internalValue[t.propertyName],items:t.items,type:t.type||n.NUMBER,"padding-length":t.paddingLength,"onSix-item-picker-change":i=>this.handleChange(i,t.propertyName)})}setupInternalTime(){if(this.is12HourClock()&&!this.format.includes(o.PERIOD)){console.error(`${P} You provided a 12-hour-clock format but are missing the period (am or pm) in the time-format-string!`)}if(this.value===null||this.value===undefined){this.internalValue=a(this.defaultTime)?v(this.is24HourClock()):w(this.defaultTime,this.format)}else{this.internalValue=w(this.value,this.format)}this.defaultValue=this.internalValue}getHour24Picker(){if(!this.is24HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:23,propertyName:c.HOURS})}is24HourClock(){return this.format.includes(o.HOUR_24)}getHour12Picker(){if(!this.is12HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:11,propertyName:c.HOURS})}is12HourClock(){return this.format.includes(o.HOUR_12)}getAmPmPicker(){if(!this.is12HourClock()){return}const t=["AM","PM"];return this.getSixTimeUnitPicker({items:t,type:n.CUSTOM,propertyName:c.PERIOD})}getMinutePicker(){if(!this.format.includes(o.MINUTE)){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:c.MINUTES})}getSecondsPicker(){if(!this.format.includes(o.SECOND)){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:c.SECONDS})}getMillisecondsPicker(){if(!this.format.includes(o.MILLISECOND)){return}return this.getSixTimeUnitPicker({min:0,max:999,class:"timepicker__item--wide",paddingLength:3,propertyName:c.MILLISECONDS})}getSeparator(){return s("div",{class:"timepicker__separator"},s("span",null,this.separator))}getContent(){const t=[this.getHour24Picker(),this.getHour12Picker(),this.getMinutePicker(),this.getSecondsPicker(),this.getMillisecondsPicker()];const i=t.filter((t=>t!==undefined));return i.map(((t,s)=>{if(s===i.length-1){return[t]}return[t,this.getSeparator()]}))}openPopup(){if(!this.open&&!this.disabled){this.open=true;this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown)}renderClearable(){return this.clearable&&s("button",{slot:"suffix",class:{timepicker_clear:true,"timepicker_clear--right":this.iconPosition==="left","timepicker_clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},s("six-icon",{size:"small"},"clear"))}renderCustomIcon(){const t=d(this.host,"custom-icon")?s("slot",{name:"custom-icon"}):s("six-icon",{size:this.size==="large"?"medium":this.size},"watch_later");return s("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},t)}calcIsDropDownContentUp(){if(!this.inputElement||!this.wrapper){return}const t=this.inputElement.getBoundingClientRect();const i=this.wrapper.getBoundingClientRect();const s=Math.max(i.height,z);const e=t.y>window.innerHeight/2;this.isDropDownContentUp=e&&window.innerHeight<t.bottom+s}adjustPopupForHoisting(){if(!this.hoist){return}setTimeout((()=>{if(!this.popup){return}const t=this.popup.getBoundingClientRect();this.popup.style.position="fixed";["top","left","width","height"].forEach((i=>{this.popup.style[i]=`${t[i]}px`}));const i=this.inputElement.getBoundingClientRect();const s=i.top;const e=t.top;this.calcIsDropDownContentUp();if(this.isDropDownContentUp&&s<e){this.popup.style.top=`${e-t.height-i.height}px`}}),0)}render(){this.adjustPopupForHoisting();return s("div",{part:"container",ref:t=>this.wrapper=t,class:"timepicker__container"},s("six-input",{ref:t=>this.inputElement=t,part:"input",onClick:()=>this.openPopup(),value:this.value,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,size:this.size,name:this.name,label:this.label,required:this.required,"error-text":this.errorText,"error-on-blur":this.errorOnBlur,class:{"input--empty":!this.value,"input--hide":this.inline}},this.renderCustomIcon(),this.renderClearable(),d(this.host,"error-text")?s("span",{slot:"error-text"},s("slot",{name:"error-text"})):null,d(this.host,"label")?s("span",{slot:"label"},s("slot",{name:"label"})):null),this.open&&s("div",{ref:t=>this.popup=t,part:"popup",class:{timepicker__popup:true,"timepicker__popup--is-up":this.placement?this.placement==="top":this.isPopupContentUp,"timepicker__popup--is-inline":this.inline}},...this.getContent(),this.getAmPmPicker()))}get host(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};j.style=C;export{j as six_timepicker};
-//# sourceMappingURL=p-4b44fa83.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["SixTimeFormat","getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","SixTimePeriod","PM","AM","getCurrentTime","TIME_FORMAT_SEPARATOR","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","console","error","sixTime","forEach","timeStringPart","i","formatStringPart","sixTimePropertyName","TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP","undefined","TIME_FORMAT_CHAR","PERIOD","toUpperCase","Number","HOUR_24","HOUR_12","createTimeString","time","map","timeFormatPart","paddingLength","MILLISECOND","String","padStart","join","sixTimepickerCss","TAG","DEBOUNCE_TIMEPICKER_LISTENER","MIN_POPUP_HEIGHT","SixTimepicker","this","eventListeners","EventListeners","defaultValue","handleInputChange","event","stopPropagation","inputValue","inputElement","value","sixChange","emit","valueAsString","internalValue","handleSixTimepickerChangeDebounced","detail","sixChangeDebounced","handleChange","property","timeString","changedProperty","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","sixClear","HHmmss","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","async","calcIsPopupContentUp","moveOpenHoistedPopup","debounceChanged","removeByIdentifier","add","debounce","valueChanged","newValue","setupInternalTime","reportValidity","checkValidity","message","setCustomValidity","reset","componentWillLoad","inline","open","document","componentDidLoad","disconnectedCallback","removeAll","wrapper","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","isPopupContentUp","bottom","hoist","popupBoundingClientRect","popup","popupHeight","inputBoundingClientRect","inputTop","top","inputHeight","style","getSixTimeUnitPicker","params","h","class","timeout","interval","padded","min","propertyName","items","type","ItemPickerType","NUMBER","is12HourClock","isNil","defaultTime","is24HourClock","getHour24Picker","SixTimePropertyName","HOURS","getHour12Picker","getAmPmPicker","CUSTOM","getMinutePicker","MINUTE","MINUTES","getSecondsPicker","SECOND","SECONDS","getMillisecondsPicker","MILLISECONDS","getSeparator","separator","getContent","elementsInOrder","visibleElements","filter","el","idx","openPopup","disabled","remove","renderClearable","clearable","slot","timepicker_clear","iconPosition","onClick","tabindex","size","renderCustomIcon","icon","hasSlot","name","part","prefix","calcIsDropDownContentUp","isDropDownContentUp","adjustPopupForHoisting","setTimeout","position","popupTop","render","ref","placeholder","readonly","label","required","errorText","errorOnBlur","timepicker__popup","placement"],"sources":["./src/components/six-timepicker/six-time-format.tsx","./src/utils/time.util.ts","./src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","./src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export enum SixTimeFormat {\n  HHmmss = 'HH:mm:ss', // 24 hour format\n  hhmmssaa = 'hh:mm:ss:aa',\n  HHmmssms = 'HH:mm:ss:ms',\n  hhmmssmsaa = 'hh:mm:ss:ms:aa',\n  HHmm = 'HH:mm',\n  hhmmaa = 'hh:mm:aa',\n  HH = 'HH',\n  hhaa = 'hh:aa',\n  mm = 'mm',\n  ss = 'ss',\n  ms = 'ms',\n}\n","/*\n * Returns the current time in the format of your choice\n */\nimport {\n  SixTime,\n  SixTimePeriod,\n  TIME_FORMAT_CHAR,\n  TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP,\n} from '../components/six-timepicker/six-timepicker.types';\nimport { SixTimeFormat } from '../components/six-timepicker/six-time-format';\n\nexport const getCurrentTimeIn24Hours = (): SixTime => {\n  const now = new Date();\n  return {\n    hours: now.getHours(),\n    minutes: now.getMinutes(),\n    seconds: now.getSeconds(),\n    milliseconds: now.getMilliseconds(),\n    has24Hours: true,\n  };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n  hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): SixTime => {\n  const now = new Date();\n  const hours = now.getHours();\n  return {\n    hours: getHoursIn12HourFormat(hours),\n    minutes: now.getMinutes(),\n    seconds: now.getSeconds(),\n    milliseconds: now.getMilliseconds(),\n    has24Hours: false,\n    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? SixTimePeriod.PM : SixTimePeriod.AM,\n  };\n};\n\nexport const getCurrentTime = (has24Hours: boolean = true): SixTime => {\n  return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const TIME_FORMAT_SEPARATOR = ':';\nexport const isValidTimeString = (timeStr: string, format: SixTimeFormat) => {\n  const timeStringParts = timeStr.split(TIME_FORMAT_SEPARATOR);\n  const timeFormatParts = format.split(TIME_FORMAT_SEPARATOR);\n  return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: SixTimeFormat): SixTime => {\n  const timeStringParts = timeStr.split(TIME_FORMAT_SEPARATOR);\n  const timeFormatParts = format.split(TIME_FORMAT_SEPARATOR);\n\n  if (!isValidTimeString(timeStr, format)) {\n    console.error(\n      `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n    );\n  }\n\n  const sixTime: SixTime = {};\n\n  timeStringParts.forEach((timeStringPart, i) => {\n    const formatStringPart = timeFormatParts[i];\n    const sixTimePropertyName = TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP[formatStringPart];\n\n    if (sixTimePropertyName !== undefined) {\n      if (formatStringPart === TIME_FORMAT_CHAR.PERIOD) {\n        sixTime.period = timeStringPart.toUpperCase() === SixTimePeriod.PM ? SixTimePeriod.PM : SixTimePeriod.AM;\n      } else {\n        sixTime[sixTimePropertyName] = Number(timeStringPart);\n      }\n    }\n\n    if (formatStringPart === TIME_FORMAT_CHAR.HOUR_24) {\n      sixTime.has24Hours = true;\n    } else if (formatStringPart === TIME_FORMAT_CHAR.HOUR_12) {\n      sixTime.has24Hours = false;\n    }\n  });\n\n  return sixTime;\n};\n\nexport const createTimeString = (time: SixTime, format: SixTimeFormat) => {\n  return format\n    .split(TIME_FORMAT_SEPARATOR)\n    .map((timeFormatPart) => {\n      const sixTimePropertyName = TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP[timeFormatPart];\n      const paddingLength = timeFormatPart === TIME_FORMAT_CHAR.MILLISECOND ? 3 : 2;\n      return String(time[sixTimePropertyName]).padStart(paddingLength, '0');\n    })\n    .join(TIME_FORMAT_SEPARATOR);\n};\n","@import 'src/global/component';\n\n:host {\n  display: block;\n  font-family: var(--six-font-family);\n}\n\n.timepicker {\n  &_clear {\n    display: inline-flex;\n    align-items: center;\n    font-size: inherit;\n    color: var(--six-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--six-transition-fast) color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-input-icon-color-hover);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &--right {\n      right: 0;\n      position: absolute;\n    }\n\n    &--left {\n      right: 35px;\n      position: absolute;\n    }\n  }\n\n  &__container {\n    position: relative;\n  }\n\n  &__popup {\n    display: flex;\n    justify-content: center;\n    min-width: min-content;\n    min-height: 145px;\n    background-color: white;\n    padding: 0.5em 0.5em 1.5em;\n    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n    user-select: none;\n    position: absolute;\n    z-index: var(--six-z-index-dropdown);\n    right: 0;\n    left: 0;\n\n    &--is-up {\n      bottom: 100%;\n    }\n\n    &--is-inline {\n      position: initial;\n      box-shadow: none;\n      border: 1px solid var(--six-color-web-rock-400);\n    }\n  }\n\n  &__separator {\n    display: flex;\n    align-items: center;\n  }\n\n  &__item {\n    &--wide {\n      padding-left: 0.5rem;\n      padding-right: 0.5rem;\n    }\n  }\n}\n\n.input--empty .timepicker_clear {\n  visibility: hidden;\n}\n\n.input--hide {\n  display: none;\n}\n\n// Icon position\n.prefix {\n  cursor: pointer;\n\n  &--right {\n    right: 0;\n    display: inline-flex;\n    position: absolute;\n    font-size: inherit;\n    color: var(--six-input-icon-color);\n    border: none;\n    background: none;\n    margin-right: var(--six-input-spacing-medium);\n    transition: var(--six-transition-fast) color;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport { SixTimeFormat } from './six-time-format';\nimport { SixTime, SixTimePropertyName, TIME_FORMAT_CHAR } from './six-timepicker.types';\nimport {\n  createTimeString,\n  getCurrentTime,\n  isValidTimeString,\n  parseTimeString,\n  TIME_FORMAT_SEPARATOR,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { isNil } from '../../utils/type-check';\n\ninterface SixTimepickerBasePayload {\n  value: SixTime;\n  valueAsString: string;\n}\n\nexport interface SixTimepickerChange extends SixTimepickerBasePayload {\n  changedProperty?: string;\n}\n\nexport interface SixTimepickerInput extends SixTimepickerBasePayload {}\n\nexport interface SixTimepickerBlur extends SixTimepickerBasePayload {}\n\ninterface SixTimeUnitPickerParams {\n  min?: number;\n  max?: number;\n  items?: string[];\n  type?: ItemPickerType;\n  class?: string;\n  paddingLength?: number;\n  propertyName: string;\n}\n\nconst TAG = `[SIX-TIMEPICKER]`;\nconst DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';\nconst MIN_POPUP_HEIGHT = 145;\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n *\n */\n@Component({\n  tag: 'six-timepicker',\n  styleUrl: 'six-timepicker.scss',\n  shadow: true,\n})\nexport class SixTimepicker {\n  private readonly eventListeners = new EventListeners();\n\n  private popup: HTMLElement;\n\n  private wrapper: HTMLElement;\n\n  private inputElement: HTMLSixInputElement;\n\n  @Element() host: HTMLSixTimepickerElement;\n\n  /**\n   * Define the time format. Valid formats are:\n   *\n   * HH:mm:ss\n   * hh:mm:ss:aa\n   * HH:mm:ss:ms\n   * hh:mm:ss:ms:aa\n   * HH:mm\n   * hh:mm:aa\n   * HH\n   * hh:aa\n   * mm\n   * ss\n   * ms\n   *\n   * where HH is the 24 hour format\n   * and hh is the 12 hour format\n   *\n   * Please notice that when using the 12-hour-clock (hh)\n   * you always need a period indicator (aa). So the time can be parsed as either am or pm\n   * */\n  @Prop() format: SixTimeFormat = SixTimeFormat.HHmmss;\n\n  /**\n   * Define the separator to be shown between the time unit pickers.\n   * Please be aware that this property will modify the displayed separator only.\n   * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n   * */\n  @Prop() separator = TIME_FORMAT_SEPARATOR;\n\n  /**\n   * The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n   */\n  @Prop({ mutable: true }) value?: string | null;\n\n  /** Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Indicates whether or not the timepicker should be shown as an inline (always open) component */\n  @Prop({ reflect: true }) inline = false;\n\n  /**\n   * If `true` the user can only select a time via the timepicker but not directly edit the input field.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true` the component is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The enforced placement of the dropdown panel.\n   */\n  @Prop() placement: 'top' | 'bottom';\n\n  /** Timepicker size. */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to make the input a required field. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /**\n   * The placeholder defines what text to be shown on the input element\n   */\n  @Prop() placeholder?: string | null;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** The input's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The input's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The input's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Set the position of the icon */\n  @Prop() iconPosition: 'left' | 'right' = 'left';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n   */\n  @Prop() defaultTime?: string | null;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n   * (and keep pressed) and once you release\n   */\n  @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Emitted when the timepicker's value changes\n   */\n  @Event({ eventName: 'six-timepicker-change' }) sixChange: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the timepicker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-timepicker-change-debounced' })\n  sixChangeDebounced: EventEmitter<SixTimepickerChange>;\n\n  /**\n   * Emitted when the clear button is activated.\n   */\n  @Event({ eventName: 'six-timepicker-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n  @State() isPopupContentUp = false;\n\n  @State() isDropDownContentUp = false;\n\n  @Listen('resize', { target: 'window' })\n  async resizeHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  @Listen('scroll', { target: 'window' })\n  async scrollHandler() {\n    this.calcIsPopupContentUp();\n    this.moveOpenHoistedPopup();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.eventListeners.removeByIdentifier(DEBOUNCE_TIMEPICKER_LISTENER);\n    this.eventListeners.add(\n      this.host,\n      'six-timepicker-change',\n      debounce(this.handleSixTimepickerChangeDebounced, this.debounce),\n      DEBOUNCE_TIMEPICKER_LISTENER\n    );\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged(newValue: string) {\n    if (this.value !== newValue) {\n      this.value = newValue;\n    }\n    this.setupInternalTime();\n    this.sixChange.emit({\n      value: this.internalValue,\n      valueAsString: createTimeString(this.internalValue, this.format),\n    });\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.inputElement.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.inputElement.checkValidity();\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    await this.inputElement.setCustomValidity(message);\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.internalValue = this.defaultValue;\n    this.inputElement.value = createTimeString(this.internalValue, this.format);\n    await this.inputElement.reset();\n  }\n\n  /*\n   * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n   * when switching between formats\n   */\n  @State()\n  private internalValue: SixTime;\n\n  private defaultValue: SixTime = null;\n\n  componentWillLoad() {\n    this.setupInternalTime();\n\n    if (this.inline) {\n      this.open = true;\n    }\n\n    if (this.open) {\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(\n      this.host,\n      'six-timepicker-change',\n      debounce(this.handleSixTimepickerChangeDebounced, this.debounce),\n      DEBOUNCE_TIMEPICKER_LISTENER\n    );\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  private handleInputChange = (event: Event) => {\n    event.stopPropagation();\n    const inputValue = this.inputElement.value;\n\n    if (!isValidTimeString(inputValue, this.format)) {\n      this.sixChange.emit({\n        value: {},\n        valueAsString: '',\n      });\n      return;\n    }\n\n    this.internalValue = parseTimeString(inputValue, this.format);\n    this.sixChange.emit({\n      value: this.internalValue,\n      valueAsString: createTimeString(this.internalValue, this.format),\n    });\n  };\n\n  private calcIsPopupContentUp() {\n    if (!this.inputElement || !this.wrapper) {\n      return;\n    }\n\n    const inputBoundingRect = this.inputElement.getBoundingClientRect();\n    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n    this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n  }\n\n  /*\n   * The position of the hoisted timepicker needs to be correctly calculated since the position changes to fixed.\n   * Thus if the user scrolls or adjusts the screen size we need to recalculate the timepicker position.\n   */\n  private moveOpenHoistedPopup() {\n    if (!this.hoist || !this.open) {\n      return;\n    }\n\n    const popupBoundingClientRect = this.popup.getBoundingClientRect();\n    const popupHeight = popupBoundingClientRect.height;\n    const inputBoundingClientRect = this.inputElement.getBoundingClientRect();\n    const inputTop = inputBoundingClientRect.top;\n    const inputHeight = inputBoundingClientRect.height;\n\n    this.calcIsPopupContentUp();\n\n    if (this.isPopupContentUp) {\n      this.popup.style.top = `${inputTop - popupHeight}px`;\n    } else {\n      this.popup.style.top = `${inputTop + inputHeight}px`;\n    }\n  }\n\n  private handleSixTimepickerChangeDebounced = ({ detail }) => {\n    this.sixChangeDebounced.emit(detail);\n  };\n\n  private handleChange = (event: CustomEvent<SixItemPickerChangePayload>, property: string) => {\n    // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n    event.stopPropagation();\n\n    // update the internal state\n    this.internalValue[property] = event.detail;\n\n    const timeString = createTimeString(this.internalValue, this.format);\n\n    // fire timepicker's own event\n    this.sixChange.emit({\n      changedProperty: property,\n      value: this.internalValue,\n      valueAsString: timeString,\n    });\n\n    // update the input value\n    this.value = timeString;\n  };\n\n  private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n    return (\n      <six-item-picker\n        class={params.class}\n        timeout={this.timeout}\n        interval={this.interval}\n        padded\n        min={params.min}\n        max={params.max}\n        value={this.internalValue[params.propertyName]}\n        items={params.items}\n        type={params.type || ItemPickerType.NUMBER}\n        padding-length={params.paddingLength}\n        onSix-item-picker-change={(event) => this.handleChange(event, params.propertyName)}\n      ></six-item-picker>\n    );\n  }\n\n  private setupInternalTime() {\n    if (this.is12HourClock() && !this.format.includes(TIME_FORMAT_CHAR.PERIOD)) {\n      console.error(\n        `${TAG} You provided a 12-hour-clock format but are missing the period (am or pm) in the time-format-string!`\n      );\n    }\n\n    if (this.value === null || this.value === undefined) {\n      this.internalValue = isNil(this.defaultTime)\n        ? getCurrentTime(this.is24HourClock())\n        : parseTimeString(this.defaultTime, this.format);\n    } else {\n      this.internalValue = parseTimeString(this.value, this.format);\n    }\n\n    this.defaultValue = this.internalValue;\n  }\n\n  private getHour24Picker() {\n    if (!this.is24HourClock()) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: SixTimePropertyName.HOURS });\n  }\n\n  private is24HourClock() {\n    return this.format.includes(TIME_FORMAT_CHAR.HOUR_24);\n  }\n\n  private getHour12Picker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: SixTimePropertyName.HOURS });\n  }\n\n  private is12HourClock() {\n    return this.format.includes(TIME_FORMAT_CHAR.HOUR_12);\n  }\n\n  private getAmPmPicker() {\n    if (!this.is12HourClock()) {\n      return;\n    }\n\n    const items = ['AM', 'PM'];\n    return this.getSixTimeUnitPicker({\n      items,\n      type: ItemPickerType.CUSTOM,\n      propertyName: SixTimePropertyName.PERIOD,\n    });\n  }\n\n  private getMinutePicker() {\n    if (!this.format.includes(TIME_FORMAT_CHAR.MINUTE)) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.MINUTES });\n  }\n\n  private getSecondsPicker() {\n    if (!this.format.includes(TIME_FORMAT_CHAR.SECOND)) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: SixTimePropertyName.SECONDS });\n  }\n\n  private getMillisecondsPicker() {\n    if (!this.format.includes(TIME_FORMAT_CHAR.MILLISECOND)) {\n      return;\n    }\n\n    return this.getSixTimeUnitPicker({\n      min: 0,\n      max: 999,\n      class: 'timepicker__item--wide',\n      paddingLength: 3,\n      propertyName: SixTimePropertyName.MILLISECONDS,\n    });\n  }\n\n  private getSeparator() {\n    return (\n      <div class=\"timepicker__separator\">\n        <span>{this.separator}</span>\n      </div>\n    );\n  }\n\n  private getContent() {\n    const elementsInOrder = [\n      this.getHour24Picker(),\n      this.getHour12Picker(),\n      this.getMinutePicker(),\n      this.getSecondsPicker(),\n      this.getMillisecondsPicker(),\n    ];\n\n    const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n    return visibleElements.map((el, idx) => {\n      if (idx === visibleElements.length - 1) {\n        return [el];\n      }\n\n      return [el, this.getSeparator()];\n    });\n  }\n\n  private openPopup() {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n    }\n  }\n\n  private closePopup() {\n    if (this.inline) {\n      return;\n    }\n\n    this.open = false;\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n  }\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.host)) {\n      this.closePopup();\n      return;\n    }\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.value = undefined;\n    this.sixClear.emit();\n  };\n\n  private renderClearable() {\n    return (\n      this.clearable && (\n        <button\n          slot=\"suffix\"\n          class={{\n            timepicker_clear: true,\n            'timepicker_clear--right': this.iconPosition === 'left',\n            'timepicker_clear--left': this.iconPosition === 'right',\n          }}\n          type=\"button\"\n          onClick={this.handleClearClick}\n          tabindex=\"-1\"\n        >\n          <six-icon size=\"small\">clear</six-icon>\n        </button>\n      )\n    );\n  }\n\n  private renderCustomIcon() {\n    const icon = hasSlot(this.host, 'custom-icon') ? (\n      <slot name=\"custom-icon\"></slot>\n    ) : (\n      <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n    );\n\n    return (\n      <span\n        slot=\"prefix\"\n        part=\"icon\"\n        class={{\n          prefix: true,\n          'prefix--right': this.iconPosition === 'right',\n        }}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  private calcIsDropDownContentUp() {\n    if (!this.inputElement || !this.wrapper) {\n      return;\n    }\n\n    const inputBoundingRect = this.inputElement.getBoundingClientRect();\n    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n    this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n  }\n\n  /*\n   * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.\n   * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup\n   */\n  private adjustPopupForHoisting() {\n    if (!this.hoist) {\n      return;\n    }\n\n    // execute after dropdown has been rendered to make sure the popup reference is correctly set\n    setTimeout(() => {\n      if (!this.popup) {\n        return;\n      }\n\n      // take a snapshot of normally rendered popup\n      const popupBoundingClientRect = this.popup.getBoundingClientRect();\n\n      // apply screen position to fixed popup\n      this.popup.style.position = 'fixed';\n      ['top', 'left', 'width', 'height'].forEach((property) => {\n        this.popup.style[property] = `${popupBoundingClientRect[property]}px`;\n      });\n\n      const inputBoundingClientRect = this.inputElement.getBoundingClientRect();\n      const inputTop = inputBoundingClientRect.top;\n      const popupTop = popupBoundingClientRect.top;\n\n      this.calcIsDropDownContentUp();\n      // check screen position to check whether the popup should be moved above or below the trigger element\n      if (this.isDropDownContentUp && inputTop < popupTop) {\n        //  move popup above input field if timepicker is at bottom of screen\n        this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;\n      }\n    }, 0);\n  }\n\n  render() {\n    this.adjustPopupForHoisting();\n\n    return (\n      <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          part=\"input\"\n          onClick={() => this.openPopup()}\n          value={this.value}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          disabled={this.disabled}\n          size={this.size}\n          name={this.name}\n          label={this.label}\n          required={this.required}\n          error-text={this.errorText}\n          error-on-blur={this.errorOnBlur}\n          class={{\n            'input--empty': !this.value,\n            'input--hide': this.inline,\n          }}\n        >\n          {this.renderCustomIcon()}\n          {this.renderClearable()}\n          {hasSlot(this.host, 'error-text') ? (\n            <span slot=\"error-text\">\n              <slot name=\"error-text\" />\n            </span>\n          ) : null}\n          {hasSlot(this.host, 'label') ? (\n            <span slot=\"label\">\n              <slot name=\"label\" />\n            </span>\n          ) : null}\n        </six-input>\n        {this.open && (\n          <div\n            ref={(el) => (this.popup = el)}\n            part=\"popup\"\n            class={{\n              timepicker__popup: true,\n              'timepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isPopupContentUp,\n              'timepicker__popup--is-inline': this.inline,\n            }}\n          >\n            {...this.getContent()}\n            {this.getAmPmPicker()}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixCheckboxCss","id","SixCheckbox","this","inputId","labelId","textId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultState","handleCheckedChange","input","checked","indeterminate","invalid","checkValidity","sixChange","emit","handleLabelChange","handleSlotChange","connectedCallback","handleChange","bind","handleBlur","handleFocus","handleMouseDown","handleInvalid","host","shadowRoot","addEventListener","disconnectedCallback","removeEventListener","removeAll","componentWillLoad","componentDidLoad","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","async","options","focus","blur","reportValidity","validity","valid","message","setCustomValidity","hasFocus","sixBlur","sixFocus","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","onInvalid"],"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, Event, EventEmitter, Method, Prop, State, Watch, h, Element } 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  inputId = `checkbox-${++id}`;\n  labelId = `checkbox-label-${id}`;\n  textId = `checkbox-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly 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: string;\n\n  /** The checkbox's value attribute. */\n  @Prop() value: string;\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.input) {\n      return;\n    }\n    this.input.checked = this.checked;\n    this.input.indeterminate = this.indeterminate;\n    this.invalid = !this.input.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.handleChange = this.handleChange.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n\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    this.input.indeterminate = this.indeterminate;\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\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.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.checked = this.input.checked;\n    this.indeterminate = false;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  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 ? 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.input = 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              onInvalid={this.handleInvalid}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixFileListCss","SixFileList","render","h","class"],"sources":["./src/components/six-file-list/six-file-list.scss?tag=six-file-list&encapsulation=shadow","./src/components/six-file-list/six-file-list.tsx"],"sourcesContent":[".six-files-list {\n  &__container {\n    padding: 1rem;\n\n    & :last-child {\n      padding-bottom: 0;\n    }\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list',\n  styleUrl: 'six-file-list.scss',\n  shadow: true,\n})\nexport class SixFileList {\n  render() {\n    return (\n      <div class=\"six-files-list__container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,mG,MCYVC,EAAW,M,yBACtBC,SACE,OACEC,EAAA,OAAKC,MAAM,6BACTD,EAAA,a"}

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

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

package/dist/ui-library/p-524e5804.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSpinnerCss","SixSpinner","renderSIXLogo","h","class","viewBox","fill","stroke","d","renderSimple","part","render","this","six"],"sources":["./src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","./src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAgB,4vC,MCeTC,EAAU,M,kCAEP,K,CAEdC,gBACE,OACEC,EAAA,QAAMC,MAAM,cAAa,YAAW,OAAM,YAAW,UACnDD,EAAA,OAAKC,MAAM,0BACTD,EAAA,OAAKE,QAAQ,aACXF,EAAA,QACEG,KAAK,OACLC,OAAO,UAAS,eACH,IAAG,iBACD,QACfC,EAAE,wH,CAQdC,eACE,OAAON,EAAA,QAAMO,KAAK,OAAON,MAAM,UAAS,YAAW,OAAM,YAAW,U,CAGtEO,SACE,OAAOC,KAAKC,IAAMD,KAAKV,gBAAkBU,KAAKH,c"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixMenuLabelCss","SixMenuLabel","render","h","part","class"],"sources":["./src/components/six-menu-label/six-menu-label.scss?tag=six-menu-label&encapsulation=shadow","./src/components/six-menu-label/six-menu-label.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-label {\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: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  color: var(--six-input-label-color);\n  padding: var(--six-spacing-xx-small) var(--six-spacing-small);\n  user-select: none;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu label's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-label',\n  styleUrl: 'six-menu-label.scss',\n  shadow: true,\n})\nexport class SixMenuLabel {\n  render() {\n    return (\n      <div part=\"base\" class=\"menu-label\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,oc,MCkBXC,EAAY,M,yBACvBC,SACE,OACEC,EAAA,OAAKC,KAAK,OAAOC,MAAM,cACrBF,EAAA,a"}

package/dist/ui-library/p-55dc28ad.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as t}from"./p-16b99232.js";import{s as e}from"./p-eb8f05a9.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{box-shadow:var(--six-elevation-1dp)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const a=i=>i.tagName.toLowerCase()==="six-sidebar-item-group";const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show",7);this.sixAfterShow=s(this,"six-sidebar-after-show",7);this.sixHide=s(this,"six-sidebar-hide",7);this.sixAfterHide=s(this,"six-sidebar-after-hide",7);this.sixInitialFocus=s(this,"six-sidebar-initial-focus",7);this.willShow=false;this.willHide=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;e(s,this.sidebar);const t=i=>{let t=s;while(i(t)!==null){t=i(t);if(a(t)){t.shadowRoot.querySelector("six-details").open=false}}};t((i=>i.previousElementSibling));t((i=>i.nextElementSibling))};this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){this.sidebar.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled){return}this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){const i=this.sidebar.querySelector("slot");const s=i.assignedElements();const t=[];while(s.length>0){const i=s.pop();const e=i.shadowRoot.querySelectorAll("six-details");t.push(...e);const r=Array.from(i.children).filter(a);s.push(...r)}t.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow||this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){const s=this.sidebar.querySelector("slot");const t=s.assignedElements().map((i=>i.shadowRoot.querySelector("six-details")));if(i<0||i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){const s=this.sidebar.querySelector("slot");const t=s.assignedElements();const e=t.findIndex((s=>(s===null||s===void 0?void 0:s.name)===i));const r=t[e].shadowRoot.querySelector("six-details");await r.show()}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{class:"six-sidebar"},t("div",{class:{sidebar__container:true,"sidebar--visible":this.isVisible,"sidebar--open":this.open,"sidebar--left":this.position==="left","sidebar--right":this.position==="right"},style:{width:this.width,[`margin-${this.position}`]:this.open?"0":`calc(1rem - ${this.width})`},ref:i=>this.sidebar=i,"aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd},t("slot",null)))}static get watchers(){return{open:["handleOpenChange"]}}};n.style=r;export{n as six_sidebar};
-//# sourceMappingURL=p-55dc28ad.entry.js.map

package/dist/ui-library/p-55dc28ad.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sixSidebarCss","isSidebarItemGroup","node","tagName","toLowerCase","SixSidebar","this","willShow","willHide","handleTransitionEnd","event","target","type","classList","contains","resetTransitionVariables","closeSiblingDetailsOnShow","clickedMenuItem","scrollIntoView","sidebar","closeAllSiblingsBySiblingProperty","getSibling","shadowRoot","querySelector","open","previousElementSibling","nextElementSibling","handleOpenChange","show","hide","componentWillLoad","componentDidRender","setupTogglableMenuItems","disconnectedCallback","removeEventListener","toggled","markAllMenuItemsAsSelectableEmpty","addEventListener","slot","nodes","assignedElements","menuItems","length","pop","menuItemsForCurrentNode","querySelectorAll","push","newItemGroups","Array","from","children","filter","forEach","details","selectableEmpty","async","sixShow","emit","defaultPrevented","isVisible","sixHide","index","menuItemsOnRootLevel","map","el","console","error","value","sidebarItemGroups","indexOfSelectedElement","findIndex","name","selectedItem","sixAfterShow","sixAfterHide","render","h","class","sidebar__container","position","style","width","ref","onTransitionEnd"],"sources":["./src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","./src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.sidebar {\n  &__container {\n    // scroll\n    height: 100%;\n    overflow: auto;\n\n    &.sidebar--open {\n      box-shadow: var(--six-elevation-1dp);\n    }\n\n    &:not(.sidebar--visible) {\n      @include hidden;\n    }\n  }\n\n  &--left {\n    color: var(--six-sidebar-color);\n    background-color: var(--six-sidebar-background-color);\n    // collapse\n    transition: var(--six-transition-medium) margin-left;\n    // six background\n    background-size: 300vw 70%;\n    background-position: bottom;\n    background-repeat: no-repeat;\n  }\n\n  &--right {\n    // collapse\n    transition: var(--six-transition-medium) margin-right;\n  }\n\n  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n  &--open {\n    &.sidebar--left {\n      margin-right: 2px;\n    }\n\n    &.sidebar--right {\n      margin-left: 2px;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node: Element) => node.tagName.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar',\n  styleUrl: 'six-sidebar.scss',\n  shadow: true,\n})\nexport class SixSidebar {\n  willShow = false;\n  willHide = false;\n\n  sidebar: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Sidebar width */\n  @Prop() width: string = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled: boolean = false;\n\n  /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-sidebar-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar opens and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-sidebar-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar closes and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the sidebar, such as an input or button.\n   */\n  @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\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.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  componentDidRender() {\n    this.setupTogglableMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private closeSiblingDetailsOnShow = (event: CustomEvent<EmptyPayload>) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    scrollIntoView(clickedMenuItem, this.sidebar);\n\n    const closeAllSiblingsBySiblingProperty = (getSibling: (node: Element) => Element) => {\n      let node: Element = clickedMenuItem;\n\n      while (getSibling(node) !== null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          node.shadowRoot.querySelector('six-details').open = false;\n        }\n      }\n    };\n\n    // close all previous siblings\n    closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);\n    // close all further siblings\n    closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);\n  };\n\n  private setupTogglableMenuItems() {\n    if (!this.toggled) {\n      return;\n    }\n\n    this.markAllMenuItemsAsSelectableEmpty();\n\n    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private markAllMenuItemsAsSelectableEmpty() {\n    // when you have a toggled menu you also want to close other menu items when you click on an item without children\n    // nice benefit this item will then also be highlighted\n    const slot = this.sidebar.querySelector('slot');\n    const nodes = slot.assignedElements();\n\n    // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n    // but also nested items we need to traverse the whole menu item tree\n    const menuItems = [];\n    while (nodes.length > 0) {\n      const node = nodes.pop();\n\n      // collect six-details in the current shadowDOM\n      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n      menuItems.push(...menuItemsForCurrentNode);\n\n      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n      nodes.push(...newItemGroups);\n    }\n\n    menuItems.forEach((details) => (details.selectableEmpty = true));\n  }\n\n  /** Toggles whether the sidebar should be shown or hidden */\n  @Method()\n  async toggle() {\n    if (this.willShow || this.willHide) {\n      return;\n    }\n\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  /** Shows the sidebar */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the sidebar */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n  }\n\n  /** Allows to select a menu item programmatically by index */\n  @Method()\n  async selectItemByIndex(index: number) {\n    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = slot\n      .assignedElements()\n      .map((el) => el.shadowRoot.querySelector('six-details'));\n\n    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n      console.error(\n        `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n      );\n      return;\n    }\n\n    await menuItemsOnRootLevel[index].show();\n  }\n\n  /** Allows to select a menu item programmatically by name */\n  @Method()\n  async selectItemByName(value: string) {\n    const slot = this.sidebar.querySelector('slot');\n    const sidebarItemGroups = slot.assignedElements() as HTMLSixSidebarItemGroupElement[];\n    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');\n    await selectedItem.show();\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <host class=\"six-sidebar\">\n        <div\n          class={{\n            sidebar__container: true,\n            'sidebar--visible': this.isVisible,\n            'sidebar--open': this.open,\n            'sidebar--left': this.position === 'left',\n            'sidebar--right': this.position === 'right',\n          }}\n          style={{\n            width: this.width,\n            [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n          }}\n          ref={(el) => (this.sidebar = el)}\n          aria-hidden={this.open ? 'false' : 'true'}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <slot />\n        </div>\n      </host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-57a84d7f.entry.js.map

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

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-16b99232.js";const o=":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";const r=class{constructor(s){t(this,s);this.collapsedEvent=i(this,"six-root-collapsed",7);this.resizeObserver=new ResizeObserver((([t])=>{const{width:i}=t.contentRect;this.collapse=i<this.breakpoint}));this.breakpoint=1024;this.padded=true;this.stage=null;this.version="";this.collapse=undefined}handleCollapsed(t){this.collapsedEvent.emit({collapsed:t})}componentWillLoad(){this.resizeObserver.observe(this.host)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){return s("host",{class:"six-root"},s("header",{part:"header"},this.stage&&s("six-stage-indicator",{stage:this.stage},this.version),s("slot",{name:"header"})),s("nav",{class:"six-root__left-sidebar",part:"left-sidebar"},s("set-attributes",{value:{open:!this.collapse}},s("slot",{name:"left-sidebar"}))),s("main",{part:"main"},s("div",{class:{"six-root__container":true,"six-root__container--padded":this.padded},part:"container"},s("slot",{name:"main"})),s("div",{class:"six-root__footer"},s("slot",{name:"footer"}))),s("nav",{class:"six-root__right-sidebar",part:"right-sidebar"},s("slot",{name:"right-sidebar"})))}get host(){return e(this)}static get watchers(){return{collapse:["handleCollapsed"]}}};r.style=o;export{r as six_root};
-//# sourceMappingURL=p-5eb21538.entry.js.map