@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

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

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

package/dist/ui-library/p-b1e66136.js

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

package/dist/ui-library/p-b1e66136.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["listeners","WeakMap","observe","el","keys","is","event","includes","key","classList","add","isNot","remove","set","addEventListener","unobserve","listener","get","removeEventListener","focusVisible"],"sources":["./src/utils/focus-visible.ts"],"sourcesContent":["//\n// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a\n// `focus-visible` class. Works at the component level so no global polyfill is necessary.\n//\n// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible\n//\nconst listeners = new WeakMap();\n\nexport function observe(el: HTMLElement) {\n  if (!el) return;\n\n  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];\n  const is = (event: KeyboardEvent) => {\n    if (keys.includes(event.key)) {\n      el.classList.add('focus-visible');\n    }\n  };\n  const isNot = () => el.classList.remove('focus-visible');\n  listeners.set(el, { is, isNot });\n\n  el.addEventListener('keydown', is);\n  el.addEventListener('keyup', is);\n  el.addEventListener('mousedown', isNot);\n  el.addEventListener('mousedown', isNot);\n}\n\nexport function unobserve(el: HTMLElement) {\n  if (!el) return;\n\n  const listener = listeners.get(el);\n\n  if (!listener) {\n    return;\n  }\n\n  const { is, isNot } = listener;\n\n  el.classList.remove('focus-visible');\n  el.removeEventListener('keydown', is);\n  el.removeEventListener('keyup', is);\n  el.removeEventListener('mousedown', isNot);\n  el.removeEventListener('mousedown', isNot);\n}\n\nexport const focusVisible = {\n  observe,\n  unobserve,\n};\n"],"mappings":"AAMA,MAAMA,EAAY,IAAIC,Q,SAENC,EAAQC,GACtB,IAAKA,EAAI,OAET,MAAMC,EAAO,CAAC,MAAO,UAAW,YAAa,YAAa,aAAc,OAAQ,MAAO,WAAY,UACnG,MAAMC,EAAMC,IACV,GAAIF,EAAKG,SAASD,EAAME,KAAM,CAC5BL,EAAGM,UAAUC,IAAI,gB,GAGrB,MAAMC,EAAQ,IAAMR,EAAGM,UAAUG,OAAO,iBACxCZ,EAAUa,IAAIV,EAAI,CAAEE,KAAIM,UAExBR,EAAGW,iBAAiB,UAAWT,GAC/BF,EAAGW,iBAAiB,QAAST,GAC7BF,EAAGW,iBAAiB,YAAaH,GACjCR,EAAGW,iBAAiB,YAAaH,EACnC,C,SAEgBI,EAAUZ,GACxB,IAAKA,EAAI,OAET,MAAMa,EAAWhB,EAAUiB,IAAId,GAE/B,IAAKa,EAAU,CACb,M,CAGF,MAAMX,GAAEA,EAAEM,MAAEA,GAAUK,EAEtBb,EAAGM,UAAUG,OAAO,iBACpBT,EAAGe,oBAAoB,UAAWb,GAClCF,EAAGe,oBAAoB,QAASb,GAChCF,EAAGe,oBAAoB,YAAaP,GACpCR,EAAGe,oBAAoB,YAAaP,EACtC,C,MAEaQ,EAAe,CAC1BjB,UACAa,oB"}

package/dist/ui-library/p-b4dfb7cf.js

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

