@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,195 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, k as awaitTopbar, e as en } from './helpers.js';
-import { d as defineCustomElement$3 } from './pn-button2.js';
-import { d as defineCustomElement$2 } from './pn-icon2.js';
-import { d as defineCustomElement$1 } from './pn-spinner2.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>';
-const close_small = icon$1;
-
-const icon = '<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="M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z" clip-rule="evenodd"/></svg>';
-const search = icon;
-
-const translations = {
-    SEARCH: {
-        en: 'Search',
-        sv: 'Sök',
-        da: 'Søg',
-        fi: 'Hae',
-        no: 'Søk',
-    },
-    CLEAR: {
-        en: 'Clear search field',
-        sv: 'Rensa sökfältet',
-        da: 'Ryd søgefeltet',
-        fi: 'Tyhjennä hakukenttä',
-        no: 'Tøm søkefeltet',
-    },
-};
-
-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 PnSearchField = /*@__PURE__*/ proxyCustomElement(class PnSearchField extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.search = createEvent(this, "search", 7);
-        this.update = createEvent(this, "update", 7);
-    }
-    id = `pn-search-field-${uuidv4()}`;
-    searchElement;
-    get hostElement() { return this; }
-    /** Provide an aria-label for the search field. */
-    label;
-    /** Set the value of the search field. */
-    value = '';
-    /** Set a search field placeholder. This is no replacement for a `label`. */
-    placeholder;
-    /** Set a unique ID for the search input. */
-    searchid = this.id;
-    /** Set HTML name of the search input. */
-    name;
-    /** Allow the browser to autocomplete the search field. */
-    autocomplete;
-    /** Point to a datalist element with this id. */
-    list;
-    /** Override the pntopbar language. */
-    language = null;
-    /** Disable the search field. @category State */
-    disabled = false;
-    /** Set the search field as required. @category State */
-    required = false;
-    /** Display loading animation. @category State */
-    loading = false;
-    /**
-     * Button variant changes the visual of the search field:
-     * - `''` Standard with a blue button.
-     * - `simple` | ~~`icon`~~ with simple white icon only button.
-     * - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.
-     * - `jumbo` with a larger blue icon only button.
-     *
-     * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
-     *
-     * @category Button
-     */
-    button = '';
-    /** Label for the button element. @category Button */
-    buttonLabel;
-    /** Add a tooltip to the search button. @category Button */
-    buttonTooltip;
-    /**
-     * Light instead of dark search button.
-     *
-     * @deprecated The color is now set automatically based on the button prop.
-     * @category Button
-     */
-    buttonLight = false;
-    /** This is emitted on search submission both with keyboard and mouse. */
-    search;
-    /** Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
-    update;
-    inputHandler() {
-        this.update.emit(this.value);
-    }
-    async componentWillLoad() {
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en];
-    }
-    emitSearch({ click, button }) {
-        if (click?.type === 'click' || (button?.type === 'keydown' && button?.key === 'Enter')) {
-            // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
-            const event = click || button;
-            event.preventDefault();
-            this.search.emit(this.value);
-        }
-    }
-    setVal(e) {
-        this.value = e.target.value;
-    }
-    clearInput() {
-        this.value = '';
-        this.update.emit(this.value);
-        this.hostElement.querySelector('input').focus();
-    }
-    getButtonLabel() {
-        return this.buttonLabel || this.translate('SEARCH');
-    }
-    /** icon === simple-search */
-    searchSimple() {
-        return this.button === 'icon' || this.button === 'simple';
-    }
-    /** none | icon-inline  === auto-search */
-    searchAuto() {
-        return this.button === 'icon-inline' || this.button === 'none' || this.button === 'auto';
-    }
-    searchJumbo() {
-        return this.button === 'jumbo';
-    }
-    searchButtonAppearance() {
-        return this.searchSimple() ? 'light' : null;
-    }
-    searchButtonVariant() {
-        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 }) })))));
-    }
-    static get style() { return pnSearchFieldCss; }
-}, [768, "pn-search-field", {
-        "label": [1],
-        "value": [1025],
-        "placeholder": [1],
-        "searchid": [1],
-        "name": [1],
-        "autocomplete": [1],
-        "list": [1],
-        "language": [1],
-        "disabled": [4],
-        "required": [4],
-        "loading": [4],
-        "button": [1],
-        "buttonLabel": [1, "button-label"],
-        "buttonTooltip": [1, "button-tooltip"],
-        "buttonLight": [4, "button-light"]
-    }, [[0, "input", "inputHandler"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-search-field", "pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-search-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnSearchField);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PnSearchField as P, defineCustomElement as d };
-//# sourceMappingURL=pn-search-field2.js.map
-
-//# sourceMappingURL=pn-search-field2.js.map
+import{transformTag as e,proxyCustomElement as n,HTMLElement as i,createEvent as t,h as a,Host as s}from"@stencil/core/internal/client";import{u as l,k as r,e as o}from"./helpers.js";import{d as c}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";const p='<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="M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z" clip-rule="evenodd"/></svg>',f={SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},CLEAR:{en:"Clear search field",sv:"Rensa sökfältet",da:"Ryd søgefeltet",fi:"Tyhjennä hakukenttä",no:"Tøm søkefeltet"}},u=n(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.search=t(this,"search",7),this.update=t(this,"update",7)}id=`pn-search-field-${l()}`;searchElement;get hostElement(){return this}label;value="";placeholder;searchid=this.id;name;autocomplete;list;language=null;disabled=!1;required=!1;loading=!1;button="";buttonLabel;buttonTooltip;buttonLight=!1;search;update;inputHandler(){this.update.emit(this.value)}async componentWillLoad(){null===this.language&&await r(this.hostElement)}translate(e){return f?.[e]?.[this.language||o]}emitSearch({click:e,button:n}){("click"===e?.type||"keydown"===n?.type&&"Enter"===n?.key)&&((e||n).preventDefault(),this.search.emit(this.value))}setVal(e){this.value=e.target.value}clearInput(){this.value="",this.update.emit(this.value),this.hostElement.querySelector("input").focus()}getButtonLabel(){return this.buttonLabel||this.translate("SEARCH")}searchSimple(){return"icon"===this.button||"simple"===this.button}searchAuto(){return"icon-inline"===this.button||"none"===this.button||"auto"===this.button}searchJumbo(){return"jumbo"===this.button}searchButtonAppearance(){return this.searchSimple()?"light":null}searchButtonVariant(){return this.searchSimple()?"outlined":null}render(){return a(s,{key:"d6e76c457e99f83b3d47a4b0c951168c6b5fc086"},a("div",{key:"203055449e80dfd9bf19d94f340e4081d358a7b5",class:"pn-search-field","data-inline":this.searchAuto(),"data-loading":this.loading,"data-searching":!!this.value,"data-jumbo":this.searchJumbo()},a("div",{key:"bb86197c5f7e88c162eac8c899557bb5941ed6c6",class:"pn-search-field-container"},a("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:e=>this.searchElement=e,onKeyDown:e=>this.emitSearch({button:e}),onInput:e=>this.setVal(e)}),a("div",{key:"bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf",class:"pn-search-field-inline"},this.searchAuto()&&a("pn-button",{key:"c8961cb53609cc7d290b528af7e23a363a348833",class:"pn-search-field-button",type:"button",appearance:"light",small:!0,icon:p,iconOnly:!0,arialabel:this.getButtonLabel(),noTab:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})}),!this.disabled&&a("pn-button",{key:"45197b884106304f5e3a4dc66b58333d8b79d4cb",small:!0,class:"pn-search-field-clear",type:"button",appearance:"light",icon:'<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>',iconOnly:!0,arialabel:this.translate("CLEAR"),noTab:!this.value||this.loading,onPnClick:()=>this.clearInput()}),this.searchAuto()&&a("pn-spinner",{key:"f681e4d08d66c9658f09b9cd947b70e4cd0f0837",class:"pn-search-field-spinner"}))),!this.searchAuto()&&a("pn-button",{key:"8498355d5d49c64755c58ce4d599938e3e25c84b",class:"pn-search-field-submit",label:this.getButtonLabel(),tooltip:this.buttonTooltip,appearance:this.searchButtonAppearance(),variant:this.searchButtonVariant(),icon:p,iconOnly:this.searchSimple()||this.searchJumbo(),arialabel:this.searchSimple()||this.searchJumbo()?this.getButtonLabel():null,loading:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})})))}static get style(){return`${e("pn-search-field")}{display:inline-block}${e("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${e("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${e("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}${e("pn-search-field")} .pn-search-field-input:-webkit-autofill,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("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){${e("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${e("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${e("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${e("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${e("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}${e("pn-search-field")} .pn-search-field-inline ${e("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){${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${e("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%)}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] ${e("pn-button")}{transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${e("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}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`}},[512,"pn-search-field",{label:[1],value:[1025],placeholder:[1],searchid:[1],name:[1],autocomplete:[1],list:[1],language:[1],disabled:[4],required:[4],loading:[4],button:[1],buttonLabel:[1,"button-label"],buttonTooltip:[1,"button-tooltip"],buttonLight:[4,"button-light"]},[[0,"input","inputHandler"]]]);function b(){"undefined"!=typeof customElements&&["pn-search-field","pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-search-field":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||c();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-spinner":customElements.get(e(e(n)))||h()}}))}export{u as P,b as d}

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

@@ -2,77 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4 } from './helpers.js';
-import { d as defineCustomElement$2 } from './pn-icon2.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 PnSegment$1 = /*@__PURE__*/ proxyCustomElement(class PnSegment extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.segmentHover = createEvent(this, "segmentHover", 7);
-    }
-    id = `pn-segment-${uuidv4()}`;
-    get hostElement() { return this; }
-    /** The segment label, same as the slot. @since v7.7.0 */
-    label;
-    /** The segment controller name. */
-    name;
-    /** The segment value. */
-    value;
-    /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
-    selected = false;
-    /** A unique HTML id. */
-    segmentid = this.id;
-    /** The SVG content of the icon you want. */
-    icon;
-    /** Disable the segment. @since v7.7.0 */
-    disabled = false;
-    /** This event is used by the `pn-segmented-control` component. Do not use manually. */
-    segmentHover;
-    handleHover(mouse) {
-        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' })))));
-    }
-    static get style() { return pnSegmentCss; }
-}, [772, "pn-segment", {
-        "label": [1],
-        "name": [1],
-        "value": [1],
-        "selected": [4],
-        "segmentid": [1],
-        "icon": [1],
-        "disabled": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-segment", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-segment":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnSegment$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnSegment = PnSegment$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnSegment, defineCustomElement };
-//# sourceMappingURL=pn-segment.js.map
-
-//# sourceMappingURL=pn-segment.js.map
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as s,h as i,Host as a}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as o}from"./pn-icon2.js";const c=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.segmentHover=s(this,"segmentHover",7)}id="pn-segment-"+l();get hostElement(){return this}label;name;value;selected=!1;segmentid=this.id;icon;disabled=!1;segmentHover;handleHover(e){this.segmentHover.emit(e)}render(){return i(a,{key:"b98bb414de20d14fc2ee9d087be192d5f17bf1f9",onMouseEnter:e=>this.handleHover(e)},i("input",{key:"0b6117d85bb547c249a402cc26494355f3dc3e95",class:"pn-segment",id:this.segmentid,name:this.name,checked:this.selected,type:"radio",value:this.value,disabled:this.disabled}),i("label",{key:"8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304",htmlFor:this.segmentid,class:"pn-segment-label"},this.icon&&i("pn-icon",{key:"e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f",icon:this.icon,color:"blue700"}),i("span",{key:"8ec12157e0ca6f62772743e06beefc677f9f9f87",class:"pn-segment-text"},this.label,i("slot",{key:"6342dfb17f71cae05318a3c19a19fdb6e46bb157"}))))}static get style(){return`${e("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)}${e("pn-segment")}:last-of-type{margin-right:0}${e("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}${e("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label ${e("pn-icon")} .pn-icon-svg path{fill:#5e554a}${e("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}`}},[772,"pn-segment",{label:[1],name:[1],value:[1],selected:[4],segmentid:[1],icon:[1],disabled:[4]}]),r=c,p=function(){"undefined"!=typeof customElements&&["pn-segment","pn-icon"].forEach((t=>{switch(t){case"pn-segment":customElements.get(e(e(t)))||customElements.define(e(e(t)),c);break;case"pn-icon":customElements.get(e(e(t)))||o()}}))};export{r as PnSegment,p as defineCustomElement}

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

