@six-group/ui-library 0.0.0-insider.98c4058 → 0.0.0-insider.99e1a07

package/dist/components/p-Q3Zlhwd0.js

@@ -1,52 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
-
-const sixIconCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}.material-icons{vertical-align:middle;font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\";user-select:none}.material-icons-filled{font-family:\"Material Icons\"}.material-icons-outlined{font-family:\"Material Icons Outlined\"}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}";
-
-const SixIcon = /*@__PURE__*/ proxyCustomElement(class SixIcon extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /** The icon's size. */
-        this.size = 'inherit';
-        /** If set to true the default material outlined icons are not used. */
-        this.filled = false;
-    }
-    render() {
-        return (h("i", { key: 'e3bdaae941279f36be341a6bbf74a16841dbf5c6', class: {
-                'material-icons': true,
-                'material-icons-outlined': !this.filled,
-                'material-icons-filled': this.filled,
-                'icon--xsmall': this.size === 'xSmall',
-                'icon--small': this.size === 'small',
-                'icon--medium': this.size === 'medium',
-                'icon--large': this.size === 'large',
-                'icon--xlarge': this.size === 'xLarge',
-                'icon--xxlarge': this.size === 'xxLarge',
-                'icon--xxxlarge': this.size === 'xxxLarge',
-                'icon--inherit': this.size === 'inherit',
-            } }, h("slot", { key: 'bd0a678f75920a57c6a15ff29d8e97ba31d12bf1' })));
-    }
-    static get style() { return sixIconCss; }
-}, [1, "six-icon", {
-        "size": [513],
-        "filled": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["six-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "six-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SixIcon);
-            }
-            break;
-    } });
-}
-
-export { SixIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-Q3Zlhwd0.js.map
-
-//# sourceMappingURL=p-Q3Zlhwd0.js.map

package/dist/components/p-Q3Zlhwd0.js.map

@@ -1 +0,0 @@
-{"file":"p-Q3Zlhwd0.js","mappings":";;AAAA,MAAM,UAAU,GAAG,2zBAA2zB;;MCcj0B,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;AAO2B,QAAA,IAAI,CAAA,IAAA,GAQZ,SAAS;;AAGlB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAuBvB;IArBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AACpC,gBAAA,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACxC,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;AAC1C,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.material-icons {\n  vertical-align: middle;\n  font-weight: normal;\n  font-style: normal;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Support for IE. */\n  font-feature-settings: 'liga';\n\n  /* Icon name should not be selectable. */\n  user-select: none;\n}\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n\n  &--small {\n    font-size: 18px;\n  }\n\n  &--medium {\n    font-size: 24px;\n  }\n\n  &--large {\n    font-size: 36px;\n  }\n\n  &--xlarge {\n    font-size: 48px;\n  }\n\n  &--xxlarge {\n    font-size: 72px;\n  }\n\n  &--xxxlarge {\n    font-size: 96px;\n  }\n\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-V7eGNm1q.js

@@ -1,614 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
-import { I as ItemPickerType, d as defineCustomElement$1 } from './p-D34Iwjco.js';
-import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './p-CKhg9ibv.js';
-import { E as EventListeners } from './p-C4h4qpGl.js';
-import { h as hasSlot } from './p-j3oIB5oT.js';
-import { d as defineCustomElement$4 } from './p-Ba-Z8Etn.js';
-import { d as defineCustomElement$3 } from './p-Q3Zlhwd0.js';
-import { d as defineCustomElement$2 } from './p-CRqqZ-BJ.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;background-color:white;padding:0.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 H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.sixChange = createEvent(this, "six-timepicker-change");
-        this.sixChangeDebounced = createEvent(this, "six-timepicker-change-debounced");
-        this.sixClear = createEvent(this, "six-timepicker-clear");
-        this.eventListeners = new 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 = 'HH:mm:ss';
-        /**
-         * 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 = ':';
-        /**
-         * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
-         */
-        this.value = '';
-        /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
-        this.open = false;
-        /** Indicates whether 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 true to show an asterisk beneath the label. */
-        this.required = 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 = '';
-        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
-        this.invalid = false;
-        /** 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 = 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 = 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 = DEFAULT_DEBOUNCE_FAST;
-        this.isPopupContentUp = false;
-        this.isDropDownContentUp = false;
-        /*
-         * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,
-         * when switching between formats
-         */
-        this.popupValue = {};
-        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: '',
-            });
-        };
-    }
-    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", { key: '58240c7c32227225d1811fa59e9cf336aad03a4d', part: "container", ref: (el) => (this.wrapper = el), class: "timepicker__container" }, h("six-input", { key: '1b6e9b28d997b67a933d055fa3e73e3c0751aa53', 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", { key: 'b762116d0af1bc11d7f2cbb255b071e8fe3b52cf', 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=p-V7eGNm1q.js.map
-
-//# sourceMappingURL=p-V7eGNm1q.js.map