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

package/dist/cjs/six-tab.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,ikCAAikC;;ACGnlC,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;IACjB,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;iBAMK,EAAE;kBAGD,KAAK;oBAGpB,KAAK;oBAGY,KAAK;;EAKzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;;EAID,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GACzB;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,MAAM;IACJ;;IAEEA,QAACC,UAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxCD,iBACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,aAAa,EAAE,IAAI,CAAC,MAAM;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;OAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpDA,qBAAQ,EACP,IAAI,CAAC,QAAQ,KACZA,6BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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"],"version":3}

package/dist/cjs/six-tag.cjs.entry.js

@@ -2,21 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
+const index = require('./index-2f6daa5b.js');
 
 const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
 
-let SixTag = class {
+const SixTag = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sixClear = index.createEvent(this, "six-tag-clear", 7);
-    /** The tag's type. */
     this.type = 'primary';
-    /** The tag's size. */
     this.size = 'medium';
-    /** Set to true to draw a pill-style tag with rounded edges. */
     this.pill = false;
-    /** Set to true to make the tag clearable. */
     this.clearable = false;
   }
   connectedCallback() {
@@ -49,3 +45,5 @@ let SixTag = class {
 SixTag.style = sixTagCss;
 
 exports.six_tag = SixTag;
+
+//# sourceMappingURL=six-tag.cjs.entry.js.map

package/dist/cjs/six-tag.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-tag.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,owEAAowE;;MCqBzwE,MAAM;;;;gBAI0F,SAAS;gBAGtD,QAAQ;gBAGtC,KAAK;qBAGA,KAAK;;EAK1C,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACEA,kBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;QAGjC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;;QAGnC,WAAW,EAAE,IAAI,CAAC,IAAI;QACtB,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,IAEDA,kBAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,IACvCA,qBAAQ,CACH,EAEN,IAAI,CAAC,SAAS,KACbA,6BACE,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CACI,EACP;GACH;;;;;;","names":["h"],"sources":["./src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","./src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  font-family: var(--six-font-family);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n  color: var(--six-color-white);\n  background-color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-success-500);\n  background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-clay-50);\n  background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-warning-700);\n  background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n  color: var(--six-color-white);\n  border-color: var(--six-color-danger-800);\n  background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n  color: var(--six-color-white);\n  border-color: var(--six-color-action-500);\n  background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--six-button-font-size-small);\n  height: calc(var(--six-height-small) * 0.8);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-small);\n  padding: 0 var(--six-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: calc(var(--six-height-medium) * 0.8);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-medium);\n  padding: 0 var(--six-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--six-button-font-size-large);\n  height: calc(var(--six-height-large) * 0.8);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-large);\n  padding: 0 var(--six-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n","import { Component, h, Prop, EventEmitter, Event } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  tag: HTMLElement;\n\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleClearClick = this.handleClearClick.bind(this);\n  }\n\n  handleClearClick() {\n    this.sixClear.emit();\n  }\n\n  render() {\n    return (\n      <span\n        ref={(el) => (this.tag = el)}\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot />\n        </span>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-textarea.cjs.entry.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
-const formControl = require('./form-control-866bbece.js');
+const index = require('./index-2f6daa5b.js');
+const formControl = require('./form-control-2c17c573.js');
 const slot = require('./slot-ad537f24.js');
 const eventListeners = require('./event-listeners-74715e62.js');
 
 const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";
 
 let id = 0;
-let SixTextarea = class {
+const SixTextarea = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sixChange = index.createEvent(this, "six-textarea-change", 7);
@@ -25,39 +25,34 @@ let SixTextarea = class {
     this.customErrorText = '';
     this.customValidation = false;
     this.eventListeners = new eventListeners.EventListeners();
+    /** default value the textarea will be reverted to when reset is executed */
+    this.defaultValue = '';
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
     this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
-    /** The textarea's size. */
     this.size = 'medium';
-    /** The textarea's name attribute. */
     this.name = '';
-    /** The textarea's value attribute. */
     this.value = '';
-    /** The textarea's label. Alternatively, you can use the label slot. */
     this.label = '';
-    /** The textarea's help text. Alternatively, you can use the help-text slot. */
     this.helpText = '';
-    /** The textarea's error text. Alternatively, you can use the error-text slot. */
     this.errorText = '';
-    /** The number of rows to display by default. */
+    this.placeholder = undefined;
     this.rows = 4;
-    /** Controls how the textarea can be resized. */
     this.resize = 'vertical';
-    /** Set to true to disable the textarea. */
     this.disabled = false;
-    /** Set to true for a readonly textarea. */
     this.readonly = false;
-    /**
-     * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,
-     * `minlength`, and `maxlength` using the browser's constraint validation API.
-     */
+    this.minlength = undefined;
+    this.maxlength = undefined;
+    this.required = undefined;
     this.invalid = false;
-    /** Set to display the error text on blur and not when typing */
+    this.autocapitalize = undefined;
+    this.autocorrect = undefined;
+    this.autocomplete = undefined;
+    this.autofocus = undefined;
+    this.spellcheck = undefined;
+    this.inputmode = undefined;
     this.errorOnBlur = false;
-    /** default value the textarea will be reverted to when reset is executed */
-    this.defaultValue = '';
   }
   handleLabelChange() {
     this.handleSlotChange();
@@ -220,3 +215,5 @@ let SixTextarea = class {
 SixTextarea.style = sixTextareaCss;
 
 exports.six_textarea = SixTextarea;
+
+//# sourceMappingURL=six-textarea.cjs.entry.js.map

package/dist/cjs/six-textarea.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-textarea.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"sources":["./src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","./src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  inputId = `textarea-${++id}`;\n  labelId = `textarea-label-${id}`;\n  helpTextId = `textarea-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n  textarea: HTMLTextAreaElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The textarea's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,\n   * `minlength`, and `maxlength` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize: string;\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck: boolean;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted whenever the value changes. Access the new value via event.target.value.\n   * six-textarea-value-change will emit whenever the value changes.\n   * So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,\n   * but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter\n   * or leaves the textarea field after entering some data.\n   * */\n\n  @Event({ eventName: 'six-textarea-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    if (this.textarea) {\n      this.setTextareaHeight();\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) {\n      return;\n    }\n    this.textarea.value = this.value;\n    this.invalid = !this.textarea.checkValidity();\n    this.sixValueChange.emit();\n  }\n\n  /** default value the textarea will be reverted to when reset is executed */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleInput = this.handleInput.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value || '';\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n    this.resizeObserver.observe(this.textarea);\n    this.eventListeners.add(this.textarea, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.textarea.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.unobserve(this.textarea);\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.textarea.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.textarea.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    this.textarea.setRangeText(replacement, start, end, selectMode);\n\n    if (this.value !== this.textarea.value) {\n      this.value = this.textarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\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.textarea.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.textarea.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.textarea.setCustomValidity(message);\n    this.invalid = !this.textarea.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.textarea.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.sixChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.textarea.value;\n    this.setTextareaHeight();\n    this.sixInput.emit();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\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  handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  }\n\n  setTextareaHeight() {\n    if (this.resize === 'auto') {\n      this.textarea.style.height = 'auto';\n      this.textarea.style.height = this.textarea.scrollHeight + 'px';\n    } else {\n      this.textarea.style.height = undefined;\n    }\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.value?.length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.textarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.value}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onInvalid={this.handleInvalid}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-tile.cjs.entry.js

@@ -2,38 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
+const index = require('./index-2f6daa5b.js');
 const slot = require('./slot-ad537f24.js');
 
 const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-elevation-8dp)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
 
-let SixTile = class {
+const SixTile = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sixTileClose = index.createEvent(this, "six-tile-closed", 7);
     this.sixTileSelected = index.createEvent(this, "six-tile-selected", 7);
-    /** The tile's label. */
+    this.handleCloseClickEvent = () => {
+      this.visible = false;
+      this.sixTileClose.emit();
+    };
+    this.handleClickEvent = () => {
+      this.sixTileSelected.emit();
+    };
     this.label = '';
-    /** Flag, whether the tile is closeable. */
+    this.iconName = undefined;
     this.closeable = true;
-    /** Flag, whether the tile should cast a shadow. */
     this.elevated = false;
-    /** Enables tile tooltip for tiles */
     this.disableTooltip = true;
-    /** Set to true to disable the tile. */
     this.disabled = false;
-    /** The tile's size. */
     this.size = 'medium';
     this.visible = true;
     this.hasIconSlot = false;
     this.hasLabelSlot = false;
-    this.handleCloseClickEvent = () => {
-      this.visible = false;
-      this.sixTileClose.emit();
-    };
-    this.handleClickEvent = () => {
-      this.sixTileSelected.emit();
-    };
   }
   /** Hides the tile */
   async hide() {
@@ -98,3 +93,5 @@ const iconSize = (size) => {
 SixTile.style = sixTileCss;
 
 exports.six_tile = SixTile;
+
+//# sourceMappingURL=six-tile.cjs.entry.js.map

package/dist/cjs/six-tile.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-tile.entry.cjs.js","mappings":"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","names":["hasSlot","h"],"sources":["./src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","./src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-elevation-8dp);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName;\n\n  /** Flag, whether the tile is closeable. */\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  @Prop() disableTooltip: boolean = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"icon\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"label\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n  }\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"version":3}

package/dist/cjs/six-timepicker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
+const index = require('./index-2f6daa5b.js');
 const types = require('./types-64878648.js');
 const sixTimepicker_types = require('./six-timepicker.types-c19ebff3.js');
 const executionControl = require('./execution-control-46f388e0.js');
@@ -103,89 +103,13 @@ const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,
 const TAG = `[SIX-TIMEPICKER]`;
 const DEBOUNCE_TIMEPICKER_LISTENER = 'debounced-timepicker';
 const MIN_POPUP_HEIGHT = 145;
-let SixTimepicker = class {
+const SixTimepicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sixChange = index.createEvent(this, "six-timepicker-change", 7);
     this.sixChangeDebounced = index.createEvent(this, "six-timepicker-change-debounced", 7);
     this.sixClear = index.createEvent(this, "six-timepicker-clear", 7);
     this.eventListeners = new eventListeners.EventListeners();
-    /**
-     * Define the time format. Valid formats are:
-     *
-     * HH:mm:ss
-     * hh:mm:ss:aa
-     * HH:mm:ss:ms
-     * hh:mm:ss:ms:aa
-     * HH:mm
-     * hh:mm:aa
-     * HH
-     * hh:aa
-     * mm
-     * ss
-     * ms
-     *
-     * where HH is the 24 hour format
-     * and hh is the 12 hour format
-     *
-     * Please notice that when using the 12-hour-clock (hh)
-     * you always need a period indicator (aa). So the time can be parsed as either am or pm
-     * */
-    this.format = SixTimeFormat.HHmmss;
-    /**
-     * Define the separator to be shown between the time unit pickers.
-     * Please be aware that this property will modify the displayed separator only.
-     * The separator for a timestring is always expected to be a colon (eg. '13:52:20')
-     * */
-    this.separator = TIME_FORMAT_SEPARATOR;
-    /** Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /** Indicates whether or not the timepicker should be shown as an inline (always open) component */
-    this.inline = false;
-    /**
-     * If `true` the user can only select a time via the timepicker but not directly edit the input field.
-     */
-    this.readonly = false;
-    /**
-     * If `true` the component is disabled.
-     */
-    this.disabled = false;
-    /** Timepicker size. */
-    this.size = 'medium';
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** The input's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** The input's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** The input's name attribute. */
-    this.name = '';
-    /** Set to true to add a clear button when the input is populated. */
-    this.clearable = false;
-    /** Set the position of the icon */
-    this.iconPosition = 'left';
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    this.hoist = false;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).
-     */
-    this.timeout = executionControl.DEFAULT_DEBOUNCE_FAST;
-    /**
-     * Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.
-     */
-    this.interval = executionControl.DEFAULT_DEBOUNCE_INSANELY_FAST;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.
-     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
-     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
-     * (and keep pressed) and once you release
-     */
-    this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
-    this.isPopupContentUp = false;
-    this.isDropDownContentUp = false;
     this.defaultValue = null;
     this.handleInputChange = (event) => {
       event.stopPropagation();
@@ -234,6 +158,31 @@ let SixTimepicker = class {
       this.value = undefined;
       this.sixClear.emit();
     };
+    this.format = SixTimeFormat.HHmmss;
+    this.separator = TIME_FORMAT_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 = executionControl.DEFAULT_DEBOUNCE_FAST;
+    this.interval = executionControl.DEFAULT_DEBOUNCE_INSANELY_FAST;
+    this.defaultTime = undefined;
+    this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+    this.isPopupContentUp = false;
+    this.isDropDownContentUp = false;
+    this.internalValue = undefined;
   }
   async resizeHandler() {
     this.calcIsPopupContentUp();
@@ -502,3 +451,5 @@ let SixTimepicker = class {
 SixTimepicker.style = sixTimepickerCss;
 
 exports.six_timepicker = SixTimepicker;
+
+//# sourceMappingURL=six-timepicker.cjs.entry.js.map

package/dist/cjs/six-timepicker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-timepicker.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,IAAY,aAYX;AAZD,WAAY,aAAa;EACvB,oCAAmB,CAAA;EACnB,yCAAwB,CAAA;EACxB,yCAAwB,CAAA;EACxB,8CAA6B,CAAA;EAC7B,+BAAc,CAAA;EACd,oCAAmB,CAAA;EACnB,0BAAS,CAAA;EACT,+BAAc,CAAA;EACd,0BAAS,CAAA;EACT,0BAAS,CAAA;EACT,0BAAS,CAAA;AACX,CAAC,EAZW,aAAa,KAAb,aAAa;;ACAzB;;;AAWO,MAAM,uBAAuB,GAAG;EACrC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;EACvB,OAAO;IACL,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE;IACrB,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;IACzB,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;IACzB,YAAY,EAAE,GAAG,CAAC,eAAe,EAAE;IACnC,UAAU,EAAE,IAAI;GACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAElC,MAAM,sBAAsB,GAAG,CAAC,KAAa,KAClD,KAAK,GAAG,6BAA6B,GAAG,KAAK,GAAG,6BAA6B,GAAG,KAAK,CAAC;AAEjF,MAAM,uBAAuB,GAAG;EACrC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;EACvB,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;EAC7B,OAAO;IACL,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACpC,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;IACzB,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE;IACzB,YAAY,EAAE,GAAG,CAAC,eAAe,EAAE;IACnC,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,KAAK,IAAI,6BAA6B,GAAGA,iCAAa,CAAC,EAAE,GAAGA,iCAAa,CAAC,EAAE;GACrF,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,cAAc,GAAG,CAAC,aAAsB,IAAI;EACvD,OAAO,UAAU,GAAG,uBAAuB,EAAE,GAAG,uBAAuB,EAAE,CAAC;AAC5E,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAClC,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,MAAqB;EACtE,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAC7D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAC5D,OAAO,eAAe,CAAC,MAAM,KAAK,eAAe,CAAC,MAAM,CAAC;AAC3D,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,MAAqB;EACpE,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAC7D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAE5D,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;IACvC,OAAO,CAAC,KAAK,CACX,+DAA+D,MAAM,0BAA0B,OAAO,EAAE,CACzG,CAAC;GACH;EAED,MAAM,OAAO,GAAY,EAAE,CAAC;EAE5B,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,CAAC;IACxC,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,mBAAmB,GAAGC,6DAAyC,CAAC,gBAAgB,CAAC,CAAC;IAExF,IAAI,mBAAmB,KAAK,SAAS,EAAE;MACrC,IAAI,gBAAgB,KAAKC,oCAAgB,CAAC,MAAM,EAAE;QAChD,OAAO,CAAC,MAAM,GAAG,cAAc,CAAC,WAAW,EAAE,KAAKF,iCAAa,CAAC,EAAE,GAAGA,iCAAa,CAAC,EAAE,GAAGA,iCAAa,CAAC,EAAE,CAAC;OAC1G;WAAM;QACL,OAAO,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;OACvD;KACF;IAED,IAAI,gBAAgB,KAAKE,oCAAgB,CAAC,OAAO,EAAE;MACjD,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;KAC3B;SAAM,IAAI,gBAAgB,KAAKA,oCAAgB,CAAC,OAAO,EAAE;MACxD,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;KAC5B;GACF,CAAC,CAAC;EAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEK,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,MAAqB;EACnE,OAAO,MAAM;KACV,KAAK,CAAC,qBAAqB,CAAC;KAC5B,GAAG,CAAC,CAAC,cAAc;IAClB,MAAM,mBAAmB,GAAGD,6DAAyC,CAAC,cAAc,CAAC,CAAC;IACtF,MAAM,aAAa,GAAG,cAAc,KAAKC,oCAAgB,CAAC,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9E,OAAO,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;GACvE,CAAC;KACD,IAAI,CAAC,qBAAqB,CAAC,CAAC;AACjC,CAAC;;AC9FD,MAAM,gBAAgB,GAAG,6gDAA6gD;;ACyCtiD,MAAM,GAAG,GAAG,kBAAkB,CAAC;AAC/B,MAAM,4BAA4B,GAAG,sBAAsB,CAAC;AAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAC;MAgBhB,aAAa;;;;;;IACP,mBAAc,GAAG,IAAIC,6BAAc,EAAE,CAAC;IAuN/C,iBAAY,GAAY,IAAI,CAAC;IA4B7B,sBAAiB,GAAG,CAAC,KAAY;MACvC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MAE3C,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE;QAC/C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UAClB,KAAK,EAAE,EAAE;UACT,aAAa,EAAE,EAAE;SAClB,CAAC,CAAC;QACH,OAAO;OACR;MAED,IAAI,CAAC,aAAa,GAAG,eAAe,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;MAC9D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,KAAK,EAAE,IAAI,CAAC,aAAa;QACzB,aAAa,EAAE,gBAAgB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC;OACjE,CAAC,CAAC;KACJ,CAAC;IAuCM,uCAAkC,GAAG,CAAC,EAAE,MAAM,EAAE;MACtD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACtC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA8C,EAAE,QAAgB;;MAEtF,KAAK,CAAC,eAAe,EAAE,CAAC;;MAGxB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;MAE5C,MAAM,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;;MAGrE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,eAAe,EAAE,QAAQ;QACzB,KAAK,EAAE,IAAI,CAAC,aAAa;QACzB,aAAa,EAAE,UAAU;OAC1B,CAAC,CAAC;;MAGH,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;KACzB,CAAC;IAqJM,4BAAuB,GAAG,CAAC,KAAiB;;MAElD,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAmB,CAAC;MACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,OAAO;OACR;KACF,CAAC;IAEM,qBAAgB,GAAG,CAAC,KAAiB;MAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;MACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;kBApc8B,aAAa,CAAC,MAAM;qBAOhC,qBAAqB;;gBAQM,KAAK;kBAGlB,KAAK;oBAKpB,KAAK;oBAKL,KAAK;;gBAQqB,QAAQ;;;uBAW/B,KAAK;qBAGP,EAAE;iBAGN,EAAE;gBAGc,EAAE;qBAGd,KAAK;wBAGgB,MAAM;iBAM/B,KAAK;mBAKHC,sCAAqB;oBAKpBC,+CAA8B;;oBAa9BD,sCAAqB;4BAkBZ,KAAK;+BAEF,KAAK;;;EAGpC,MAAM,aAAa;IACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAGD,MAAM,aAAa;IACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAGS,eAAe;IACvB,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,4BAA4B,CAAC,CAAC;IACrE,IAAI,CAAC,cAAc,CAAC,GAAG,CACrB,IAAI,CAAC,IAAI,EACT,uBAAuB,EACvBE,yBAAQ,CAAC,IAAI,CAAC,kCAAkC,EAAE,IAAI,CAAC,QAAQ,CAAC,EAChE,4BAA4B,CAC7B,CAAC;GACH;;;;EAMS,YAAY,CAAC,QAAgB;IACrC,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAC3B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;IACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,KAAK,EAAE,IAAI,CAAC,aAAa;MACzB,aAAa,EAAE,gBAAgB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC;KACjE,CAAC,CAAC;GACJ;;EAID,MAAM,cAAc;IAClB,OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;GAC3C;;EAID,MAAM,aAAa;IACjB,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC;GAC1C;;EAID,MAAM,iBAAiB,CAAC,OAAe;IACrC,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;GACpD;;EAID,MAAM,KAAK;IACT,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;IACvC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5E,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;GACjC;EAWD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAEzB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;KAC9E;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,GAAG,CACrB,IAAI,CAAC,IAAI,EACT,uBAAuB,EACvBA,yBAAQ,CAAC,IAAI,CAAC,kCAAkC,EAAE,IAAI,CAAC,QAAQ,CAAC,EAChE,4BAA4B,CAC7B,CAAC;IACF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAEA,yBAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;GAChH;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;GACjC;EAqBO,oBAAoB;IAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACvC,OAAO;KACR;IAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IACpE,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACjE,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC;IACpE,IAAI,CAAC,gBAAgB,GAAG,cAAc,IAAI,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC,MAAM,GAAG,cAAc,CAAC;GAC1G;;;;;EAMO,oBAAoB;IAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAC7B,OAAO;KACR;IAED,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACnE,MAAM,WAAW,GAAG,uBAAuB,CAAC,MAAM,CAAC;IACnD,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAC1E,MAAM,QAAQ,GAAG,uBAAuB,CAAC,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,uBAAuB,CAAC,MAAM,CAAC;IAEnD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAE5B,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACzB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,WAAW,IAAI,CAAC;KACtD;SAAM;MACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,WAAW,IAAI,CAAC;KACtD;GACF;EA0BO,oBAAoB,CAAC,MAA+B;IAC1D,QACEC,6BACE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,YAAY,CAAC,EAC9C,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,IAAIC,oBAAc,CAAC,MAAM,oBAC1B,MAAM,CAAC,aAAa,8BACV,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,GACjE,EACnB;GACH;EAEO,iBAAiB;IACvB,IAAI,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAACN,oCAAgB,CAAC,MAAM,CAAC,EAAE;MAC1E,OAAO,CAAC,KAAK,CACX,GAAG,GAAG,uGAAuG,CAC9G,CAAC;KACH;IAED,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MACnD,IAAI,CAAC,aAAa,GAAGO,yBAAK,CAAC,IAAI,CAAC,WAAW,CAAC;UACxC,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;UACpC,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACpD;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC/D;IAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;GACxC;EAEO,eAAe;IACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,OAAO;KACR;IAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAEC,uCAAmB,CAAC,KAAK,EAAE,CAAC,CAAC;GAChG;EAEO,aAAa;IACnB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAACR,oCAAgB,CAAC,OAAO,CAAC,CAAC;GACvD;EAEO,eAAe;IACrB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,OAAO;KACR;IAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAEQ,uCAAmB,CAAC,KAAK,EAAE,CAAC,CAAC;GAChG;EAEO,aAAa;IACnB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAACR,oCAAgB,CAAC,OAAO,CAAC,CAAC;GACvD;EAEO,aAAa;IACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,OAAO;KACR;IAED,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3B,OAAO,IAAI,CAAC,oBAAoB,CAAC;MAC/B,KAAK;MACL,IAAI,EAAEM,oBAAc,CAAC,MAAM;MAC3B,YAAY,EAAEE,uCAAmB,CAAC,MAAM;KACzC,CAAC,CAAC;GACJ;EAEO,eAAe;IACrB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAACR,oCAAgB,CAAC,MAAM,CAAC,EAAE;MAClD,OAAO;KACR;IAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAEQ,uCAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;GAClG;EAEO,gBAAgB;IACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAACR,oCAAgB,CAAC,MAAM,CAAC,EAAE;MAClD,OAAO;KACR;IAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAEQ,uCAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;GAClG;EAEO,qBAAqB;IAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAACR,oCAAgB,CAAC,WAAW,CAAC,EAAE;MACvD,OAAO;KACR;IAED,OAAO,IAAI,CAAC,oBAAoB,CAAC;MAC/B,GAAG,EAAE,CAAC;MACN,GAAG,EAAE,GAAG;MACR,KAAK,EAAE,wBAAwB;MAC/B,aAAa,EAAE,CAAC;MAChB,YAAY,EAAEQ,uCAAmB,CAAC,YAAY;KAC/C,CAAC,CAAC;GACJ;EAEO,YAAY;IAClB,QACEH,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,sBAAO,IAAI,CAAC,SAAS,CAAQ,CACzB,EACN;GACH;EAEO,UAAU;IAChB,MAAM,eAAe,GAAG;MACtB,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,gBAAgB,EAAE;MACvB,IAAI,CAAC,qBAAqB,EAAE;KAC7B,CAAC;IAEF,MAAM,eAAe,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,SAAS,CAAC,CAAC;IAEzE,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG;MACjC,IAAI,GAAG,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;QACtC,OAAO,CAAC,EAAE,CAAC,CAAC;OACb;MAED,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;KAClC,CAAC,CAAC;GACJ;EAEO,SAAS;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;KAC9E;GACF;EAEO,UAAU;IAChB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,OAAO;KACR;IAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;GACjF;EAiBO,eAAe;IACrB,QACE,IAAI,CAAC,SAAS,KACZA,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,yBAAyB,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM;QACvD,wBAAwB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;OACxD,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAC,IAAI,IAEbA,sBAAU,IAAI,EAAC,OAAO,YAAiB,CAChC,CACV,EACD;GACH;EAEO,gBAAgB;IACtB,MAAM,IAAI,GAAGI,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,IAC5CJ,kBAAM,IAAI,EAAC,aAAa,GAAQ,KAEhCA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,kBAAwB,CACrF,CAAC;IAEF,QACEA,kBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;OAC/C,IAEA,IAAI,CACA,EACP;GACH;EAEO,uBAAuB;IAC7B,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACvC,OAAO;KACR;IAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IACpE,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACjE,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC;IACpE,IAAI,CAAC,mBAAmB,GAAG,cAAc,IAAI,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC,MAAM,GAAG,cAAc,CAAC;GAC7G;;;;;EAMO,sBAAsB;IAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,OAAO;KACR;;IAGD,UAAU,CAAC;MACT,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACf,OAAO;OACR;;MAGD,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;;MAGnE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;MACpC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ;QAClD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,uBAAuB,CAAC,QAAQ,CAAC,IAAI,CAAC;OACvE,CAAC,CAAC;MAEH,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;MAC1E,MAAM,QAAQ,GAAG,uBAAuB,CAAC,GAAG,CAAC;MAC7C,MAAM,QAAQ,GAAG,uBAAuB,CAAC,GAAG,CAAC;MAE7C,IAAI,CAAC,uBAAuB,EAAE,CAAC;;MAE/B,IAAI,IAAI,CAAC,mBAAmB,IAAI,QAAQ,GAAG,QAAQ,EAAE;;QAEnD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,uBAAuB,CAAC,MAAM,GAAG,uBAAuB,CAAC,MAAM,IAAI,CAAC;OAC1G;KACF,EAAE,CAAC,CAAC,CAAC;GACP;EAED,MAAM;IACJ,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAE9B,QACEA,iBAAK,IAAI,EAAC,WAAW,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,uBAAuB,IACnFA,uBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,mBACX,IAAI,CAAC,WAAW,EAC/B,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,KAAK;QAC3B,aAAa,EAAE,IAAI,CAAC,MAAM;OAC3B,IAEA,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,eAAe,EAAE,EACtBI,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,IAC/BJ,kBAAM,IAAI,EAAC,YAAY,IACrBA,kBAAM,IAAI,EAAC,YAAY,GAAG,CACrB,IACL,IAAI,EACPI,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,IAC1BJ,kBAAM,IAAI,EAAC,OAAO,IAChBA,kBAAM,IAAI,EAAC,OAAO,GAAG,CAChB,IACL,IAAI,CACE,EACX,IAAI,CAAC,IAAI,KACRA,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,0BAA0B,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG,IAAI,CAAC,gBAAgB;QAC7F,8BAA8B,EAAE,IAAI,CAAC,MAAM;OAC5C,OAEG,IAAI,CAAC,UAAU,EAAE,EACpB,IAAI,CAAC,aAAa,EAAE,CACjB,CACP,CACG,EACN;GACH;;;;;;;;;;;","names":["SixTimePeriod","TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP","TIME_FORMAT_CHAR","EventListeners","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","debounce","h","ItemPickerType","isNil","SixTimePropertyName","hasSlot"],"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"],"version":3}

package/dist/cjs/six-timepicker.types-c19ebff3.js

@@ -52,3 +52,5 @@ exports.isDate = isDate;
 exports.isNil = isNil;
 exports.isNumber = isNumber;
 exports.isString = isString;
+
+//# sourceMappingURL=six-timepicker.types-c19ebff3.js.map

package/dist/cjs/six-timepicker.types-c19ebff3.js.map

@@ -0,0 +1 @@
+{"file":"six-timepicker.types-c19ebff3.js","mappings":";;MAAa,QAAQ,GAAG,CAAC,KAAU,KAAsB,OAAO,KAAK,KAAK,SAAS;AAEnF;MACa,KAAK,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK;MAEjC,MAAM,GAAG,CAAC,KAAK,KAAoB,KAAK,YAAY,KAAK;MAEzD,QAAQ,GAAG,CAAC,KAAK,KAAsB,KAAK,KAAK;;ACP9D;;;AAGYA;AAAZ,WAAY,aAAa;EACvB,0BAAS,CAAA;EACT,0BAAS,CAAA;AACX,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,QAGxB;AAEWC;AAAZ,WAAY,mBAAmB;EAC7B,sCAAe,CAAA;EACf,0CAAmB,CAAA;EACnB,0CAAmB,CAAA;EACnB,oDAA6B,CAAA;EAC7B,kDAA2B,CAAA;EAC3B,wCAAiB,CAAA;AACnB,CAAC,EAPWA,2BAAmB,KAAnBA,2BAAmB,QAO9B;AAcD;;;AAGYC;AAAZ,WAAY,gBAAgB;EAC1B,kCAAc,CAAA;EACd,kCAAc,CAAA;EACd,iCAAa,CAAA;EACb,iCAAa,CAAA;EACb,sCAAkB,CAAA;EAClB,iCAAa,CAAA;AACf,CAAC,EAPWA,wBAAgB,KAAhBA,wBAAgB,QAO3B;AAED;;;MAGa,yCAAyC,GAAG;EACvD,CAACA,wBAAgB,CAAC,OAAO,GAAG,OAAO;EACnC,CAACA,wBAAgB,CAAC,OAAO,GAAG,OAAO;EACnC,CAACA,wBAAgB,CAAC,MAAM,GAAG,SAAS;EACpC,CAACA,wBAAgB,CAAC,MAAM,GAAG,SAAS;EACpC,CAACA,wBAAgB,CAAC,WAAW,GAAG,cAAc;EAC9C,CAACA,wBAAgB,CAAC,MAAM,GAAG,QAAQ;;;;;;;;;","names":["SixTimePeriod","SixTimePropertyName","TIME_FORMAT_CHAR"],"sources":["./src/utils/type-check.ts","./src/components/six-timepicker/six-timepicker.types.tsx"],"sourcesContent":["export const isString = (value: any): value is string => typeof value === 'string';\n\n// only use '==' instead of '===' to also catch undefined and void\nexport const isNil = (value) => value == null;\n\nexport const isDate = (value): value is Date => value instanceof Date;\n\nexport const isNumber = (value): value is number => value === 'number';\n","/*\n * Defines the different time periods for the 12-hour-clock\n */\nexport enum SixTimePeriod {\n  AM = 'AM',\n  PM = 'PM',\n}\n\nexport enum SixTimePropertyName {\n  HOURS = 'hours',\n  MINUTES = 'minutes',\n  SECONDS = 'seconds',\n  MILLISECONDS = 'milliseconds',\n  HAS_24_HOURS = 'has24Hours',\n  PERIOD = 'period',\n}\n\n/*\n * Defines a format independent interface for time used internally in the six-timepicker\n */\nexport interface SixTime {\n  [SixTimePropertyName.HOURS]?: number;\n  [SixTimePropertyName.MINUTES]?: number;\n  [SixTimePropertyName.SECONDS]?: number;\n  [SixTimePropertyName.MILLISECONDS]?: number;\n  [SixTimePropertyName.HAS_24_HOURS]?: boolean; // true => 24h, false => 12h\n  [SixTimePropertyName.PERIOD]?: SixTimePeriod; // only needed for 12-hour clock\n}\n\n/*\n * Defines the different time units allowed to use in a timestring\n */\nexport enum TIME_FORMAT_CHAR {\n  HOUR_24 = 'HH',\n  HOUR_12 = 'hh',\n  MINUTE = 'mm',\n  SECOND = 'ss',\n  MILLISECOND = 'ms',\n  PERIOD = 'aa',\n}\n\n/*\n * Defines a mapping from the time format unit characters to the sixTime property name\n */\nexport const TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP = {\n  [TIME_FORMAT_CHAR.HOUR_24]: 'hours',\n  [TIME_FORMAT_CHAR.HOUR_12]: 'hours',\n  [TIME_FORMAT_CHAR.MINUTE]: 'minutes',\n  [TIME_FORMAT_CHAR.SECOND]: 'seconds',\n  [TIME_FORMAT_CHAR.MILLISECOND]: 'milliseconds',\n  [TIME_FORMAT_CHAR.PERIOD]: 'period',\n};\n"],"version":3}