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

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

@@ -0,0 +1,2 @@
+import{r as t,h as o}from"./p-f93d8a4e.js";import{f as i}from"./p-06ba4450.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const s=n;const e=class{constructor(o){t(this,o);this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}};this.name=undefined;this.size="medium";this.label=undefined;this.disabled=false;this.html=undefined}componentDidLoad(){if(this.button!=null){i.observe(this.button)}}disconnectedCallback(){if(this.button!=null){i.unobserve(this.button)}}render(){const t=this.html&&o("span",{key:"f3ebfe0713af8463ad71597bb39e28744ae8bfb2",innerHTML:this.html});return o("div",{key:"ae12d7f62c0028f2fc6f7aa2217bc28fa631fe28",onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},o("button",{key:"e071ff67b21dada65d30973d10a8849d2bb18dc2",ref:t=>this.button=t,part:"base",disabled:this.disabled,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:"button","aria-label":this.label},o("six-icon",{key:"ab6d21f4b6051248cb14bbc008b9190abde705ec","aria-hidden":"true",size:this.size},this.name),o("slot",{key:"074df89d19a9e64368dd50e419a98f35999d16b8"}),t))}};e.style=s;export{e as six_icon_button};
+//# sourceMappingURL=p-01853739.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixIconButtonCss","SixIconButtonStyle0","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","key","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,81CACzB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAAC,IAAA,2CAAMC,UAAWhB,KAAKa,OAEhD,OACEC,EAAA,OAAAC,IAAA,2CAAKE,QAASjB,KAAKC,iBAAkBiB,MAAO,CAAE,gCAAiClB,KAAKG,WAClFW,EAAA,UAAAC,IAAA,2CACEI,IAAMC,GAAQpB,KAAKO,OAASa,EAC5BC,KAAK,OACLlB,SAAUH,KAAKG,SACfe,MAAO,CACL,cAAe,KACf,wBAAyBlB,KAAKG,UAEhCmB,KAAK,SAAQ,aACDtB,KAAKuB,OAEjBT,EAAA,YAAAC,IAAA,yDAAsB,OAAOS,KAAMxB,KAAKwB,MACrCxB,KAAKyB,MAERX,EAAA,QAAAC,IAAA,6CACCF,G"}

package/dist/ui-library/p-03900e17.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as i}from"./p-f93d8a4e.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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 t=r;const c=class{constructor(i){o(this,i);this.stage=null}render(){return this.stage==null||this.stage=="PROD"?null:i("div",{class:`indicator--${this.stage.toLowerCase()}`},i("div",{class:"center-content"},i("six-icon",{class:"align-item",size:"small"},"error_outline"),i("span",{class:"align-item"},i("slot",null))))}};c.style=t;export{c as six_stage_indicator};
+//# sourceMappingURL=p-03900e17.entry.js.map

package/dist/ui-library/p-03900e17.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixStageIndicatorCss","SixStageIndicatorStyle0","SixStageIndicator","render","this","stage","h","class","toLowerCase","size"],"sources":["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 '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":"2CAAA,MAAMA,EAAuB,m2BAC7B,MAAAC,EAAeD,E,MCQFE,EAAiB,M,oCAED,I,CAE3B,MAAAC,GACE,OAAOC,KAAKC,OAAS,MAAQD,KAAKC,OAAS,OAAS,KAClDC,EAAA,OAAKC,MAAO,cAAcH,KAAKC,MAAMG,iBACnCF,EAAA,OAAKC,MAAM,kBACTD,EAAA,YAAUC,MAAM,aAAaE,KAAK,SAAO,iBAGzCH,EAAA,QAAMC,MAAO,cACXD,EAAA,e"}

package/dist/ui-library/{p-5654e4c7.js → p-06ba4450.js}

