@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-progress-stepper2.js

@@ -2,146 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, e as en, k as awaitTopbar } from './helpers.js';
-
-const translations = {
-    STEP: {
-        da: 'Trin',
-        en: 'Step',
-        fi: 'Vaihe',
-        no: 'Trinn',
-        sv: 'Steg',
-    },
-};
-
-const pnProgressStepperCss = "pn-progress-stepper{display:block}pn-progress-stepper .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}pn-progress-stepper .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-value{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}pn-progress-stepper .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-dot{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-dot{animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}";
-
-const PnProgressStepper = /*@__PURE__*/ proxyCustomElement(class PnProgressStepper extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-progress-stepper-${uuidv4()}`;
-    minStep = 1;
-    maxStep = 7;
-    get hostElement() { return this; }
-    builtInLabel;
-    /** Percentage calculated with currentStep / totalSteps. */
-    progressValue = 0;
-    /** Set custom label for the stepper, default label is "Step". */
-    label = '';
-    /** Set a custom HTML id on the progress stepper element to associate progress bar with label. */
-    progressStepperId = '';
-    /**
-     * Set the language manually, only use this prop if the pnTopbar is not loaded.
-     * Will not overwrite the custom `label` prop if used.
-     **/
-    language = null;
-    /** Set total amount of steps, maximum allowed is `7`. @category Steps */
-    totalSteps = this.maxStep;
-    /** The current step of the progress stepper. @category Steps */
-    currentStep = this.minStep;
-    /** You can add a custom optional string to the label if you need a name for the current step. @category Steps */
-    stepName;
-    /**
-     * Use the dots visual, instead of the bar.
-     *
-     * This will hide the label from view, but is still accessible to screenreaders.
-     *
-     * @since v7.16.0
-     * @category Visual
-     */
-    dots = false;
-    stepWatchers(a, b, c) {
-        if (c === 'currentStep')
-            this.validate(a, 'currentStep');
-        if (c === 'totalSteps')
-            this.validate(b, 'totalSteps');
-        this.calculateProgress();
-    }
-    watchLanguage() {
-        this.builtInLabel = translations.STEP[this.language || en];
-    }
-    async componentWillLoad() {
-        this.watchLanguage();
-        this.validate(this.currentStep, 'currentStep');
-        this.validate(this.totalSteps, 'totalSteps');
-        this.calculateProgress();
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    validate(step, prop) {
-        const componentName = this.hostElement.localName;
-        if (step < this.minStep) {
-            console.warn(`${componentName}: The ${prop} ${step} is below the minimum allowed steps of ${this.minStep}. ${prop} will default to ${this.minStep}.`);
-            this[prop] = this.minStep;
-        }
-        if (prop === 'currentStep' && step > this.totalSteps) {
-            console.warn(`${componentName}: The ${prop} ${step} is above totalSteps ${this.totalSteps}, ${prop} will default to ${this.totalSteps}.`);
-            this[prop] = this.totalSteps;
-        }
-        if (step > this.maxStep) {
-            console.warn(`${componentName}: The ${prop} ${step} is above the maximum allowed steps of ${this.maxStep}. ${prop} will default to ${this.maxStep}.`);
-            this[prop] = this.maxStep;
-        }
-    }
-    calculateProgress() {
-        try {
-            this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);
-            this.hostElement.style.setProperty('--pn-progress-value', `${this.progressValue}%`);
-        }
-        catch (error) {
-            console.error(`${this.hostElement.localName}:`, error.message);
-        }
-    }
-    getLabel() {
-        return this.label || this.builtInLabel;
-    }
-    getId() {
-        return this.progressStepperId || this.id;
-    }
-    render() {
-        return (h(Host, { key: 'a93457e5c8ec35858e7f15e45578feb67ec37f4e' }, h("label", { key: '86a36ba455f7433f072a9b38b8af09c9fda45fc4', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: 'eeb9163062bd19b03c394fe6c936440f040dd246' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf' }, " - ", this.stepName)), h("progress", { key: '81658eb2942d0b1712bbbb4e22904d0b4c3a5229', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
-    }
-    static get watchers() { return {
-        "currentStep": ["stepWatchers"],
-        "totalSteps": ["stepWatchers"],
-        "language": ["watchLanguage"]
-    }; }
-    static get style() { return pnProgressStepperCss; }
-}, [768, "pn-progress-stepper", {
-        "label": [1],
-        "progressStepperId": [1, "progress-stepper-id"],
-        "language": [1],
-        "totalSteps": [1026, "total-steps"],
-        "currentStep": [1026, "current-step"],
-        "stepName": [1, "step-name"],
-        "dots": [4],
-        "builtInLabel": [32],
-        "progressValue": [32]
-    }, undefined, {
-        "currentStep": ["stepWatchers"],
-        "totalSteps": ["stepWatchers"],
-        "language": ["watchLanguage"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-progress-stepper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-progress-stepper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnProgressStepper);
-            }
-            break;
-    } });
-}
-
-export { PnProgressStepper as P, defineCustomElement as d };
-//# sourceMappingURL=pn-progress-stepper2.js.map
-
-//# sourceMappingURL=pn-progress-stepper2.js.map
+import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as r,Host as a}from"@stencil/core/internal/client";import{u as o,e as i,k as p}from"./helpers.js";const n={STEP:{da:"Trin",en:"Step",fi:"Vaihe",no:"Trinn",sv:"Steg"}},l=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}id=`pn-progress-stepper-${o()}`;minStep=1;maxStep=7;get hostElement(){return this}builtInLabel;progressValue=0;label="";progressStepperId="";language=null;totalSteps=this.maxStep;currentStep=this.minStep;stepName;dots=!1;stepWatchers(e,s,t){"currentStep"===t&&this.validate(e,"currentStep"),"totalSteps"===t&&this.validate(s,"totalSteps"),this.calculateProgress()}watchLanguage(){this.builtInLabel=n.STEP[this.language||i]}async componentWillLoad(){this.watchLanguage(),this.validate(this.currentStep,"currentStep"),this.validate(this.totalSteps,"totalSteps"),this.calculateProgress(),null===this.language&&await p(this.hostElement)}validate(e,s){const t=this.hostElement.localName;e<this.minStep&&(console.warn(`${t}: The ${s} ${e} is below the minimum allowed steps of ${this.minStep}. ${s} will default to ${this.minStep}.`),this[s]=this.minStep),"currentStep"===s&&e>this.totalSteps&&(console.warn(`${t}: The ${s} ${e} is above totalSteps ${this.totalSteps}, ${s} will default to ${this.totalSteps}.`),this[s]=this.totalSteps),e>this.maxStep&&(console.warn(`${t}: The ${s} ${e} is above the maximum allowed steps of ${this.maxStep}. ${s} will default to ${this.maxStep}.`),this[s]=this.maxStep)}calculateProgress(){try{this.progressValue=Math.floor(this.currentStep/this.totalSteps*100),this.hostElement.style.setProperty("--pn-progress-value",`${this.progressValue}%`)}catch(e){console.error(`${this.hostElement.localName}:`,e.message)}}getLabel(){return this.label||this.builtInLabel}getId(){return this.progressStepperId||this.id}render(){return r(a,{key:"a93457e5c8ec35858e7f15e45578feb67ec37f4e"},r("label",{key:"86a36ba455f7433f072a9b38b8af09c9fda45fc4",htmlFor:this.getId(),class:"pn-progress-label"+(this.dots?" pn-progress-sr-only":"")},r("span",{key:"eeb9163062bd19b03c394fe6c936440f040dd246"},this.getLabel()," ",this.currentStep,"/",this.totalSteps),this.stepName&&r("span",{key:"f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf"}," - ",this.stepName)),r("progress",{key:"81658eb2942d0b1712bbbb4e22904d0b4c3a5229",id:this.getId(),class:"pn-progress-sr-only",max:"100",value:this.progressValue}),this.dots?r("div",{class:"pn-progress-dots","aria-hidden":"true"},[...Array(this.totalSteps)].map(((e,s)=>r("div",{class:"pn-progress-dot","data-active":s+1<=this.currentStep,key:s})))):r("div",{"aria-hidden":"true",class:"pn-progress"},r("div",{class:"pn-progress-value","data-full":this.currentStep===this.totalSteps})))}static get watchers(){return{currentStep:[{stepWatchers:0}],totalSteps:[{stepWatchers:0}],language:[{watchLanguage:0}]}}static get style(){return`${e("pn-progress-stepper")}{display:block}${e("pn-progress-stepper")} .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}${e("pn-progress-stepper")} .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}${e("pn-progress-stepper")} .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-progress-stepper")} .pn-progress-value{transition-duration:0s;transition-delay:0s}}${e("pn-progress-stepper")} .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}${e("pn-progress-stepper")} .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}${e("pn-progress-stepper")} .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-progress-stepper")} .pn-progress-dot{transition-duration:0s;transition-delay:0s}}${e("pn-progress-stepper")} .pn-progress-dot{animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${e("pn-progress-stepper")} .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${e("pn-progress-stepper")} .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}`}},[512,"pn-progress-stepper",{label:[1],progressStepperId:[1,"progress-stepper-id"],language:[1],totalSteps:[1026,"total-steps"],currentStep:[1026,"current-step"],stepName:[1,"step-name"],dots:[4],builtInLabel:[32],progressValue:[32]},void 0,{currentStep:[{stepWatchers:0}],totalSteps:[{stepWatchers:0}],language:[{watchLanguage:0}]}]);function c(){"undefined"!=typeof customElements&&["pn-progress-stepper"].forEach((s=>{"pn-progress-stepper"===s&&(customElements.get(e(e(s)))||customElements.define(e(e(s)),l))}))}export{l as P,c as d}

package/umd/modules/@postnord/web-components/components/pn-radio-button.js

@@ -2,178 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, Mixin, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4 } from './helpers.js';
-import { a as animateHeightFactory } from './index2.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-
-const pnRadioButtonCss = "pn-radio-button{position:relative;display:inline-block}pn-radio-button .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}pn-radio-button .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}pn-radio-button .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}pn-radio-button .pn-radio-helpertext:last-child{margin:0}pn-radio-button .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}pn-radio-button .pn-radio-button{display:flex;gap:0.75em;padding:0}pn-radio-button .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-radio-button .pn-radio-outer{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-radio-button .pn-radio-inner{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-radio-button .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio[data-tile] .pn-radio-outer{outline:none}pn-radio-button .pn-radio[data-invalid]{border-color:#a70707}pn-radio-button .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}pn-radio-button .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}pn-radio-button .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}pn-radio-button .pn-radio-container[data-open]{visibility:visible;overflow:unset}pn-radio-button .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}pn-radio-button .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}pn-radio-button .pn-radio>pn-icon{margin-left:0.75em}pn-radio-button>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}pn-radio-button>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}pn-radio-button>input[type=radio][data-expand]{top:1em;left:1em}pn-radio-button>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}pn-radio-button>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}pn-radio-button>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}pn-radio-button>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}pn-radio-button>input[type=radio]:disabled{pointer-events:none}pn-radio-button>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}";
-
-const PnRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class PnRadioButton extends Mixin(animateHeightFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-radio-${uuidv4()}`;
-    idHelpertext = `${this.id}-helpertext`;
-    contentArea;
-    radioInput;
-    get hostElement() { return this; }
-    /** The radio label */
-    label;
-    /** This adds an optional helpertext under the label. */
-    helpertext;
-    /** This will be emitted on change and input events. */
-    value;
-    /** The name of the radio group. */
-    name;
-    /** Check the radio. */
-    checked = false;
-    /** A unique HTML ID for the radio. */
-    radioid = this.id;
-    /** Set the radio as required. @category State */
-    required = false;
-    /** Disable the radio. @category State */
-    disabled = false;
-    /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio. @category State */
-    invalid = false;
-    /**
-     * Turn the radio into a clickable tile. A border and padding is added.
-     *
-     * **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.
-     * An exception is made when using the `tile` + `expand` props together,
-     * which allows you to use interactive elements.
-     *
-     * @category Tile
-     */
-    tile = false;
-    /**
-     * Allow the radio to control the slot area "content".
-     * When checked, the area is visible, when unchecked, the area is hidden.
-     *
-     * The prop `tile` must be used at the same time.
-     * @see {@link tile}
-     * @since v7.17.0
-     * @category Tile
-     */
-    expand = false;
-    /**
-     * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
-     * @see {@link tile}
-     * @category Tile
-     */
-    icon = null;
-    handleId() {
-        this.idHelpertext = `${this.radioid}-helpertext`;
-    }
-    handleChecked(checked) {
-        this.checked = checked ?? this.radioInput.checked;
-        if (!this.displayContent())
-            return;
-        if (this.checked) {
-            this.openDropdown(this.contentArea);
-            this.uncheckOtherRadios();
-        }
-        else {
-            this.closeDropdown(this.contentArea);
-        }
-    }
-    handleChange(e) {
-        const target = e.target;
-        const { name } = target;
-        const isSameRadioGroup = name === this.name;
-        const isSameRadio = target === this.radioInput && target.checked;
-        /**
-         * Since content can be nested inside of this component,
-         * double check that the event is coming from this specific radio.
-         */
-        if (isSameRadioGroup)
-            this.checked = isSameRadio;
-    }
-    componentWillLoad() {
-        this.handleId();
-    }
-    componentDidLoad() {
-        requestAnimationFrame(() => this.displayContent() && this.checked && this.openDropdown(this.contentArea));
-    }
-    uncheckOtherRadios() {
-        if (!this.name)
-            return;
-        const selector = `pn-radio-button[name="${this.name}"]`;
-        const list = document.querySelectorAll(selector);
-        const radios = Array.from(list);
-        radios.forEach(radio => radio !== this.hostElement && (radio.checked = false));
-    }
-    isInvalid() {
-        return this.invalid && !this.disabled;
-    }
-    displayText() {
-        return this.displayLabel() || this.displayHelpertext();
-    }
-    displayLabel() {
-        return !!this.label;
-    }
-    displayHelpertext() {
-        return !!(this.helpertext || this.hostElement.querySelector('[slot="helpertext"]')?.textContent);
-    }
-    displayIcon() {
-        return this.tile && !!this.icon;
-    }
-    displayContent() {
-        return this.tile && this.expand;
-    }
-    render() {
-        return (h(Host, { key: 'd9dbe33df6c0844b6c747285996a6a2886ef4fbd' }, h("input", { key: '131acc3ca2b53a29e32243ad4910d57847d35a76', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: 'e63874e20e8cd6e3ba25314e2777723fc1d09a9b', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '6af4d9f83ecae41248fd142d8a1dfdbee1e86fd3', class: "pn-radio-button" }, h("div", { key: '8ea822e3b27a36c79795ad51231f306c9feeb439', class: "pn-radio-outer" }, h("div", { key: 'ea69cef2c0276512a0917852681ee07b696e0e69', class: "pn-radio-inner" }))), h("p", { key: 'ac0e72d695546b716c061b57ca246f2304ebc29c', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'af6e10051b6df5eb25a4c705e7934fb7efd0927a', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '3daec2ddd84dbc6ffb0ab22c2d8dcaa29c7dbfc5', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '09037832097ae5ad1f5d02e71e179d990d7cf3c0', name: "helpertext" })), h("slot", { key: 'd77fefcc1fed9e5386360501d666ff7f4adc7204' })), this.displayIcon() && h("pn-icon", { key: 'b8c8294fb100ad921278b378e317c95d2702806b', icon: this.icon, color: "gray900" }), h("div", { key: '8eac1b2c621bb8fad7cb89bd226ae0ce13842fc6', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'f12c0a60214a8d0adf93e587e909994ad06800e9', class: "pn-radio-area" }, h("slot", { key: 'a67c2b5bee945a044aa5910544fa77f1034985ca', name: "content" }))))));
-    }
-    static get watchers() { return {
-        "radioid": ["handleId"],
-        "checked": ["handleChecked"]
-    }; }
-    static get style() { return pnRadioButtonCss; }
-}, [772, "pn-radio-button", {
-        "label": [1],
-        "helpertext": [1],
-        "value": [513],
-        "name": [1],
-        "checked": [1028],
-        "radioid": [1],
-        "required": [4],
-        "disabled": [4],
-        "invalid": [4],
-        "tile": [4],
-        "expand": [4],
-        "icon": [1],
-        "isClosing": [32],
-        "isExpanding": [32]
-    }, [[8, "change", "handleChange"]], {
-        "radioid": ["handleId"],
-        "checked": ["handleChecked"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-radio-button", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-radio-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnRadioButton$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnRadioButton = PnRadioButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnRadioButton, defineCustomElement };
-//# sourceMappingURL=pn-radio-button.js.map
-
-//# sourceMappingURL=pn-radio-button.js.map
+import{transformTag as i,proxyCustomElement as o,Mixin as t,h as e,Host as n}from"@stencil/core/internal/client";import{u as a}from"./helpers.js";import{a as r}from"./index2.js";import{d}from"./pn-icon2.js";const p=o(class extends(t(r)){constructor(i){super(!1),!1!==i&&this.__registerHost()}id="pn-radio-"+a();idHelpertext=this.id+"-helpertext";contentArea;radioInput;get hostElement(){return this}label;helpertext;value;name;checked=!1;radioid=this.id;required=!1;disabled=!1;invalid=!1;tile=!1;expand=!1;icon=null;handleId(){this.idHelpertext=this.radioid+"-helpertext"}handleChecked(i){this.checked=i??this.radioInput.checked,this.displayContent()&&(this.checked?(this.openDropdown(this.contentArea),this.uncheckOtherRadios()):this.closeDropdown(this.contentArea))}handleChange(i){const o=i.target,{name:t}=o;t===this.name&&(this.checked=o===this.radioInput&&o.checked)}componentWillLoad(){this.handleId()}componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}uncheckOtherRadios(){if(!this.name)return;const i=document.querySelectorAll(`pn-radio-button[name="${this.name}"]`);Array.from(i).forEach((i=>i!==this.hostElement&&(i.checked=!1)))}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}render(){return e(n,{key:"f386b0de0377d3dbe6891a2396d32b91a808d53c"},e("input",{key:"189e352a198275f4dbd733425166e9cb2ed417ef",type:"radio",id:this.radioid,class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,ref:i=>this.radioInput=i}),e("div",{key:"710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},e("div",{key:"2d6bd1b03ee6565b88773c60a529ae2c5be89ffd",class:"pn-radio-button"},e("div",{key:"8b15488acb65132b2498d361d320bb804af793de",class:"pn-radio-outer"},e("div",{key:"64ebbe9b4d18f158a43bb5d82116ef4b19325ca1",class:"pn-radio-inner"}))),e("p",{key:"3b5ed02eeae60cff45b3b4999055c6d853a6c22f",class:"pn-radio-content",hidden:!this.displayText()},e("label",{key:"d5f3c5f59630407a45cc48fcb26e60fe7419c73c",htmlFor:this.radioid,class:"pn-radio-label",hidden:!this.displayLabel()},this.label),e("span",{key:"d4329417f178f6e7bcff365a1c051ebaa51b0447",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,e("slot",{key:"defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2",name:"helpertext"})),e("slot",{key:"edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7"})),this.displayIcon()&&e("pn-icon",{key:"b9cd0ab07c691020efe39e8bb6ec39d02d5be826",icon:this.icon,color:"gray900"}),e("div",{key:"89655e67304498950e11c0388fddbbde350239a1",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},e("div",{key:"eeebaf7c0b1fe8327810faec62877888cb6ff95d",class:"pn-radio-area"},e("slot",{key:"c997ee7e8ef719ff4b830df30a414cea637a54ff",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],checked:[{handleChecked:0}]}}static get style(){return`${i("pn-radio-button")}{position:relative;display:inline-block}${i("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${i("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}${i("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${i("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${i("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${i("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${i("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${i("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${i("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${i("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${i("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${i("pn-radio-button")} .pn-radio>${i("pn-icon")}{margin-left:0.75em}${i("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${i("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${i("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${i("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${i("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`}},[772,"pn-radio-button",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],radioid:[1],required:[4],disabled:[4],invalid:[4],tile:[4],expand:[4],icon:[1],isClosing:[32],isExpanding:[32]},[[8,"change","handleChange"]],{radioid:[{handleId:0}],checked:[{handleChecked:0}]}]),l=p,c=function(){"undefined"!=typeof customElements&&["pn-radio-button","pn-icon"].forEach((o=>{switch(o){case"pn-radio-button":customElements.get(i(i(o)))||customElements.define(i(i(o)),p);break;case"pn-icon":customElements.get(i(i(o)))||d()}}))};export{l as PnRadioButton,c as defineCustomElement}

package/umd/modules/@postnord/web-components/components/pn-range.d.ts

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

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

@@ -0,0 +1,5 @@
+/*!
+ * Built with Stencil
+ * By PostNord.
+ */
+import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as a,forceUpdate as r,h as i,Host as s,Fragment as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as g}from"./pn-input2.js";import{d as h}from"./pn-spinner2.js";const u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.rangeSelected=a(this,"rangeSelected",7)}id="pn-range-"+p();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 this}showHelperSlot=!1;showErrorSlot=!1;isPressing=!1;pressControl=null;label;labelEnd;helpertext=null;markers=[];textPrefix=null;textSuffix=null;icon=null;iconEnd=null;pnId=this.id;pnIdEnd=this.idEnd;name;nameEnd;min=0;max=100;value=0;valueEnd=0;step="";multiple=!1;input=!1;tooltipHide=!1;tooltipTemplate=this.tooltipDefault;disabled=!1;error=null;invalid=!1;handleValue(){this.multiple&&this.value>this.valueEnd&&(this.valueEnd=this.value);const e=this.calcPercentage(this.value);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress",e+"%")))}handleValueEnd(){if(!this.multiple)return;this.value>this.valueEnd&&(this.value=this.valueEnd);const e=this.calcPercentage(this.valueEnd);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress-end",e+"%")))}handleId(){this.idHelpertext=this.pnId+"-helpertext",this.idError=this.pnId+"-error",this.idDatalist=this.pnId+"-data"}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}handleMultiple(){this.isPressing=!0,requestAnimationFrame((()=>this.isPressing=!1))}rangeSelected;connectedCallback(){this.mo=new MutationObserver((()=>r(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}tooltipDirection(e=!1){if(this.multiple){const n=this.hostElement.offsetWidth<384,t=this.calcPercentage(this.value),a=this.calcPercentage(this.valueEnd);if(Math.abs(a-t)<(n?30:20))return e?"left":"right";if(!e&&this.value<=this.min+(this.max-this.min)*(n?.3:.2))return"left";if(e&&this.valueEnd>this.max*(n?.75:.8))return"right"}return"center"}isActiveMarker(e){const n=this.value===e;return this.multiple?n||this.valueEnd===e:n}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}checkSlottedHelper(){const e=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!e?.length}checkSlottedError(){const e=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!e?.length}calcPercentage(e){return(e-this.min)/(this.max-this.min)*100}setValue(e,n=!1){if(!(e>=this.min&&e<=this.max))return;n?this.valueEnd=e:this.value=e;const t=Number((this.valueEnd-this.value).toPrecision(4)),a=this.calcPercentage(this.value),r=this.calcPercentage(this.valueEnd),i=Number((this.multiple?r-a:a).toPrecision(4));this.rangeSelected.emit({value:this.value,percentage:i,...this.multiple?{valueEnd:this.valueEnd,difference:t}:{}})}getTooltipLabel(e=!1){return this.tooltipTemplate?.replace(this.tooltipDefault,(e?this.valueEnd:this.value)?.toString())}getMarkerLabel({value:e,label:n}){return null===n||""===n?"":""+(n||e)}ariaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelpertext),e.length?e.join(" "):null}handleChange(e){const n=e.target,{id:t,valueAsNumber:a,type:r}=n;this.setValue(isNaN(a)?0:a,"range"===r?t===this.pnIdEnd:t===this.idInputEnd)}setListeners(e=!1){return{onInput:n=>e?this.handleOverlayInput(n):this.handleChange(n),onTouchStart:e=>this.handlePress(e),onTouchEnd:()=>this.handleRelease(),onMouseDown:e=>this.handlePress(e),onMouseUp:()=>this.handleRelease()}}handlePress(e){this.rangeTimeout=setTimeout((()=>{this.isPressing=!0}),"touchstart"===e.type?200:100)}handleRelease(){clearTimeout(this.rangeTimeout),this.isPressing=!1,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(){return this.input?this.renderNumberInput():this.icon?i("pn-icon",{class:"pn-range-icon",icon:this.icon}):this.textPrefix&&!this.input?i("span",{class:"pn-range-text"},this.textPrefix):null}renderSuffix(){return this.input&&this.multiple?this.renderNumberInput(!0):this.iconEnd?i("pn-icon",{class:"pn-range-icon",icon:this.iconEnd}):this.textSuffix&&!this.input?i("span",{class:"pn-range-text"},this.textSuffix):null}renderNumberInput(e=!1){const n=e?this.valueEnd:this.value,t=e?this.idInputEnd:this.idInput;return i("pn-input",{class:"pn-range-field",label:e?this.labelEnd:this.label,type:"number",name:(e?this.nameEnd:this.name)+"-input",...this.commonAttrs(),icon:e?this.iconEnd:this.icon,textPrefix:this.textPrefix,textSuffix:this.textSuffix,value:n?.toString(),inputid:t,invalid:this.hasError(),"data-single":!this.multiple,...this.setListeners()})}renderRangeInput(e=!1){const n=e?this.valueEnd:this.value,t=this.tooltipDefault!==this.tooltipTemplate;return i("input",{id:e?this.pnIdEnd:this.pnId,class:"pn-range-input",type:"range",name:e?this.nameEnd:this.name,...this.commonAttrs(),value:n,"aria-valuetext":t?this.getTooltipLabel(e):null,"aria-describedby":this.ariaDescribedby(),"aria-invalid":""+this.hasError(),"data-start":!e||null,"data-end":!!e||null,...this.setListeners()})}renderTooltip(e=!1){return i("div",{class:"pn-range-thumb","data-start":!e||null,"data-end":!!e||null,"data-align":this.tooltipDirection(e),"aria-hidden":"true"},!this.tooltipHide&&i("div",{class:"pn-range-tooltip"},i("span",{class:"pn-range-tooltip-label"},this.getTooltipLabel(e))))}handleOverlayInput(e){const n=e.target,{valueAsNumber:t}=n,a=isNaN(t)?0:t;this.pressControl||(this.pressControl=Math.abs(a-this.value)<=Math.abs(a-this.valueEnd)?"start":"end"),this.setValue(a,"end"===this.pressControl)}render(){return i(s,{key:"0a79e6606d509d701b83da4a2c3d3636c7d73979"},i("div",{key:"f56834025691e3c67544e4ddb2b54630bfa46095",class:"pn-range","data-markers":!!this.markers?.length,"data-input":this.input},i("div",{key:"e39b5994468fc6f50ad479c5b3875732a29a4761",class:"pn-range-header","data-input":this.input},i("label",{key:"724a16a534343838e392480163517afc7bd15b6f",htmlFor:this.pnId,class:"pn-range-label"},i("span",{key:"ebd27275aeb63e79df5f2f0f5f4d1f5d118cd137"},this.label)),this.multiple&&i("label",{key:"aebe4d8b124cc5a905b61624566dc4db52f1f4a0",htmlFor:this.pnIdEnd,class:"pn-range-label"},i("span",{key:"7a90745fadc39d81bac3083d562c9d7fe47c1d00"},this.labelEnd))),this.renderPrefix(),i("div",{key:"28fcae728841f246bfac7ae488710459d468e4f2",class:"pn-range-group","data-pressing":this.isPressing},this.renderRangeInput(),this.multiple&&i(o,{key:"87dae83eea2f5e4eb5318759767dfabc74a0f128"},this.renderRangeInput(!0),i("input",{key:"aa461034dfe94c78310409f87c1efaa0a4fb0a4d",id:this.idInputHidden,type:"range",class:"pn-range-overlay-input",...this.commonAttrs(),"aria-invalid":""+this.hasError(),hidden:!0,tabIndex:-1,...this.setListeners(!0)})),i("div",{key:"3282ce9652ff135db9e5bfa533af1c7fd1d29adb",class:"pn-range-track","data-multiple":this.multiple,"aria-hidden":"true"}),this.renderTooltip(),this.multiple&&this.renderTooltip(!0),!!this.markers?.length&&i("ul",{key:"1692843e137439b5bdedb5728104a3312d26ffc2","aria-hidden":"true",class:"pn-range-markers"},this.markers.map((({label:e,value:n})=>i("li",{class:"pn-range-markers-item","data-min":this.calcPercentage(n)===this.min,"data-max":this.calcPercentage(n)===this.max,style:{"--pn-range-marker-position":this.calcPercentage(n)+"%"}},i("span",{class:"pn-range-markers-label","data-active":this.isActiveMarker(n)},this.getMarkerLabel({value:n,label:e}))))))),this.renderSuffix(),!!this.markers?.length&&i("datalist",{key:"ed0ea3e4e284366f3e4eaf94245a1a71ccf20a17",id:this.idDatalist},this.markers.map((({label:e,value:n})=>i("option",{value:n,label:null===e?null:e})))),i("p",{key:"3dd6afe5a2f142b1df60fdd87c0c23f942d83a71",id:this.idHelpertext,class:"pn-range-message",hidden:!this.hasHelperText()||this.hasError()},i("span",{key:"048797709bcb778a9c1f2d71ae1ee1b1eef665f0"},this.helpertext),i("slot",{key:"2fabbbc425b643917415653f831126e9d7319efd",name:"helpertext"})),i("p",{key:"65061b23a86338d7490bbfc2759308c1326f5d4e",id:this.idError,class:"pn-range-message pn-range-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"a0be85a1e70ac6b07bb1447b6c8e9a04c72aade0"},this.error),i("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}]}}static get style(){return`${e("pn-range")}{display:block}${e("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){${e("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}${e("pn-range")} .pn-range>${e("pn-input")}{flex:1 1 100%}${e("pn-range")} .pn-range>${e("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${e("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${e("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${e("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${e("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){${e("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-label>span{font-size:0.875em}${e("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%}${e("pn-range")} .pn-range-message[hidden],${e("pn-range")} .pn-range-message>span[hidden]{display:none}${e("pn-range")} .pn-range-error{color:#a70707}${e("pn-range")} .pn-range-field{flex:0 0 auto}${e("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}${e("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${e("pn-range")} .pn-range-group[data-pressing] *,${e("pn-range")} .pn-range-group[data-pressing] *:before,${e("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${e("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${e("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}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${e("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${e("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${e("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}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("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}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("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}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${e("pn-range")} .pn-range-track:before,${e("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){${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-track:after{display:none}${e("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${e("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){${e("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("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){${e("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${e("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){${e("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${e("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${e("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){${e("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${e("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}${e("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${e("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${e("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}${e("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){${e("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`}},[772,"pn-range",{label:[1],labelEnd:[1,"label-end"],helpertext:[1],markers:[16],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],icon:[1],iconEnd:[1,"icon-end"],pnId:[1,"pn-id"],pnIdEnd:[1,"pn-id-end"],name:[1],nameEnd:[1,"name-end"],min:[2],max:[2],value:[1538],valueEnd:[1538,"value-end"],step:[1],multiple:[4],input:[4],tooltipHide:[4,"tooltip-hide"],tooltipTemplate:[1,"tooltip-template"],disabled:[4],error:[1],invalid:[4],showHelperSlot:[32],showErrorSlot:[32],isPressing:[32],pressControl:[32]},void 0,{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}]),c=u,m=function(){"undefined"!=typeof customElements&&["pn-range","pn-button","pn-icon","pn-input","pn-spinner"].forEach((n=>{switch(n){case"pn-range":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||l();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-input":customElements.get(e(e(n)))||g();break;case"pn-spinner":customElements.get(e(e(n)))||h()}}))};export{c as PnRange,m as defineCustomElement}

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

@@ -2,156 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { k as awaitTopbar } from './helpers.js';
-import { d as defineCustomElement$2 } from './pn-icon2.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 PnReadOnlyButton$1 = /*@__PURE__*/ proxyCustomElement(class PnReadOnlyButton extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get hostElement() { return this; }
-    readOnlyModeText = '';
-    tooltipOpen = false;
-    tooltipEl;
-    tooltipDx;
-    /** The SVG content of the icon you want. */
-    icon;
-    /** Icon on the left side instead of on the right. */
-    leftIcon = false;
-    /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip. */
-    iconOnly = false;
-    /** Smaller button. */
-    small = false;
-    /** Set the language manually. */
-    language = null;
-    setReadOnlyModeText() {
-        const translations = {
-            en: 'You cannot complete this action while in read only mode',
-            sv: 'Du kan inte utföra denna handling i skrivskyddat läge',
-            da: 'Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand',
-            fi: 'Et voi suorittaa tätä toimintoa vain luku -tilassa',
-            no: 'Du kan ikke utføre denne handlingen i skrivebeskyttet modus',
-        };
-        this.readOnlyModeText = translations[this.language];
-    }
-    async componentWillLoad() {
-        this.setReadOnlyModeText();
-        if (this.language)
-            return;
-        await awaitTopbar(this.hostElement);
-    }
-    componentDidLoad() {
-        this.initTooltip();
-    }
-    /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
-    openHandler() {
-        if (this.tooltipOpen) {
-            this.checkTooltipPosition();
-            return;
-        }
-        this.setTooltipOffset();
-    }
-    initTooltip() {
-        this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
-        const tooltipAnchor = this.hostElement;
-        const openEvents = ['mouseenter', 'focus'];
-        const closeEvents = ['mouseleave', 'blur'];
-        const eventListeners = [...openEvents, ...closeEvents];
-        eventListeners.forEach(e => {
-            tooltipAnchor.addEventListener(e, event => {
-                // Should open?
-                if (openEvents.includes(event.type)) {
-                    this.tooltipOpen = true;
-                    return;
-                }
-                // Should close?
-                if (closeEvents.includes(event.type)) {
-                    this.tooltipOpen = false;
-                }
-            });
-        });
-    }
-    setTooltipOffset() {
-        this.tooltipEl.style.transform = `translateX(-50%) translateX(${this.tooltipDx}px)`;
-    }
-    checkTooltipPosition() {
-        this.tooltipEl.style.transform = 'translateX(-50%)';
-        requestAnimationFrame(() => {
-            const { x, right } = this.tooltipEl.getBoundingClientRect();
-            const extraMargin = 8;
-            this.tooltipDx = '0';
-            this.tooltipEl.style.transform = '';
-            if (x < 0)
-                this.tooltipDx = `${x * -1 + extraMargin}`;
-            if (right > window.innerWidth)
-                this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
-            requestAnimationFrame(() => {
-                this.setTooltipOffset();
-            });
-        });
-    }
-    /* ---------------------------------------/TOOLTIP--------------------------------------- */
-    getClassNames() {
-        let classNames = 'pn-button ';
-        if (this.small)
-            classNames += 'pn-button-small ';
-        if (this.leftIcon)
-            classNames += 'pn-button-left-icon ';
-        if (this.iconOnly)
-            classNames += 'icon-only ';
-        return classNames;
-    }
-    render() {
-        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"]
-    }; }
-    static get style() { return pnReadOnlyButtonCss; }
-}, [772, "pn-read-only-button", {
-        "icon": [1],
-        "leftIcon": [4, "left-icon"],
-        "iconOnly": [4, "icon-only"],
-        "small": [4],
-        "language": [1],
-        "readOnlyModeText": [32],
-        "tooltipOpen": [32],
-        "tooltipEl": [32],
-        "tooltipDx": [32]
-    }, undefined, {
-        "language": ["setReadOnlyModeText"],
-        "tooltipOpen": ["openHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-read-only-button", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-read-only-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnReadOnlyButton$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnReadOnlyButton = PnReadOnlyButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnReadOnlyButton, defineCustomElement };
-//# sourceMappingURL=pn-read-only-button.js.map
-
-//# sourceMappingURL=pn-read-only-button.js.map
+import{transformTag as t,proxyCustomElement as n,HTMLElement as o,h as e,Host as i}from"@stencil/core/internal/client";import{k as a}from"./helpers.js";import{d as s}from"./pn-icon2.js";const l=n(class extends o{constructor(t){super(),!1!==t&&this.__registerHost()}get hostElement(){return this}readOnlyModeText="";tooltipOpen=!1;tooltipEl;tooltipDx;icon;leftIcon=!1;iconOnly=!1;small=!1;language=null;setReadOnlyModeText(){this.readOnlyModeText={en:"You cannot complete this action while in read only mode",sv:"Du kan inte utföra denna handling i skrivskyddat läge",da:"Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand",fi:"Et voi suorittaa tätä toimintoa vain luku -tilassa",no:"Du kan ikke utføre denne handlingen i skrivebeskyttet modus"}[this.language]}async componentWillLoad(){this.setReadOnlyModeText(),this.language||await a(this.hostElement)}componentDidLoad(){this.initTooltip()}openHandler(){this.tooltipOpen?this.checkTooltipPosition():this.setTooltipOffset()}initTooltip(){this.tooltipEl=this.hostElement.querySelector(".button-tooltip");const t=this.hostElement,n=["mouseenter","focus"],o=["mouseleave","blur"];[...n,...o].forEach((e=>{t.addEventListener(e,(t=>{n.includes(t.type)?this.tooltipOpen=!0:o.includes(t.type)&&(this.tooltipOpen=!1)}))}))}setTooltipOffset(){this.tooltipEl.style.transform=`translateX(-50%) translateX(${this.tooltipDx}px)`}checkTooltipPosition(){this.tooltipEl.style.transform="translateX(-50%)",requestAnimationFrame((()=>{const{x:t,right:n}=this.tooltipEl.getBoundingClientRect();this.tooltipDx="0",this.tooltipEl.style.transform="",t<0&&(this.tooltipDx=""+(-1*t+8)),n>window.innerWidth&&(this.tooltipDx=""+(window.innerWidth-n-8)),requestAnimationFrame((()=>{this.setTooltipOffset()}))}))}getClassNames(){let t="pn-button ";return this.small&&(t+="pn-button-small "),this.leftIcon&&(t+="pn-button-left-icon "),this.iconOnly&&(t+="icon-only "),t}render(){return e(i,{key:"050c438370b6d5c86e327be03d206880f2f572e5",class:"pn-read-only-button"},e("button",{key:"a6cd36bc8f112d3ff7cb6ea65768339dd789813c",class:this.getClassNames(),"data-tooltip-open":this.tooltipOpen,disabled:!0},!this.iconOnly&&e("slot",{key:"94979edec979712e7ecc1f683dcf2f32a7889f48"}),this.icon&&e("pn-icon",{key:"14012e9a320767c993fab05c614c659f188783e3",icon:this.icon,color:"gray700"}),this.iconOnly&&e("span",{key:"4f75372bf50ec504504ecbd808d3bf1e746c1418",class:"read-only-icon-only"},e("slot",{key:"a12bca58ae471729cbb2442b1791bb4ee16c7db5"})),e("div",{key:"3ec03d46dc7c44229112a90b0df8ea4737a09e79",class:"button-tooltip"},this.readOnlyModeText)))}static get watchers(){return{language:[{setReadOnlyModeText:0}],tooltipOpen:[{openHandler:0}]}}static get style(){return`${t("pn-read-only-button")}{display:inline-block}${t("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}${t("pn-read-only-button")} button ${t("pn-icon")}{flex-shrink:0;margin:0 0 0 0.5em}${t("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){${t("pn-read-only-button")} button .button-tooltip{transition-duration:0s;transition-delay:0s}}${t("pn-read-only-button")} button[data-tooltip-open] .button-tooltip{opacity:1}${t("pn-read-only-button")} button.pn-button-left-icon{flex-direction:row-reverse}${t("pn-read-only-button")} button.pn-button-left-icon ${t("pn-icon")}{margin:0 0.5em 0 0}${t("pn-read-only-button")} button.icon-only{width:3em;min-width:0}${t("pn-read-only-button")} button.icon-only ${t("pn-icon")}{margin:0}${t("pn-read-only-button")} button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}${t("pn-read-only-button")} button.icon-only span.read-only-icon-only{display:none}${t("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}${t("pn-read-only-button")} button.pn-button-small ${t("pn-icon")} .pn-icon-svg{height:1.28em;width:1.28em}`}},[772,"pn-read-only-button",{icon:[1],leftIcon:[4,"left-icon"],iconOnly:[4,"icon-only"],small:[4],language:[1],readOnlyModeText:[32],tooltipOpen:[32],tooltipEl:[32],tooltipDx:[32]},void 0,{language:[{setReadOnlyModeText:0}],tooltipOpen:[{openHandler:0}]}]),r=l,d=function(){"undefined"!=typeof customElements&&["pn-read-only-button","pn-icon"].forEach((n=>{switch(n){case"pn-read-only-button":customElements.get(t(t(n)))||customElements.define(t(t(n)),l);break;case"pn-icon":customElements.get(t(t(n)))||s()}}))};export{r as PnReadOnlyButton,d as defineCustomElement}

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

@@ -2,12 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { P as PnSearchField$1, d as defineCustomElement$1 } from './pn-search-field2.js';
-
-const PnSearchField = PnSearchField$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnSearchField, defineCustomElement };
-//# sourceMappingURL=pn-search-field.js.map
-
-//# sourceMappingURL=pn-search-field.js.map
+import{P as s,d as o}from"./pn-search-field2.js";const r=s,a=o;export{r as PnSearchField,a as defineCustomElement}