@@ -2,171 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as arrow_left } from './arrow_left.js';
-import { a as arrow_right } from './arrow_right.js';
-import { d as defineCustomElement$2 } from './pn-icon2.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 PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class PnSegmentedControl extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    mo;
-    segmentContainer;
-    segments = [];
-    activeBg;
-    hoverBg;
-    scrollRegistered = false;
-    get hostElement() { return this; }
-    showScrollArrows = false;
-    showLeftArrow = false;
-    showRightArrow = false;
-    /** This is the name of the radio buttons inside the controller. @deprecated Set the name in the nested `pn-segment` components. */
-    name;
-    /** Currently active segment value. */
-    value;
-    valueHandler() {
-        this.setActiveSegment();
-    }
-    changeHandler(event) {
-        const target = event.target;
-        this.value = target.value;
-        this.setActiveSegment();
-    }
-    handleResize() {
-        this.rerender();
-    }
-    handleHover(event) {
-        const { target } = event.detail;
-        this.calcHighlight(target, true);
-    }
-    componentDidLoad() {
-        if (this.mo)
-            this.mo.disconnect();
-        this.mo = new MutationObserver(() => {
-            forceUpdate(this.hostElement);
-            this.setSegments();
-        });
-        this.mo.observe(this.hostElement, { childList: true });
-        this.setSegments();
-    }
-    setSegments() {
-        this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
-        this.setActiveSegment();
-    }
-    setActiveSegment() {
-        this.segments.forEach(segmentEl => {
-            if (this.value === segmentEl.value)
-                segmentEl.setAttribute('selected', 'true');
-            else
-                segmentEl.removeAttribute('selected');
-        });
-        this.rerender();
-    }
-    rerender() {
-        requestAnimationFrame(() => {
-            this.calcHighlight();
-            this.scrollArrowRender();
-        });
-    }
-    /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
-    calcHighlight(element, hover) {
-        const chip = hover ? this.hoverBg : this.activeBg;
-        requestAnimationFrame(() => {
-            const el = element || this.segments.find(({ value }) => value === this.value);
-            const elSegment = el?.closest('pn-segment');
-            if (!elSegment)
-                return;
-            const elRect = elSegment.getBoundingClientRect();
-            const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
-            const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
-            const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
-            chip.style.setProperty('transform', `translate(${offset}px, -50%`);
-            chip.style.setProperty('width', `${segmentWidth}px`);
-            chip.style.setProperty('height', `${segmentHeight}px`);
-            el.disabled ? (chip.dataset.disabled = '') : delete chip.dataset.disabled;
-        });
-    }
-    /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
-    /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
-    scrollArrowRender() {
-        if (this.segmentContainer.scrollWidth > this.segmentContainer.clientWidth) {
-            this.showScrollArrows = true;
-            if (!this.scrollRegistered) {
-                this.segmentContainer.addEventListener('scroll', this.scrollArrowRender.bind(this));
-                this.scrollRegistered = true;
-            }
-            const amountScrolled = Math.round(this.segmentContainer.scrollWidth - this.segmentContainer.scrollLeft);
-            const distanceToEnd = amountScrolled - this.segmentContainer.clientWidth;
-            const distanceToStart = this.segmentContainer.scrollLeft;
-            this.showLeftArrow = distanceToStart > 0;
-            this.showRightArrow = distanceToEnd > 0;
-            return;
-        }
-        this.showLeftArrow = false;
-        this.showRightArrow = false;
-        this.showScrollArrows = false;
-    }
-    scroll(val) {
-        let amount = this.segmentContainer.scrollLeft + val;
-        this.segmentContainer.scroll({
-            left: amount,
-            behavior: 'smooth',
-        });
-    }
-    scrollArrowClasses() {
-        const list = ['pn-sc-arrows'];
-        if (this.showLeftArrow)
-            list.push('pn-sc-left-visible');
-        if (this.showRightArrow)
-            list.push('pn-sc-right-visible');
-        return list.join(' ');
-    }
-    /*---------------------------------------/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 })))));
-    }
-    static get watchers() { return {
-        "value": ["valueHandler"]
-    }; }
-    static get style() { return pnSegmentedControlCss; }
-}, [772, "pn-segmented-control", {
-        "name": [1],
-        "value": [1025],
-        "showScrollArrows": [32],
-        "showLeftArrow": [32],
-        "showRightArrow": [32]
-    }, [[0, "change", "changeHandler"], [9, "resize", "handleResize"], [0, "segmentHover", "handleHover"]], {
-        "value": ["valueHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-segmented-control", "pn-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-segmented-control":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnSegmentedControl$1);
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnSegmentedControl = PnSegmentedControl$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnSegmentedControl, defineCustomElement };
-//# sourceMappingURL=pn-segmented-control.js.map
-
-//# sourceMappingURL=pn-segmented-control.js.map
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as r,h as o,Host as s}from"@stencil/core/internal/client";import{a as i}from"./arrow_left.js";import{a}from"./arrow_right.js";import{d as c}from"./pn-icon2.js";const d=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return this}showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;name;value;valueHandler(){this.setActiveSegment()}changeHandler(e){this.value=e.target.value,this.setActiveSegment()}handleResize(){this.rerender()}handleHover(e){const{target:t}=e.detail;this.calcHighlight(t,!0)}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{r(this.hostElement),this.setSegments()})),this.mo.observe(this.hostElement,{childList:!0}),this.setSegments()}setSegments(){this.segments=Array.from(this.hostElement.querySelectorAll(""+e("pn-segment"))),this.setActiveSegment()}setActiveSegment(){this.segments.forEach((e=>{this.value===e.value?e.setAttribute("selected","true"):e.removeAttribute("selected")})),this.rerender()}rerender(){requestAnimationFrame((()=>{this.calcHighlight(),this.scrollArrowRender()}))}calcHighlight(t,n){const r=n?this.hoverBg:this.activeBg;requestAnimationFrame((()=>{const n=t||this.segments.find((({value:e})=>e===this.value)),o=n?.closest(""+e("pn-segment"));if(!o)return;const s=o.getBoundingClientRect(),{left:i}=this.segmentContainer.getBoundingClientRect(),{left:a,height:c,width:d}=s;r.style.setProperty("transform",`translate(${a-i+this.segmentContainer.scrollLeft}px, -50%`),r.style.setProperty("width",d+"px"),r.style.setProperty("height",c+"px"),n.disabled?r.dataset.disabled="":delete r.dataset.disabled}))}scrollArrowRender(){if(this.segmentContainer.scrollWidth>this.segmentContainer.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.segmentContainer.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const e=Math.round(this.segmentContainer.scrollWidth-this.segmentContainer.scrollLeft)-this.segmentContainer.clientWidth;return this.showLeftArrow=this.segmentContainer.scrollLeft>0,void(this.showRightArrow=e>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}scroll(e){this.segmentContainer.scroll({left:this.segmentContainer.scrollLeft+e,behavior:"smooth"})}scrollArrowClasses(){const e=["pn-sc-arrows"];return this.showLeftArrow&&e.push("pn-sc-left-visible"),this.showRightArrow&&e.push("pn-sc-right-visible"),e.join(" ")}render(){return o(s,{key:"4ff48c9a0556397894d55f7d3dc0a266349ef8fc"},o("div",{key:"82ef8456eda4724b55705f9a662577eb172df89d",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},o("slot",{key:"9b2949cf6e7976795543f6f8a67c126bee02e59d"}),o("div",{key:"42ab10791de502f48aac3a16766425b435c1c52e",class:"pn-sc-bg","data-active":!0,ref:e=>this.activeBg=e}),o("div",{key:"24060bf183aabe485b7ff66bbad9b44a7704df12",class:"pn-sc-bg","data-hover":!0,ref:e=>this.hoverBg=e})),o("div",{key:"31790d3f9fccd0c4242b5584ba2ff6ee32df4297",class:this.scrollArrowClasses(),hidden:!this.showScrollArrows},o("button",{key:"8ffa7498550bc0f052b77f5297b349b84efbccb8","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"89d4ee843ade39e7264e08c31ad83c2dd32f7931",icon:i})),o("button",{key:"8f1707b0e2debb84451210d03187b51eba3f2897","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee",icon:a}))))}static get watchers(){return{value:[{valueHandler:0}]}}static get style(){return`${e("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){${e("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-segmented-control")}:focus-within,${e("pn-segmented-control")}:active{outline-color:#005d92}${e("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}${e("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${e("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${e("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){${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${e("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}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("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}${e("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${e("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${e("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){${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${e("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)}${e("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)}${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`}},[772,"pn-segmented-control",{name:[1],value:[1025],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32]},[[0,"change","changeHandler"],[9,"resize","handleResize"],[0,"segmentHover","handleHover"]],{value:[{valueHandler:0}]}]),l=d,p=function(){"undefined"!=typeof customElements&&["pn-segmented-control","pn-icon"].forEach((t=>{switch(t){case"pn-segmented-control":customElements.get(e(e(t)))||customElements.define(e(e(t)),d);break;case"pn-icon":customElements.get(e(e(t)))||c()}}))};export{l as PnSegmentedControl,p as defineCustomElement}

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

@@ -2,12 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { P as PnSelect$1, d as defineCustomElement$1 } from './pn-select2.js';
-
-const PnSelect = PnSelect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnSelect, defineCustomElement };
-//# sourceMappingURL=pn-select.js.map
-
-//# sourceMappingURL=pn-select.js.map
+import{P as s,d as o}from"./pn-select2.js";const t=s,e=o;export{t as PnSelect,e as defineCustomElement}