@@ -1,2 +1,2 @@
 const o=new WeakMap;function n(n){if(n==null)return;const e=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageDown","PageUp"];const s=o=>{if(e.includes(o.key)){n.classList.add("focus-visible")}};const i=()=>n.classList.remove("focus-visible");o.set(n,{is:s,isNot:i});n.addEventListener("keydown",s);n.addEventListener("keyup",s);n.addEventListener("mousedown",i);n.addEventListener("mousedown",i)}function e(n){if(n==null)return;const e=o.get(n);if(!e){return}const{is:s,isNot:i}=e;n.classList.remove("focus-visible");n.removeEventListener("keydown",s);n.removeEventListener("keyup",s);n.removeEventListener("mousedown",i);n.removeEventListener("mousedown",i)}const s={observe:n,unobserve:e};export{s as f};
-//# sourceMappingURL=p-5654e4c7.js.map
+//# sourceMappingURL=p-06ba4450.js.map

package/dist/ui-library/p-0a094514.entry.js

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

package/dist/ui-library/p-0a094514.entry.js.map

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

package/dist/ui-library/p-0cebf1d2.js

@@ -0,0 +1,2 @@
+function n(n){const r=n!=null?n.assignedNodes({flatten:true}):[];let t="";[...r].map((n=>{if(n.nodeType===Node.TEXT_NODE){t+=n.textContent}}));return t}function r(n,r){if(r!=null&&r!==""){return n.querySelector(`[slot="${r}"]`)!==null}return Array.from(n.childNodes).some((n=>{var r;if(n.nodeType===n.TEXT_NODE&&((r=n.textContent)===null||r===void 0?void 0:r.trim())!==""){return true}if(n.nodeType===n.ELEMENT_NODE){const r=n;if(!r.hasAttribute("slot")){return true}}return false}))}function t(n,r){if(n==null)return null;return n.querySelector(`[slot="${r}"]`)}export{n as a,t as g,r as h};
+//# sourceMappingURL=p-0cebf1d2.js.map

package/dist/ui-library/p-0cebf1d2.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTextContent","slot","nodes","assignedNodes","flatten","text","map","node","nodeType","Node","TEXT_NODE","textContent","hasSlot","el","name","querySelector","Array","from","childNodes","some","_a","trim","ELEMENT_NODE","hasAttribute","getSlot","element","slotName"],"sources":["src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot?: HTMLSlotElement): string {\n  const nodes = slot != null ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string): boolean {\n  // Look for a named slot\n  if (name != null && name !== '') {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function getSlot(element: ParentNode | null | undefined, slotName: string): HTMLElement | null {\n  if (element == null) return null;\n  return element.querySelector(`[slot=\"${slotName}\"]`);\n}\n"],"mappings":"SAIgBA,EAAeC,GAC7B,MAAMC,EAAQD,GAAQ,KAAOA,EAAKE,cAAc,CAAEC,QAAS,OAAU,GACrE,IAAIC,EAAO,GAEX,IAAIH,GAAOI,KAAKC,IACd,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,CACpCL,GAAQE,EAAKI,W,KAIjB,OAAON,CACT,C,SAMgBO,EAAQC,EAAiBC,GAEvC,GAAIA,GAAQ,MAAQA,IAAS,GAAI,CAC/B,OAAOD,EAAGE,cAAc,UAAUD,SAAc,I,CAIlD,OAAOE,MAAMC,KAAKJ,EAAGK,YAAYC,MAAMZ,I,MACrC,GAAIA,EAAKC,WAAaD,EAAKG,aAAaU,EAAAb,EAAKI,eAAW,MAAAS,SAAA,SAAAA,EAAEC,UAAW,GAAI,CACvE,OAAO,I,CAGT,GAAId,EAAKC,WAAaD,EAAKe,aAAc,CACvC,MAAMT,EAAKN,EACX,IAAKM,EAAGU,aAAa,QAAS,CAC5B,OAAO,I,EAIX,OAAO,KAAK,GAEhB,C,SAEgBC,EAAQC,EAAwCC,GAC9D,GAAID,GAAW,KAAM,OAAO,KAC5B,OAAOA,EAAQV,cAAc,UAAUW,MACzC,Q"}

package/dist/ui-library/p-19a1d34c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,g as o}from"./p-f93d8a4e.js";import{F as a}from"./p-aa99a393.js";import{h as i}from"./p-0cebf1d2.js";import{E as s}from"./p-8bfb4bfc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';const n=l;let h=0;const c=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change",7);this.sixInput=e(this,"six-textarea-input",7);this.sixFocus=e(this,"six-textarea-focus",7);this.sixBlur=e(this,"six-textarea-blur",7);this.inputId=`textarea-${++h}`;this.labelId=`textarea-label-${h}`;this.helpTextId=`textarea-help-text-${h}`;this.errorTextId=`input-error-text-${h}`;this.eventListeners=new s;this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.handleChange=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.sixChange.emit()}};this.handleInput=()=>{if(this.nativeTextarea!=null){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixInput.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleSlotChange=()=>{this.hasLabelSlot=i(this.host,"label");this.hasHelpTextSlot=i(this.host,"help-text");this.hasErrorTextSlot=i(this.host,"error-text")};this.hasFocus=false;this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.hasErrorTextSlot=false;this.size="medium";this.name="";this.value="";this.helpText="";this.placeholder=undefined;this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.autocapitalize="off";this.autocorrect="off";this.autocomplete="off";this.autofocus=false;this.spellcheck=false;this.inputmode=undefined}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){this.setTextareaHeight()}handleValueChange(){this.value=this.getValue();if(this.nativeTextarea!=null){if(this.nativeTextarea.value!==this.value){this.nativeTextarea.value=this.value}}}connectedCallback(){var t;(t=this.host.shadowRoot)===null||t===void 0?void 0:t.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-textarea-input","input",this.host);this.eventListeners.forward("six-textarea-change","change",this.host);this.eventListeners.forward("six-textarea-focus","focus",this.host);this.eventListeners.forward("six-textarea-blur","blur",this.host)}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();if(this.nativeTextarea!=null){this.resizeObserver.observe(this.nativeTextarea)}}disconnectedCallback(){var t;if(this.nativeTextarea!=null){this.resizeObserver.unobserve(this.nativeTextarea)}(t=this.host.shadowRoot)===null||t===void 0?void 0:t.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){var e;(e=this.nativeTextarea)===null||e===void 0?void 0:e.focus(t)}async removeFocus(){var t;(t=this.nativeTextarea)===null||t===void 0?void 0:t.blur()}async select(){var t;return(t=this.nativeTextarea)===null||t===void 0?void 0:t.select()}async setSelectionRange(t,e,r="none"){var o;return(o=this.nativeTextarea)===null||o===void 0?void 0:o.setSelectionRange(t,e,r)}async setRangeText(t,e,r,o="preserve"){if(this.nativeTextarea==null)return;this.nativeTextarea.setRangeText(t,e,r,o);if(this.getValue()!==this.nativeTextarea.value){this.value=this.nativeTextarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}setTextareaHeight(){if(this.nativeTextarea==null)return;if(this.resize==="auto"){this.nativeTextarea.style.height="auto";this.nativeTextarea.style.height=this.nativeTextarea.scrollHeight+"px"}else{this.nativeTextarea.style.height=undefined}}getValue(){var t;return((t=this.value)!==null&&t!==void 0?t:"").toString()}render(){return r(a,{key:"57cd35c0594401cba7b1973ac2e589c4238ee8a1",inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.errorText,errorTextCount:this.errorTextCount,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.invalid},r("div",{key:"01e10905f647a5ade903731024279660ecf963f7",part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":this.getValue().length===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{key:"376b3fa4959ee044417f7262877f7b97a8483859",part:"textarea",ref:t=>this.nativeTextarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.getValue(),autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return o(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};c.style=n;export{c as six_textarea};
+//# sourceMappingURL=p-19a1d34c.entry.js.map

package/dist/ui-library/p-19a1d34c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTextareaCss","SixTextareaStyle0","id","SixTextarea","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","resizeObserver","ResizeObserver","setTextareaHeight","handleChange","nativeTextarea","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","hasErrorTextSlot","handleLabelChange","handleRowsChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","removeEventListener","removeAll","setFocus","options","focus","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","resize","style","height","scrollHeight","undefined","toString","render","h","FormControl","key","label","helpText","errorText","errorTextCount","size","disabled","required","displayError","invalid","part","class","textarea","length","ref","el","name","placeholder","readOnly","readonly","rows","minLength","minlength","maxLength","maxlength","autoCapitalize","autocapitalize","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","inputMode","inputmode","onChange","onInput","onFocus","onBlur"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\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 label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private eventListeners = new EventListeners();\n  private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-textarea-input', 'input', this.host);\n    this.eventListeners.forward('six-textarea-change', 'change', this.host);\n    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.observe(this.nativeTextarea);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) return;\n\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private setTextareaHeight() {\n    if (this.nativeTextarea == null) return;\n\n    if (this.resize === 'auto') {\n      this.nativeTextarea.style.height = 'auto';\n      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n    } else {\n      (this.nativeTextarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-19ca3bd1.entry.js

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

package/dist/ui-library/p-19ca3bd1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixFileUploadCss","SixFileUploadStyle0","SixFileUpload","this","handleFiles","files","disabled","length","uploading","multiple","failure","emit","reason","file","acceptedTypesList","accept","replace","split","indexOf","type","maxFileSize","size","eventPayload","success","onChange","_a","fileInput","value","dragenterHandler","isOver","dragoverHandler","dragleaveHandler","dropHandler","dataTransfer","componentDidLoad","forEach","eventName","host","addEventListener","preventDefaults","document","body","disconnectedCallback","removeEventListener","e","preventDefault","stopPropagation","renderLabel","label","compact","h","class","render","Container","key","slot","name","ref","el"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__label-icon {\n    margin-right: 0.5rem;\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &__spinner-container {\n      display: flex;\n      align-items: center;\n\n      six-spinner {\n        margin-right: var(--six-spacing-x-small);\n      }\n    }\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n    cursor: not-allowed;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host!: HTMLSixFileUploadElement;\n\n  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label?: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Set to true to draw the control in a loading state. */\n  @Prop({ reflect: true }) uploading = false;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler({ dataTransfer }: DragEvent) {\n    if (!this.disabled) {\n      this.isOver = false;\n      if (dataTransfer != null) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0 || this.uploading) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\n  };\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ??\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled || this.uploading,\n        }}\n      >\n        <Container\n          disabled={this.disabled || this.uploading}\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && !this.uploading && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            {this.uploading ? (\n              <span class=\"six-file-upload__drop-zone__spinner-container\">\n                <six-spinner /> Uploading...\n              </span>\n            ) : (\n              <div>\n                <span>{this.renderLabel()}</span>\n                <input\n                  class=\"six-file-upload__input\"\n                  type=\"file\"\n                  name=\"resume\"\n                  disabled={this.disabled}\n                  accept={this.accept}\n                  multiple={this.multiple}\n                  onChange={this.onChange}\n                  ref={(el) => (this.fileInput = el)}\n                />\n              </div>\n            )}\n          </div>\n        </Container>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-1d4cb6e9.entry.js

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

package/dist/ui-library/p-1d4cb6e9.entry.js.map

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

package/dist/ui-library/p-1f1224ae.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as e}from"./p-f93d8a4e.js";const i=".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";const t=i;const c=class{constructor(e){s(this,e)}render(){return e("div",{key:"4bdb325e258144824fd3c57a5b4807fd42e2c1fe",class:"six-files-list__container"},e("slot",{key:"807a223c2bf8229e45192516cc57f9ee994ba927"}))}};c.style=t;export{c as six_file_list};
+//# sourceMappingURL=p-1f1224ae.entry.js.map

package/dist/ui-library/p-1f1224ae.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixFileListCss","SixFileListStyle0","SixFileList","render","h","key","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,mGACvB,MAAAC,EAAeD,E,MCWFE,EAAW,M,yBACtB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,6BACTF,EAAA,QAAAC,IAAA,6C"}

package/dist/ui-library/p-21002de1.entry.js

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

package/dist/ui-library/p-21002de1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixDetailsCss","SixDetailsStyle0","id","SixDetails","this","componentId","isVisible","handleBodyTransitionEnd","event","body","target","propertyName","classList","contains","style","overflow","open","height","sixAfterShow","emit","sixAfterHide","hidden","handleSummaryClick","disabled","hasContent","selectableEmpty","hide","show","_a","header","focus","handleSummaryKeyDown","key","preventDefault","handleOpenChange","componentDidLoad","details","focusVisible","observe","disconnectedCallback","unobserve","sixShow","defaultPrevented","scrollHeight","sixHide","requestAnimationFrame","render","summaryIcon","h","ref","el","part","class","inline","role","tabIndex","onClick","onKeyDown","name","summary","animateSummaryIcon","onSlotchange","size","summaryIconSize","onTransitionEnd"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n * @prop --horizontal-padding: The horizontal padding\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n  --horizontal-padding: var(--six-spacing-medium);\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium) var(--horizontal-padding);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,6tEACtB,MAAAC,EAAeD,ECGf,IAAIE,EAAK,E,MAuBIC,EAAU,M,uNAQbC,KAAAC,YAAc,aAAaH,IAC3BE,KAAAE,UAAY,MA8HZF,KAAAG,wBAA2BC,IACjC,GAAIJ,KAAKK,MAAQ,KAAM,OACvB,MAAMC,EAASF,EAAME,OAGrB,GAAIF,EAAMG,eAAiB,UAAYD,EAAOE,UAAUC,SAAS,iBAAkB,CACjFT,KAAKK,KAAKK,MAAMC,SAAWX,KAAKY,KAAO,UAAY,SACnDZ,KAAKK,KAAKK,MAAMG,OAASb,KAAKY,KAAO,OAAS,IAC9CZ,KAAKY,KAAOZ,KAAKc,aAAaC,OAASf,KAAKgB,aAAaD,OACzDf,KAAKK,KAAKY,QAAUjB,KAAKY,I,GAIrBZ,KAAAkB,mBAAqB,K,MAC3B,IAAKlB,KAAKmB,WAAanB,KAAKoB,YAAcpB,KAAKqB,iBAAkB,CAC/DrB,KAAKY,KAAOZ,KAAKsB,OAAStB,KAAKuB,QAC/BC,EAAAxB,KAAKyB,UAAM,MAAAD,SAAA,SAAAA,EAAEE,O,GAIT1B,KAAA2B,qBAAwBvB,IAC9B,GAAIA,EAAMwB,MAAQ,SAAWxB,EAAMwB,MAAQ,IAAK,CAC9CxB,EAAMyB,iBACN7B,KAAKY,KAAOZ,KAAKsB,OAAStB,KAAKuB,M,CAGjC,GAAInB,EAAMwB,MAAQ,WAAaxB,EAAMwB,MAAQ,YAAa,CACxDxB,EAAMyB,iBACN7B,KAAKsB,M,CAGP,GAAIlB,EAAMwB,MAAQ,aAAexB,EAAMwB,MAAQ,aAAc,CAC3DxB,EAAMyB,iBACN7B,KAAKuB,M,2BArKqB,K,UASiB,M,aAG7B,G,gDAcD,U,cAGE,M,YAGF,M,qBAGS,M,gBAIL,I,CAGrB,gBAAAO,GACE,GAAI9B,KAAKK,MAAQ,KAAM,CACrBL,KAAKY,KAAOZ,KAAKuB,OAASvB,KAAKsB,M,EAgBnC,gBAAAS,GACE,GAAI/B,KAAKgC,SAAW,MAAQhC,KAAKK,MAAQ,KAAM,OAE/C4B,EAAaC,QAAQlC,KAAKgC,SAC1BhC,KAAKK,KAAKY,QAAUjB,KAAKY,KAGzB,GAAIZ,KAAKY,KAAM,CACbZ,KAAKuB,M,EAIT,oBAAAY,GACE,GAAInC,KAAKgC,SAAW,KAAM,CACxBC,EAAaG,UAAUpC,KAAKgC,Q,EAMhC,UAAMT,GAEJ,GAAIvB,KAAKE,WAAaF,KAAKK,MAAQ,KAAM,OAEzC,MAAMgC,EAAUrC,KAAKqC,QAAQtB,OAC7B,GAAIsB,EAAQC,iBAAkB,CAC5BtC,KAAKY,KAAO,MACZ,M,CAGFZ,KAAKK,KAAKY,OAAS,MAEnB,GAAIjB,KAAKK,KAAKkC,eAAiB,EAAG,CAGhCvC,KAAKK,KAAKK,MAAMG,OAAS,OACzBb,KAAKK,KAAKK,MAAMC,SAAW,S,KACtB,CACLX,KAAKK,KAAKK,MAAMG,OAAS,GAAGb,KAAKK,KAAKkC,iBACtCvC,KAAKK,KAAKK,MAAMC,SAAW,Q,CAE7BX,KAAKE,UAAY,KACjBF,KAAKY,KAAO,I,CAKd,UAAMU,GAEJ,IAAKtB,KAAKE,WAAaF,KAAKK,MAAQ,KAAM,OAC1C,MAAMA,EAAOL,KAAKK,KAElB,MAAMmC,EAAUxC,KAAKwC,QAAQzB,OAC7B,GAAIyB,EAAQF,iBAAkB,CAC5BtC,KAAKY,KAAO,KACZ,M,CAIFP,EAAKK,MAAMG,OAAS,GAAGR,EAAKkC,iBAC5BlC,EAAKK,MAAMC,SAAW,SAEtB8B,uBAAsB,KAGpBpC,EAAKK,MAAMG,OAAS,GAAG,IAGzBb,KAAKE,UAAY,MACjBF,KAAKY,KAAO,K,CAwCd,MAAA8B,GACE,MAAMC,EAAc3C,KAAKoB,aAAepB,KAAK2C,aAAe,eAE5D,OACEC,EAAA,OAAAhB,IAAA,2CACEiB,IAAMC,GAAQ9C,KAAKgC,QAAUc,EAC7BC,KAAK,OACLC,MAAO,CACLhB,QAAS,KACT,gBAAiBhC,KAAKY,KACtB,oBAAqBZ,KAAKmB,SAC1B8B,OAAQjD,KAAKiD,SAGfL,EAAA,UAAAhB,IAAA,2CACEiB,IAAMC,GAAQ9C,KAAKyB,OAASqB,EAC5BC,KAAK,SACLjD,GAAI,GAAGE,KAAKC,qBACZ+C,MAAM,kBACNE,KAAK,SAAQ,gBACElD,KAAKY,KAAO,OAAS,QAAO,gBAC5B,GAAGZ,KAAKC,sBAAqB,gBAC7BD,KAAKmB,SAAW,OAAS,QACxCgC,SAAUnD,KAAKmB,UAAY,EAAI,EAC/BiC,QAASpD,KAAKkB,mBACdmC,UAAWrD,KAAK2B,sBAEhBiB,EAAA,OAAAhB,IAAA,2CAAKmB,KAAK,UAAUC,MAAM,oBACxBJ,EAAA,QAAAhB,IAAA,2CAAM0B,KAAK,WAAWtD,KAAKuD,UAG7BX,EAAA,QAAAhB,IAAA,2CACEmB,KAAK,eACLC,MAAO,CACL,wBAAyB,KACzB,iCAAkChD,KAAKwD,qBAGzCZ,EAAA,QAAAhB,IAAA,2CAAM0B,KAAK,eAAeG,aAAc,IAAOzD,KAAKwD,mBAAqB,OACtEb,GAAeC,EAAA,YAAUc,KAAM1D,KAAK2D,iBAAkBhB,MAK7DC,EAAA,OAAAhB,IAAA,2CAAKiB,IAAMC,GAAQ9C,KAAKK,KAAOyC,EAAKE,MAAM,gBAAgBY,gBAAiB5D,KAAKG,yBAC9EyC,EAAA,OAAAhB,IAAA,2CACEmB,KAAK,UACLjD,GAAI,GAAGE,KAAKC,sBACZ+C,MAAM,mBACNE,KAAK,SAAQ,kBACI,GAAGlD,KAAKC,sBAEzB2C,EAAA,QAAAhB,IAAA,+C"}

