@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/esm/pn-range.entry.js

@@ -0,0 +1,324 @@
+/*!
+ * Built with Stencil
+ * By PostNord.
+ */
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, F as Fragment, a as Host } from './index-CAEP792y.js';
+import { uuidv4 } from './index.js';
+
+const pnRangeCss = () => `${transformTag("pn-range")}{display:block}${transformTag("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${transformTag("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")}{flex:1 1 100%}${transformTag("pn-range")} .pn-range>${transformTag("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${transformTag("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${transformTag("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${transformTag("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-label>span{font-size:0.875em}${transformTag("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${transformTag("pn-range")} .pn-range-message[hidden],${transformTag("pn-range")} .pn-range-message>span[hidden]{display:none}${transformTag("pn-range")} .pn-range-error{color:#a70707}${transformTag("pn-range")} .pn-range-field{flex:0 0 auto}${transformTag("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${transformTag("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${transformTag("pn-range")} .pn-range-group[data-pressing] *,${transformTag("pn-range")} .pn-range-group[data-pressing] *:before,${transformTag("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${transformTag("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${transformTag("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${transformTag("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${transformTag("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${transformTag("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${transformTag("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${transformTag("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${transformTag("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${transformTag("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${transformTag("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-track:before,${transformTag("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-track:after{display:none}${transformTag("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${transformTag("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${transformTag("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${transformTag("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${transformTag("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${transformTag("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${transformTag("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${transformTag("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${transformTag("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${transformTag("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`;
+
+const PnRange = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rangeSelected = createEvent(this, "rangeSelected");
+    }
+    id = `pn-range-${uuidv4()}`;
+    idEnd = `${this.id}-end`;
+    idInput = `${this.id}-input`;
+    idInputEnd = `${this.idEnd}-input`;
+    idInputHidden = `${this.id}-hidden`;
+    idHelpertext = `${this.id}-helpertext`;
+    idError = `${this.id}-error`;
+    idDatalist = `${this.id}-data`;
+    mo;
+    rangeTimeout;
+    tooltipDefault = '{value}';
+    get hostElement() { return getElement(this); }
+    showHelperSlot = false;
+    showErrorSlot = false;
+    /** If true, remove transition times. */
+    isPressing = false;
+    /** When using `multiple`, decide which control is being pressed. */
+    pressControl = null;
+    /** Label for the range input. */
+    label;
+    /** Label for the range end input. */
+    labelEnd;
+    /** Set a helpertext for the range input. */
+    helpertext = null;
+    /**
+     * Add markers. This will also render a `datalist` element with `options`.
+     * Omitting the `label` for a marker will use the `value` as label instead.
+     * Set `label` to `null` or `''` to hide it completely.
+     */
+    markers = [];
+    /** Set a prefix for the range/input field. */
+    textPrefix = null;
+    /** Set a suffix for the range/input field. */
+    textSuffix = null;
+    /** Set an icon for the range/input field. */
+    icon = null;
+    /** Set an icon at the end of the range or for the second input field when using `multiple`. */
+    iconEnd = null;
+    /** Set a custom HTML id. */
+    pnId = this.id;
+    /** Set a custom HTML id. */
+    pnIdEnd = this.idEnd;
+    /** The range input name. @category HTML Attributes */
+    name;
+    /** The range input name. @category HTML Attributes */
+    nameEnd;
+    /** The range input min value. @category HTML Attributes */
+    min = 0;
+    /** The range input max value. @category HTML Attributes */
+    max = 100;
+    /** The range input value. @category HTML Attributes */
+    value = 0;
+    /** The range end input value. @category HTML Attributes */
+    valueEnd = 0;
+    /** Set a step value for the range input. @category HTML Attributes */
+    step = '';
+    /**
+     * Allow multiple values to be selected
+     * @category Features
+     */
+    multiple = false;
+    /**
+     * Display an input for the range value.
+     * Allowing the user to type or use the slider to set the value.
+     * @category Features
+     */
+    input = false;
+    /** Hide the tooltip. @category Features */
+    tooltipHide = false;
+    /**
+     * Range tooltip label template. Default is simply the value of the range input.
+     * @example
+     * // Show a suffixed '%' in the tooltip with '{value} %'.
+     * <pn-range tooltip-template="{value} %" value="25" />
+     * @category Features
+     */
+    tooltipTemplate = this.tooltipDefault;
+    /** Disable the range input. @category State */
+    disabled = false;
+    /** Set an error message for the range input. @category State */
+    error = null;
+    /** Set the error visual for the range input, same as `error`, but without a message. @category State */
+    invalid = false;
+    handleValue() {
+        if (this.multiple && this.value > this.valueEnd) {
+            this.valueEnd = this.value;
+        }
+        const percentage = this.calcPercentage(this.value);
+        requestAnimationFrame(() => this.hostElement.style.setProperty('--pn-range-progress', `${percentage}%`));
+    }
+    handleValueEnd() {
+        if (!this.multiple)
+            return;
+        if (this.value > this.valueEnd) {
+            this.value = this.valueEnd;
+        }
+        const percentage = this.calcPercentage(this.valueEnd);
+        requestAnimationFrame(() => this.hostElement.style.setProperty('--pn-range-progress-end', `${percentage}%`));
+    }
+    handleId() {
+        this.idHelpertext = `${this.pnId}-helpertext`;
+        this.idError = `${this.pnId}-error`;
+        this.idDatalist = `${this.pnId}-data`;
+    }
+    handleMessage() {
+        this.checkSlottedHelper();
+        this.checkSlottedError();
+    }
+    handleMultiple() {
+        this.isPressing = true;
+        requestAnimationFrame(() => (this.isPressing = false));
+    }
+    /** Emitted as the user makes any changes to the range/input value. */
+    rangeSelected;
+    connectedCallback() {
+        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
+    tooltipDirection(isEnd = false) {
+        if (this.multiple) {
+            const isSmall = this.hostElement.offsetWidth < 384;
+            const percentageStart = this.calcPercentage(this.value);
+            const percentageEnd = this.calcPercentage(this.valueEnd);
+            const isClose = Math.abs(percentageEnd - percentageStart) < (isSmall ? 30 : 20);
+            if (isClose)
+                return isEnd ? 'left' : 'right';
+            if (!isEnd && this.value <= this.min + (this.max - this.min) * (isSmall ? 0.3 : 0.2))
+                return 'left';
+            if (isEnd && this.valueEnd > this.max * (isSmall ? 0.75 : 0.8))
+                return 'right';
+        }
+        return 'center';
+    }
+    isActiveMarker(value) {
+        const isActive = this.value === value;
+        if (this.multiple)
+            return isActive || this.valueEnd === value;
+        return isActive;
+    }
+    hasHelperText() {
+        return this.helpertext?.length > 0 || this.showHelperSlot;
+    }
+    /** If any `error` text is present, either via prop/slot. */
+    hasErrorMessage() {
+        return this.error?.length > 0 || this.showErrorSlot;
+    }
+    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
+    hasError() {
+        return this.hasErrorMessage() || this.invalid || this.showErrorSlot;
+    }
+    checkSlottedHelper() {
+        const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
+        this.showHelperSlot = !!slottedHelper?.length;
+    }
+    checkSlottedError() {
+        const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
+        this.showErrorSlot = !!slottedError?.length;
+    }
+    calcPercentage(value) {
+        return ((value - this.min) / (this.max - this.min)) * 100;
+    }
+    setValue(value, isEnd = false) {
+        const isWithinMinMax = value >= this.min && value <= this.max;
+        if (!isWithinMinMax)
+            return;
+        if (isEnd)
+            this.valueEnd = value;
+        else
+            this.value = value;
+        const range = Number((this.valueEnd - this.value).toPrecision(4));
+        const percentageStart = this.calcPercentage(this.value);
+        const percentageEnd = this.calcPercentage(this.valueEnd);
+        const percentage = Number((this.multiple ? percentageEnd - percentageStart : percentageStart).toPrecision(4));
+        const rangeDetail = this.multiple
+            ? {
+                valueEnd: this.valueEnd,
+                difference: range,
+            }
+            : {};
+        this.rangeSelected.emit({
+            value: this.value,
+            percentage,
+            ...rangeDetail,
+        });
+    }
+    getTooltipLabel(isEnd = false) {
+        return this.tooltipTemplate?.replace(this.tooltipDefault, (isEnd ? this.valueEnd : this.value)?.toString());
+    }
+    getMarkerLabel({ value, label }) {
+        if (label === null || label === '')
+            return '';
+        return (label || value).toString();
+    }
+    ariaDescribedby() {
+        const list = [];
+        if (this.hasErrorMessage())
+            list.push(this.idError);
+        else if (this.hasHelperText())
+            list.push(this.idHelpertext);
+        return list.length ? list.join(' ') : null;
+    }
+    handleChange(event) {
+        const target = event.target;
+        const { id, valueAsNumber, type } = target;
+        const numberValue = isNaN(valueAsNumber) ? 0 : valueAsNumber;
+        const isEnd = type === 'range' ? id === this.pnIdEnd : id === this.idInputEnd;
+        this.setValue(numberValue, isEnd);
+    }
+    setListeners(isOverlay = false) {
+        const inputEvent = (event) => (isOverlay ? this.handleOverlayInput(event) : this.handleChange(event));
+        return {
+            onInput: inputEvent,
+            onTouchStart: (e) => this.handlePress(e),
+            onTouchEnd: () => this.handleRelease(),
+            onMouseDown: (e) => this.handlePress(e),
+            onMouseUp: () => this.handleRelease(),
+        };
+    }
+    handlePress(event) {
+        this.rangeTimeout = setTimeout(() => {
+            this.isPressing = true;
+        }, event.type === 'touchstart' ? 200 : 100);
+    }
+    handleRelease() {
+        clearTimeout(this.rangeTimeout);
+        this.isPressing = false;
+        this.pressControl = null;
+    }
+    commonAttrs() {
+        return {
+            step: this.step,
+            min: this.min,
+            max: this.max,
+            list: this.markers?.length ? this.idDatalist : null,
+            disabled: this.disabled,
+        };
+    }
+    renderPrefix() {
+        if (this.input)
+            return this.renderNumberInput();
+        if (this.icon)
+            return h("pn-icon", { class: "pn-range-icon", icon: this.icon });
+        if (this.textPrefix && !this.input)
+            return h("span", { class: "pn-range-text" }, this.textPrefix);
+        return null;
+    }
+    renderSuffix() {
+        if (this.input && this.multiple)
+            return this.renderNumberInput(true);
+        if (this.iconEnd)
+            return h("pn-icon", { class: "pn-range-icon", icon: this.iconEnd });
+        if (this.textSuffix && !this.input)
+            return h("span", { class: "pn-range-text" }, this.textSuffix);
+        return null;
+    }
+    renderNumberInput(isEnd = false) {
+        const label = isEnd ? this.labelEnd : this.label;
+        const value = isEnd ? this.valueEnd : this.value;
+        const idInput = isEnd ? this.idInputEnd : this.idInput;
+        return (h("pn-input", { class: "pn-range-field", label: label, type: "number", name: `${isEnd ? this.nameEnd : this.name}-input`, ...this.commonAttrs(), icon: isEnd ? this.iconEnd : this.icon, textPrefix: this.textPrefix, textSuffix: this.textSuffix, value: value?.toString(), inputid: idInput, invalid: this.hasError(), "data-single": !this.multiple, ...this.setListeners() }));
+    }
+    renderRangeInput(isEnd = false) {
+        const id = isEnd ? this.pnIdEnd : this.pnId;
+        const value = isEnd ? this.valueEnd : this.value;
+        const customTooltip = this.tooltipDefault !== this.tooltipTemplate;
+        return (h("input", { id: id, class: "pn-range-input", type: "range", name: isEnd ? this.nameEnd : this.name, ...this.commonAttrs(), value: value, "aria-valuetext": customTooltip ? this.getTooltipLabel(isEnd) : null, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError().toString(), "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, ...this.setListeners() }));
+    }
+    renderTooltip(isEnd = false) {
+        return (h("div", { class: "pn-range-thumb", "data-start": isEnd ? null : true, "data-end": isEnd ? true : null, "data-align": this.tooltipDirection(isEnd), "aria-hidden": "true" }, !this.tooltipHide && (h("div", { class: "pn-range-tooltip" }, h("span", { class: "pn-range-tooltip-label" }, this.getTooltipLabel(isEnd))))));
+    }
+    handleOverlayInput(event) {
+        const target = event.target;
+        const { valueAsNumber } = target;
+        const numberValue = isNaN(valueAsNumber) ? 0 : valueAsNumber;
+        if (!this.pressControl) {
+            this.pressControl = Math.abs(numberValue - this.value) <= Math.abs(numberValue - this.valueEnd) ? 'start' : 'end';
+        }
+        this.setValue(numberValue, this.pressControl === 'end');
+    }
+    render() {
+        return (h(Host, { key: '0a79e6606d509d701b83da4a2c3d3636c7d73979' }, h("div", { key: 'f56834025691e3c67544e4ddb2b54630bfa46095', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: 'e39b5994468fc6f50ad479c5b3875732a29a4761', class: "pn-range-header", "data-input": this.input }, h("label", { key: '724a16a534343838e392480163517afc7bd15b6f', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: 'ebd27275aeb63e79df5f2f0f5f4d1f5d118cd137' }, this.label)), this.multiple && (h("label", { key: 'aebe4d8b124cc5a905b61624566dc4db52f1f4a0', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: '7a90745fadc39d81bac3083d562c9d7fe47c1d00' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '28fcae728841f246bfac7ae488710459d468e4f2', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '87dae83eea2f5e4eb5318759767dfabc74a0f128' }, this.renderRangeInput(true), h("input", { key: 'aa461034dfe94c78310409f87c1efaa0a4fb0a4d', id: this.idInputHidden, type: "range", class: "pn-range-overlay-input", ...this.commonAttrs(), "aria-invalid": this.hasError().toString(), hidden: true, tabIndex: -1, ...this.setListeners(true) }))), h("div", { key: '3282ce9652ff135db9e5bfa533af1c7fd1d29adb', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '1692843e137439b5bdedb5728104a3312d26ffc2', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (h("li", { class: "pn-range-markers-item", "data-min": this.calcPercentage(value) === this.min, "data-max": this.calcPercentage(value) === this.max, style: { '--pn-range-marker-position': `${this.calcPercentage(value)}%` } }, h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (h("datalist", { key: 'ed0ea3e4e284366f3e4eaf94245a1a71ccf20a17', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: '3dd6afe5a2f142b1df60fdd87c0c23f942d83a71', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '048797709bcb778a9c1f2d71ae1ee1b1eef665f0' }, this.helpertext), h("slot", { key: '2fabbbc425b643917415653f831126e9d7319efd', name: "helpertext" })), h("p", { key: '65061b23a86338d7490bbfc2759308c1326f5d4e', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: 'a0be85a1e70ac6b07bb1447b6c8e9a04c72aade0' }, this.error), h("slot", { key: 'c13f70e99ec137373be96fa9d5a06b0266808fcf', name: "error" })))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValue": 1
+            }],
+        "valueEnd": [{
+                "handleValueEnd": 1
+            }],
+        "pnId": [{
+                "handleId": 1
+            }],
+        "helpertext": [{
+                "handleMessage": 1
+            }],
+        "error": [{
+                "handleMessage": 0
+            }],
+        "multiple": [{
+                "handleMultiple": 0
+            }]
+    }; }
+};
+PnRange.style = pnRangeCss();
+
+export { PnRange as pn_range };

package/umd/modules/@postnord/web-components/esm/pn-read-only-button.entry.js

@@ -2,10 +2,10 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { awaitTopbar } from './index.js';
 
-const pnReadOnlyButtonCss = "pn-read-only-button{display:inline-block}pn-read-only-button button{cursor:not-allowed;color:#5e554a;background:#f3f2f2;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}pn-read-only-button button pn-icon{flex-shrink:0;margin:0 0 0 0.5em}pn-read-only-button button .button-tooltip{position:absolute;bottom:calc(100% + 0.35em);left:50%;background:#a70707;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:5;max-width:min(95vw, 40em);transform:translateX(-50%);width:max-content;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-read-only-button button .button-tooltip{transition-duration:0s;transition-delay:0s}}pn-read-only-button button[data-tooltip-open] .button-tooltip{opacity:1}pn-read-only-button button.pn-button-left-icon{flex-direction:row-reverse}pn-read-only-button button.pn-button-left-icon pn-icon{margin:0 0.5em 0 0}pn-read-only-button button.icon-only{width:3em;min-width:0}pn-read-only-button button.icon-only pn-icon{margin:0}pn-read-only-button button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-read-only-button button.icon-only span.read-only-icon-only{display:none}pn-read-only-button button.pn-button-small{font-size:0.875em;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}pn-read-only-button button.pn-button-small pn-icon .pn-icon-svg{height:1.28em;width:1.28em}";
+const pnReadOnlyButtonCss = () => `${transformTag("pn-read-only-button")}{display:inline-block}${transformTag("pn-read-only-button")} button{cursor:not-allowed;color:#5e554a;background:#f3f2f2;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}${transformTag("pn-read-only-button")} button ${transformTag("pn-icon")}{flex-shrink:0;margin:0 0 0 0.5em}${transformTag("pn-read-only-button")} button .button-tooltip{position:absolute;bottom:calc(100% + 0.35em);left:50%;background:#a70707;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:5;max-width:min(95vw, 40em);transform:translateX(-50%);width:max-content;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-read-only-button")} button .button-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-read-only-button")} button[data-tooltip-open] .button-tooltip{opacity:1}${transformTag("pn-read-only-button")} button.pn-button-left-icon{flex-direction:row-reverse}${transformTag("pn-read-only-button")} button.pn-button-left-icon ${transformTag("pn-icon")}{margin:0 0.5em 0 0}${transformTag("pn-read-only-button")} button.icon-only{width:3em;min-width:0}${transformTag("pn-read-only-button")} button.icon-only ${transformTag("pn-icon")}{margin:0}${transformTag("pn-read-only-button")} button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}${transformTag("pn-read-only-button")} button.icon-only span.read-only-icon-only{display:none}${transformTag("pn-read-only-button")} button.pn-button-small{font-size:0.875em;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}${transformTag("pn-read-only-button")} button.pn-button-small ${transformTag("pn-icon")} .pn-icon-svg{height:1.28em;width:1.28em}`;
 
 const PnReadOnlyButton = class {
     constructor(hostRef) {
@@ -107,11 +107,14 @@ const PnReadOnlyButton = class {
         return (h(Host, { key: '050c438370b6d5c86e327be03d206880f2f572e5', class: "pn-read-only-button" }, h("button", { key: 'a6cd36bc8f112d3ff7cb6ea65768339dd789813c', class: this.getClassNames(), "data-tooltip-open": this.tooltipOpen, disabled: true }, !this.iconOnly && h("slot", { key: '94979edec979712e7ecc1f683dcf2f32a7889f48' }), this.icon && h("pn-icon", { key: '14012e9a320767c993fab05c614c659f188783e3', icon: this.icon, color: "gray700" }), this.iconOnly && (h("span", { key: '4f75372bf50ec504504ecbd808d3bf1e746c1418', class: "read-only-icon-only" }, h("slot", { key: 'a12bca58ae471729cbb2442b1791bb4ee16c7db5' }))), h("div", { key: '3ec03d46dc7c44229112a90b0df8ea4737a09e79', class: "button-tooltip" }, this.readOnlyModeText))));
     }
     static get watchers() { return {
-        "language": ["setReadOnlyModeText"],
-        "tooltipOpen": ["openHandler"]
+        "language": [{
+                "setReadOnlyModeText": 0
+            }],
+        "tooltipOpen": [{
+                "openHandler": 0
+            }]
     }; }
 };
-PnReadOnlyButton.style = pnReadOnlyButtonCss;
+PnReadOnlyButton.style = pnReadOnlyButtonCss();
 
 export { PnReadOnlyButton as pn_read_only_button };
-//# sourceMappingURL=pn-read-only-button.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-search-field.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4, awaitTopbar, en } from './index.js';
 
 const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';
@@ -28,7 +28,7 @@ const translations = {
     },
 };
 
-const pnSearchFieldCss = "pn-search-field{display:inline-block}pn-search-field .pn-search-field{display:flex;gap:0.5em}pn-search-field .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}pn-search-field .pn-search-field-input{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}pn-search-field .pn-search-field-input:-webkit-autofill,pn-search-field .pn-search-field-input:-webkit-autofill:hover,pn-search-field .pn-search-field-input:-webkit-autofill:focus,pn-search-field .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-search-field .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-search-field .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-search-field .pn-search-field-input{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-search-field .pn-search-field-input{transition-duration:0s;transition-delay:0s}}pn-search-field .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}pn-search-field .pn-search-field-input:hover{border-color:#005d92}pn-search-field .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-search-field .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}pn-search-field .pn-search-field-input::-webkit-search-cancel-button{display:none}pn-search-field .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}pn-search-field .pn-search-field-inline pn-button{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-search-field .pn-search-field-inline pn-button{transition-duration:0s;transition-delay:0s}}pn-search-field .pn-search-field-inline pn-button{transition-delay:0.2s;transform:translate(100%, -50%)}pn-search-field .pn-search-field-submit{white-space:nowrap}pn-search-field .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}pn-search-field .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}pn-search-field .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}pn-search-field .pn-search-field[data-inline][data-loading] pn-button{transform:translate(100%, -50%)}pn-search-field .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}pn-search-field .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}pn-search-field .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}pn-search-field .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}pn-search-field .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}pn-search-field .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}pn-search-field .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}";
+const pnSearchFieldCss = () => `${transformTag("pn-search-field")}{display:inline-block}${transformTag("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${transformTag("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${transformTag("pn-search-field")} .pn-search-field-input{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill,${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-search-field")} .pn-search-field-input{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${transformTag("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${transformTag("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${transformTag("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${transformTag("pn-search-field")} .pn-search-field-inline ${transformTag("pn-button")}{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-search-field")} .pn-search-field-inline ${transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-search-field")} .pn-search-field-inline ${transformTag("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${transformTag("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${transformTag("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] ${transformTag("pn-button")}{transform:translate(100%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`;
 
 const PnSearchField = class {
     constructor(hostRef) {
@@ -135,10 +135,9 @@ const PnSearchField = class {
         return this.searchSimple() ? 'outlined' : null;
     }
     render() {
-        return (h(Host, { key: '7f985d338f688bf46f4a7ad89ed8e1c170b7fd29' }, h("div", { key: '8f319bf3a49229e92aa3121cb54cd04a95c7cd52', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: '3945d9f1af74e96e1a1b5215c871305bf904df8d', class: "pn-search-field-container" }, h("input", { key: '38f31fa59f1b3aab1f92eed92305b7f546f78ad7', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: '30b5989b74c1719d69290de7a4068a3ed6ca5343', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: '0da6ac29d750d249f89117d19f6219bb5218798d', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: '936270430558ae499232c2832117d74293b04551', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: '80a58e2465d79288fd666644d62e02e4c4eb6387', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: '3732ec3ff2a5a29fc4a9ffa6bc65a55e76f0af5e', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
+        return (h(Host, { key: 'd6e76c457e99f83b3d47a4b0c951168c6b5fc086' }, h("div", { key: '203055449e80dfd9bf19d94f340e4081d358a7b5', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: 'bb86197c5f7e88c162eac8c899557bb5941ed6c6', class: "pn-search-field-container" }, h("input", { key: 'ba497f96d2afd9554e842010edf8cef656a994fc', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: 'c8961cb53609cc7d290b528af7e23a363a348833', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: '45197b884106304f5e3a4dc66b58333d8b79d4cb', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: 'f681e4d08d66c9658f09b9cd947b70e4cd0f0837', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: '8498355d5d49c64755c58ce4d599938e3e25c84b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
     }
 };
-PnSearchField.style = pnSearchFieldCss;
+PnSearchField.style = pnSearchFieldCss();
 
 export { PnSearchField as pn_search_field };
-//# sourceMappingURL=pn-search-field.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-segment.entry.js

@@ -2,10 +2,10 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
 import { uuidv4 } from './index.js';
 
-const pnSegmentCss = "pn-segment{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}pn-segment:last-of-type{margin-right:0}pn-segment .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}pn-segment .pn-segment:disabled{cursor:not-allowed}pn-segment .pn-segment:disabled~.pn-segment-label{color:#5e554a}pn-segment .pn-segment:disabled~.pn-segment-label pn-icon .pn-icon-svg path{fill:#5e554a}pn-segment .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}";
+const pnSegmentCss = () => `${transformTag("pn-segment")}{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${transformTag("pn-segment")}:last-of-type{margin-right:0}${transformTag("pn-segment")} .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}${transformTag("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${transformTag("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${transformTag("pn-segment")} .pn-segment:disabled~.pn-segment-label ${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}${transformTag("pn-segment")} .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}`;
 
 const PnSegment = class {
     constructor(hostRef) {
@@ -34,10 +34,9 @@ const PnSegment = class {
         this.segmentHover.emit(mouse);
     }
     render() {
-        return (h(Host, { key: '3f61494ee25b399c6d2e3fb950d9186438e7c859', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '5175e4e6019c1ceace85072fa3f47e24ca269931', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '14a91ed4c8bd59f4a9c7e6f91648e06899fa0db7', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: '4904d303c05f409392e8d26e70a636dfe4a23408', icon: this.icon, color: "blue700" }), h("span", { key: 'f8a7e4beba96e34e5fbb9ebc661ffa7f2c6547b8', class: "pn-segment-text" }, this.label, h("slot", { key: '12c6641cdf21364f9f9c9c72424bf012ddd068b6' })))));
+        return (h(Host, { key: 'b98bb414de20d14fc2ee9d087be192d5f17bf1f9', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '0b6117d85bb547c249a402cc26494355f3dc3e95', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f', icon: this.icon, color: "blue700" }), h("span", { key: '8ec12157e0ca6f62772743e06beefc677f9f9f87', class: "pn-segment-text" }, this.label, h("slot", { key: '6342dfb17f71cae05318a3c19a19fdb6e46bb157' })))));
     }
 };
-PnSegment.style = pnSegmentCss;
+PnSegment.style = pnSegmentCss();
 
 export { PnSegment as pn_segment };
-//# sourceMappingURL=pn-segment.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-segmented-control.entry.js

@@ -2,11 +2,11 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
 import { a as arrow_left } from './arrow_left-CQaMdITw.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
 
-const pnSegmentedControlCss = "pn-segmented-control{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-segmented-control{transition-duration:0s;transition-delay:0s}}pn-segmented-control{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-segmented-control:focus-within,pn-segmented-control:active{outline-color:#005d92}pn-segmented-control .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}pn-segmented-control .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}pn-segmented-control .pn-segmented-control::-webkit-scrollbar{display:none}pn-segmented-control .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-segmented-control .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}pn-segmented-control .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}pn-segmented-control .pn-sc-arrows svg{width:1.5em}pn-segmented-control .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-segmented-control .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}";
+const pnSegmentedControlCss = () => `${transformTag("pn-segmented-control")}{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-segmented-control")}:focus-within,${transformTag("pn-segmented-control")}:active{outline-color:#005d92}${transformTag("pn-segmented-control")} .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}${transformTag("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${transformTag("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${transformTag("pn-segmented-control")} .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}${transformTag("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${transformTag("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${transformTag("pn-segmented-control")} .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,${transformTag("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`;
 
 const PnSegmentedControl = class {
     constructor(hostRef) {
@@ -52,7 +52,7 @@ const PnSegmentedControl = class {
         this.setSegments();
     }
     setSegments() {
-        this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
+        this.segments = Array.from(this.hostElement.querySelectorAll(`${transformTag("pn-segment")}`));
         this.setActiveSegment();
     }
     setActiveSegment() {
@@ -75,7 +75,7 @@ const PnSegmentedControl = class {
         const chip = hover ? this.hoverBg : this.activeBg;
         requestAnimationFrame(() => {
             const el = element || this.segments.find(({ value }) => value === this.value);
-            const elSegment = el?.closest('pn-segment');
+            const elSegment = el?.closest(`${transformTag("pn-segment")}`);
             if (!elSegment)
                 return;
             const elRect = elSegment.getBoundingClientRect();
@@ -125,13 +125,14 @@ const PnSegmentedControl = class {
     }
     /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
     render() {
-        return (h(Host, { key: '4e889faaf020b421deb8dc7cd2098276be295ece' }, h("div", { key: '037434c996a2348db45822da3e0126b8369eb7db', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: 'c1cbcacd7ce972bf3277773e1e7ede8f4f3cd1f1' }), h("div", { key: 'daa1770e104291b3d1b3b1a849ad265e4bac0f22', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '7688b1d54b70c83d4c4b022d6565ca5fadbdd901', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '85dc1eb4913ed8643ee73defa93f2af45fba26f9', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '41994d5ac539b8731ebdda7f4c515787e27cf509', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '200bac894954a3c112b7268c40fc3ff244bad7d3', icon: arrow_left })), h("button", { key: '7c3af4b8f1b99f91e1a4d0fb75b2efbcb06842da', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'f149acb5aa30bcb9b8cead4e87e5a9cedd8d473b', icon: arrow_right })))));
+        return (h(Host, { key: '4ff48c9a0556397894d55f7d3dc0a266349ef8fc' }, h("div", { key: '82ef8456eda4724b55705f9a662577eb172df89d', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '9b2949cf6e7976795543f6f8a67c126bee02e59d' }), h("div", { key: '42ab10791de502f48aac3a16766425b435c1c52e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '24060bf183aabe485b7ff66bbad9b44a7704df12', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '31790d3f9fccd0c4242b5584ba2ff6ee32df4297', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '8ffa7498550bc0f052b77f5297b349b84efbccb8', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '89d4ee843ade39e7264e08c31ad83c2dd32f7931', icon: arrow_left })), h("button", { key: '8f1707b0e2debb84451210d03187b51eba3f2897', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee', icon: arrow_right })))));
     }
     static get watchers() { return {
-        "value": ["valueHandler"]
+        "value": [{
+                "valueHandler": 0
+            }]
     }; }
 };
-PnSegmentedControl.style = pnSegmentedControlCss;
+PnSegmentedControl.style = pnSegmentedControlCss();
 
 export { PnSegmentedControl as pn_segmented_control };
-//# sourceMappingURL=pn-segmented-control.entry.js.map

package/umd/modules/@postnord/web-components/esm/pn-select.entry.js

@@ -2,12 +2,12 @@
  * Built with Stencil
  * By PostNord.
  */
-import { r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-BNA0ko5y.js';
+import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { c as chevron_down } from './chevron_down-DrYFvs2M.js';
 import { uuidv4 } from './index.js';
 
-const pnSelectCss = "pn-select{display:inline-block}pn-select .pn-select-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-select .pn-select-label{transition-duration:0s;transition-delay:0s}}pn-select .pn-select-label>span{font-size:0.875em}pn-select .pn-select-input{position:relative}pn-select .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}pn-select .pn-select-icon[data-default]{right:0.75em}pn-select .pn-select-icon[data-custom]{left:0.75em}pn-select .pn-select-icon[data-custom]~.pn-select-element{padding-left:3em}pn-select .pn-select-icon[data-error]{right:3em}pn-select .pn-select-icon[data-error]~.pn-select-element{padding-right:5em}pn-select .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-select .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}pn-select .pn-select-element{cursor:pointer;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}pn-select .pn-select-element:-webkit-autofill,pn-select .pn-select-element:-webkit-autofill:hover,pn-select .pn-select-element:-webkit-autofill:focus,pn-select .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-select .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-select .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-select .pn-select-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-select .pn-select-element{transition-duration:0s;transition-delay:0s}}pn-select .pn-select-element::placeholder{color:#5e554a;font-weight:normal}pn-select .pn-select-element:hover{border-color:#005d92}pn-select .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-select .pn-select-element{width:100%;padding-right:3em;-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-select .pn-select-element:open+pn-icon .pn-icon-svg{transform:rotate(180deg)}pn-select .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-select .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}pn-select .pn-select-element:hover{color:#2d2013;background-color:#effbff}pn-select .pn-select-no-results{margin:0;padding:0.75em}pn-select .pn-select-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-select .pn-select-helper[role=alert]{color:#a70707}pn-select .pn-select[data-error]>.pn-select-label{color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}";
+const pnSelectCss = () => `${transformTag("pn-select")}{display:inline-block}${transformTag("pn-select")} .pn-select-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-select")} .pn-select-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${transformTag("pn-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-select")} .pn-select-label>span{font-size:0.875em}${transformTag("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${transformTag("pn-select")} .pn-select-input{position:relative}${transformTag("pn-select")} .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}${transformTag("pn-select")} .pn-select-icon[data-default]{right:1em}${transformTag("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${transformTag("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${transformTag("pn-select")} .pn-select-icon[data-error]{right:3.5em}${transformTag("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${transformTag("pn-select")} .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-select")} .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}${transformTag("pn-select")} .pn-select-element{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3em 0.75em 0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-select")} .pn-select-element:-webkit-autofill,${transformTag("pn-select")} .pn-select-element:-webkit-autofill:hover,${transformTag("pn-select")} .pn-select-element:-webkit-autofill:focus,${transformTag("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-select")} .pn-select-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${transformTag("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${transformTag("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-select")} .pn-select-element:hover{border-color:#005d92}${transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-select")} .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}${transformTag("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${transformTag("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${transformTag("pn-select")} .pn-select-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-select")} .pn-select-helper[role=alert]{color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`;
 
 const PnSelect = class {
     constructor(hostRef) {
@@ -26,6 +26,8 @@ const PnSelect = class {
     selectId = this.id;
     /** Display an icon to the left of the select input. */
     icon;
+    /** Use the compact label variant. @since v7.21.0 */
+    compact = false;
     /** HTML select name. @category HTML */
     name;
     /** HTML form name. @category HTML */
@@ -64,11 +66,15 @@ const PnSelect = class {
     hasMessage() {
         return !!this.helpertext || !!this.error;
     }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("label", { htmlFor: this.selectId, class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, h("span", null, this.label)));
+    }
     render() {
-        return (h(Host, { key: 'cc46eb6dc84af1a7361eb2463c0f8d563de06f8b' }, h("div", { key: 'a9b47a287a04a3a21eab78559818816256f91954', class: "pn-select", "data-error": this.hasError() }, this.label && (h("label", { key: '55584541034164f768da54dc7c633202dd0c238b', htmlFor: this.selectId, class: "pn-select-label" }, h("span", { key: '9a459ff694994d43426ecbc911f762d839152934' }, this.label))), h("div", { key: '3326540dbc18b5dd12033aa988b67c5104df5141', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '3e25d5a9f5b0dc2713ded1c71ae2608075a57e6d', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: '8faf236ff6ca25b6423b213a409ee6cdacae6083', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: '4f4f1ae8b084c5f264c43243f181bbf4986191ec', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, h("slot", { key: '2c78bb1de994082d336fe115a87ed50a1f3c9c12' })), h("pn-icon", { key: 'fe6b3bd85c20f3c55634c4b5c67cf45022fea677', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '4c4c1b78ec41e11e71c794b22e1b53ea28b1a407', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '8d6c3bbef9787dece5b4d21ba412ee17c0a3afdf' }, this.error || this.helpertext))))));
+        return (h(Host, { key: '59c8dba79bf97e55cdf0bb63242bab619729e182' }, h("div", { key: '08ee599ef117480e98506e6594bb798931dade58', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), h("div", { key: '4416853996ab6849ef128f3abd7d53861e3d6bbe', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '8af79d8f23f6e7b9853130ca77d2ac00f264afe7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: 'ad674903cc8cefb0864b425a4f6bd6540b5164f3', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: 'fc84d7571dc544030770dd8ea88c87e3a1d58bc5', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', "data-compact": this.compact, ref: el => (this.select = el) }, h("slot", { key: '1cca39bd8954649b1a558876d31509c3be0f4763' })), this.compact && this.renderLabel(), h("pn-icon", { key: 'a5efd954143ce705d806a1a7a1b37b09714d1657', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '21397e124292c51dfe3113b526626059dc9b513d' }, this.error || this.helpertext))))));
     }
 };
-PnSelect.style = pnSelectCss;
+PnSelect.style = pnSelectCss();
 
 export { PnSelect as pn_select };
-//# sourceMappingURL=pn-select.entry.js.map