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

package/dist/ui-library/{p-99e24daf.entry.js.map → p-981b3228.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixDrawerCss","hasPreventScroll","isPreventScrollSupported","id","SixDrawer","this","componentId","willShow","willHide","handleCloseClick","hide","handleKeyDown","event","key","handleOverlayClick","sixOverlayDismiss","emit","defaultPrevented","handleSlotChange","hasFooter","hasSlot","host","handleTransitionEnd","target","propertyName","classList","contains","resetTransitionVariables","handleOpenChange","open","show","connectedCallback","modal","Modal","onFocusOut","_a","contained","panel","focus","componentWillLoad","disconnectedCallback","unlockBodyScrolling","drawer","sixShow","isVisible","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","addEventListener","once","sixHide","deactivate","sixAfterShow","sixAfterHide","render","h","ref","el","part","class","placement","onKeyDown","onTransitionEnd","onClick","tabIndex","role","noHeader","label","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"mLAAA,MAAMA,EAAe,0xECOrB,MAAMC,EAAmBC,IACzB,IAAIC,EAAK,E,MA2BIC,EAAS,M,2UACZC,KAAAC,YAAc,YAAYH,IAI1BE,KAAAE,SAAW,MACXF,KAAAG,SAAW,MA0JXH,KAAAI,iBAAmB,KACzBJ,KAAKK,MAAM,EAGLL,KAAAM,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,SAAU,CAC1BR,KAAKK,M,GAIDL,KAAAS,mBAAqB,KAC3B,MAAMC,EAAoBV,KAAKU,kBAAkBC,OAEjD,IAAKD,EAAkBE,iBAAkB,CACvCZ,KAAKK,M,GAIDL,KAAAa,iBAAmB,KACzBb,KAAKc,UAAYC,EAAQf,KAAKgB,KAAM,SAAS,EAGvChB,KAAAiB,oBAAuBV,IAC7B,MAAMW,EAASX,EAAMW,OAGrB,GAAIX,EAAMY,eAAiB,aAAeD,EAAOE,UAAUC,SAAS,iBAAkB,CACpFrB,KAAKsB,0B,kBAjLY,M,eACA,M,UAG0B,M,WAM/B,G,eAGyC,Q,eAMrC,M,cAMD,K,CAGnB,gBAAAC,GACEvB,KAAKwB,KAAOxB,KAAKyB,OAASzB,KAAKK,M,CAwBjC,iBAAAqB,GACE1B,KAAK2B,MAAQ,IAAIC,EAAM5B,KAAKgB,KAAM,CAChCa,WAAY,SAAAC,EAAM,OAAC9B,KAAK+B,UAAY,MAAOD,EAAA9B,KAAKgC,SAAK,MAAAF,SAAA,SAAAA,EAAEG,OAAO,G,CAIlE,iBAAAC,GACElC,KAAKa,mBAGL,GAAIb,KAAKwB,KAAM,CACbxB,KAAKyB,OAGLzB,KAAKsB,0B,EAIT,oBAAAa,GACEC,EAAoBpC,KAAKgB,K,CAK3B,UAAMS,GACJ,GAAIzB,KAAKE,UAAYF,KAAK2B,OAAS,MAAQ3B,KAAKgC,OAAS,MAAQhC,KAAKqC,QAAU,KAAM,CACpF,M,CAEF,MAAML,EAAQhC,KAAKgC,MAEnB,MAAMM,EAAUtC,KAAKsC,QAAQ3B,OAC7B,GAAI2B,EAAQ1B,iBAAkB,CAC5BZ,KAAKwB,KAAO,MACZ,M,CAGFxB,KAAKE,SAAW,KAChBF,KAAKuC,UAAY,KACjBvC,KAAKwB,KAAO,KAGZ,IAAKxB,KAAK+B,UAAW,CACnB/B,KAAK2B,MAAMa,WACXC,EAAkBzC,KAAKgB,K,CAGzB,GAAIhB,KAAKwB,KAAM,CACb,GAAI5B,EAAkB,CAEpB8C,uBAAsB,KACpB,MAAMC,EAAkB3C,KAAK2C,gBAAgBhC,OAC7C,IAAKgC,EAAgB/B,iBAAkB,CACrCoB,EAAMC,MAAM,CAAEW,cAAe,M,SAG5B,CAQL5C,KAAKqC,OAAOQ,iBACV,iBACA,KACE,MAAMF,EAAkB3C,KAAK2C,gBAAgBhC,OAC7C,IAAKgC,EAAgB/B,iBAAkB,CACrCoB,EAAMC,O,IAGV,CAAEa,KAAM,M,GAQhB,UAAMzC,GACJ,GAAIL,KAAKG,UAAYH,KAAK2B,OAAS,KAAM,CACvC,M,CAGF,MAAMoB,EAAU/C,KAAK+C,QAAQpC,OAC7B,GAAIoC,EAAQnC,iBAAkB,CAC5BZ,KAAKwB,KAAO,KACZ,M,CAGFxB,KAAKG,SAAW,KAChBH,KAAKwB,KAAO,MACZxB,KAAK2B,MAAMqB,aAEXZ,EAAoBpC,KAAKgB,K,CAkCnB,wBAAAM,GACNtB,KAAKuC,UAAYvC,KAAKwB,KACtBxB,KAAKE,SAAW,MAChBF,KAAKG,SAAW,MAChBH,KAAKwB,KAAOxB,KAAKiD,aAAatC,OAASX,KAAKkD,aAAavC,M,CAG3D,MAAAwC,GACE,OACEC,EAAA,OACEC,IAAMC,GAAQtD,KAAKqC,OAASiB,EAC5BC,KAAK,OACLC,MAAO,CACLnB,OAAQ,KACR,eAAgBrC,KAAKwB,KACrB,kBAAmBxB,KAAKuC,UACxB,cAAevC,KAAKyD,YAAc,MAClC,gBAAiBzD,KAAKyD,YAAc,QACpC,iBAAkBzD,KAAKyD,YAAc,SACrC,eAAgBzD,KAAKyD,YAAc,OACnC,oBAAqBzD,KAAK+B,UAC1B,iBAAkB/B,KAAK+B,UACvB,qBAAsB/B,KAAKc,WAE7B4C,UAAW1D,KAAKM,cAChBqD,gBAAiB3D,KAAKiB,qBAEtBmC,EAAA,OAAKG,KAAK,UAAUC,MAAM,kBAAkBI,QAAS5D,KAAKS,mBAAoBoD,UAAW,IAEzFT,EAAA,OACEC,IAAMC,GAAQtD,KAAKgC,MAAQsB,EAC3BC,KAAK,QACLC,MAAM,gBACNM,KAAK,SAAQ,aACF,OAAM,cACJ9D,KAAKwB,KAAO,QAAU,OAAM,aAC7BxB,KAAK+D,SAAW/D,KAAKgE,MAAQ,KAAI,mBAC3BhE,KAAK+D,SAAW,GAAG/D,KAAKC,oBAAsB,KAChE4D,SAAU,IAER7D,KAAK+D,UACLX,EAAA,UAAQG,KAAK,SAASC,MAAM,kBAC1BJ,EAAA,QAAMG,KAAK,QAAQC,MAAM,gBAAgB1D,GAAI,GAAGE,KAAKC,qBACnDmD,EAAA,QAAMa,KAAK,SAERjE,KAAKgE,OAASE,OAAOC,aAAa,SAGvCf,EAAA,mBACEgB,YAAY,oBACZZ,MAAM,gBACNS,KAAK,IACLL,QAAS5D,KAAKI,oBAKpBgD,EAAA,OAAKG,KAAK,OAAOC,MAAM,gBACrBJ,EAAA,cAGFA,EAAA,UAAQG,KAAK,SAASC,MAAM,kBAC1BJ,EAAA,QAAMa,KAAK,SAASI,aAAcrE,KAAKa,qB"}
+{"version":3,"names":["sixDrawerCss","hasPreventScroll","isPreventScrollSupported","id","SixDrawer","this","componentId","willShow","willHide","handleCloseClick","hide","handleKeyDown","event","key","handleOverlayClick","sixOverlayDismiss","emit","defaultPrevented","handleSlotChange","hasFooter","hasSlot","host","handleTransitionEnd","target","propertyName","classList","contains","resetTransitionVariables","handleOpenChange","open","show","connectedCallback","modal","Modal","onFocusOut","_a","contained","panel","focus","componentWillLoad","disconnectedCallback","unlockBodyScrolling","drawer","sixShow","isVisible","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","addEventListener","once","sixHide","deactivate","sixAfterShow","sixAfterHide","render","h","ref","el","part","class","placement","onKeyDown","onTransitionEnd","onClick","tabIndex","role","noHeader","label","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-9ace84c7.js → p-998de05d.js}

@@ -1,2 +1,2 @@
 const t=()=>{let t=false;const s=document.createElement("div");s.focus&&s.focus({get preventScroll(){t=true;return false}});return t};let s=[];class i{constructor(t,s){this.element=t;this.options=s;this.handleFocusIn=this.handleFocusIn.bind(this)}activate(){s.push(this.element);document.addEventListener("focusin",this.handleFocusIn)}deactivate(){s=s.filter((t=>t!==this.element));document.removeEventListener("focusin",this.handleFocusIn)}isActive(){return s[s.length-1]===this.element}handleFocusIn(t){var s,i;const e=t.target;const n=this.element.tagName.toLowerCase();if(this.isActive()&&e.closest(n)!==this.element&&typeof((s=this.options)===null||s===void 0?void 0:s.onFocusOut)==="function"){(i=this.options)===null||i===void 0?void 0:i.onFocusOut(t)}}}export{i as M,t as i};
-//# sourceMappingURL=p-9ace84c7.js.map
+//# sourceMappingURL=p-998de05d.js.map

package/dist/ui-library/{p-a55c7258.entry.js → p-9b1ff147.entry.js}

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

package/dist/ui-library/{p-698bb2c8.js → p-a1502802.js}

@@ -1,2 +1,2 @@
 const t=35;const s=300;const o=(t,o=s)=>{let e;return s=>{clearTimeout(e);e=setTimeout((()=>t(s)),o)}};const e=(t,s)=>{const e=t._original||t;const n=o(e.emit.bind(e),s);return{_original:t,emit:n}};export{s as D,o as a,t as b,e as d};
-//# sourceMappingURL=p-698bb2c8.js.map
+//# sourceMappingURL=p-a1502802.js.map

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

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as e,g as r}from"./p-0beec94f.js";import{F as i}from"./p-6907a7dc.js";import{h as l}from"./p-faa04bb5.js";import{E as s}from"./p-8bfb4bfc.js";const c=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;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:inline-block}.checkbox{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}.checkbox__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:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';let n=0;const a=class{constructor(e){o(this,e);this.sixBlur=t(this,"six-checkbox-blur",7);this.sixChange=t(this,"six-checkbox-change",7);this.sixFocus=t(this,"six-checkbox-focus",7);this.inputId=`checkbox-${++n}`;this.labelId=`checkbox-label-${n}`;this.textId=`checkbox-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.eventListeners=new s;this.handleChange=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked;this.indeterminate=false;this.sixChange.emit()}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleMouseDown=o=>{var t;o.preventDefault();(t=this.nativeInput)===null||t===void 0?void 0:t.focus()};this.hasFocus=false;this.hasLabelSlot=false;this.hasErrorSlot=false;this.name="";this.value="on";this.disabled=false;this.required=false;this.label="";this.errorText="";this.errorTextCount=undefined;this.invalid=false;this.checked=false;this.indeterminate=false}handleCheckedChange(){if(this.nativeInput==null)return;this.nativeInput.checked=this.checked;this.checked=this.nativeInput.checked;this.nativeInput.indeterminate=this.indeterminate}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange);this.eventListeners.forward("six-checkbox-change","change",this.host);this.eventListeners.forward("six-checkbox-blur","blur",this.host);this.eventListeners.forward("six-checkbox-focus","focus",this.host)}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}componentWillLoad(){this.handleSlotChange()}componentDidLoad(){const o=this.nativeInput;if(o==null){return}o.indeterminate=this.indeterminate}async setFocus(o){var t;(t=this.nativeInput)===null||t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.blur()}handleSlotChange(){this.hasLabelSlot=l(this.host,"label");this.hasErrorSlot=l(this.host,"error-text")}render(){return e(i,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,hasErrorTextSlot:this.hasErrorSlot,errorText:this.errorText,errorTextCount:this.errorTextCount,size:"medium",disabled:this.disabled,required:this.required,displayError:this.invalid},e("label",{part:"base",class:{checkbox:true,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},e("span",{part:"control",class:"checkbox__control"},this.checked&&e("span",{part:"checked-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(3.428571, 3.428571)"},e("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),e("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&e("span",{part:"indeterminate-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(2.285714, 6.857143)"},e("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),e("input",{ref:o=>this.nativeInput=o,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus})),e("span",{part:"text",id:this.textId,class:"checkbox__text"},e("slot",null))))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};a.style=c;export{a as six_checkbox};
+//# sourceMappingURL=p-a21f8d06.entry.js.map

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

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

