@aqua-ds/web-components/components-build/aq-field-group2.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { L as Label } from './label.js';
import { d as defineCustomElement$3 } from './aq-helper-text2.js';
import { d as defineCustomElement$2 } from './aq-label2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';

const aqFieldGroupCss = ":host{display:block}.aq-field-group{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}.aq-field-group__label{display:-ms-inline-flexbox;display:inline-flex;margin-bottom:var(--spacing-size-minor);line-height:var(--font-line-height-7)}.aq-field-group__footer{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:justify;justify-content:space-between;margin-top:var(--spacing-size-minor)}.aq-field-group__slot-container{display:-ms-flexbox;display:flex}.aq-field-group__slot-container .aq-radio,.aq-field-group__slot-container .aq-checkbox{border:var(--spacing-size-basic) solid var(--color-paper-light);width:var(--spacing-size-big);height:var(--spacing-size-big);background-color:var(--color-paper-lighter);-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-text-field__container,.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-flag-selector,.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-autocomplete,.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-date-picker,.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-tag-field,.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-button,.aq-field-group__slot-container>:nth-child(n+2):not(:only-child) .aq-number-field .aq-button:not(:last-child){margin-left:-1px;border-radius:0}.aq-field-group__slot-container>:first-child:not(:only-child) .aq-radio,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-checkbox,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-text-field__container,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-flag-selector,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-autocomplete,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-date-picker,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-tag-field,.aq-field-group__slot-container>:first-child:not(:only-child) .aq-button{border-radius:var(--spacing-size-minor) 0 0 var(--spacing-size-minor)}.aq-field-group__slot-container>:first-child:not(:only-child) .aq-number-field>:last-child .aq-button{border-radius:0}.aq-field-group__slot-container>:last-child:not(:only-child) .aq-radio,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-checkbox,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-flag-selector,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-autocomplete,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-date-picker,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-text-field__container,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-tag-field,.aq-field-group__slot-container>:last-child:not(:only-child) .aq-button{border-radius:0 var(--spacing-size-minor) var(--spacing-size-minor) 0}.aq-field-group__slot-container>:last-child:not(:only-child) .aq-number-field>:first-child .aq-button{border-radius:0}.aq-field-group__slot-container .aq-radio:not(:focus):not(:active):not(:focus-within):hover,.aq-field-group__slot-container .aq-checkbox:not(:focus):not(:active):not(:focus-within):hover,.aq-field-group__slot-container .aq-number-field:not(:focus):not(:active):not(:focus-within):hover,.aq-field-group__slot-container .aq-text-field__container:not(:focus):not(:active):not(:focus-within):hover,.aq-field-group__slot-container .aq-date-picker:not(:focus):not(:active):not(:focus-within):hover,.aq-field-group__slot-container .aq-flag-selector:not(:focus):not(:active):not(:focus-within):hover,.aq-field-group__slot-container .aq-tag-field:not(:focus):not(:active):not(:focus-within):hover{-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}.aq-field-group__slot-container.aq-field-group--plain .aq-text-field__container{margin-left:var(--spacing-size-basic)}.aq-field-group--disabled,.aq-field-group--border-group{border:var(--spacing-size-basic) solid var(--color-paper-light);border-radius:var(--spacing-size-minor)}.aq-field-group--border-group .aq-number-field>*:not(:focus,:active),.aq-field-group--border-group .aq-radio,.aq-field-group--border-group .aq-checkbox,.aq-field-group--border-group .aq-flag-selector,.aq-field-group--border-group .aq-date-picker,.aq-field-group--border-group .aq-text-field__container:not(:focus-within),.aq-field-group--border-group .aq-tag-field,.aq-field-group--border-group .aq-button:not(:focus,:active){border-color:transparent !important}.aq-field-group--plain>* .aq-number-field:not(:hover) *:not(:hover,:focus,:active){border-color:transparent !important}.aq-field-group--plain>* .aq-radio:not(:hover),.aq-field-group--plain>* .aq-checkbox:not(:hover),.aq-field-group--plain>* .aq-flag-selector,.aq-field-group--plain>* .aq-date-picker,.aq-field-group--plain>* .aq-tag-field,.aq-field-group--plain>* .aq-text-field__container:not(:focus-within,:hover),.aq-field-group--plain>* .aq-button:not(:hover,:focus,:active){border-color:transparent}.aq-field-group--border-group:not(.aq-field-group--disabled).aq-field-group__slot-container>:first-child:not(:only-child),.aq-field-group--plain.aq-field-group__slot-container>:first-child:not(:only-child){margin-right:var(--spacing-size-small)}.aq-field-group--border-group:not(.aq-field-group--disabled).aq-field-group__slot-container>:nth-child(n+2):not(:only-child),.aq-field-group--plain.aq-field-group__slot-container>:nth-child(n+2):not(:only-child){margin-left:0 !important}.aq-field-group--error{border-color:var(--color-danger-base) !important}.aq-field-group--error .aq-text-field__container:focus-within,.aq-field-group--error .aq-number-field__input:focus,.aq-field-group--error .aq-button:focus{border-color:var(--color-danger-base)}.aq-field-group--disabled .aq-number-field,.aq-field-group--disabled .aq-number-field__input,.aq-field-group--disabled .aq-radio,.aq-field-group--disabled .aq-checkbox,.aq-field-group--disabled .aq-flag-selector,.aq-field-group--disabled .aq-date-picker,.aq-field-group--disabled .aq-text-field *,.aq-field-group--disabled .aq-tag-field,.aq-field-group--disabled .aq-button{background-color:var(--color-paper-lighter) !important;color:var(--color-paper-darker) !important}.aq-field-group--disabled *,.aq-field-group--readonly *{pointer-events:none;border-color:transparent !important}.aq-field-group--disabled * .aq-autocomplete .aq-text-field__right,.aq-field-group--readonly * .aq-autocomplete .aq-text-field__right{display:none}";

