@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

package/dist/components/six-spinner2.js

@@ -1,41 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
-
-const SixSpinner = /*@__PURE__*/ proxyCustomElement(class SixSpinner extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.six = false;
-    }
-    renderSIXLogo() {
-        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
-    }
-    renderSimple() {
-        return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
-    }
-    render() {
-        return this.six ? this.renderSIXLogo() : this.renderSimple();
-    }
-    static get style() { return sixSpinnerCss; }
-}, [1, "six-spinner", {
-        "six": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["six-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "six-spinner":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SixSpinner);
-            }
-            break;
-    } });
-}
-
-export { SixSpinner as S, defineCustomElement as d };
-
-//# sourceMappingURL=six-spinner2.js.map

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

@@ -1 +0,0 @@
-{"file":"six-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8vCAA8vC;;MCgBvwC,UAAU;;;;;mBAEP,KAAK;;IAEX,aAAa;QACnB,QACE,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ,IAC3D,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,IACjC,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACF,CACD,EACP;KACH;IAEO,YAAY;QAClB,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;KACjF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;KAC9D;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\" part=\"svg\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"],"version":3}

package/dist/components/six-stage-indicator2.js

@@ -1,41 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './six-icon2.js';
-
-const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";
-
-const SixStageIndicator = /*@__PURE__*/ proxyCustomElement(class SixStageIndicator extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.stage = null;
-    }
-    render() {
-        return this.stage == null || this.stage == 'PROD' ? null : (h("div", { class: `indicator--${this.stage.toLowerCase()}` }, h("div", { class: "center-content" }, h("six-icon", { class: "align-item", size: "small" }, "error_outline"), h("span", { class: 'align-item' }, h("slot", null)))));
-    }
-    static get style() { return sixStageIndicatorCss; }
-}, [1, "six-stage-indicator", {
-        "stage": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["six-stage-indicator", "six-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "six-stage-indicator":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SixStageIndicator);
-            }
-            break;
-        case "six-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SixStageIndicator as S, defineCustomElement as d };
-
-//# sourceMappingURL=six-stage-indicator2.js.map

package/dist/components/six-stage-indicator2.js.map

@@ -1 +0,0 @@
-{"file":"six-stage-indicator2.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,k2BAAk2B;;MCSl3B,iBAAiB;;;;;qBAED,IAAI;;IAE/B,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAClD,WAAK,KAAK,EAAC,gBAAgB,IACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B,EACX,YAAM,KAAK,EAAE,YAAY,IACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: grid;\n}\n\n.center-content {\n  display: grid;\n  align-self: center;\n  justify-self: center;\n  grid-gap: 5px;\n  grid-auto-flow: column;\n}\n\n.align-item {\n  margin: auto;\n}\n\n.indicator {\n  font-family: var(--six-font-family);\n  font-size: 14px;\n  font-weight: var(--six-font-weight-bold);\n  display: grid;\n  align-content: center;\n  width: 100%;\n  height: 24px;\n\n  &--itu {\n    @extend .indicator;\n    background-color: var(--six-color-success-600);\n    color: var(--six-color-web-rock-900);\n  }\n\n  &--dev {\n    @extend .indicator;\n    background-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n  }\n\n  &--etu {\n    @extend .indicator;\n    background-color: var(--six-color-action-600);\n    color: var(--six-color-white);\n  }\n\n  &--acceptance {\n    @extend .indicator;\n    background-color: var(--six-color-warning-800);\n    color: var(--six-color-web-rock-900);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-timepicker2.js

@@ -1,552 +0,0 @@
-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