@postnord/web-components/cjs/pn-select.cjs.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-78a59ba0.js');
const alert_exclamation_circle = require('./alert_exclamation_circle-7e28124d.js');
const angle_down = require('./angle_down-0b63ebde.js');
const helpers = require('./helpers-2e2349b4.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-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: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-weight:400;display:block;margin:0.25em 0 0 0}pn-select .pn-select-helper>span{display:block;font-size:0.875em}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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    id = `pn-select-${helpers.uuidv4()}`;
    idHelpertext = `${this.id}-text`;
    select;
    mo;
    get hostElement() { return index.getElement(this); }
    /** Label placed above the select. */
    label;
    /** Display a helper text underneath the select. */
    helpertext;
    /** Select HTML id */
    selectId = this.id;
    /** Display an icon to the left of the select input. */
    icon;
    /** HTML select name. @category HTML */
    name;
    /** HTML form name. @category HTML */
    form;
    /** HTML autocomplete. @category HTML */
    autocomplete;
    /**
     * Set the select as required.
     * @category Validation
     */
    required = false;
    /**
     * Disable the select.
     * @category Validation
     */
    disabled = false;
    /**
     * Trigger the invalid state.
     * @category Validation
     */
    invalid = false;
    /**
     * Display an error message and trigger the invalid state.
     * @category Validation
     */
    error;
    componentDidLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => index.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 (index.h(index.Host, { key: 'b22e1294fc75ddb12a9b61d7aecb5b94c3a7e5ea' }, index.h("div", { key: '9dfd36bd61dcd7241ef80747ec01c3efc307a788', class: "pn-select", "data-error": this.hasError() }, this.label && (index.h("label", { key: '40fcb64c25c3c01cb225246426101740f0802877', htmlFor: this.selectId, class: "pn-select-label" }, index.h("span", { key: '5d5d642416cf9e44448ea1c8064eb21095739c2b' }, this.label))), index.h("div", { key: '1bc7f4013682dfcb6a45720ab8a52fafae99ef05', class: "pn-select-input" }, this.icon && (index.h("pn-icon", { key: '0abe168e599ae4783d3a62fe953f7b85e420f383', class: "pn-select-icon", icon: this.icon, color: "gray900", "data-custom": true, "aria-hidden": "true" })), this.hasError() && (index.h("pn-icon", { key: 'f64407ac88df899600462af7fa199705ca226171', class: "pn-select-icon", icon: alert_exclamation_circle.alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), index.h("pn-icon", { key: '9aa3d74b2bacd00a686830f109988c509e2cb103', class: "pn-select-icon", icon: angle_down.angle_down, color: "blue700", "data-default": true, "aria-hidden": "true" }), index.h("select", { key: 'a134ae653d810be65dd2f7887d1184ac0b86f393', 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) }, index.h("slot", { key: 'fc2a42e32ec1482a12023182ab900fdba73303c3' }))), this.hasMessage() && (index.h("p", { key: '33b03c81c1e237c3ccd2ccf5e4302388342c6679', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, index.h("span", { key: 'adfe979c701aa29203fd29497910a24e0041c759' }, this.error || this.helpertext))))));
    }
};
PnSelect.style = PnSelectStyle0;

exports.pn_select = PnSelect;

//# sourceMappingURL=pn-select.cjs.entry.js.map