const AqFieldGroup = /*@__PURE__*/ proxyCustomElement(class AqFieldGroup extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.helperText = '';
        this.label = '';
        this.info = '';
        this.tooltipWidth = '';
        this.borderMode = 'individual';
        this.isRequired = false;
        this.isReadonly = false;
        this.isDisabled = false;
        this.isError = false;
        this.isPlain = false;
        this.showCustomCounter = false;
        this.counterSource = '';
        this.counterLimit = 0;
        this.labelHelper = Label(this);
    }
    getCounter() {
        if (this.counterLimit > 0)
            return `${this.counterSource.length}/${this.counterLimit}`;
        if (this.counterLimit <= 0 && this.counterSource.length > 0)
            return `${this.counterSource.length}`;
    }
    getCssClass() {
        return {
            'aq-field-group__slot-container': true,
            'aq-field-group--readonly': this.isReadonly,
            'aq-field-group--disabled': this.isDisabled,
            'aq-field-group--error': this.isError,
            'aq-field-group--plain': this.isPlain,
            [`aq-field-group--border-group`]: this.isError || this.borderMode === 'group',
        };
    }
    render() {
        return (h(Host, { key: '755dc3ee1b89bea6939e0a574c8b420777b6dcc1', class: "aq-field-group" }, this.label &&
            h("aq-label", { key: 'b0ce32b2e48bb8a82a28af5a2e64516bfa9c975e', class: "aq-field-group__label", for: this.name, ...this.labelHelper.bindsLabel }, h("span", { key: '6aa67abd8a6a58f52ef24650d1fa511709f58882', slot: "text" }, this.label)), h("div", { key: 'd30901ca4e2f6fe402f1354a5e3ae839d0eb2fe7', class: this.getCssClass() }, h("slot", { key: 'f76ecff4f3eefd31c83de5db2aea0a4ae59fe943' })), h("div", { key: '47283c7d680b9fffe6714468a3d153a474cc2bda', class: "aq-field-group__footer" }, h("aq-helper-text", { key: '8fa0bb21eb078bb560f3f7f9a3149b1832d110db' }, h("span", { key: 'ad9ae0a396cf4fd3956d5a091f54053aa782aa3a', slot: "text" }, this.helperText)), this.showCustomCounter &&
            h("aq-helper-text", { key: 'bb5500315aec6485225667776d75158bed4f07c0' }, h("span", { key: '4c7520da6f424db6a4dc6d6f55e5828e411ce779', slot: "text" }, this.getCounter())))));
    }
    static get style() { return aqFieldGroupCss; }
}, [260, "aq-field-group", {
        "helperText": [1, "helper-text"],
        "label": [1],
        "info": [1],
        "tooltipWidth": [1, "tooltip-width"],
        "borderMode": [1, "border-mode"],
        "name": [1],
        "isRequired": [4, "is-required"],
        "isReadonly": [4, "is-readonly"],
        "isDisabled": [4, "is-disabled"],
        "isError": [4, "is-error"],
        "isPlain": [4, "is-plain"],
        "showCustomCounter": [4, "show-custom-counter"],
        "counterSource": [1, "counter-source"],
        "counterLimit": [2, "counter-limit"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-field-group", "aq-helper-text", "aq-label", "aq-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-field-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqFieldGroup);
            }
            break;
        case "aq-helper-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "aq-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "aq-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { AqFieldGroup as A, defineCustomElement as d };