@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/components/six-tile.js.map

@@ -0,0 +1 @@
+{"file":"six-tile.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,2oEAA2oE;;MCcjpEA,SAAO;;;;;;;QAsDV,qBAAgB,GAAG;YACzB,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAEhD,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBACxC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACxD;YAED,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;gBACzC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACxD;SACF,CAAC;QA6DM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;SAC7B,CAAC;qBAnIc,EAAE;;yBAOE,IAAI;wBAGL,KAAK;8BAIC,IAAI;wBAGO,KAAK;oBAGqB,QAAQ;uBAEnD,IAAI;2BAoBA,KAAK;4BAEJ,KAAK;;;IAZ7B,MAAM,IAAI;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,IAAI;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IAMD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAiBD,MAAM;QACJ,QACE,mBAAa,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,IAClF,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,eAAe,EAAE,IAAI,CAAC,OAAO;gBAC7B,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;aAChC,IAED,WAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,IACrC,uBACE,KAAK,EAAE;gBACL,sBAAsB,EAAE,CAAC,IAAI,CAAC,SAAS;aACxC,EACD,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACnC,CACE,EAEN,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IAChC,IAAI,CAAC,QAAQ,KACZ,gBAAU,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAChE,IAAI,CAAC,QAAQ,CACL,CACZ,EACA,IAAI,CAAC,WAAW,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1C,EAEN,WACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5C,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9C,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC7C,IAEA,IAAI,CAAC,KAAK,KACT,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE7B,IAAI,CAAC,KAAK,CACP,CACP,EACA,IAAI,CAAC,YAAY,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAC5C,CACF,CACM,EACd;KACH;;;;;;;;;;;;;;;;;AAYH,MAAM,aAAa,GAAG,CAAC,IAAY;IACjC,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,IAAI,CAAwB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY;IAC5B,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,UAAU;KAClB,CAAC,IAAI,CAAsC,CAAC;AAC/C,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixTile"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"],"version":3}

package/dist/components/six-timepicker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixTimepicker extends Components.SixTimepicker, HTMLElement {}
+export const SixTimepicker: {
+    prototype: SixTimepicker;
+    new (): SixTimepicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-timepicker.js

@@ -0,0 +1,8 @@
+import { S as SixTimepicker$1, d as defineCustomElement$1 } from './six-timepicker2.js';
+
+const SixTimepicker = SixTimepicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixTimepicker, defineCustomElement };
+
+//# sourceMappingURL=six-timepicker.js.map

package/dist/components/six-timepicker.js.map

@@ -0,0 +1 @@
+{"file":"six-timepicker.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/six-timepicker2.js

@@ -0,0 +1,552 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { I as ItemPickerType, d as defineCustomElement$1 } from './six-item-picker2.js';
+import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control.js';
+import { E as EventListeners } from './event-listeners.js';
+import { h as hasSlot } from './slot.js';
+import { d as defineCustomElement$4 } from './six-error2.js';
+import { d as defineCustomElement$3 } from './six-icon2.js';
+import { d as defineCustomElement$2 } from './six-input2.js';
+
+/**
+ * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
+ * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
+ */
+function adjustPopupForHoisting(hoist, popup, inputElement, wrapper, minPopupHeight, dropdownDirectionChanged) {
+    if (!hoist || popup == null || inputElement == null || wrapper == null) {
+        return;
+    }
+    // take a snapshot of normally rendered popup
+    const popupDimensions = setPopupAsFixPosition(popup);
+    const inputDimensions = inputElement.getBoundingClientRect();
+    const inputTop = inputDimensions.top;
+    const popupTop = popupDimensions.top;
+    const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);
+    // check screen position to check whether the popup should be moved above or below the trigger element
+    if (isUp && inputTop < popupTop) {
+        //  move popup above input field if datepicker is at bottom of screen
+        popup.style.top = `${popupTop - popupDimensions.height - inputDimensions.height}px`;
+    }
+    dropdownDirectionChanged(isUp);
+}
+/*
+ * For small screens the datepicker popup could be cut-off even though there might still be space within the viewport.
+ * This is because the popup is always aligned with the trigger input field. However in the scenario of small screens
+ * we should reposition the popup to use the space available.
+ */
+function adjustPopupForSmallScreens(popup) {
+    // execute after dropdown has been rendered to make sure the popup reference is correctly set
+    setTimeout(() => {
+        if (popup == null) {
+            return;
+        }
+        const popupDimensions = popup.getBoundingClientRect();
+        if (popupDimensions.y < 0 &&
+            window.innerHeight - popupDimensions.height > 0 &&
+            Math.abs(popupDimensions.y) <= popupDimensions.height) {
+            // handle case where popup is cut-off on top but there is still space available
+            setPopupAsFixPosition(popup);
+            popup.style.top = '0px';
+        }
+        else if (window.innerHeight < popupDimensions.y + popupDimensions.height &&
+            window.innerHeight > popupDimensions.height &&
+            Math.abs(popupDimensions.y - window.innerHeight) <= popupDimensions.height) {
+            // handle case where popup is cut-off at the bottom but there is still space available above
+            // apply screen position to fixed popup
+            setPopupAsFixPosition(popup);
+            popup.style.top = `${window.innerHeight - popupDimensions.height}px`;
+        }
+        if (window.innerWidth < popupDimensions.x + popupDimensions.width &&
+            window.innerWidth > popupDimensions.width &&
+            Math.abs(popupDimensions.x - window.innerWidth) <= popupDimensions.width) {
+            // handle case where popup is cut-off to the right
+            setPopupAsFixPosition(popup);
+            popup.style.left = `${window.innerWidth - popupDimensions.width}px`;
+        }
+    }, 0);
+}
+function calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight) {
+    const inputBoundingRect = inputElement.getBoundingClientRect();
+    const wrapperBoundingRect = wrapper.getBoundingClientRect();
+    const popupHeight = Math.max(wrapperBoundingRect.height, minPopupHeight);
+    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
+    return moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + popupHeight;
+}
+function setPopupAsFixPosition(popup) {
+    const popupDimensions = popup.getBoundingClientRect();
+    popup.style.position = 'fixed';
+    popup.style.top = popupDimensions['top'] + 'px';
+    popup.style.left = popupDimensions['left'] + 'px';
+    popup.style.width = popupDimensions['width'] + 'px';
+    popup.style.minHeight = 'fit-content';
+    return popupDimensions;
+}
+/*
+ * The position of the hoisted datepicker needs to be correctly calculated since the position changes to fixed.
+ * Thus if the user scrolls or adjusts the screen size we need to recalculate the datepicker position.
+ */
+function movePopup(hoist, open, popup, inputElement, wrapper, minPopupHeight) {
+    if (!hoist || !open || popup == null || inputElement == null || wrapper == null) {
+        return;
+    }
+    const popupBoundingClientRect = popup.getBoundingClientRect();
+    const popupHeight = popupBoundingClientRect.height;
+    const inputBoundingClientRect = inputElement.getBoundingClientRect();
+    const inputTop = inputBoundingClientRect.top;
+    const inputHeight = inputBoundingClientRect.height;
+    const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);
+    if (isUp) {
+        popup.style.top = `${inputTop - popupHeight}px`;
+    }
+    else {
+        popup.style.top = `${inputTop + inputHeight}px`;
+    }
+}
+
+const getCurrentTimeIn24Hours = () => {
+    const now = new Date();
+    return {
+        hours: now.getHours(),
+        minutes: now.getMinutes(),
+        seconds: now.getSeconds(),
+        milliseconds: now.getMilliseconds(),
+        has24Hours: true,
+    };
+};
+const HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;
+const getHoursIn12HourFormat = (hours) => hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;
+const getCurrentTimeIn12Hours = () => {
+    const now = new Date();
+    const hours = now.getHours();
+    return {
+        hours: getHoursIn12HourFormat(hours),
+        minutes: now.getMinutes(),
+        seconds: now.getSeconds(),
+        milliseconds: now.getMilliseconds(),
+        has24Hours: false,
+        period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',
+    };
+};
+const getCurrentTime = (has24Hours = true) => {
+    return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();
+};
+const isValidTimeString = (timeStr, format) => {
+    const timeStringParts = timeStr.split(':');
+    const timeFormatParts = format.split(':');
+    return timeStringParts.length === timeFormatParts.length;
+};
+const parseTimeString = (timeStr, format) => {
+    const timeParts = timeStr.split(':');
+    const formatParts = format.split(':');
+    if (!isValidTimeString(timeStr, format)) {
+        console.error(`Timestring did not match expected format.\nExpected format: ${format}\nReceived timestring: ${timeStr}`);
+    }
+    const time = {};
+    timeParts.forEach((timeStringPart, i) => {
+        const formatStringPart = formatParts[i];
+        switch (formatStringPart) {
+            case 'HH':
+                time.hours = Number(timeStringPart);
+                time.has24Hours = true;
+                break;
+            case 'hh':
+                time.hours = Number(timeStringPart);
+                time.has24Hours = false;
+                break;
+            case 'mm':
+                time.minutes = Number(timeStringPart);
+                break;
+            case 'ss':
+                time.seconds = Number(timeStringPart);
+                break;
+            case 'ms':
+                time.milliseconds = Number(timeStringPart);
+                break;
+            case 'aa':
+                time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';
+        }
+    });
+    return time;
+};
+const createTimeString = (time, format) => {
+    if (time == null) {
+        return '';
+    }
+    const formatParts = format.split(':');
+    return formatParts
+        .map((timeFormatPart) => {
+        switch (timeFormatPart) {
+            case 'HH':
+            case 'hh':
+                return String(time.hours).padStart(2, '0');
+            case 'mm':
+                return String(time.minutes).padStart(2, '0');
+            case 'ss':
+                return String(time.seconds).padStart(2, '0');
+            case 'ms':
+                return String(time.milliseconds).padStart(3, '0');
+            case 'aa':
+                return String(time.period);
+        }
+    })
+        .join(':');
+};
+
+const sixTimepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";
+
+const MIN_POPUP_HEIGHT = 145;
+const SixTimepicker = /*@__PURE__*/ proxyCustomElement(class SixTimepicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixChange = createEvent(this, "six-timepicker-change", 7);
+        this.sixChangeDebounced = createEvent(this, "six-timepicker-change-debounced", 7);
+        this.sixClear = createEvent(this, "six-timepicker-clear", 7);
+        this.eventListeners = new EventListeners();
+        this.handlePickerChange = (event, property) => {
+            // stop propagation, since the timepicker should not expose the events of the underlying item-picker
+            event.stopPropagation();
+            if (this.popupValue == null) {
+                return;
+            }
+            // update the internal state
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            this.popupValue[property] = event.detail;
+            const timeString = createTimeString(this.popupValue, this.format);
+            // update the input value
+            this.value = timeString;
+            // emit change event
+            this.sixChange.emit({
+                changedProperty: property,
+                value: this.popupValue,
+                valueAsString: timeString,
+            });
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.host)) {
+                this.closePopup();
+                return;
+            }
+        };
+        this.handleClearClick = (event) => {
+            event.stopPropagation();
+            this.value = '';
+            this.sixClear.emit();
+            this.sixChange.emit({
+                value: {},
+                valueAsString: '',
+            });
+        };
+        this.format = 'HH:mm:ss';
+        this.separator = ':';
+        this.value = '';
+        this.open = false;
+        this.inline = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.placement = undefined;
+        this.size = 'medium';
+        this.required = false;
+        this.placeholder = undefined;
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.label = '';
+        this.invalid = false;
+        this.name = '';
+        this.clearable = false;
+        this.iconPosition = 'left';
+        this.hoist = false;
+        this.timeout = DEFAULT_DEBOUNCE_FAST;
+        this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
+        this.defaultTime = undefined;
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        this.isPopupContentUp = false;
+        this.isDropDownContentUp = false;
+        this.popupValue = {};
+    }
+    async resizeHandler() {
+        this.calcIsPopupContentUp();
+        this.moveOpenHoistedPopup();
+    }
+    async scrollHandler() {
+        this.calcIsPopupContentUp();
+        this.moveOpenHoistedPopup();
+    }
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        this.updateValue();
+    }
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-timepicker-change', 'change', this.host);
+    }
+    componentWillLoad() {
+        this.updateValue();
+        if (this.inline) {
+            this.open = true;
+        }
+        if (this.open) {
+            this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+        }
+    }
+    componentDidLoad() {
+        if (this.inputElement == null)
+            return;
+        const inputElement = this.inputElement;
+        // emit debounced change event
+        this.eventListeners.add(this.host, 'six-timepicker-change', debounce((event) => this.sixChangeDebounced.emit(event.detail), this.debounce));
+        // update value and popup value based on input-element value
+        this.eventListeners.add(inputElement, 'six-input-input', debounce((event) => {
+            event.stopPropagation();
+            // emit empty event if time string is invalid
+            if (!isValidTimeString(inputElement.value, this.format)) {
+                this.value = inputElement.value;
+                this.sixChange.emit({
+                    value: {},
+                    valueAsString: '',
+                });
+                return;
+            }
+            // update value and popup value, and emit the new value
+            this.value = inputElement.value;
+            this.popupValue = parseTimeString(inputElement.value, this.format);
+            this.sixChange.emit({
+                value: this.popupValue,
+                valueAsString: createTimeString(this.popupValue, this.format),
+            });
+        }, this.debounce));
+    }
+    componentDidRender() {
+        adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    updateValue() {
+        // normalize value
+        if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
+            this.value = '';
+        }
+        // update popup value
+        if (this.value === '') {
+            if (this.defaultTime == null) {
+                this.popupValue = getCurrentTime(this.is24HourClock());
+            }
+            else {
+                this.popupValue = parseTimeString(this.defaultTime, this.format);
+            }
+        }
+        else {
+            this.popupValue = parseTimeString(this.value, this.format);
+        }
+    }
+    calcIsPopupContentUp() {
+        if (this.inputElement == null || this.wrapper == null) {
+            return;
+        }
+        const inputBoundingRect = this.inputElement.getBoundingClientRect();
+        const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
+        const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
+        const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
+        this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
+    }
+    moveOpenHoistedPopup() {
+        movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    getSixTimeUnitPicker(params) {
+        return (h("six-item-picker", { class: params.class, timeout: this.timeout, interval: this.interval, padded: true, min: params.min, max: params.max,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            value: this.popupValue[params.propertyName], items: params.items, type: params.type || ItemPickerType.NUMBER, "padding-length": params.paddingLength, "onSix-item-picker-change": (event) => this.handlePickerChange(event, params.propertyName) }));
+    }
+    getHour24Picker() {
+        if (!this.is24HourClock()) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });
+    }
+    is24HourClock() {
+        return this.format.includes('HH');
+    }
+    getHour12Picker() {
+        if (!this.is12HourClock()) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });
+    }
+    is12HourClock() {
+        return this.format.includes('hh');
+    }
+    getAmPmPicker() {
+        if (!this.is12HourClock()) {
+            return;
+        }
+        const items = ['AM', 'PM'];
+        return this.getSixTimeUnitPicker({
+            items,
+            type: ItemPickerType.CUSTOM,
+            propertyName: 'period',
+        });
+    }
+    getMinutePicker() {
+        if (!this.format.includes('mm')) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });
+    }
+    getSecondsPicker() {
+        if (!this.format.includes('ss')) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });
+    }
+    getMillisecondsPicker() {
+        if (!this.format.includes('ms')) {
+            return;
+        }
+        return this.getSixTimeUnitPicker({
+            min: 0,
+            max: 999,
+            class: 'timepicker__item--wide',
+            paddingLength: 3,
+            propertyName: 'milliseconds',
+        });
+    }
+    getSeparator() {
+        return (h("div", { class: "timepicker__separator" }, h("span", null, this.separator)));
+    }
+    getContent() {
+        const elementsInOrder = [
+            this.getHour24Picker(),
+            this.getHour12Picker(),
+            this.getMinutePicker(),
+            this.getSecondsPicker(),
+            this.getMillisecondsPicker(),
+        ];
+        const visibleElements = elementsInOrder.filter((el) => el !== undefined);
+        return visibleElements.map((el, idx) => {
+            if (idx === visibleElements.length - 1) {
+                return [el];
+            }
+            return [el, this.getSeparator()];
+        });
+    }
+    openPopup() {
+        if (!this.open && !this.disabled) {
+            this.open = true;
+            this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
+        }
+    }
+    closePopup() {
+        if (this.inline) {
+            return;
+        }
+        this.open = false;
+        this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+    }
+    renderClearable() {
+        return (this.clearable && (h("button", { slot: "suffix", class: {
+                timepicker_clear: true,
+                'timepicker_clear--right': this.iconPosition === 'left',
+                'timepicker_clear--left': this.iconPosition === 'right',
+            }, type: "button", onClick: this.handleClearClick, tabindex: "-1" }, h("six-icon", { size: "small" }, "clear"))));
+    }
+    renderCustomIcon() {
+        const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "watch_later"));
+        return (h("span", { slot: "prefix", part: "icon", class: {
+                prefix: true,
+                'prefix--right': this.iconPosition === 'right',
+            } }, icon));
+    }
+    render() {
+        return (h("div", { part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { ref: (el) => (this.inputElement = el), part: "input", onClick: () => this.openPopup(), value: this.value, placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, errorTextCount: this.errorTextCount, errorText: this.errorText, invalid: this.invalid, size: this.size, name: this.name, label: this.label, required: this.required, class: {
+                'input--empty': this.value === '',
+                'input--hide': this.inline,
+            } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { ref: (el) => (this.popup = el), part: "popup", class: {
+                timepicker__popup: true,
+                'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,
+                'timepicker__popup--is-inline': this.inline,
+            } }, ...this.getContent(), this.getAmPmPicker()))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return sixTimepickerCss; }
+}, [1, "six-timepicker", {
+        "format": [1],
+        "separator": [1],
+        "value": [1025],
+        "open": [1540],
+        "inline": [516],
+        "readonly": [4],
+        "disabled": [4],
+        "placement": [1],
+        "size": [1],
+        "required": [4],
+        "placeholder": [1],
+        "errorText": [1, "error-text"],
+        "errorTextCount": [2, "error-text-count"],
+        "label": [1],
+        "invalid": [516],
+        "name": [513],
+        "clearable": [4],
+        "iconPosition": [1, "icon-position"],
+        "hoist": [4],
+        "timeout": [2],
+        "interval": [2],
+        "defaultTime": [1, "default-time"],
+        "debounce": [2],
+        "isPopupContentUp": [32],
+        "isDropDownContentUp": [32],
+        "popupValue": [32],
+        "setFocus": [64]
+    }, [[9, "resize", "resizeHandler"], [9, "scroll", "scrollHandler"]], {
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-timepicker", "six-error", "six-icon", "six-input", "six-item-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-timepicker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixTimepicker);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "six-item-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixTimepicker as S, adjustPopupForHoisting as a, adjustPopupForSmallScreens as b, calcIsDropDownContentUp as c, defineCustomElement as d, movePopup as m };
+
+//# sourceMappingURL=six-timepicker2.js.map