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

PostNord Web Components

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

const pnFieldsetCss = "pn-fieldset{display:inline-block}pn-fieldset .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}pn-fieldset .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}pn-fieldset .pn-fieldset-helpertext{color:#5e554a;margin:0}pn-fieldset .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}pn-fieldset .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}pn-fieldset .pn-fieldset-message-wrapper[hidden]{display:none}pn-fieldset .pn-fieldset-message{margin:0}pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>pn-icon .pn-icon-svg>path{fill:#a70707}pn-fieldset .pn-fieldset:disabled>.pn-fieldset-legend,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-helpertext,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}pn-fieldset .pn-fieldset:disabled>.pn-fieldset-legend>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-helpertext>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message-wrapper>pn-icon .pn-icon-svg>path{fill:#2d2013}";
const PnFieldsetStyle0 = pnFieldsetCss;

const PnFieldset$1 = /*@__PURE__*/ proxyCustomElement(class PnFieldset extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.legend = undefined;
        this.helpertext = undefined;
        this.fieldsetId = this.id;
        this.form = undefined;
        this.name = undefined;
        this.disabled = false;
        this.invalid = false;
        this.error = undefined;
    }
    mo;
    id = `pn-fieldset-${uuidv4()}`;
    idHelpertext = `${this.id}-helpertext`;
    get hostElement() { return this; }
    handleId() {
        this.idHelpertext = `${this.fieldsetId}-helpertext`;
    }
    componentWillLoad() {
        this.handleId();
    }
    componentDidLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement.querySelector('.pn-fieldset'), { childList: true, subtree: true });
    }
    componentDidRender() {
        /**
         * Stencil has a known problem about rendering the `form` attribute.
         * Setting it via setAttribute solves it for now.
         * https://github.com/ionic-team/stencil/issues/2703
         **/
        if (this.form) {
            this.hostElement.querySelector('fieldset')?.setAttribute('form', this.form);
        }
    }
    hasError() {
        return this.invalid || !!this.error;
    }
    getSymbol() {
        if (this.disabled)
            return alert_info_circle;
        return alert_exclamation_circle;
    }
    render() {
        return (h(Host, { key: '2f9bd47d141fe715a0550ec9bdea9139a4e30cb8' }, h("fieldset", { key: 'dd2f2178cd03c01266cedab11efff9816a167a33', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: '106f0a8fe2fedd06d196df94820179aacaeaa391', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '177d95cccd6991035d5b3f99b447f547dfd8beda', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '14f4316e932cc34cc191bcba9ad0cc3d0acbfca3', class: "pn-fieldset-items" }, h("slot", { key: '29b725ae5b831261b0935ae32acfd089d646f337' })), h("div", { key: '67f555a9c88d29d6291000147ce7d34cbbc05811', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: '20b8f4d989aed460c16cf8b4b785563736082a9c', icon: this.getSymbol() }), h("p", { key: '18a46179b5f093d04f22e688aa9a0bcd1f8bda50', class: "pn-fieldset-message" }, this.error)))));
    }
    static get watchers() { return {
        "fieldsetId": ["handleId"]
    }; }
    static get style() { return PnFieldsetStyle0; }
}, [4, "pn-fieldset", {
        "legend": [1],
        "helpertext": [1],
        "fieldsetId": [1, "fieldset-id"],
        "form": [1],
        "name": [1],
        "disabled": [4],
        "invalid": [4],
        "error": [1]
    }, undefined, {
        "fieldsetId": ["handleId"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-fieldset", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-fieldset":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnFieldset$1);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnFieldset = PnFieldset$1;
const defineCustomElement = defineCustomElement$1;

export { PnFieldset, defineCustomElement };

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