package/dist/ui-library/{p-95fbdd0b.entry.js → p-a2461274.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,g as s}from"./p-6153045b.js";import{I as n,a as r}from"./p-0f510624.js";import{D as h,b as o,a as c}from"./p-698bb2c8.js";import{E as u}from"./p-7d95def3.js";const l=".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";const a="ABCDEFGHIJKLMNOPQRSTUVWXYZ";const d=[...a].flatMap((t=>[t,t.toLowerCase()]));const m={alphabet:d,letterIndexes:Object.fromEntries(d.map(((t,e)=>[t,e])))};const p={alphabet:[...a].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...a].map(((t,e)=>[t,e])))};const b={alphabet:[...a.toLowerCase()].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...a.toLowerCase()].map(((t,e)=>[t,e])))};const f=t=>Object.fromEntries([...t].map(((t,e)=>[t,e])));const g=`[SIX-ITEM-PICKER]`;const x=(t,e)=>t-e;const _=(t,e)=>t+e;const v="debounced-item-picker";const I=class{constructor(i){t(this,i);this.sixChange=e(this,"six-item-picker-change",7);this.sixChangeDebounced=e(this,"six-item-picker-change-debounced",7);this.eventListeners=new u;this.handleSixItemPickerChangeDebounced=()=>{this.sixChangeDebounced.emit(this.value)};this.value="";this.type=n.NUMBER;this.min=undefined;this.max=undefined;this.roundtrip=true;this.step=1;this.items=undefined;this.padded=false;this.paddingLength=2;this.paddingChar="0";this.paddingDirection=r.BEFORE;this.timeout=h;this.interval=o;this.debounce=h;this._items=[];this._itemIndexes={}}handleValueChange(){this.setup()}debounceChanged(){this.eventListeners.removeByIdentifier(v);this.eventListeners.add(this.host,"six-item-picker-change",c(this.handleSixItemPickerChangeDebounced,this.debounce),v)}handleSetChange(){this.setup();this.min=this._items[0];this.max=this.getLastStringItem()}componentWillLoad(){this.setup()}componentDidLoad(){this.eventListeners.add(this.host,"six-item-picker-change",c(this.handleSixItemPickerChangeDebounced,this.debounce),v)}disconnectedCallback(){this.eventListeners.removeAll()}setup(){if(this.isNumber()){this.setupNumberItems()}else{this.setUpStringItems()}}setupNumberItems(){var t;if(this.isInvalidNumber()){console.warn(`${g} Expected number but value is not a number: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to zero.`);this.value=(t=this.min)!==null&&t!==void 0?t:0}}setUpStringItems(){this._items=this.getStringItems();this._itemIndexes=this.getItemIndexes();const t=this._items.find((t=>String(t)===String(this.value)))===undefined;if(t){console.warn(`${g} Expected item from item set but value was not found in set: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to "${this._items[0]}".`);this.value=this._items[0]}if(this.min===undefined){if(!this.roundtrip){console.warn(`${g} Expected a min value`);console.info(`${g} Will set min value to ${this._items[0]}`)}this.min=this._items[0]}if(this.max===undefined){const t=this.getLastStringItem();if(!this.roundtrip){console.warn(`${g} Expected a min value if roundtrip is enabled`);console.info(`${g} Will set min value to ${t}`)}this.max=t}}getLastStringItem(){return this._items[this._items.length-1]}getStringItems(){switch(this.type){case n.NUMBER:console.warn(`${g}: unexpected type ${this.type}`);return[];case n.LETTER:return m.alphabet;case n.CAPITAL_LETTER:return p.alphabet;case n.LOWER_LETTER:return b.alphabet;case n.CUSTOM:if(this.items==null||this.items.length===0){console.warn(`${g}: no items defined for type ${this.type}`);return[]}return this.items}}getItemIndexes(){switch(this.type){case n.NUMBER:console.warn(`${g}: unexpected type ${this.type}`);return{};case n.LETTER:return m.letterIndexes;case n.CAPITAL_LETTER:return p.letterIndexes;case n.LOWER_LETTER:return b.letterIndexes;case n.CUSTOM:return f(this._items)}}previousItem(){if(this.isNumber()){this.previousNumber()}else{this.previousStringItem()}this.sixChange.emit(this.value)}previousNumber(){this.changeValue({isNextItemAllowed:()=>!this.isPreviousNumberDisabled(),getNextItem:()=>Number(this.value)-this.step,getRoundtripItem:()=>Number(this.max),isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}previousStringItem(){const t=String(this.value);const e=String(this.min);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)>this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(x),getRoundtripItem:()=>String(this.max),isRoundtripPossible:()=>this.max==null&&this.roundtrip})}nextItem(){if(this.isNumber()){this.nextNumber()}else{this.nextStringItem()}this.sixChange.emit(this.value)}nextNumber(){this.changeValue({isNextItemAllowed:()=>!this.isNextNumberDisabled(),getNextItem:()=>Number(this.value)+this.step,getRoundtripItem:()=>Number(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getStringItemIndex(t){return this._itemIndexes[t]}nextStringItem(){const t=String(this.value);const e=String(this.max);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)<this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(_),getRoundtripItem:()=>String(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getNextItemByOperation(t){const e=String(this.value);const i=t(this.getStringItemIndex(e),this.step);const s=this._items.length;const n=(i%s+s)%s;return this._items[n]}changeValue(t){if(t.isNextItemAllowed()){this.value=t.getNextItem();return}if(t.isRoundtripPossible()){console.error(`${g} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);return}if(this.roundtrip){this.value=t.getRoundtripItem();return}console.warn(`${g} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`)}isNumber(){return this.type===n.NUMBER}isInvalidNumber(){return this.value===""||isNaN(this.value)}isNextDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isNextNumberDisabled()}else{return this._itemIndexes[String(this.value)]+this.step>this._itemIndexes[String(this.max)]}}isNextNumberDisabled(){var t;return Number(this.value)+this.step>Number((t=this.max)!==null&&t!==void 0?t:Infinity)}isPrevDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isPreviousNumberDisabled()}else{return this._itemIndexes[String(this.value)]-this.step<this._itemIndexes[String(this.min)]}}isPreviousNumberDisabled(){var t;return Number(this.value)-this.step<Number((t=this.min)!==null&&t!==void 0?t:-Infinity)}onMouseDownNext(){if(this.isNextDisabled()){return}this.nextItem();this._timeoutNext=setTimeout((()=>{this._intervalNext=setInterval((()=>{this.nextItem()}),this.interval)}),this.timeout)}onMouseUpNext(){clearTimeout(this._timeoutNext);clearInterval(this._intervalNext)}onMouseDownPrev(){if(this.isPrevDisabled()){return}this.previousItem();this._timeoutPrev=setTimeout((()=>{this._intervalPrev=setInterval((()=>{this.previousItem()}),this.interval)}),this.timeout)}onMouseUpPrev(){clearTimeout(this._timeoutPrev);clearInterval(this._intervalPrev)}getFormattedValue(){if(this.value===undefined||this.value===null){return this.value}if(!this.padded){return this.value}if(this.paddingDirection===r.BEFORE){return String(this.value).padStart(this.paddingLength,this.paddingChar)}else if(this.paddingDirection===r.AFTER){return String(this.value).padEnd(this.paddingLength,this.paddingChar)}return this.value}render(){return i("div",{part:"container",class:"item_picker__container"},i("div",{part:"up",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isNextDisabled()},onMouseDown:()=>this.onMouseDownNext(),onMouseUp:()=>this.onMouseUpNext()},i("six-icon",{size:"large"},"expand_less")),i("div",{part:"content",class:"item_picker__content"},this.getFormattedValue()),i("div",{part:"down",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isPrevDisabled()},onMouseDown:()=>this.onMouseDownPrev(),onMouseUp:()=>this.onMouseUpPrev()},i("six-icon",{size:"large"},"expand_more")))}get host(){return s(this)}static get watchers(){return{value:["handleValueChange"],debounce:["debounceChanged"],items:["handleSetChange"]}}};I.style=l;export{I as six_item_picker};
-//# sourceMappingURL=p-95fbdd0b.entry.js.map
+import{r as t,c as e,h as i,g as s}from"./p-0beec94f.js";import{I as n,a as r}from"./p-0861899a.js";import{D as h,b as o,a as c}from"./p-a1502802.js";import{E as u}from"./p-8bfb4bfc.js";const l=".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";const a="ABCDEFGHIJKLMNOPQRSTUVWXYZ";const d=[...a].flatMap((t=>[t,t.toLowerCase()]));const m={alphabet:d,letterIndexes:Object.fromEntries(d.map(((t,e)=>[t,e])))};const p={alphabet:[...a].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...a].map(((t,e)=>[t,e])))};const b={alphabet:[...a.toLowerCase()].flatMap((t=>[t])),letterIndexes:Object.fromEntries([...a.toLowerCase()].map(((t,e)=>[t,e])))};const f=t=>Object.fromEntries([...t].map(((t,e)=>[t,e])));const g=`[SIX-ITEM-PICKER]`;const x=(t,e)=>t-e;const _=(t,e)=>t+e;const v="debounced-item-picker";const I=class{constructor(i){t(this,i);this.sixChange=e(this,"six-item-picker-change",7);this.sixChangeDebounced=e(this,"six-item-picker-change-debounced",7);this.eventListeners=new u;this.handleSixItemPickerChangeDebounced=()=>{this.sixChangeDebounced.emit(this.value)};this.value="";this.type=n.NUMBER;this.min=undefined;this.max=undefined;this.roundtrip=true;this.step=1;this.items=undefined;this.padded=false;this.paddingLength=2;this.paddingChar="0";this.paddingDirection=r.BEFORE;this.timeout=h;this.interval=o;this.debounce=h;this._items=[];this._itemIndexes={}}handleValueChange(){this.setup()}debounceChanged(){this.eventListeners.removeByIdentifier(v);this.eventListeners.add(this.host,"six-item-picker-change",c(this.handleSixItemPickerChangeDebounced,this.debounce),v)}handleSetChange(){this.setup();this.min=this._items[0];this.max=this.getLastStringItem()}componentWillLoad(){this.setup()}componentDidLoad(){this.eventListeners.add(this.host,"six-item-picker-change",c(this.handleSixItemPickerChangeDebounced,this.debounce),v)}disconnectedCallback(){this.eventListeners.removeAll()}setup(){if(this.isNumber()){this.setupNumberItems()}else{this.setUpStringItems()}}setupNumberItems(){var t;if(this.isInvalidNumber()){console.warn(`${g} Expected number but value is not a number: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to zero.`);this.value=(t=this.min)!==null&&t!==void 0?t:0}}setUpStringItems(){this._items=this.getStringItems();this._itemIndexes=this.getItemIndexes();const t=this._items.find((t=>String(t)===String(this.value)))===undefined;if(t){console.warn(`${g} Expected item from item set but value was not found in set: "${this.value}"`);console.info(`${g} Will set value to either minimum or if not provided to "${this._items[0]}".`);this.value=this._items[0]}if(this.min===undefined){if(!this.roundtrip){console.warn(`${g} Expected a min value`);console.info(`${g} Will set min value to ${this._items[0]}`)}this.min=this._items[0]}if(this.max===undefined){const t=this.getLastStringItem();if(!this.roundtrip){console.warn(`${g} Expected a min value if roundtrip is enabled`);console.info(`${g} Will set min value to ${t}`)}this.max=t}}getLastStringItem(){return this._items[this._items.length-1]}getStringItems(){switch(this.type){case n.NUMBER:console.warn(`${g}: unexpected type ${this.type}`);return[];case n.LETTER:return m.alphabet;case n.CAPITAL_LETTER:return p.alphabet;case n.LOWER_LETTER:return b.alphabet;case n.CUSTOM:if(this.items==null||this.items.length===0){console.warn(`${g}: no items defined for type ${this.type}`);return[]}return this.items}}getItemIndexes(){switch(this.type){case n.NUMBER:console.warn(`${g}: unexpected type ${this.type}`);return{};case n.LETTER:return m.letterIndexes;case n.CAPITAL_LETTER:return p.letterIndexes;case n.LOWER_LETTER:return b.letterIndexes;case n.CUSTOM:return f(this._items)}}previousItem(){if(this.isNumber()){this.previousNumber()}else{this.previousStringItem()}this.sixChange.emit(this.value)}previousNumber(){this.changeValue({isNextItemAllowed:()=>!this.isPreviousNumberDisabled(),getNextItem:()=>Number(this.value)-this.step,getRoundtripItem:()=>Number(this.max),isRoundtripPossible:()=>this.max===undefined&&this.roundtrip})}previousStringItem(){const t=String(this.value);const e=String(this.min);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)>this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(x),getRoundtripItem:()=>String(this.max),isRoundtripPossible:()=>this.max==null&&this.roundtrip})}nextItem(){if(this.isNumber()){this.nextNumber()}else{this.nextStringItem()}this.sixChange.emit(this.value)}nextNumber(){this.changeValue({isNextItemAllowed:()=>!this.isNextNumberDisabled(),getNextItem:()=>Number(this.value)+this.step,getRoundtripItem:()=>Number(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getStringItemIndex(t){return this._itemIndexes[t]}nextStringItem(){const t=String(this.value);const e=String(this.max);this.changeValue({isNextItemAllowed:()=>e===undefined||this.getStringItemIndex(t)<this.getStringItemIndex(e),getNextItem:()=>this.getNextItemByOperation(_),getRoundtripItem:()=>String(this.min),isRoundtripPossible:()=>this.min===undefined&&this.roundtrip})}getNextItemByOperation(t){const e=String(this.value);const i=t(this.getStringItemIndex(e),this.step);const s=this._items.length;const n=(i%s+s)%s;return this._items[n]}changeValue(t){if(t.isNextItemAllowed()){this.value=t.getNextItem();return}if(t.isRoundtripPossible()){console.error(`${g} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);return}if(this.roundtrip){this.value=t.getRoundtripItem();return}console.warn(`${g} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`)}isNumber(){return this.type===n.NUMBER}isInvalidNumber(){return this.value===""||isNaN(this.value)}isNextDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isNextNumberDisabled()}else{return this._itemIndexes[String(this.value)]+this.step>this._itemIndexes[String(this.max)]}}isNextNumberDisabled(){var t;return Number(this.value)+this.step>Number((t=this.max)!==null&&t!==void 0?t:Infinity)}isPrevDisabled(){if(this.roundtrip){return false}if(this.isNumber()){return this.isPreviousNumberDisabled()}else{return this._itemIndexes[String(this.value)]-this.step<this._itemIndexes[String(this.min)]}}isPreviousNumberDisabled(){var t;return Number(this.value)-this.step<Number((t=this.min)!==null&&t!==void 0?t:-Infinity)}onMouseDownNext(){if(this.isNextDisabled()){return}this.nextItem();this._timeoutNext=setTimeout((()=>{this._intervalNext=setInterval((()=>{this.nextItem()}),this.interval)}),this.timeout)}onMouseUpNext(){clearTimeout(this._timeoutNext);clearInterval(this._intervalNext)}onMouseDownPrev(){if(this.isPrevDisabled()){return}this.previousItem();this._timeoutPrev=setTimeout((()=>{this._intervalPrev=setInterval((()=>{this.previousItem()}),this.interval)}),this.timeout)}onMouseUpPrev(){clearTimeout(this._timeoutPrev);clearInterval(this._intervalPrev)}getFormattedValue(){if(this.value===undefined||this.value===null){return this.value}if(!this.padded){return this.value}if(this.paddingDirection===r.BEFORE){return String(this.value).padStart(this.paddingLength,this.paddingChar)}else if(this.paddingDirection===r.AFTER){return String(this.value).padEnd(this.paddingLength,this.paddingChar)}return this.value}render(){return i("div",{part:"container",class:"item_picker__container"},i("div",{part:"up",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isNextDisabled()},onMouseDown:()=>this.onMouseDownNext(),onMouseUp:()=>this.onMouseUpNext()},i("six-icon",{size:"large"},"expand_less")),i("div",{part:"content",class:"item_picker__content"},this.getFormattedValue()),i("div",{part:"down",class:{item_picker__btn:true,"item_picker__btn--disabled":this.isPrevDisabled()},onMouseDown:()=>this.onMouseDownPrev(),onMouseUp:()=>this.onMouseUpPrev()},i("six-icon",{size:"large"},"expand_more")))}get host(){return s(this)}static get watchers(){return{value:["handleValueChange"],debounce:["debounceChanged"],items:["handleSetChange"]}}};I.style=l;export{I as six_item_picker};
+//# sourceMappingURL=p-a2461274.entry.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["flipAnimate","element","fromElement","options","duration","easing","fill","dimensionsTo","getBoundingClientRect","dimensionsFrom","deltaX","left","deltaY","top","deltaW","width","deltaH","height","animate","transformOrigin","transform","sixTabGroupCss","SixTabGroup","this","handleClick","event","target","tab","closest","tabGroup","host","setActiveTab","handleKeyDown","nav","includes","key","activeEl","document","activeElement","tagName","toLowerCase","tabs","getAllTabs","index","indexOf","length","Math","max","min","setFocus","preventScroll","placement","scrollIntoView","preventDefault","handleScrollLeft","scroll","scrollLeft","clientWidth","behavior","handleScrollRight","handleNoScrollControlsChange","updateScrollControls","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","getActiveTab","unobserve","observe","resizeObserver","ResizeObserver","requestAnimationFrame","mutationObserver","MutationObserver","mutations","some","mutation","_a","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","show","panel","find","el","includeDisabled","slot","querySelector","assignedElements","filter","disabled","getAllPanels","body","active","hasScrollControls","noScrollControls","scrollWidth","emitEvents","newIndicator","shadowRoot","oldIndicator","_c","_b","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","render","h","part","ref","class","onClick","onKeyDown","exportparts","role"],"sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/**\n * Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n *\n * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n *\n * @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n *\n */\nexport function flipAnimate(\n  element: Element,\n  fromElement: Element,\n  options: KeyframeAnimationOptions = {\n    duration: 150,\n    easing: 'ease',\n    fill: 'both',\n  }\n) {\n  const dimensionsTo = fromElement.getBoundingClientRect();\n  const dimensionsFrom = element.getBoundingClientRect();\n\n  const deltaX = dimensionsTo.left - dimensionsFrom.left;\n  const deltaY = dimensionsTo.top - dimensionsFrom.top;\n  const deltaW = dimensionsTo.width / dimensionsFrom.width;\n  const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n  element.animate(\n    [\n      {\n        transformOrigin: 'top left',\n        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n      },\n      {\n        transformOrigin: 'top left',\n        transform: 'none',\n      },\n    ],\n    options\n  );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n// TOP\n.tab-group--top {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 2;\n  }\n}\n\n// Bottom\n.tab-group--bottom {\n  flex-direction: column;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    @include hide-scrollbar();\n  }\n\n  .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group__body {\n    order: 1;\n  }\n}\n\n// Left\n\n.tab-group--left {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n}\n\n// Right\n.tab-group--right {\n  flex-direction: row;\n\n  .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n  }\n\n  .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n  name: string;\n}\n\nexport interface SixTabHidePayload {\n  name: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n *\n * @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n */\n@Component({\n  tag: 'six-tab-group',\n  styleUrl: 'six-tab-group.scss',\n  shadow: true,\n})\nexport class SixTabGroup {\n  private activeTab?: HTMLSixTabElement;\n  private body?: HTMLElement;\n  private mutationObserver?: MutationObserver;\n  private nav?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private tabGroup?: HTMLElement;\n  private tabs?: HTMLElement;\n\n  @Element() host!: HTMLSixTabGroupElement;\n\n  @State() hasScrollControls = false;\n\n  /** The placement of the tabs. */\n  @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @Prop() noScrollControls = false;\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n  /** Emitted when a tab is hidden. */\n  @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n  componentDidLoad() {\n    if (this.tabGroup == null || this.nav == null) return;\n\n    // Set initial tab state when the tabs first become visible\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    // Update aria labels if the DOM changes\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n    });\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {\n      return;\n    }\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  }\n\n  private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n    const slot = this.tabs?.querySelector('slot');\n    if (slot == null) return [];\n\n    return [...slot.assignedElements()].filter((el: Element) => {\n      return includeDisabled\n        ? el.tagName.toLowerCase() === 'six-tab'\n        : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n    }) as [HTMLSixTabElement];\n  }\n\n  private getAllPanels(): HTMLSixTabPanelElement[] {\n    const slot = this.body?.querySelector('slot');\n    if (slot == null) return [];\n    return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n      HTMLSixTabPanelElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    if (tab != null) {\n      this.setActiveTab(tab);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.nav == null) return;\n\n    const target = event.target as HTMLElement;\n    const tab = target.closest('six-tab');\n    const tabGroup = tab?.closest('six-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this.host) {\n      return false;\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = document.activeElement as HTMLSixTabElement;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (event.key === 'ArrowLeft') {\n          index = Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n\n        tabs[index].setFocus({ preventScroll: true });\n        this.setActiveTab(tabs[index]);\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleScrollLeft = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private handleScrollRight = () => {\n    if (this.nav == null) return;\n\n    this.nav.scroll({\n      left: this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth',\n    });\n  };\n\n  private updateScrollControls() {\n    if (this.nav == null) return;\n\n    this.hasScrollControls = this.noScrollControls\n      ? false\n      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n  }\n\n  private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n    if (this.nav == null) return;\n\n    const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n    const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n    if (oldIndicator != null && newIndicator != null) {\n      flipAnimate(newIndicator, oldIndicator);\n    }\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab != null) {\n          this.sixTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.sixTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel != null) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={(el) => (this.tabGroup = el)}\n        class={{\n          'tab-group': true,\n\n          // Placements\n          'tab-group--top': this.placement === 'top',\n          'tab-group--bottom': this.placement === 'bottom',\n          'tab-group--left': this.placement === 'left',\n          'tab-group--right': this.placement === 'right',\n\n          'tab-group--has-scroll-controls': this.hasScrollControls,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tab-group__nav-container\">\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_left\"\n              onClick={this.handleScrollLeft}\n            />\n          )}\n          <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n            <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n              <slot name=\"nav\" />\n            </div>\n          </div>\n          {this.hasScrollControls && (\n            <six-icon-button\n              class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n              exportparts=\"base:scroll-button\"\n              name=\"chevron_right\"\n              onClick={this.handleScrollRight}\n            />\n          )}\n        </div>\n\n        <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-a6a9ee96.entry.js → p-ada23fe3.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as i}from"./p-6153045b.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-label{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);color:var(--six-input-label-color);padding:var(--six-spacing-xx-small) var(--six-spacing-small);user-select:none}";const o=class{constructor(i){s(this,i)}render(){return i("div",{part:"base",class:"menu-label"},i("slot",null))}};o.style=e;export{o as six_menu_label};
-//# sourceMappingURL=p-a6a9ee96.entry.js.map
+import{r as s,h as e}from"./p-0beec94f.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-label{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);color:var(--six-input-label-color);padding:var(--six-spacing-xx-small) var(--six-spacing-small);user-select:none}";const o=class{constructor(e){s(this,e)}render(){return e("div",{part:"base",class:"menu-label"},e("slot",null))}};o.style=i;export{o as six_menu_label};
+//# sourceMappingURL=p-ada23fe3.entry.js.map

package/dist/ui-library/{p-cd67da3d.entry.js → p-b5ac1219.entry.js}

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

package/dist/ui-library/{p-c03ebf7d.entry.js → p-ba247565.entry.js}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixSidebarItemGroupCss","SixSidebarItemGroup","this","provideSlot","name","summaryIconHasContent","h","slot","onSlotchange","_a","host","shadowRoot","querySelector","assignedNodes","length","connectedCallback","handleSlotChange","bind","componentWillLoad","hasItems","hasSlot","isSubgroup","parentElement","closest","renderAsHref","href","render","element","class","inline","open","summaryIcon","hasContent","icon"],"sources":["src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-sidebar-item-group {\n  --horizontal-padding: var(--six-spacing-x-large);\n}\n\n.six-sidebar-item-group--childless::part(content) {\n  padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n  background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n  margin-left: 16px;\n  transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n  display: flex;\n}\n\n.six-sidebar-details__header-icon {\n  margin-right: 1em;\n}\n\n.six-sidebar-details__link {\n  text-decoration: none;\n  display: block;\n  color: inherit;\n  width: 100%;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n\n    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAyB,6mB,MCelBC,EAAmB,M,yBAgDtBC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,sBAAuB,CAC9B,OACEC,EAAA,OAAKC,KAAMH,GACTE,EAAA,QAAMF,KAAMA,I,CAKlB,OACEE,EAAA,QACEF,KAAMA,EACNI,aAAc,K,MACZ,MAAMD,GAAOE,EAAAP,KAAKQ,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAEG,cAA+B,cAAcR,OAChF,GAAIG,GAAQ,KAAM,CAChBL,KAAKG,sBAAwBE,EAAKM,gBAAgBC,OAAS,C,IAGzD,E,cA/DQ,M,UAGL,G,UAGA,G,WAGkB,G,UAGD,M,sDAKC,M,oBAQjC,iBAAAC,GACEb,KAAKc,iBAAmBd,KAAKc,iBAAiBC,KAAKf,K,CAGrD,iBAAAgB,GACEhB,KAAKc,kB,CAGC,gBAAAA,GACNd,KAAKiB,SAAWC,EAAQlB,KAAKQ,K,CAGvB,UAAAW,G,MACN,QAAOZ,EAAAP,KAAKQ,KAAKY,iBAAa,MAAAb,SAAA,SAAAA,EAAEc,QAAQ,4BAA6B,I,CAG/D,YAAAC,GACN,OAAOtB,KAAKuB,MAAQ,OAASvB,KAAKiB,Q,CAyBpC,MAAAO,GACE,MAAMC,EACJrB,EAAA,eACEsB,MAAO,CACL,yBAA0B,KAC1B,qCAAsC1B,KAAKiB,SAC3C,mCAAoCjB,KAAKmB,cAE3CQ,OAAQ,KACRC,KAAM5B,KAAK4B,KAAI,eACD5B,KAAK6B,YACnBC,WAAY9B,KAAKiB,UAEjBb,EAAA,OAAKC,KAAK,WACRD,EAAA,OAAKsB,MAAM,+BACR1B,KAAK+B,MAAQ3B,EAAA,YAAUsB,MAAM,oCAAoC1B,KAAK+B,MACtE/B,KAAKE,OAGTF,KAAKC,YAAY,gBAClBG,EAAA,cAIJ,GAAIJ,KAAKsB,eAAgB,CACvB,OACElB,EAAA,KAAGsB,MAAM,4BAA4BH,KAAMvB,KAAKuB,MAC7CE,E,KAGA,CACL,OAAOA,C"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as o,h as t,g as l}from"./p-0beec94f.js";import{F as r}from"./p-6907a7dc.js";import{h as e}from"./p-faa04bb5.js";const s=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*";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}';let a=0;const i=class{constructor(t){o(this,t);this.wrapperLabelId=`label-${++a}`;this.labelId=`label-label-${a}`;this.helpTextId=`label-help-text-${a}`;this.handleSlotChange=()=>{this.hasLabelSlot=e(this.host,"label");this.hasHelpTextSlot=e(this.host,"help-text")};this.hasHelpTextSlot=false;this.hasLabelSlot=false;this.size="medium";this.label="";this.helpText="";this.disabled=false;this.required=false}handleLabelChange(){this.handleSlotChange()}connectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.handleSlotChange()}disconnectedCallback(){var o;(o=this.host.shadowRoot)===null||o===void 0?void 0:o.removeEventListener("slotchange",this.handleSlotChange)}render(){return t(r,{inputId:this.wrapperLabelId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,size:this.size,disabled:this.disabled,required:this.required},t("slot",null))}get host(){return l(this)}static get watchers(){return{helpText:["handleLabelChange"],label:["handleLabelChange"]}}};i.style=s;export{i as six_group_label};
+//# sourceMappingURL=p-c07b1240.entry.js.map

package/dist/ui-library/{p-d367f4f9.entry.js.map → p-c07b1240.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["sixGroupLabelCss","id","SixGroupLabel","this","wrapperLabelId","labelId","helpTextId","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","handleLabelChange","connectedCallback","_a","shadowRoot","addEventListener","componentWillLoad","disconnectedCallback","removeEventListener","render","h","FormControl","inputId","label","helpText","size","disabled","required"],"sources":["src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"0HAAA,MAAMA,EAAmB,u7ECIzB,IAAIC,EAAK,E,MAoBIC,EAAa,M,yBAChBC,KAAAC,eAAiB,WAAWH,IAC5BE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,IAwChCE,KAAAI,iBAAmB,KACzBJ,KAAKK,aAAeC,EAAQN,KAAKO,KAAM,SACvCP,KAAKQ,gBAAkBF,EAAQN,KAAKO,KAAM,YAAY,E,qBAtC7B,M,kBACH,M,UAGsC,S,WAG9C,G,cAGG,G,cAGiB,M,cAGjB,K,CAInB,iBAAAE,GACET,KAAKI,kB,CAGP,iBAAAM,G,OACEC,EAAAX,KAAKO,KAAKK,cAAU,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,aAAcb,KAAKI,iB,CAG5D,iBAAAU,GACEd,KAAKI,kB,CAGP,oBAAAW,G,OACEJ,EAAAX,KAAKO,KAAKK,cAAU,MAAAD,SAAA,SAAAA,EAAEK,oBAAoB,aAAchB,KAAKI,iB,CAQ/D,MAAAa,GACE,OACEC,EAACC,EAAW,CACVC,QAASpB,KAAKC,eACdoB,MAAOrB,KAAKqB,MACZnB,QAASF,KAAKE,QACdG,aAAcL,KAAKK,aACnBF,WAAYH,KAAKG,WACjBmB,SAAUtB,KAAKsB,SACfd,gBAAiBR,KAAKQ,gBACtBe,KAAMvB,KAAKuB,KACXC,SAAUxB,KAAKwB,SACfC,SAAUzB,KAAKyB,UAEfP,EAAA,a"}
+{"version":3,"names":["sixGroupLabelCss","id","SixGroupLabel","this","wrapperLabelId","labelId","helpTextId","handleSlotChange","hasLabelSlot","hasSlot","host","hasHelpTextSlot","handleLabelChange","connectedCallback","_a","shadowRoot","addEventListener","componentWillLoad","disconnectedCallback","removeEventListener","render","h","FormControl","inputId","label","helpText","size","disabled","required"],"sources":["src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"0HAAA,MAAMA,EAAmB,q/ECIzB,IAAIC,EAAK,E,MAoBIC,EAAa,M,yBAChBC,KAAAC,eAAiB,WAAWH,IAC5BE,KAAAE,QAAU,eAAeJ,IACzBE,KAAAG,WAAa,mBAAmBL,IAwChCE,KAAAI,iBAAmB,KACzBJ,KAAKK,aAAeC,EAAQN,KAAKO,KAAM,SACvCP,KAAKQ,gBAAkBF,EAAQN,KAAKO,KAAM,YAAY,E,qBAtC7B,M,kBACH,M,UAGsC,S,WAG9C,G,cAGG,G,cAGiB,M,cAGjB,K,CAInB,iBAAAE,GACET,KAAKI,kB,CAGP,iBAAAM,G,OACEC,EAAAX,KAAKO,KAAKK,cAAU,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,aAAcb,KAAKI,iB,CAG5D,iBAAAU,GACEd,KAAKI,kB,CAGP,oBAAAW,G,OACEJ,EAAAX,KAAKO,KAAKK,cAAU,MAAAD,SAAA,SAAAA,EAAEK,oBAAoB,aAAchB,KAAKI,iB,CAQ/D,MAAAa,GACE,OACEC,EAACC,EAAW,CACVC,QAASpB,KAAKC,eACdoB,MAAOrB,KAAKqB,MACZnB,QAASF,KAAKE,QACdG,aAAcL,KAAKK,aACnBF,WAAYH,KAAKG,WACjBmB,SAAUtB,KAAKsB,SACfd,gBAAiBR,KAAKQ,gBACtBe,KAAMvB,KAAKuB,KACXC,SAAUxB,KAAKwB,SACfC,SAAUzB,KAAKyB,UAEfP,EAAA,a"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as i,H as r,g as s}from"./p-0beec94f.js";import{P as e}from"./p-7f856f00.js";const a=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}';let n=0;const p=class{constructor(i){t(this,i);this.sixShow=o(this,"six-tooltip-show",7);this.sixAfterShow=o(this,"six-tooltip-after-show",7);this.sixHide=o(this,"six-tooltip-hide",7);this.sixAfterHide=o(this,"six-tooltip-after-hide",7);this.componentId=`tooltip-${++n}`;this.isVisible=false;this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{const t=this.target;const o=this.getTarget();if(o!==t){if(t!=null){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",this.componentId)}};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus"}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){if(this.tooltipPositioner==null)return;this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner,{strategy:"fixed"});this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover!=null){this.popover.destroy()}this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)}async show(){var t;if(this.isVisible||this.disabled){return}const o=this.sixShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;(t=this.popover)===null||t===void 0?void 0:t.show()}async hide(){var t;if(!this.isVisible||this.disabled){return}const o=this.sixHide.emit();if(o.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;(t=this.popover)===null||t===void 0?void 0:t.hide()}getTarget(){const t=[...this.host.children].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(t==null){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){if(this.popover==null)return;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.sixAfterHide.emit(),onAfterShow:()=>this.sixAfterShow.emit()})}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{onSlotchange:this.handleSlotChange}),i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content"},this.content))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=a;export{p as six_tooltip};
+//# sourceMappingURL=p-c12a94ce.entry.js.map