package/dist/ui-library/p-b4dfb7cf.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTextContent","slot","nodes","assignedNodes","flatten","text","map","node","nodeType","Node","TEXT_NODE","textContent","hasSlot","el","name","querySelector","Array","from","childNodes","some","trim","ELEMENT_NODE","hasAttribute","fromPairs","acc","k","v","Object","assign","getAvailableSlots","slots","host","values","reduce","getSlotChildren","_a","assignedElements"],"sources":["./src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n//\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot: HTMLSlotElement): string {\n  const nodes = slot ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\ntype AvailableSlots<T> = { readonly [K in keyof T]: boolean };\n\nconst fromPairs = <T extends string>(acc, [k, v]: [T, boolean]) => ({ ...acc, [k]: v });\n\nexport const getAvailableSlots =\n  <T extends object>(slots: T) =>\n  <E extends HTMLElement>(host: E): AvailableSlots<T> =>\n    Object.values(slots)\n      .map((name) => [name, hasSlot(host, name)])\n      .reduce(fromPairs, {} as AvailableSlots<T>);\n\nexport const getSlotChildren = <T extends HTMLElement>(el: HTMLElement) =>\n  el.querySelector('slot')?.assignedElements({ flatten: true }) as T[];\n"],"mappings":"SAyBgBA,EAAeC,GAC7B,MAAMC,EAAQD,EAAOA,EAAKE,cAAc,CAAEC,QAAS,OAAU,GAC7D,IAAIC,EAAO,GAEX,IAAIH,GAAOI,KAAKC,IACd,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,CACpCL,GAAQE,EAAKI,W,KAIjB,OAAON,CACT,C,SAMgBO,EAAQC,EAAiBC,GAEvC,GAAIA,EAAM,CACR,OAAOD,EAAGE,cAAc,UAAUD,SAAc,I,CAIlD,OAAOE,MAAMC,KAAKJ,EAAGK,YAAYC,MAAMZ,IACrC,GAAIA,EAAKC,WAAaD,EAAKG,WAAaH,EAAKI,YAAYS,SAAW,GAAI,CACtE,OAAO,I,CAGT,GAAIb,EAAKC,WAAaD,EAAKc,aAAc,CACvC,MAAMR,EAAKN,EACX,IAAKM,EAAGS,aAAa,QAAS,CAC5B,OAAO,I,EAIX,OAAO,KAAK,GAEhB,CAIA,MAAMC,EAAY,CAAmBC,GAAMC,EAAGC,KAAgBC,OAAAC,OAAAD,OAAAC,OAAA,GAAWJ,GAAG,CAAEC,CAACA,GAAIC,I,MAEtEG,EACQC,GACKC,GACtBJ,OAAOK,OAAOF,GACXxB,KAAKQ,GAAS,CAACA,EAAMF,EAAQmB,EAAMjB,MACnCmB,OAAOV,EAAW,I,MAEZW,EAA0CrB,IAAe,IAAAsB,EACpE,OAAAA,EAAAtB,EAAGE,cAAc,WAAO,MAAAoB,SAAA,SAAAA,EAAEC,iBAAiB,CAAEhC,QAAS,MAAc,S"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as e}from"./p-ac4f4d45.js";import{s as o}from"./p-eb8f05a9.js";import{P as n}from"./p-18ea0c56.js";import{E as h}from"./p-9a860acc.js";import{b as r,a as l}from"./p-b4dfb7cf.js";import{D as a,a as d}from"./p-0786fa7c.js";function u(t){const i=t.tabIndex;return i>-1}function c(t){if(u(t)){return t}if(t.shadowRoot){const i=[...t.shadowRoot.children].find(u);if(i){return i}}if(t.children){return[...t.children].map(c)[0]}return null}const p=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";const f=t=>i=>(i===null||i===void 0?void 0:i.tagName.toLowerCase())===t.toLowerCase();const v=f("six-menu");const m=f("six-menu-item");let w=0;const g=class{constructor(e){t(this,e);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilterFired=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++w}`;this.isVisible=false;this.hasBeenInitialized=false;this.eventListeners=new h;this.getMenuItems=()=>{if(this._options!==null){return this._options.map((t=>s("six-menu-item",{value:t.value},t.label)))}const[t]=r(this.panel);return r(t)||Array.from(t.querySelectorAll("six-menu-item"))};this.handleFilterInputChange=()=>{var t,i;const s=((i=(t=this.filterInputElement.value)===null||t===void 0?void 0:t.toLowerCase())===null||i===void 0?void 0:i.trim())||"";if(this._options){this.handleFilteringForAttributeItems(s)}else{this.handleFilteringForSlotItems(s)}this.sixAutoFilterFired.emit({filterValue:s})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=0;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=a;this.disableHideOnEnterAndSpace=false;this.options=null;this.virtualScroll=false;this._options=null}get hasFilterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){this._options=[...this.options]}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}if(this.options!==null){this._options=[...this.options]}this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);this.handleMenuItemActivate=this.handleMenuItemActivate.bind(this);this.handlePanelSelect=this.handlePanelSelect.bind(this);this.handleTriggerClick=this.handleTriggerClick.bind(this);this.handleTriggerKeyDown=this.handleTriggerKeyDown.bind(this);this.handleTriggerKeyUp=this.handleTriggerKeyUp.bind(this);this.handleTriggerSlotChange=this.handleTriggerSlotChange.bind(this);this.handleDropdownScroll=this.handleDropdownScroll.bind(this);if(this.hasBeenInitialized&&!this.popover){this.initializePopover()}}componentDidLoad(){this.hasBeenInitialized=true;this.initializePopover();if(this.open){void this.show()}if(this.filter){this.setupFiltering(this.handleFilterInputChange)}else if(this.asyncFilter){this.setupFiltering((()=>this.sixAsyncFilterFired.emit({filterValue:this.filterInputElement.value})))}}initializePopover(){const t=()=>{if(this.filter){this.filterInputElement.value="";if(this._options!==null){this._options=[...this.options]}else{const t=this.getMenuItems();t.forEach((t=>t.style.display="unset"))}}this.sixAfterHide.emit()};const i=async()=>{if(this.hasFilterEnabled&&this.autofocusFilter){await this.filterInputElement.setFocus()}this.sixAfterShow.emit()};const s=()=>{if(!this.open){this.panel.scrollTop=0}};this.popover=new n(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:t,onAfterShow:i,onTransitionEnd:s})}setupFiltering(t){this.eventListeners.add(this.filterInputElement,"six-input-input",d(t,this.filterDebounce))}handleFilteringForAttributeItems(t){if(t===""){this._options=[...this.options];return}this._options=this.options.filter((i=>{var s,e,o,n;return i.label&&((e=(s=String(i.label))===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(t))||i.value&&((n=(o=String(i.value))===null||o===void 0?void 0:o.toLowerCase())===null||n===void 0?void 0:n.includes(t))}))}handleFilteringForSlotItems(t){const i=this.getMenuItems();i.forEach((async i=>{var s,e,o,n;const h=((e=(s=i===null||i===void 0?void 0:i.value)===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(t))||((n=(o=await(i===null||i===void 0?void 0:i.getTextLabel()))===null||o===void 0?void 0:o.toLowerCase())===null||n===void 0?void 0:n.includes(t));i.style.display=h?"unset":"none"}))}disconnectedCallback(){this.eventListeners.removeAll();void this.hide();this.popover.destroy();this.popover=null}async show(){if(this.isVisible){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){const[t]=r(this.trigger);if(t){if(typeof t.setFocus==="function"){t.setFocus()}else if(typeof t.focus==="function"){t.focus()}}}getMenu(){const[t]=r(this.panel).filter(v);return t}async reposition(){if(!this.open){return}this.popover.reposition()}handleDocumentKeyDown(t){if(t.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===this.host.shadowRoot.activeElement){if(t.key==="ArrowDown"){const t=this.getMenuItems().find((t=>t.style.display!=="none"));if(t){t.setFocus()}}}if(t.key==="Tab"){if(this.open&&m(document.activeElement)){t.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t;const i=this.container.getRootNode()instanceof ShadowRoot?(t=document.activeElement.shadowRoot)===null||t===void 0?void 0:t.activeElement:document.activeElement;if((i===null||i===void 0?void 0:i.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}}handleDocumentMouseDown(t){const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}}handleMenuItemActivate(t){const i=t.target;o(i,this.panel)}handlePanelSelect(t){const i=t.target;if(this.closeOnSelect&&v(i)){void this.hide();this.focusOnTrigger()}}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(t){const i=this.getMenu();const s=i?[...i.querySelectorAll("six-menu-item")]:null;const e=s[0];const o=s[s.length-1];if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(t.key==="ArrowDown"&&e){e.setFocus();return}if(t.key==="ArrowUp"&&o){o.setFocus();return}}const n=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i&&!n.includes(t.key)){void i.typeToSelect(t.key);return}}handleTriggerKeyUp(t){if(t.key===" "){t.preventDefault()}}handleTriggerSlotChange(){this.updateAccessibleTrigger()}handleDropdownScroll(){this.sixScroll.emit({scrollHeight:this.panel.scrollHeight,scrollTop:this.panel.scrollTop,scrollbarHeight:this.panel.offsetHeight*(this.panel.offsetHeight/this.panel.scrollHeight),scrollRatio:this.panel.scrollTop/(this.panel.scrollHeight-this.panel.clientHeight)})}updateAccessibleTrigger(){const[t]=r(this.trigger).map(c);if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},this.hasFilterEnabled&&s("six-input",{class:{"filter-hidden":!this.open},"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder}),s("div",{ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId,onScroll:this.handleDropdownScroll},s("slot",null),this._options&&s("six-menu",{part:"menu",items:this._options,virtualScroll:this.virtualScroll}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"]}}};g.style=p;const b=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";const x=t=>{var i,s,e;return(e=(s=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const _=t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const y=({value:t,label:i})=>s("six-menu-item",{value:t},i);const A=5;const C=64;const k=undefined;const S=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new h;this.typeToSelectString="";this.handleScrolling=()=>{this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=k;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.scrollingIndex=0;this.sixMenuItemHeight=C}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?A:k;return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll){return}this.eventListeners.add(this.menuWrapper,"scroll",d(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null||t===void 0?void 0:t.querySelector("six-menu-item"))===null||i===void 0?void 0:i.clientHeight;if(s&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.items!==null&&this.items!==undefined){return this.items.map(y)}const t=this.menu.querySelector("slot");return[...t.assignedElements({flatten:true})].filter((t=>_(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();const s=t.indexOf(i);if(s>-1){return s}const e=this.extractItemsFromDOM();return e.findIndex(x)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i){return i}return(t=this.extractItemsFromDOM())===null||t===void 0?void 0:t.find(x)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host)===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll("six-menu-item"))}setActiveItem(t){t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){const t={};if(this.getItemsShown()>0){t.height=`${this.getItemsShown()*this.sixMenuItemHeight}px`}return Object.assign({},t)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null){t.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(y)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map(y)}render(){return s("div",{ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,"menu--noshadow":this.removeBoxShadow,"menu__wrapper--scrollable":this.getItemsShown()>0}},s("div",{ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",null),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return e(this)}};S.style=b;export{g as six_dropdown,S as six_menu};
+//# sourceMappingURL=p-b997e43c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["isTabbable","el","tabIndex","getNearestTabbableElement","shadowRoot","tabbableShadowChild","children","find","map","sixDropdownCss","isTagName","name","tagName","toLowerCase","isSixMenu","isSixMenuItem","id","SixDropdown","this","componentId","isVisible","hasBeenInitialized","eventListeners","EventListeners","getMenuItems","_options","option","h","value","label","panel","getSlotChildren","Array","from","querySelectorAll","handleFilterInputChange","lowerCaseFilterTerm","_b","_a","filterInputElement","trim","handleFilteringForAttributeItems","handleFilteringForSlotItems","sixAutoFilterFired","emit","filterValue","DEFAULT_DEBOUNCE_FAST","hasFilterEnabled","filter","asyncFilter","container","containingElement","host","handleOpenChange","open","show","hide","updateAccessibleTrigger","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","distance","skidding","handleOptionsChange","options","connectedCallback","virtualScroll","console","error","handleDocumentKeyDown","bind","handleDocumentMouseDown","handleMenuItemActivate","handlePanelSelect","handleTriggerClick","handleTriggerKeyDown","handleTriggerKeyUp","handleTriggerSlotChange","handleDropdownScroll","initializePopover","componentDidLoad","setupFiltering","sixAsyncFilterFired","onAfterHide","menuItems","forEach","item","style","display","sixAfterHide","onAfterShow","async","autofocusFilter","setFocus","sixAfterShow","onTransitionEnd","scrollTop","Popover","trigger","positioner","transitionElement","callback","add","debounce","filterDebounce","String","includes","_d","_c","menuItem","elementContainsFilterTerm","getTextLabel","disconnectedCallback","removeAll","destroy","sixShow","defaultPrevented","document","sixHide","remove","focusOnTrigger","focus","getMenu","menu","reposition","event","key","activeElement","preventDefault","setTimeout","getRootNode","ShadowRoot","closest","path","composedPath","target","scrollIntoView","closeOnSelect","firstMenuItem","lastMenuItem","length","disableHideOnEnterAndSpace","ignoredKeys","typeToSelect","sixScroll","scrollHeight","scrollbarHeight","offsetHeight","scrollRatio","clientHeight","accessibleTrigger","setAttribute","render","part","class","dropdown","ref","onClick","onKeyDown","onKeyUp","onSlotchange","dropdown__positioner","dropdown__positioner__filtered","placeholder","filterPlaceholder","role","onScroll","items","sixMenuCss","isFocusedMenuItem","querySelector","classList","contains","isSIXMenuItemElement","mapToMenuItem","DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING","DEFAULT_SIX_MENU_ITEM_HEIGHT","ITEMS_SHOWN_NOT_SET","undefined","SixMenu","typeToSelectString","handleScrolling","scrollingIndex","Math","floor","menuWrapper","sixMenuItemHeight","handleClick","handleKeyDown","componentWillLoad","setupForVirtualScrollingAfterRendering","clearTimeout","typeToSelectTimeout","getItems","slot","getTextContent","substring","getItemsShown","defaultItemsShown","itemsShown","scrollingDebounce","menuItemHeight","assignedElements","flatten","disabled","getActiveItemIndex","selectedItem","getActiveItem","itemIndex","indexOf","sixMenuItems","extractItemsFromDOM","findIndex","i","setActiveItem","clickedItem","sixMenuItemSelected","activeItem","indexOfActiveItem","getMenuWrapperStyle","styles","height","Object","assign","getMenuContainerStyle","transform","getScrollbarGhostStyle","itemSize","renderItems","slice","min","removeBoxShadow"],"sources":["./src/utils/tabbable.ts","./src/components/six-dropdown/six-dropdown.scss?tag=six-dropdown&encapsulation=shadow","./src/components/six-dropdown/six-dropdown.tsx","./src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","./src/components/six-menu/six-menu.tsx"],"sourcesContent":["export function isTabbable(el: HTMLElement) {\n  const tabIndex = el.tabIndex;\n  return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement {\n  // Check the element\n  if (isTabbable(el)) {\n    return el;\n  }\n\n  // Check the element's shadow root\n  if (el.shadowRoot) {\n    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable) as HTMLElement;\n    if (tabbableShadowChild) {\n      return tabbableShadowChild;\n    }\n  }\n\n  // Check the element's children\n  if (el.children) {\n    return [...el.children].map(getNearestTabbableElement)[0];\n  }\n\n  return null;\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: inline-block;\n}\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown__trigger {\n  display: block;\n}\n\n.dropdown__positioner {\n  position: absolute;\n  z-index: var(--six-z-index-dropdown);\n\n  &__filtered {\n    width: 100%;\n  }\n}\n\n.dropdown__panel {\n  max-height: 50vh;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  color: var(--color);\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-elevation-2dp);\n  opacity: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  pointer-events: none;\n  transform: scale(0.9);\n  transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n  // fix for firefox scrollbar\n  scrollbar-width: thin;\n}\n\n.filter-hidden {\n  display: none;\n}\n\n.dropdown__positioner {\n  &[data-popper-placement^='top'] .dropdown__panel {\n    transform-origin: bottom;\n  }\n\n  &[data-popper-placement^='bottom'] .dropdown__panel {\n    transform-origin: top;\n  }\n\n  &[data-popper-placement^='left'] .dropdown__panel {\n    transform-origin: right;\n  }\n\n  &[data-popper-placement^='right'] .dropdown__panel {\n    transform-origin: left;\n  }\n\n  &.popover-visible .dropdown__panel {\n    opacity: 1;\n    transform: none;\n    pointer-events: all;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport Popover from '../../utils/popover';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlotChildren } from '../../utils/slot';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { SixMenuItemData } from '../six-menu/six-menu';\n\nexport interface SixDropdownAutoFilterPayload {\n  filterValue: string;\n}\n\nexport interface SixDropdownAsyncFilterPayload {\n  filterValue: string;\n}\n\nexport interface SixDropdownScrollPayload {\n  scrollHeight: number;\n  scrollTop: number;\n  scrollbarHeight: number;\n  scrollRatio: number;\n}\n\nconst isTagName =\n  (name: string) =>\n  <T extends Element>(el?: T) =>\n    el?.tagName.toLowerCase() === name.toLowerCase();\nconst isSixMenu = isTagName('six-menu');\nconst isSixMenuItem = isTagName('six-menu-item');\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 trigger - The dropdown's trigger, usually a `<six-button>` element.\n * @slot - The dropdown's content.\n *\n * @part base - The component's base wrapper.\n * @part trigger - The container that wraps the trigger.\n * @part panel - The panel that gets shown when the dropdown is open.\n */\n\n@Component({\n  tag: 'six-dropdown',\n  styleUrl: 'six-dropdown.scss',\n  shadow: true,\n})\nexport class SixDropdown {\n  accessibleTrigger: HTMLElement;\n  componentId = `dropdown-${++id}`;\n  isVisible = false;\n  panel: HTMLElement;\n  positioner: HTMLElement;\n  popover: Popover;\n  trigger: HTMLElement;\n  hasBeenInitialized = false;\n\n  // the input element shown in the dropdown when filter is set to true\n  filterInputElement: HTMLSixInputElement;\n\n  @Element() host: HTMLSixDropdownElement;\n\n  /** Indicates whether or not the dropdown 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 preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /** Determines whether the dropdown should hide when a menu item is selected. */\n  @Prop() closeOnSelect = true;\n\n  /** The distance in pixels from which to offset the panel away from its trigger. */\n  @Prop() distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its trigger. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */\n  @Prop() containingElement: HTMLElement;\n\n  /**\n   * Set to true to allow auto filtering for entries in the dropdown.\n   * With this flag the dropdown will automatically filter itsel.\n   * If you need to coordinate the shown elements yourself,\n   * e.g. because you need to call an endpoint use asyncFilter instead\n   */\n  @Prop() filter = false;\n\n  /**\n   * Set to true to allow async filtering.\n   * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n   */\n  @Prop() asyncFilter = false;\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder = 'Filter...';\n\n  /** By default the search field will be focused when opening a dropdown with filtering enabled. */\n  @Prop() autofocusFilter = true;\n\n  get hasFilterEnabled() {\n    return this.filter || this.asyncFilter;\n  }\n\n  /** The debounce for the filter callbacks. */\n  @Prop() filterDebounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */\n  @Prop() disableHideOnEnterAndSpace = false;\n\n  /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/\n  @Prop() options: SixMenuItemData[] | null = null;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll = false;\n\n  get container() {\n    return this.containingElement || this.host;\n  }\n\n  /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dropdown-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dropdown opens and all transitions are complete. */\n  @Event({ eventName: 'six-dropdown-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dropdown-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dropdown closes and all transitions are complete. */\n  @Event({ eventName: 'six-dropdown-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the auto filter is triggered */\n  @Event({ eventName: 'six-dropdown-auto-filter-fired' })\n  sixAutoFilterFired: EventEmitter<SixDropdownAutoFilterPayload>;\n\n  /** Emitted when the async filter is triggered */\n  @Event({ eventName: 'six-async-filter-fired' }) sixAsyncFilterFired: EventEmitter<SixDropdownAsyncFilterPayload>;\n\n  /** Emitted when the user scrolls inside dropdown panel.*/\n  @Event({ eventName: 'six-dropdown-scroll' }) sixScroll: EventEmitter<SixDropdownScrollPayload>;\n\n  readonly eventListeners = new EventListeners();\n\n  // internal representation of options, so we don't have to make options mutable\n  @State()\n  _options: SixMenuItemData[] = null;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n    this.updateAccessibleTrigger();\n  }\n\n  @Watch('distance')\n  @Watch('hoist')\n  @Watch('placement')\n  @Watch('skidding')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n    });\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this._options = [...this.options];\n  }\n\n  connectedCallback() {\n    if (this.virtualScroll && this.options === null) {\n      console.error('Options must be defined when using virtual scrolling');\n    }\n\n    if (this.options !== null) {\n      this._options = [...this.options];\n    }\n\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n    this.handleTriggerClick = this.handleTriggerClick.bind(this);\n    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);\n    this.handleTriggerKeyUp = this.handleTriggerKeyUp.bind(this);\n    this.handleTriggerSlotChange = this.handleTriggerSlotChange.bind(this);\n    this.handleDropdownScroll = this.handleDropdownScroll.bind(this);\n\n    if (this.hasBeenInitialized && !this.popover) {\n      // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter\n      // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had\n      // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,\n      // to re-initialize the popover in case the component has already been initialized but the popover is undefined.\n      this.initializePopover();\n    }\n  }\n\n  componentDidLoad() {\n    this.hasBeenInitialized = true;\n    this.initializePopover();\n\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n    }\n\n    if (this.filter) {\n      this.setupFiltering(this.handleFilterInputChange);\n    } else if (this.asyncFilter) {\n      this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));\n    }\n  }\n\n  private initializePopover() {\n    const onAfterHide = () => {\n      if (this.filter) {\n        this.filterInputElement.value = '';\n\n        if (this._options !== null) {\n          this._options = [...this.options];\n        } else {\n          const menuItems = this.getMenuItems();\n          menuItems.forEach((item) => (item.style.display = 'unset'));\n        }\n      }\n\n      this.sixAfterHide.emit();\n    };\n\n    const onAfterShow = async () => {\n      if (this.hasFilterEnabled && this.autofocusFilter) {\n        // if dropdown filter is enabled we should autofocus the search field\n        await this.filterInputElement.setFocus();\n      }\n\n      this.sixAfterShow.emit();\n    };\n\n    const onTransitionEnd = () => {\n      if (!this.open) {\n        this.panel.scrollTop = 0;\n      }\n    };\n\n    this.popover = new Popover(this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide,\n      onAfterShow,\n      onTransitionEnd,\n    });\n  }\n\n  private setupFiltering(callback: () => void) {\n    this.eventListeners.add(this.filterInputElement, 'six-input-input', debounce(callback, this.filterDebounce));\n  }\n\n  getMenuItems = (): HTMLSixMenuItemElement[] => {\n    if (this._options !== null) {\n      return this._options.map((option) => <six-menu-item value={option.value}>{option.label}</six-menu-item>);\n    }\n\n    const [panel] = getSlotChildren<HTMLSixMenuElement>(this.panel);\n\n    // the menu-items can be in a slot e.g. in six-select or direct children of the panel\n    return getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));\n  };\n\n  handleFilterInputChange = () => {\n    const lowerCaseFilterTerm = this.filterInputElement.value?.toLowerCase()?.trim() || '';\n\n    if (this._options) {\n      this.handleFilteringForAttributeItems(lowerCaseFilterTerm);\n    } else {\n      this.handleFilteringForSlotItems(lowerCaseFilterTerm);\n    }\n\n    this.sixAutoFilterFired.emit({ filterValue: lowerCaseFilterTerm });\n  };\n\n  private handleFilteringForAttributeItems(lowerCaseFilterTerm: string) {\n    if (lowerCaseFilterTerm === '') {\n      this._options = [...this.options];\n      return;\n    }\n\n    this._options = this.options.filter(\n      (option) =>\n        (option.label && String(option.label)?.toLowerCase()?.includes(lowerCaseFilterTerm)) ||\n        (option.value && String(option.value)?.toLowerCase()?.includes(lowerCaseFilterTerm))\n    );\n  }\n\n  private handleFilteringForSlotItems(lowerCaseFilterTerm: string) {\n    const menuItems = this.getMenuItems();\n    menuItems.forEach(async (menuItem) => {\n      // hide all elements which don't contain the entered substring\n      const elementContainsFilterTerm =\n        menuItem?.value?.toLowerCase()?.includes(lowerCaseFilterTerm) ||\n        (await menuItem?.getTextLabel())?.toLowerCase()?.includes(lowerCaseFilterTerm);\n\n      menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n\n    void this.hide();\n    this.popover.destroy();\n    this.popover = null;\n  }\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n    this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);\n    this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n    this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);\n    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  focusOnTrigger() {\n    const [trigger] = getSlotChildren<HTMLSixButtonElement>(this.trigger);\n    if (trigger) {\n      if (typeof trigger.setFocus === 'function') {\n        trigger.setFocus();\n      } else if (typeof trigger.focus === 'function') {\n        trigger.focus();\n      }\n    }\n  }\n\n  getMenu() {\n    const [menu] = getSlotChildren<HTMLSixMenuElement>(this.panel).filter(isSixMenu);\n    return menu;\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  @Method()\n  async reposition() {\n    if (!this.open) {\n      return;\n    }\n    this.popover.reposition();\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      void this.hide();\n      this.focusOnTrigger();\n      return;\n    }\n\n    if (this.filterInputElement === this.host.shadowRoot.activeElement) {\n      if (event.key === 'ArrowDown') {\n        const item = this.getMenuItems().find((item) => item.style.display !== 'none');\n        if (item) {\n          item.setFocus();\n        }\n      }\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && isSixMenuItem(document.activeElement)) {\n        event.preventDefault();\n        void this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.container.getRootNode() instanceof ShadowRoot\n            ? document.activeElement.shadowRoot?.activeElement\n            : document.activeElement;\n\n        if (activeElement?.closest(this.container.tagName.toLowerCase()) !== this.container) {\n          void this.hide();\n          return;\n        }\n      });\n    }\n  }\n\n  handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath() as EventTarget[];\n    if (!path.includes(this.container)) {\n      void this.hide();\n      return;\n    }\n  }\n\n  handleMenuItemActivate(event: CustomEvent) {\n    const item = event.target as HTMLSixMenuItemElement;\n    scrollIntoView(item, this.panel);\n  }\n\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && isSixMenu(target)) {\n      void this.hide();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleTriggerClick() {\n    this.open ? this.hide() : this.show();\n  }\n\n  handleTriggerKeyDown(event: KeyboardEvent) {\n    const menu = this.getMenu();\n    const menuItems = menu ? [...menu.querySelectorAll('six-menu-item')] : null;\n    const firstMenuItem = menuItems[0];\n    const lastMenuItem = menuItems[menuItems.length - 1];\n\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape') {\n      this.focusOnTrigger();\n      void this.hide();\n      return;\n    }\n\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n      this.open ? void this.hide() : void this.show();\n      return;\n    }\n\n    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n    // faster navigation.\n    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      event.preventDefault();\n\n      // Show the menu if it's not already open\n      if (!this.open) {\n        void this.show();\n      }\n\n      // Focus on a menu item\n      if (event.key === 'ArrowDown' && firstMenuItem) {\n        firstMenuItem.setFocus();\n        return;\n      }\n\n      if (event.key === 'ArrowUp' && lastMenuItem) {\n        lastMenuItem.setFocus();\n        return;\n      }\n    }\n\n    // Other keys bring focus to the menu and initiate type-to-select behavior\n    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];\n    if (this.open && menu && !ignoredKeys.includes(event.key)) {\n      void menu.typeToSelect(event.key);\n      return;\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  handleDropdownScroll() {\n    this.sixScroll.emit({\n      scrollHeight: this.panel.scrollHeight,\n      scrollTop: this.panel.scrollTop,\n      scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),\n      scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),\n    });\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const [accessibleTrigger] = getSlotChildren(this.trigger).map(getNearestTabbableElement);\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.componentId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeyDown}\n          onKeyUp={this.handleTriggerKeyUp}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        {/* Position the panel with a wrapper since the popover makes use of `translate`. This let's us add transitions\n        on the panel without interfering with the position. */}\n        <div\n          ref={(el) => (this.positioner = el)}\n          class={{\n            dropdown__positioner: true,\n            dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,\n          }}\n        >\n          {this.hasFilterEnabled && (\n            <six-input\n              class={{\n                'filter-hidden': !this.open,\n              }}\n              aria-hidden={this.open ? 'false' : 'true'}\n              ref={(el) => (this.filterInputElement = el)}\n              placeholder={this.filterPlaceholder}\n            />\n          )}\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dropdown__panel\"\n            role=\"menu\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-labelledby={this.componentId}\n            onScroll={this.handleDropdownScroll}\n          >\n            <slot />\n            {this._options && (\n              <six-menu part=\"menu\" items={this._options} virtualScroll={this.virtualScroll}></six-menu>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu {\n  padding: 0 0;\n  border: none;\n  box-shadow: var(--six-elevation-2dp);\n\n  &:focus {\n    outline: none;\n  }\n\n  &--noshadow {\n    box-shadow: none;\n  }\n\n  &__wrapper {\n    &--scrollable {\n      overflow-y: auto;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n  label: string;\n  value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n  menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n  el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }) => <six-menu-item value={value}>{label}</six-menu-item>;\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\nconst ITEMS_SHOWN_NOT_SET = undefined;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-menu',\n  styleUrl: 'six-menu.scss',\n  shadow: true,\n})\nexport class SixMenu {\n  private readonly eventListeners = new EventListeners();\n\n  menu: HTMLElement;\n  menuWrapper: HTMLElement;\n  typeToSelectString = '';\n  typeToSelectTimeout: NodeJS.Timeout;\n\n  @Element() host: HTMLSixMenuElement;\n\n  /** Emitted when a menu item is selected. */\n  @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected: EventEmitter<SixMenuItemSelectedPayload>;\n\n  /** Set to true to remove the box-shadow */\n  @Prop() removeBoxShadow: boolean = false;\n\n  /** Set the options to be shown in the dropdown */\n  @Prop() items: SixMenuItemData[] | null = null;\n\n  /** Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */\n  @Prop() itemsShown?: number = ITEMS_SHOWN_NOT_SET;\n\n  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n  @Prop() virtualScroll: boolean = false;\n\n  /**\n   * Used for virtual scrolling\n   * Define how many items should be rendered in the DOM when using virtual scrolling\n   */\n  @Prop() itemSize: number = 10;\n\n  /**\n   * Used for virtual scrolling\n   * Define the debounce for listening on scrolling changes in milliseconds.\n   * The lower the number the more sensitive the component reacts to scrolling changes.\n   */\n  @Prop() scrollingDebounce: number = 15;\n\n  /**\n   * Used to calculate which items should be rendered in the DOM\n   */\n  @State()\n  private scrollingIndex: number = 0;\n\n  // set a default item height, this variable will be updated with the real value after the first render.\n  // However, it's necessary to have a default value because we can only fetch the proper hight after the first render\n  @State()\n  sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  componentWillLoad() {\n    if (this.items === null) {\n      return;\n    }\n  }\n\n  private handleScrolling = () => {\n    // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n    this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n  };\n\n  componentDidLoad() {\n    this.setupForVirtualScrollingAfterRendering();\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /**\n   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n   * enabling type-to-select when the menu doesn't have focus.\n   */\n  @Method()\n  async typeToSelect(key: string) {\n    clearTimeout(this.typeToSelectTimeout);\n    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n    this.typeToSelectString += key.toLowerCase();\n    const items = this.getItems();\n    for (const item of items) {\n      const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n      const label = getTextContent(slot).toLowerCase().trim();\n      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n        item.setFocus();\n        break;\n      }\n    }\n  }\n\n  private getItemsShown() {\n    const defaultItemsShown = this.virtualScroll\n      ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING\n      : ITEMS_SHOWN_NOT_SET;\n\n    return this.itemsShown ?? defaultItemsShown;\n  }\n\n  private setupForVirtualScrollingAfterRendering() {\n    if (!this.virtualScroll) {\n      return;\n    }\n\n    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n    // set menu height to proper height once the item is rendered.\n    const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n    if (menuItemHeight && menuItemHeight > 0) {\n      this.sixMenuItemHeight = menuItemHeight;\n    }\n  }\n\n  getItems() {\n    if (this.items !== null && this.items !== undefined) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    const slot = this.menu.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);\n  }\n\n  private getActiveItemIndex() {\n    const items = this.getItems();\n    const selectedItem = this.getActiveItem();\n    const itemIndex = items.indexOf(selectedItem);\n\n    if (itemIndex > -1) {\n      return itemIndex;\n    }\n\n    const sixMenuItems = this.extractItemsFromDOM();\n    return sixMenuItems.findIndex(isFocusedMenuItem);\n  }\n\n  getActiveItem() {\n    const activeElement = this.getItems().find((i) => i === document.activeElement);\n\n    if (activeElement) {\n      return activeElement;\n    }\n\n    return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n  }\n\n  private extractItemsFromDOM() {\n    return Array.from(this.host?.shadowRoot?.querySelectorAll('six-menu-item'));\n  }\n\n  setActiveItem(item: HTMLSixMenuItemElement) {\n    item.setFocus();\n  }\n\n  handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const clickedItem = target.closest('six-menu-item');\n    if (clickedItem && !clickedItem.disabled) {\n      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const activeItem = this.getActiveItem();\n      event.preventDefault();\n\n      if (activeItem) {\n        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n      }\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n      let indexOfActiveItem = this.getActiveItemIndex();\n\n      if (items.length) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          indexOfActiveItem++;\n        } else if (event.key === 'ArrowUp') {\n          indexOfActiveItem--;\n        } else if (event.key === 'Home') {\n          indexOfActiveItem = 0;\n        } else if (event.key === 'End') {\n          indexOfActiveItem = items.length - 1;\n        }\n\n        if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n        if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n        this.setActiveItem(items[indexOfActiveItem]);\n\n        return;\n      }\n    }\n\n    void this.typeToSelect(event.key);\n  }\n\n  private getMenuWrapperStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.getItemsShown() > 0) {\n      // calculate the proper height to show the correct number of items\n      styles.height = `${this.getItemsShown() * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getMenuContainerStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll) {\n      // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private getScrollbarGhostStyle() {\n    const styles: Partial<StyleDeclaration> = {};\n\n    if (this.virtualScroll && this.items !== null) {\n      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n    }\n\n    return {\n      ...styles,\n    };\n  }\n\n  private renderItems() {\n    if (this.items === undefined || this.items === null) {\n      return;\n    }\n\n    if (!this.virtualScroll) {\n      return this.items.map(mapToMenuItem);\n    }\n\n    return this.items\n      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n      .map(mapToMenuItem);\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuWrapper = el)}\n        style={this.getMenuWrapperStyle()}\n        part=\"wrapper\"\n        class={{\n          menu: true,\n          'menu--noshadow': this.removeBoxShadow,\n          'menu__wrapper--scrollable': this.getItemsShown() > 0,\n        }}\n      >\n        <div\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          role=\"menu\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n          style={this.getMenuContainerStyle()}\n        >\n          <slot />\n          {this.renderItems()}\n        </div>\n        {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r,h as o}from"./p-ac4f4d45.js";const i=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:16px;--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--label-color:var(--six-progress-label-color);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--sl-border-radius-pill);overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--six-font-sans);font-size:12px;font-weight:var(--six-font-weight-normal);background-color:var(--indicator-color);color:var(--label-color);text-align:center;line-height:var(--height);white-space:nowrap;overflow:hidden;transition:400ms width, 400ms background-color;user-select:none}.progress-bar--indeterminate .progress-bar__indicator{position:absolute;animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{left:-50%;width:50%}75%,100%{left:100%;width:50%}}";const s=class{constructor(o){r(this,o);this.percentage=0;this.indeterminate=false}render(){return o("div",{part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.percentage},o("div",{part:"indicator",class:"progress-bar__indicator",style:{width:`${this.percentage}%`}},!this.indeterminate&&o("span",{part:"label",class:"progress-bar__label"},o("slot",null))))}};s.style=i;export{s as six_progress_bar};
+//# sourceMappingURL=p-baa03951.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixProgressBarCss","SixProgressBar","render","h","part","class","this","indeterminate","role","percentage","style","width"],"sources":["./src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","./src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n  --height: 16px;\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --label-color: var(--six-progress-label-color);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: var(--sl-border-radius-pill);\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-family: var(--six-font-sans);\n  font-size: 12px;\n  font-weight: var(--six-font-weight-normal);\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  line-height: var(--height);\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 400ms width, 400ms background-color;\n  user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  position: absolute;\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -50%;\n    width: 50%;\n  }\n  75%,\n  100% {\n    left: 100%;\n    width: 50%;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'six-progress-bar',\n  styleUrl: 'six-progress-bar.scss',\n  shadow: true,\n})\nexport class SixProgressBar {\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() percentage = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.percentage}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.percentage}%`,\n          }}\n        >\n          {!this.indeterminate && (\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot />\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAoB,29B,MCoBbC,EAAc,M,yCAEJ,E,mBAGG,K,CAExBC,SACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,8BAA+BC,KAAKC,eAEtCC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJF,KAAKC,cAAgB,KAAOD,KAAKG,YAEhDN,EAAA,OACEC,KAAK,YACLC,MAAM,0BACNK,MAAO,CACLC,MAAO,GAAGL,KAAKG,iBAGfH,KAAKC,eACLJ,EAAA,QAAMC,KAAK,QAAQC,MAAM,uBACvBF,EAAA,e"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixLanguageSwitcherCss","DEFAULT_LANGUAGES","SixLanguageSwitcher","this","handleLanguageSwitching","newLanguage","languageValue","undefined","sixChange","emit","selected","handleChangesLanguages","newValue","Array","isArray","Error","updateSelectedLanguage","componentWillLoad","selectedLanguage","languages","key","value","render","h","part","class","map","lang","index","language","onClick","length"],"sources":["./src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","./src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n  &__container {\n    display: flex;\n  }\n\n  &__separator {\n    padding: 0 0.25rem;\n  }\n\n  &__label {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-color-red);\n    }\n\n    &--selected {\n      color: var(--six-color-red);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div onClick={this.handleLanguageSwitching(language, lang.value)}>\n              <span\n                part=\"label\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  /\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAyB,iQCa/B,MAAMC,EAAoB,CAAC,KAAM,KAAM,M,MAc1BC,EAAmB,M,iFAqCtBC,KAAAC,wBAA0B,CAACC,EAAqBC,IAA2B,KACjF,GAAIA,IAAkBC,UAAW,CAC/BJ,KAAKK,UAAUC,KAAKH,E,KACf,CACLH,KAAKK,UAAUC,KAAKJ,E,CAEtBF,KAAKO,SAAWL,CAAW,E,uCAtC8BJ,C,CAG3DU,uBAAuBC,GACrB,IAAKC,MAAMC,QAAQF,GAAW,CAC5B,MAAM,IAAIG,MAAM,uC,CAGlBZ,KAAKa,wB,CAOPC,oBACE,GAAId,KAAKO,WAAaH,UAAW,CAC/BJ,KAAKa,wB,EAIDA,yBACN,MAAME,EAAmBf,KAAKgB,UAAU,GACxC,UAAWD,IAAqB,SAAU,CACxCf,KAAKO,SAAWQ,EAChBf,KAAKK,UAAUC,KAAKN,KAAKO,S,KACpB,CACLP,KAAKO,SAAWQ,EAAiBE,IACjCjB,KAAKK,UAAUC,KAAKS,EAAiBG,M,EAazCC,SACE,OACEC,EAAA,OAAKC,KAAK,YAAYC,MAAM,gCACzBtB,KAAKgB,UAAUO,KAAI,CAACC,EAAMC,KACzB,MAAMC,SAAkBF,IAAS,SAAWA,EAAOA,EAAKP,IACxD,OACEG,EAAA,OAAKO,QAAS3B,KAAKC,wBAAwByB,EAAUF,EAAKN,QACxDE,EAAA,QACEC,KAAK,QACLC,MAAO,CACL,2BAA4B,KAC5B,qCAAsCtB,KAAKO,WAAamB,IAGzDA,GAEFD,EAAQzB,KAAKgB,UAAUY,OAAS,GAC/BR,EAAA,QAAMC,KAAK,YAAYC,MAAM,gCAA8B,KAIzD,I"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as a,H as i,g as o}from"./p-ac4f4d45.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";let r=0;const l=class{constructor(a){t(this,a);this.sixClose=s(this,"six-tab-close",7);this.componentId=`tab-${++r}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){this.tab.focus(t)}async removeFocus(){this.tab.blur()}handleCloseClick(){this.sixClose.emit()}render(){return a(i,{id:this.host.id||this.componentId},a("div",{part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null),this.closable&&a("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})))}get host(){return o(this)}};l.style=e;export{l as six_tab};
+//# sourceMappingURL=p-c30f9e0b.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixTabCss","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","async","options","tab","focus","blur","sixClose","emit","render","h","Host","host","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex"],"sources":["./src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","./src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  border-radius: 4px;\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  transition: var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  componentId = `tab-${++id}`;\n  tab: HTMLElement;\n\n  @Element() host: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,kkCCGlB,IAAIC,EAAK,E,MAmBIC,EAAM,M,iEACjBC,KAAAC,YAAc,SAASH,I,WAMU,G,YAGC,M,cAGf,M,cAGiB,K,CAKpCI,oBACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrDK,eAAeC,GACbN,KAAKO,IAAIC,MAAMF,E,CAKjBD,oBACEL,KAAKO,IAAIE,M,CAGXN,mBACEH,KAAKU,SAASC,M,CAGhBC,SACE,OAEEC,EAACC,EAAI,CAAChB,GAAIE,KAAKe,KAAKjB,IAAME,KAAKC,aAC7BY,EAAA,OACEG,KAAK,OACLC,IAAMC,GAAQlB,KAAKO,IAAMW,EACzBC,MAAO,CACLZ,IAAK,KAGL,cAAeP,KAAKoB,OACpB,gBAAiBpB,KAAKqB,SACtB,gBAAiBrB,KAAKsB,UAExBC,KAAK,MAAK,gBACKvB,KAAKsB,SAAW,OAAS,QAAO,gBAChCtB,KAAKoB,OAAS,OAAS,QACtCI,SAAUxB,KAAKsB,WAAatB,KAAKoB,OAAS,KAAO,KAEjDP,EAAA,aACCb,KAAKqB,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAAS5B,KAAKG,iBACd0B,UAAW,EAAC,cACA,U"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as i}from"./p-ac4f4d45.js";import{a as t}from"./p-b4dfb7cf.js";const s=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-item{position:relative;display:flex;align-items:stretch;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);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-medium) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item--checked .menu-item__check{visibility:visible}";const n=class{constructor(i){e(this,i);this.hasFocus=false;this.checked=false;this.value="";this.disabled=false}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleMouseEnter=this.handleMouseEnter.bind(this);this.handleMouseLeave=this.handleMouseLeave.bind(this)}async setFocus(e){this.menuItem.focus(e)}async removeFocus(){this.menuItem.blur()}getTextLabel(){return Promise.resolve(t(this.defaultSlot))}handleBlur(){this.hasFocus=false}handleFocus(){this.hasFocus=true}handleMouseEnter(){this.setFocus()}handleMouseLeave(){this.removeFocus()}render(){return i("div",{ref:e=>this.menuItem=e,part:"base",class:{"menu-item":true,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--focused":this.hasFocus},role:"menuitem","aria-disabled":this.disabled?"true":"false","aria-checked":this.checked?"true":"false",tabIndex:!this.disabled?0:null,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},i("span",{part:"prefix",class:"menu-item__prefix"},i("slot",{name:"prefix"})),i("span",{part:"label",class:"menu-item__label"},i("slot",{ref:e=>this.defaultSlot=e})),i("span",{part:"suffix",class:"menu-item__suffix"},i("slot",{name:"suffix"})),i("span",{part:"checked-icon",class:"menu-item__check"},i("six-icon",{size:"small","aria-hidden":"true"},"check")))}};n.style=s;export{n as six_menu_item};
+//# sourceMappingURL=p-c349d1d4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sixMenuItemCss","SixMenuItem","connectedCallback","this","handleBlur","bind","handleFocus","handleMouseEnter","handleMouseLeave","async","options","menuItem","focus","blur","getTextLabel","Promise","resolve","getTextContent","defaultSlot","hasFocus","setFocus","removeFocus","render","h","ref","el","part","class","checked","disabled","role","tabIndex","onFocus","onBlur","onMouseEnter","onMouseLeave","name","size"],"sources":["./src/components/six-menu-item/six-menu-item.scss?tag=six-menu-item&encapsulation=shadow","./src/components/six-menu-item/six-menu-item.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  text-align: left;\n  color: var(--six-input-color);\n  border-radius: var(--six-border-radius-medium);\n  padding: var(--six-spacing-medium) var(--six-spacing-medium);\n  transition: var(--six-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &.menu-item--focused:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n    align-self: center;\n  }\n\n  .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:last-child) {\n      margin-right: 0.5em;\n    }\n  }\n\n  .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:first-child) {\n      margin-left: 0.5em;\n    }\n  }\n\n  .menu-item__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-left: var(--six-spacing-small);\n    visibility: hidden;\n    font-size: inherit;\n  }\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}\n","import { Component, Method, Prop, State, h } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  menuItem: HTMLElement;\n  defaultSlot: HTMLSlotElement;\n\n  @State() hasFocus = false;\n\n  /** Set to true to draw the item in a checked state. */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n  }\n\n  handleMouseEnter() {\n    this.setFocus();\n  }\n\n  handleMouseLeave() {\n    this.removeFocus();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : null}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <six-icon size=\"small\" aria-hidden=\"true\">\n            check\n          </six-icon>\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAiB,64C,MCyBVC,EAAW,M,uCAIF,M,aAGe,M,WAGF,G,cAGG,K,CAEpCC,oBACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,MACvCA,KAAKG,YAAcH,KAAKG,YAAYD,KAAKF,MACzCA,KAAKI,iBAAmBJ,KAAKI,iBAAiBF,KAAKF,MACnDA,KAAKK,iBAAmBL,KAAKK,iBAAiBH,KAAKF,K,CAKrDM,eAAeC,GACbP,KAAKQ,SAASC,MAAMF,E,CAKtBD,oBACEN,KAAKQ,SAASE,M,CAKhBC,eACE,OAAOC,QAAQC,QAAQC,EAAed,KAAKe,a,CAG7Cd,aACED,KAAKgB,SAAW,K,CAGlBb,cACEH,KAAKgB,SAAW,I,CAGlBZ,mBACEJ,KAAKiB,U,CAGPZ,mBACEL,KAAKkB,a,CAGPC,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQtB,KAAKQ,SAAWc,EAC9BC,KAAK,OACLC,MAAO,CACL,YAAa,KACb,qBAAsBxB,KAAKyB,QAC3B,sBAAuBzB,KAAK0B,SAC5B,qBAAsB1B,KAAKgB,UAE7BW,KAAK,WAAU,gBACA3B,KAAK0B,SAAW,OAAS,QAAO,eACjC1B,KAAKyB,QAAU,OAAS,QACtCG,UAAW5B,KAAK0B,SAAW,EAAI,KAC/BG,QAAS7B,KAAKG,YACd2B,OAAQ9B,KAAKC,WACb8B,aAAc/B,KAAKI,iBACnB4B,aAAchC,KAAKK,kBAEnBe,EAAA,QAAMG,KAAK,SAASC,MAAM,qBACxBJ,EAAA,QAAMa,KAAK,YAGbb,EAAA,QAAMG,KAAK,QAAQC,MAAM,oBACvBJ,EAAA,QAAMC,IAAMC,GAAQtB,KAAKe,YAAcO,KAGzCF,EAAA,QAAMG,KAAK,SAASC,MAAM,qBACxBJ,EAAA,QAAMa,KAAK,YAGbb,EAAA,QAAMG,KAAK,eAAeC,MAAM,oBAC9BJ,EAAA,YAAUc,KAAK,QAAO,cAAa,QAAM,U"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s}from"./p-ac4f4d45.js";import{E as e}from"./p-9a860acc.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}";const a=class{constructor(s){t(this,s);this.sixSubmit=i(this,"six-form-submit",7);this.sixChange=i(this,"six-form-change",7);this.sixReset=i(this,"six-form-reset",7);this.eventListeners=new e;this.novalidate=false}connectedCallback(){this.formControls=[{tag:"six-button",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,click:t=>{const i=t.target;if(i.submit){this.submit()}if(i.reset){this.reset()}}},{tag:"six-checkbox",serialize:(t,i)=>t.name&&t.checked&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-checkbox-change"},{tag:"six-color-picker",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null},{tag:"six-input",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,keyDown:t=>{if(t.key==="Enter"&&!t.defaultPrevented){this.submit()}},changeEventName:"six-input-change"},{tag:"six-datepicker",serialize:(t,i)=>{var s;return t.name&&!t.disabled?i.append(t.name,(s=t.value)===null||s===void 0?void 0:s.toISOString()):null},keyDown:t=>{if(t.key==="Enter"&&!t.defaultPrevented){this.submit()}},changeEventName:"six-datepicker-select"},{tag:"six-radio",serialize:(t,i)=>t.name&&t.checked&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-radio-change"},{tag:"six-range",serialize:(t,i)=>{if(t.name&&!t.disabled){i.append(t.name,t.value+"")}},changeEventName:"six-range-change"},{tag:"six-select",serialize:(t,i)=>{if(t.name&&!t.disabled){if(t.multiple){const s=[...t.value];if(s.length){s.map((s=>i.append(t.name,s)))}else{i.append(t.name,"")}}else{i.append(t.name,t.value+"")}}},changeEventName:"six-select-change"},{tag:"six-switch",serialize:(t,i)=>t.name&&t.checked&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-switch-change"},{tag:"six-textarea",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,changeEventName:"six-textarea-change"},{tag:"six-timepicker",serialize:(t,i)=>t.name&&!t.disabled?i.append(t.name,t.value):null,keyDown:t=>{if(t.key==="Enter"&&!t.defaultPrevented){this.submit()}},changeEventName:"six-timepicker-change"}];this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}disconnectedCallback(){this.eventListeners.removeAll()}componentDidLoad(){this.getFormControls().then((t=>t.forEach((t=>this.appendChangeListener(t)))))}appendChangeListener(t){const i=t.tagName.toLowerCase();for(const s of this.formControls){if(s.tag===i&&s.changeEventName){this.eventListeners.add(t,s.changeEventName,(()=>this.handleChange(t)))}}}async getFormData(){const t=new FormData;const i=await this.getFormControls();i.map((i=>this.serializeElement(i,t)));return t}async getFormControls(){const t=this.form.querySelector("slot");const i=this.formControls.map((t=>t.tag));return t.assignedElements({flatten:true}).reduce(((t,i)=>t.concat(i,[...i.querySelectorAll("*")])),[]).filter((t=>i.includes(t.tagName.toLowerCase())))}async submit(){const t=await this.getFormData();const i=await this.getFormControls();const s=i.filter((t=>typeof t.reportValidity==="function"));if(!this.novalidate){let t=true;for(const i of s){if(!await i.reportValidity()){t=false}}if(!t){return false}}this.sixSubmit.emit({formData:t,formControls:i});return true}async checkValidity(){const t=await this.getFormControls();const i=t.filter((t=>typeof t.checkValidity==="function")).map((t=>t.checkValidity()));const s=await Promise.all(i).then((t=>t.filter((t=>t===false))));return s.length==0}async reset(){const t=await this.getFormControls();t.filter((t=>(t===null||t===void 0?void 0:t.reset)&&typeof(t===null||t===void 0?void 0:t.reset)==="function")).forEach((t=>t.reset()));this.sixReset.emit()}handleClick(t){const i=t.target;const s=i.tagName.toLowerCase();for(const i of this.formControls){if(i.tag===s&&i.click){i.click(t)}}}handleKeyDown(t){const i=t.target;const s=i.tagName.toLowerCase();for(const i of this.formControls){if(i.tag===s&&i.keyDown){i.keyDown(t)}}}handleChange(t){this.checkValidity().then((i=>this.sixChange.emit({valid:i,formControl:t})))}serializeElement(t,i){const s=t.tagName.toLowerCase();for(const e of this.formControls){if(e.tag===s){return e.serialize(t,i)}}return null}render(){return s("div",{ref:t=>this.form=t,part:"base",class:"form",role:"form",onClick:this.handleClick,onKeyDown:this.handleKeyDown},s("slot",null))}};a.style=n;export{a as six_form};
+//# sourceMappingURL=p-c640c2d8.entry.js.map