@postnord/web-components/components/pn-select2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
import { a as angle_down } from './angle_down.js';
import { u as uuidv4 } from './helpers.js';
import { d as defineCustomElement$1 } from './pn-icon2.js';

const pnSelectCss = "pn-select{display:inline-block}pn-select .pn-select-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);-webkit-tap-highlight-color:transparent}pn-select .pn-select-label>span{font-size:0.875em}pn-select .pn-select-input{position:relative}pn-select .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}pn-select .pn-select-icon[data-default]{right:0.75em}pn-select .pn-select-icon[data-custom]{left:0.75em}pn-select .pn-select-icon[data-custom]~.pn-select-element{padding-left:3em}pn-select .pn-select-icon[data-error]{right:3em}pn-select .pn-select-icon[data-error]~.pn-select-element{padding-right:5em}pn-select .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-select .pn-select-element{cursor:pointer;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);width:100%;padding-right:3em;-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-select .pn-select-element:-webkit-autofill,pn-select .pn-select-element:-webkit-autofill:hover,pn-select .pn-select-element:-webkit-autofill:focus,pn-select .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-select .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-select .pn-select-element::placeholder{color:#5e554a;font-weight:normal}pn-select .pn-select-element:hover{border-color:#005d92}pn-select .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-select .pn-select-element:open+pn-icon .pn-icon-svg{transform:rotate(180deg)}pn-select .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-select .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}pn-select .pn-select-element:hover{color:#2d2013;background-color:#effbff}pn-select .pn-select-no-results{margin:0;padding:0.75em}pn-select .pn-select-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-select .pn-select-helper[role=alert]{color:#a70707}pn-select .pn-select[data-error]>.pn-select-label{color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}";
const PnSelectStyle0 = pnSelectCss;

const PnSelect = /*@__PURE__*/ proxyCustomElement(class PnSelect extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.label = undefined;
        this.helpertext = undefined;
        this.selectId = this.id;
        this.icon = undefined;
        this.name = undefined;
        this.form = undefined;
        this.autocomplete = undefined;
        this.required = false;
        this.disabled = false;
        this.invalid = false;
        this.error = undefined;
    }
    id = `pn-select-${uuidv4()}`;
    idHelpertext = `${this.id}-text`;
    select;
    mo;
    get hostElement() { return this; }
    componentDidLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement, { childList: true, subtree: true });
    }
    hasError() {
        return this.invalid || !!this.error;
    }
    hasMessage() {
        return !!this.helpertext || !!this.error;
    }
    render() {
        return (h(Host, { key: '6547ef0d2fc3b0dbfbcb5e183d52eb50699d8d2f' }, h("div", { key: 'ee058c03644eff4b5cbd577e76489aa70c8f1a4a', class: "pn-select", "data-error": this.hasError() }, this.label && (h("label", { key: 'e6924c61358ab86b7117b1b6e047bbb4dc0b1f1f', htmlFor: this.selectId, class: "pn-select-label" }, h("span", { key: '7bd2dd6a4ca5a2b70bd6b78ce7b0b94cc621af30' }, this.label))), h("div", { key: '8803be773c6c1fd7d863c7446afd325615a4ecd1', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '9be2e1646f0264d83ad089e3ad2443566b6d77b7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: '09b9c13b5cb2bdcd06e4d8de3b29147591a2cabc', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: 'b62ab5d51792a0fdae9c471cca6e783305da742d', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, h("slot", { key: 'e56bf23e804b82a5b221e01c2977188bec004cc8' })), h("pn-icon", { key: '2f8cc0b7c23ab34574796fa87cd2ccbb5cd98930', class: "pn-select-icon", icon: angle_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '5188e3df8a8105bf4ff86a139586171185cabaa8', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '5ded8e4687577e6d44d10caf6c6c770ed366e5e6' }, this.error || this.helpertext))))));
    }
    static get style() { return PnSelectStyle0; }
}, [4, "pn-select", {
        "label": [1],
        "helpertext": [1],
        "selectId": [1, "select-id"],
        "icon": [1],
        "name": [1],
        "form": [1],
        "autocomplete": [1],
        "required": [4],
        "disabled": [4],
        "invalid": [4],
        "error": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-select", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-select":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnSelect);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PnSelect as P, defineCustomElement as d };

//# sourceMappingURL=pn-select2.js.map