package/dist/ui-library/p-29b75db4.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as i}from"./p-f93d8a4e.js";const t=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;--size:2rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--size);height:var(--size);background-color:var(--six-avatar-background-color);font-family:var(--six-font-sans);font-size:calc(var(--size) * 0.5);font-weight:var(--six-font-weight-normal);color:var(--six-avatar-color);overflow:hidden;user-select:none;vertical-align:middle;cursor:pointer;outline:none}.avatar:hover{box-shadow:var(--six-shadow-medium)}.avatar--circle{border-radius:var(--six-border-radius-circle)}.avatar--rounded{border-radius:var(--six-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}";const r=t;const e=class{constructor(i){a(this,i);this.handleImageError=()=>{this.hasError=true};this.hasError=false;this.image="";this.alt="";this.initials="";this.shape="circle"}render(){return i("div",{key:"0d81ad186f0dae970c5e99eced042da6eac05934",part:"base",class:{avatar:true,"avatar--circle":this.shape==="circle","avatar--rounded":this.shape==="rounded","avatar--square":this.shape==="square"},role:"image","aria-label":this.alt,tabIndex:0},this.initials===""&&i("div",{part:"icon",class:"avatar__icon"},i("slot",{name:"icon"},i("six-icon",null,"person"))),this.initials&&i("div",{part:"initials",class:"avatar__initials"},this.initials),this.image&&!this.hasError&&i("img",{part:"image",class:"avatar__image",src:this.image,onError:this.handleImageError}))}};e.style=r;export{e as six_avatar};
+//# sourceMappingURL=p-29b75db4.entry.js.map

package/dist/ui-library/p-29b75db4.entry.js.map

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

package/dist/ui-library/p-338205f4.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as r,g as i}from"./p-f93d8a4e.js";import{h as n}from"./p-0cebf1d2.js";import{s as a}from"./p-842b492e.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;transform:translateY(-1.5px)}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";const e=s;const l=class{constructor(r){o(this,r);this.sixBlur=t(this,"six-button-blur",7);this.sixFocus=t(this,"six-button-focus",7);this.handleSlotChange=()=>{this.hasLabel=n(this.host);this.hasPrefix=n(this.host,"prefix");this.hasSuffix=n(this.host,"suffix")};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClick=o=>{if(this.disabled||this.loading){o.preventDefault();o.stopPropagation();return}if(this.submit){o.preventDefault();a(this.host)}};this.hasFocus=false;this.hasLabel=false;this.hasPrefix=false;this.hasSuffix=false;this.type="primary";this.size="medium";this.caret=false;this.disabled=false;this.loading=false;this.pill=false;this.circle=false;this.submit=false;this.reset=false;this.name="";this.value="";this.href=undefined;this.target=undefined;this.download=undefined}componentWillLoad(){this.handleSlotChange()}async setFocus(o){var t;(t=this.nativeButton)===null||t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeButton)===null||o===void 0?void 0:o.blur()}render(){const o=this.href!=null;const t=!o;const i=o?"a":"button";return r("div",{key:"573030e665993c7322fac14169a2fcf30893d411",onClick:this.handleClick,class:{"button-wrapper--disabled":this.disabled}},r(i,{key:"88d0bc40bdf3322cbca441f09691c4b13479c409",ref:o=>this.nativeButton=o,part:"base",class:{button:true,"button--secondary":this.type==="secondary","button--primary":this.type==="primary","button--link":this.type==="link","button--success":this.type==="success","button--warning":this.type==="warning","button--danger":this.type==="danger","button--action":this.type==="action","button--small":this.size==="small","button--medium":this.size==="medium","button--large":this.size==="large","button--caret":this.caret,"button--circle":this.circle,"button--disabled":this.disabled,"button--focused":this.hasFocus,"button--loading":this.loading,"button--pill":this.pill,"button--has-label":this.hasLabel,"button--has-prefix":this.hasPrefix,"button--has-suffix":this.hasSuffix},disabled:t?this.disabled:undefined,tabindex:this.disabled?"-1":undefined,type:t?this.submit?"submit":this.reset?"reset":"button":undefined,name:t?this.name:undefined,value:t?this.value:undefined,href:o?this.href:undefined,target:o&&this.target!=null?this.target:undefined,download:o&&this.download!=null?this.download:undefined,rel:o&&this.target!=null?"noreferrer noopener":undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,"data-testid":"button"},r("span",{key:"4ab652a90c0b7ea35c7cba84afac97d993eef0bb",part:"prefix",class:"button__prefix"},r("slot",{key:"00758b95d992872cfd10e3f7897dd48b5c3149d1",onSlotchange:this.handleSlotChange,name:"prefix"})),r("span",{key:"ea10ef2ac9a40dc92afd977708a702158b3fc811",part:"label",class:"button__label"},r("slot",{key:"e774f6341949b7c60e26e64dfb1f2e6ea958f6f5",onSlotchange:this.handleSlotChange})),r("span",{key:"a4afd93f005694ec7b6c7d21a725bbdd7d6e39dc",part:"suffix",class:"button__suffix"},r("slot",{key:"35098974eaf65bfa463ec019d99115baa35bba92",onSlotchange:this.handleSlotChange,name:"suffix"})),this.caret&&r("span",{part:"caret",class:"button__caret"},r("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{points:"6 9 12 15 18 9"}))),this.loading&&r("six-spinner",null)))}get host(){return i(this)}};l.style=e;export{l as six_button};
+//# sourceMappingURL=p-338205f4.entry.js.map

package/dist/ui-library/p-338205f4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixButtonCss","SixButtonStyle0","SixButton","this","handleSlotChange","hasLabel","hasSlot","host","hasPrefix","hasSuffix","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClick","event","disabled","loading","preventDefault","stopPropagation","submit","submitForm","componentWillLoad","setFocus","options","_a","nativeButton","focus","removeFocus","blur","render","isLink","href","isButton","Button","h","key","onClick","class","ref","el","part","button","type","size","caret","circle","pill","undefined","tabindex","reset","name","value","target","download","rel","onBlur","onFocus","onSlotchange","viewBox","fill","stroke","points"],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--six-border-width);\n  border-radius: 0;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n    var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    pointer-events: none;\n  }\n\n  ::slotted(six-icon) {\n    // Clicks on icons shouldn't prevent the button from gaining focus\n    pointer-events: none;\n    transform: translateY(-1.5px);\n  }\n}\n\n.button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n\n  &.button--secondary {\n    background-color: var(--six-color-white);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n      border-color: var(--six-color-web-rock-400);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-300);\n      border-color: var(--six-color-web-rock-900);\n      border-width: 1px;\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--six-color-web-rock-900);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-800);\n      border-color: var(--six-color-web-rock-800);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-900);\n      opacity: 70%;\n    }\n  }\n\n  &.button--link {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &:hover:not(.button--disabled) {\n      color: var(--six-color-action-600);\n    }\n\n    &:active:not(.button--disabled) {\n      color: var(--six-color-action-light-to-be-defined);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--six-color-danger-800);\n    border-color: var(--six-color-danger-800);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-danger-900);\n      border-color: var(--six-color-danger-900);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-danger-800);\n      opacity: 70%;\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--six-color-warning-700);\n    border-color: var(--six-color-warning-700);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-warning-800);\n      border-color: var(--six-color-warning-800);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-warning-700);\n      opacity: 70%;\n    }\n  }\n\n  &.button--success {\n    background-color: var(--six-color-success-500);\n    border-color: var(--six-color-success-500);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-success-600);\n      border-color: var(--six-color-success-600);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-success-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action {\n    background-color: var(--six-color-action-500);\n    border-color: var(--six-color-action-500);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-action-600);\n      border-color: var(--six-color-action-600);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--six-button-font-size-small);\n  height: var(--six-height-small);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: var(--six-height-medium);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n  font-size: var(--six-button-font-size-large);\n  height: var(--six-height-large);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n  font-size: revert;\n\n  &.button--small {\n    width: var(--six-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--six-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--six-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n  .button__caret {\n    svg {\n      color: var(--six-color-white);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  six-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--six-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--six-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--six-spacing-large);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-3827f9e0.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as s,h as e}from"./p-f93d8a4e.js";const t=".six-files-list-item{padding-bottom:0.5rem}.six-files-list-item__name{color:var(--six-color-action-600);cursor:pointer}.six-files-list-item__name--disabled{cursor:inherit;color:var(--six-color-web-rock-500)}.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled){color:var(--six-color-action-500)}.six-files-list-item__date{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__size{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__icon{padding-left:0.5rem;display:inline-block;transform:translateY(-3px);cursor:pointer;color:var(--six-color-web-rock-600)}.six-files-list-item__icon--disabled{cursor:not-allowed;color:var(--six-color-web-rock-500)}.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled){color:var(--six-color-web-rock-900)}";const l=t;const o=class{constructor(e){i(this,e);this.downloadEvent=s(this,"six-file-list-item-download",7);this.removeEvent=s(this,"six-file-list-item-remove",7);this.downloadFile=()=>{if(this.nodownload){return}this.downloadEvent.emit({fileId:this.identifier,name:this.name})};this.removeFile=()=>{if(this.nodelete){return}this.removeEvent.emit({fileId:this.identifier,name:this.name})};this.identifier="";this.name="";this.date="";this.size=undefined;this.nodownload=false;this.nodelete=false}render(){return e("div",{key:"d952d96c29ffa8e5e4b0476e3c7ed2f28d635517",class:"six-files-list-item"},e("span",{key:"1690a23c428c3b70281fbcff30183d8079ed83a4",class:{"six-files-list-item__name":true,"six-files-list-item__name--disabled":this.nodownload},onClick:this.downloadFile},this.name),e("span",{key:"8c7437e946edaeeeedee8e76e28950f0f14ed4bb",class:"six-files-list-item__date"},this.date),this.size!=null&&e("span",{class:"six-files-list-item__size"},Math.round(this.size/1024)," KB"),e("six-icon",{key:"1b433c6baf5a67b7b812919058562e31bc402a9d",class:{"six-files-list-item__icon":true,"six-files-list-item__icon--disabled":this.nodelete},size:"small",onClick:this.removeFile},"delete"))}};o.style=l;export{o as six_file_list_item};
+//# sourceMappingURL=p-3827f9e0.entry.js.map

package/dist/ui-library/p-3827f9e0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixFileListItemCss","SixFileListItemStyle0","SixFileListItem","this","downloadFile","nodownload","downloadEvent","emit","fileId","identifier","name","removeFile","nodelete","removeEvent","render","h","key","class","onClick","date","size","Math","round"],"sources":["src/components/six-file-list-item/six-file-list-item.scss?tag=six-file-list-item&encapsulation=shadow","src/components/six-file-list-item/six-file-list-item.tsx"],"sourcesContent":[".six-files-list-item {\n  padding-bottom: 0.5rem;\n\n  &__name {\n    color: var(--six-color-action-600);\n    cursor: pointer;\n\n    &--disabled {\n      cursor: inherit;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-action-500);\n    }\n  }\n\n  &__date {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__size {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__icon {\n    padding-left: 0.5rem;\n    display: inline-block;\n    transform: translateY(-3px);\n    cursor: pointer;\n    color: var(--six-color-web-rock-600);\n\n    &--disabled {\n      cursor: not-allowed;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nexport interface SixFileListDownloadPayload {\n  fileId: string;\n  name: string;\n}\n\nexport interface SixFileListRemovePayload {\n  fileId: string;\n  name: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list-item',\n  styleUrl: 'six-file-list-item.scss',\n  shadow: true,\n})\nexport class SixFileListItem {\n  /** An id to clearly identify the file */\n  @Prop({ reflect: true }) identifier = '';\n\n  /** The filename */\n  @Prop({ reflect: true }) name = '';\n\n  /** The date when the file was uploaded */\n  @Prop({ reflect: true }) date = '';\n\n  /** The file size. This number will be divided by 1024 to show the filesize in KB */\n  @Prop({ reflect: true }) size?: number;\n\n  /** Set to true if you don't want to allow to download this file */\n  @Prop({ reflect: true }) nodownload = false;\n\n  /** Set to true if you don't want to allow to delete this file */\n  @Prop({ reflect: true }) nodelete = false;\n\n  /** Triggered on file download. */\n  @Event({ eventName: 'six-file-list-item-download' }) downloadEvent!: EventEmitter<SixFileListDownloadPayload>;\n\n  /** Triggered on file remove. */\n  @Event({ eventName: 'six-file-list-item-remove' }) removeEvent!: EventEmitter<SixFileListRemovePayload>;\n\n  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private removeFile = () => {\n    if (this.nodelete) {\n      return;\n    }\n\n    this.removeEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  render() {\n    return (\n      <div class=\"six-files-list-item\">\n        <span\n          class={{\n            'six-files-list-item__name': true,\n            'six-files-list-item__name--disabled': this.nodownload,\n          }}\n          onClick={this.downloadFile}\n        >\n          {this.name}\n        </span>\n        <span class=\"six-files-list-item__date\">{this.date}</span>\n        {this.size != null && <span class=\"six-files-list-item__size\">{Math.round(this.size / 1024)} KB</span>}\n        <six-icon\n          class={{\n            'six-files-list-item__icon': true,\n            'six-files-list-item__icon--disabled': this.nodelete,\n          }}\n          size=\"small\"\n          onClick={this.removeFile}\n        >\n          delete\n        </six-icon>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,8zBAC3B,MAAAC,EAAeD,E,MCqBFE,EAAe,M,2IAyBlBC,KAAAC,aAAe,KACrB,GAAID,KAAKE,WAAY,CACnB,M,CAGFF,KAAKG,cAAcC,KAAK,CAAEC,OAAQL,KAAKM,WAAYC,KAAMP,KAAKO,MAAO,EAG/DP,KAAAQ,WAAa,KACnB,GAAIR,KAAKS,SAAU,CACjB,M,CAGFT,KAAKU,YAAYN,KAAK,CAAEC,OAAQL,KAAKM,WAAYC,KAAMP,KAAKO,MAAO,E,gBApC/B,G,UAGN,G,UAGA,G,oCAMM,M,cAGF,K,CAwBpC,MAAAI,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,QAAAC,IAAA,2CACEC,MAAO,CACL,4BAA6B,KAC7B,sCAAuCd,KAAKE,YAE9Ca,QAASf,KAAKC,cAEbD,KAAKO,MAERK,EAAA,QAAAC,IAAA,2CAAMC,MAAM,6BAA6Bd,KAAKgB,MAC7ChB,KAAKiB,MAAQ,MAAQL,EAAA,QAAME,MAAM,6BAA6BI,KAAKC,MAAMnB,KAAKiB,KAAO,MAAK,OAC3FL,EAAA,YAAAC,IAAA,2CACEC,MAAO,CACL,4BAA6B,KAC7B,sCAAuCd,KAAKS,UAE9CQ,KAAK,QACLF,QAASf,KAAKQ,YAAU,U"}

package/dist/ui-library/p-38a9a590.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as o,h as e,g as r}from"./p-f93d8a4e.js";import{E as t}from"./p-8bfb4bfc.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.radio{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}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";const a=s;let l=0;const n=class{constructor(e){i(this,e);this.sixBlur=o(this,"six-radio-blur",7);this.sixChange=o(this,"six-radio-change",7);this.sixFocus=o(this,"six-radio-focus",7);this.inputId=`radio-${++l}`;this.labelId=`radio-label-${l}`;this.eventListeners=new t;this.handleClick=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=i=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const e=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let r=o.indexOf(this.host)+e;if(r<0)r=o.length-1;if(r>o.length-1)r=0;this.getAllRadios().forEach((i=>i.checked=false));o[r].setFocus();o[r].checked=true;o[r].dispatchEvent(new CustomEvent("six-radio-change",{bubbles:true,cancelable:true}));i.preventDefault()}};this.handleMouseDown=i=>{var o;i.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.checked=false;this.invalid=false}handleCheckedChange(){if(this.checked){this.getSiblingRadios().forEach((i=>i.checked=false))}if(this.nativeInput!=null){this.nativeInput.checked=this.checked}}handleNameChange(i){if(this.nativeInput!=null){this.nativeInput.name=i}}connectedCallback(){this.eventListeners.forward("six-radio-change","change",this.host);this.eventListeners.forward("six-radio-blur","blur",this.host);this.eventListeners.forward("six-radio-focus","focus",this.host)}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(i){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}getAllRadios(){const i=this.host.closest("form")||document.body;if(this.name==="")return[];return[...i.querySelectorAll("six-radio")].filter((i=>i.name===this.name))}getSiblingRadios(){return this.getAllRadios().filter((i=>i!==this.host))}render(){return e("label",{key:"13c5201fe152b2bc57a679422219af5ae19a46a9",part:"base",class:{radio:true,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus},htmlFor:this.inputId,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown},e("span",{key:"d32606e4ac318f0de1afb0234d2dfc7dd00546ec",part:"control",class:"radio__control"},e("span",{key:"d12e68de71d9e49dc4b68813dc036ffa4e06fc96",part:"checked-icon",class:"radio__icon"},e("svg",{key:"b942c5b3f4c817484ce4a615913a4a9c01675562",viewBox:"0 0 16 16"},e("g",{key:"316ed8598111b40d906c0b44ab7e4bfd2bf5cd1c",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},e("g",{key:"58a1547753ea79b7de3b4b90eeedfeb40ad7b6d6",fill:"currentColor"},e("circle",{key:"d225f3a06fdbb23a84eae34a6ba1b9184f55e627",cx:"8",cy:"8",r:"5"}))))),e("input",{key:"8e3adc0aaba86098d423c5a7f484a20fe0b2a0cd",ref:i=>this.nativeInput=i,id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,role:"radio","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{key:"b72458bbd8e5ca7a8109a5e85b1b5699a843d097",part:"label",id:this.labelId,class:"radio__label"},e("slot",{key:"87652971c02c9aa7187a0f266283d9a475946f78"})))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],name:["handleNameChange"]}}};n.style=a;export{n as six_radio};
+//# sourceMappingURL=p-38a9a590.entry.js.map

package/dist/ui-library/p-38a9a590.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixRadioCss","SixRadioStyle0","id","SixRadio","this","inputId","labelId","eventListeners","EventListeners","handleClick","nativeInput","checked","sixChange","emit","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleKeyDown","keyboardEvent","includes","key","radios","getAllRadios","filter","radio","disabled","incr","index","indexOf","host","length","forEach","setFocus","dispatchEvent","CustomEvent","bubbles","cancelable","preventDefault","handleMouseDown","event","_a","focus","handleCheckedChange","getSiblingRadios","handleNameChange","name","connectedCallback","forward","disconnectedCallback","removeAll","options","removeFocus","blur","form","closest","document","body","querySelectorAll","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","value","role","onClick","onBlur","onFocus"],"sources":["src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.radio {\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.radio__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.radio__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: 50%;\n  background-color: var(--six-input-background-color);\n  color: transparent;\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='radio'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n  color: var(--six-selection-control-color);\n  border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  color: var(--six-input-border-color-focus);\n  border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .radio__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.radio--checked .radio__control {\n    color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.radio__label {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { 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 - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().forEach((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n      radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n      keyboardEvent.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\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          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,o3DACpB,MAAAC,EAAeD,ECGf,IAAIE,EAAK,E,MAqBIC,EAAQ,M,uJACXC,KAAAC,QAAU,WAAWH,IACrBE,KAAAE,QAAU,eAAeJ,IAEzBE,KAAAG,eAAiB,IAAIC,EAmFrBJ,KAAAK,YAAc,KACpB,GAAIL,KAAKM,aAAe,KAAM,CAC5BN,KAAKO,QAAUP,KAAKM,YAAYC,QAChCP,KAAKQ,UAAUC,M,GAIXT,KAAAU,WAAa,KACnBV,KAAKW,SAAW,MAChBX,KAAKY,QAAQH,MAAM,EAGbT,KAAAa,YAAc,KACpBb,KAAKW,SAAW,KAChBX,KAAKc,SAASL,MAAM,EAGdT,KAAAe,cAAiBC,IACvB,GAAI,CAAC,UAAW,YAAa,YAAa,cAAcC,SAASD,EAAcE,KAAM,CACnF,MAAMC,EAASnB,KAAKoB,eAAeC,QAAQC,IAAWA,EAAMC,WAC5D,MAAMC,EAAO,CAAC,UAAW,aAAaP,SAASD,EAAcE,MAAQ,EAAI,EACzE,IAAIO,EAAQN,EAAOO,QAAQ1B,KAAK2B,MAAQH,EACxC,GAAIC,EAAQ,EAAGA,EAAQN,EAAOS,OAAS,EACvC,GAAIH,EAAQN,EAAOS,OAAS,EAAGH,EAAQ,EAEvCzB,KAAKoB,eAAeS,SAASP,GAAWA,EAAMf,QAAU,QACxDY,EAAOM,GAAOK,WACdX,EAAOM,GAAOlB,QAAU,KACxBY,EAAOM,GAAOM,cAAc,IAAIC,YAAY,mBAAoB,CAAEC,QAAS,KAAMC,WAAY,QAC7FlB,EAAcmB,gB,GAIVnC,KAAAoC,gBAAmBC,I,MAEzBA,EAAMF,kBACNG,EAAAtC,KAAKM,eAAW,MAAAgC,SAAA,SAAAA,EAAEC,OAAO,E,cAnHP,M,UAGL,G,WAGkB,K,cAGd,M,aAG+B,M,aAGf,K,CAGnC,mBAAAC,GACE,GAAIxC,KAAKO,QAAS,CAChBP,KAAKyC,mBAAmBZ,SAASP,GAAWA,EAAMf,QAAU,O,CAE9D,GAAIP,KAAKM,aAAe,KAAM,CAC5BN,KAAKM,YAAYC,QAAUP,KAAKO,O,EAKpC,gBAAAmC,CAAiBC,GACf,GAAI3C,KAAKM,aAAe,KAAM,CAC5BN,KAAKM,YAAYqC,KAAOA,C,EAa5B,iBAAAC,GACE5C,KAAKG,eAAe0C,QAAQ,mBAAoB,SAAU7C,KAAK2B,MAC/D3B,KAAKG,eAAe0C,QAAQ,iBAAkB,OAAQ7C,KAAK2B,MAC3D3B,KAAKG,eAAe0C,QAAQ,kBAAmB,QAAS7C,KAAK2B,K,CAG/D,oBAAAmB,GACE9C,KAAKG,eAAe4C,W,CAKtB,cAAMjB,CAASkB,G,OACbV,EAAAtC,KAAKM,eAAW,MAAAgC,SAAA,SAAAA,EAAEC,MAAMS,E,CAK1B,iBAAMC,G,OACJX,EAAAtC,KAAKM,eAAW,MAAAgC,SAAA,SAAAA,EAAEY,M,CAGZ,YAAA9B,GACN,MAAM+B,EAAOnD,KAAK2B,KAAKyB,QAAQ,SAAWC,SAASC,KAEnD,GAAItD,KAAK2C,OAAS,GAAI,MAAO,GAE7B,MAAO,IAAIQ,EAAKI,iBAAiB,cAAclC,QAC5CC,GAA+BA,EAAMqB,OAAS3C,KAAK2C,M,CAIhD,gBAAAF,GACN,OAAOzC,KAAKoB,eAAeC,QAAQC,GAAUA,IAAUtB,KAAK2B,M,CA0C9D,MAAA6B,GACE,OACEC,EAAA,SAAAvC,IAAA,2CACEwC,KAAK,OACLC,MAAO,CACLrC,MAAO,KACP,iBAAkBtB,KAAKO,QACvB,kBAAmBP,KAAKuB,SACxB,iBAAkBvB,KAAKW,UAEzBiD,QAAS5D,KAAKC,QACd4D,UAAW7D,KAAKe,cAChB+C,YAAa9D,KAAKoC,iBAElBqB,EAAA,QAAAvC,IAAA,2CAAMwC,KAAK,UAAUC,MAAM,kBACzBF,EAAA,QAAAvC,IAAA,2CAAMwC,KAAK,eAAeC,MAAM,eAC9BF,EAAA,OAAAvC,IAAA,2CAAK6C,QAAQ,aACXN,EAAA,KAAAvC,IAAA,2CAAG8C,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,WACtDR,EAAA,KAAAvC,IAAA,2CAAG+C,KAAK,gBACNR,EAAA,UAAAvC,IAAA,2CAAQgD,GAAG,IAAIC,GAAG,IAAIC,EAAE,UAMhCX,EAAA,SAAAvC,IAAA,2CACEmD,IAAMC,GAAQtE,KAAKM,YAAcgE,EACjCxE,GAAIE,KAAKC,QACTsE,KAAK,QACL5B,KAAM3C,KAAK2C,KACX6B,MAAOxE,KAAKwE,MACZjE,QAASP,KAAKO,QACdgB,SAAUvB,KAAKuB,SACfkD,KAAK,QAAO,eACEzE,KAAKO,QAAU,OAAS,QAAO,kBAC5BP,KAAKE,QACtBwE,QAAS1E,KAAKK,YACdsE,OAAQ3E,KAAKU,WACbkE,QAAS5E,KAAKa,eAIlB4C,EAAA,QAAAvC,IAAA,2CAAMwC,KAAK,QAAQ5D,GAAIE,KAAKE,QAASyD,MAAM,gBACzCF,EAAA,QAAAvC,IAAA,8C"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixTileCss","SixTileStyle0","SixTile","this","handleSlotChange","hasIconSlot","hasSlot","host","hasLabelSlot","slot","getSlot","addEventListener","handleClickEvent","handleCloseClickEvent","visible","sixTileClose","emit","sixTileSelected","hide","show","componentWillLoad","render","h","key","disabled","disableTooltip","label","content","part","class","tile","size","elevated","closeable","name","closeIconSize","onClick","iconName","iconSize","small","medium","large"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"mappings":"oGAAA,MAAMA,EAAa,soEACnB,MAAAC,EAAeD,E,MCaFE,EAAO,M,0HAsDVC,KAAAC,iBAAmB,KACzBD,KAAKE,YAAcC,EAAQH,KAAKI,KAAM,QACtCJ,KAAKK,aAAeF,EAAQH,KAAKI,KAAM,SAEvC,GAAIJ,KAAKE,YAAa,CACpB,MAAMI,EAAOC,EAAQP,KAAKI,KAAM,QAChCE,IAAI,MAAJA,SAAI,SAAJA,EAAME,iBAAiB,QAASR,KAAKS,iB,CAGvC,GAAIT,KAAKK,aAAc,CACrB,MAAMC,EAAOC,EAAQP,KAAKI,KAAM,SAChCE,IAAI,MAAJA,SAAI,SAAJA,EAAME,iBAAiB,QAASR,KAAKS,iB,GA+DjCT,KAAAU,sBAAwB,KAC9BV,KAAKW,QAAU,MACfX,KAAKY,aAAaC,MAAM,EAGlBb,KAAAS,iBAAmB,KACzBT,KAAKc,gBAAgBD,MAAM,E,WAlIb,G,uCAOI,K,cAGD,M,oBAIM,K,cAGW,M,UAG0B,S,aAE3C,K,iBAoBI,M,kBAEC,K,CAZxB,UAAME,GACJf,KAAKW,QAAU,K,CAKjB,UAAMK,GACJhB,KAAKW,QAAU,I,CAOjB,iBAAAM,GACEjB,KAAKC,kB,CAkBP,MAAAiB,GACE,OACEC,EAAA,eAAAC,IAAA,2CAAaC,SAAUrB,KAAKsB,gBAAkBtB,KAAKuB,QAAU,GAAIC,QAASxB,KAAKuB,OAC7EJ,EAAA,OAAAC,IAAA,2CACEK,KAAK,OACLC,MAAO,CACLC,KAAM,KACN,gBAAiB3B,KAAKW,QACtB,cAAeX,KAAK4B,OAAS,QAC7B,eAAgB5B,KAAK4B,OAAS,SAC9B,cAAe5B,KAAK4B,OAAS,QAC7B,iBAAkB5B,KAAK6B,WAGzBV,EAAA,OAAAC,IAAA,2CAAKK,KAAK,SAASC,MAAM,gBACvBP,EAAA,mBAAAC,IAAA,2CACEM,MAAO,CACL,wBAAyB1B,KAAK8B,WAEhCC,KAAK,QACLH,KAAMI,EAAchC,KAAK4B,MACzBK,QAASjC,KAAKU,yBAIlBS,EAAA,OAAAC,IAAA,2CAAKK,KAAK,OAAOC,MAAM,cACpB1B,KAAKkC,UACJf,EAAA,YAAUc,QAASjC,KAAKS,iBAAkBmB,KAAMO,EAASnC,KAAK4B,OAC3D5B,KAAKkC,UAGTlC,KAAKE,aAAeiB,EAAA,QAAMY,KAAK,UAGlCZ,EAAA,OAAAC,IAAA,2CACEK,KAAK,SACLC,MAAO,CACL,sBAAuB1B,KAAK4B,OAAS,QACrC,uBAAwB5B,KAAK4B,OAAS,SACtC,sBAAuB5B,KAAK4B,OAAS,UAGtC5B,KAAKuB,OACJJ,EAAA,OACEO,MAAO,CACL,iBAAkB,MAEpBO,QAASjC,KAAKS,kBAEbT,KAAKuB,OAGTvB,KAAKK,cAAgBc,EAAA,QAAMY,KAAK,Y,6BAiB7C,MAAMC,EAAiBJ,IACd,CACLQ,MAAO,UACPC,OAAQ,SACRC,MAAO,UACPV,IAGJ,MAAMO,EAAYP,IACT,CACLQ,MAAO,SACPC,OAAQ,UACRC,MAAO,YACPV,I"}