@supersoniks/concorde 2.0.6 → 3.0.0

package/core/components/ui/form/select/select.js

@@ -1,298 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.js";
-import { formControl, label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
-import "@supersoniks/concorde/core/components/ui/icon/icon";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
-const tagName = "sonic-select";
-/**
- * #### FormElement :
- * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
- * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
- * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
- * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
- */
-let Select = class Select extends FormElement(Subscriber(LitElement)) {
-    constructor() {
-        super(...arguments);
-        this.valueKey = "value";
-        this.wordingKey = "wording";
-        this.multiple = false;
-        this.status = "default";
-        this._options = [];
-        this.hasDoneFirstUpdate = false;
-        this._value = "";
-        this.updateOptions = () => {
-            const options = this.querySelectorAll("option");
-            if (options.length > 0) {
-                this.options = Array.from(options).map((option) => {
-                    return {
-                        value: option.value,
-                        wording: option.text,
-                        selected: option.hasAttribute("selected"),
-                    };
-                });
-            }
-        };
-        /*
-         * TODO
-         * Mutualiser avec le composant textarea / input
-         */
-        this.forceAutoFill = false;
-        this.hasDescription = false;
-        this.hasLabel = false;
-        this.hasSuffix = false;
-        this.hasPrefix = false;
-    }
-    set options(options) {
-        this._options = options;
-        for (const option of options) {
-            if (option.selected) {
-                this.value = option.value || "";
-            }
-        }
-        const value = this.value || this.getAttribute("value");
-        if (!value && this._options.length > 0) {
-            this.value = this._options[0][this.valueKey];
-        }
-        this.requestUpdate();
-    }
-    get options() {
-        return this._options;
-    }
-    firstUpdated(changedProperties) {
-        this.hasDoneFirstUpdate = true;
-        super.firstUpdated(changedProperties);
-    }
-    set value(value) {
-        if (value == null && !this.hasDoneFirstUpdate)
-            return;
-        if (!value)
-            value = "";
-        if (this._value == value)
-            return;
-        this._value = value;
-        this.updateFormPublisherValue();
-        this.requestUpdate();
-    }
-    get value() {
-        return this._value;
-    }
-    updateFormPublisherValue() {
-        const formPublisher = this.getFormPublisher();
-        if (formPublisher) {
-            formPublisher[this.name] = this.value;
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.hasSlotOrProps();
-        this.updateOptions();
-    }
-    get description() {
-        return this._description;
-    }
-    set description(value) {
-        if (this.hasAttribute("description") && !this.forceAutoFill)
-            value = this.getAttribute("description");
-        this._description = value;
-        this.requestUpdate();
-    }
-    get label() {
-        return this._label;
-    }
-    set label(value) {
-        if (this.hasAttribute("label") && !this.forceAutoFill)
-            value = this.getAttribute("label");
-        this._label = value;
-        this.requestUpdate();
-    }
-    willUpdate(changedProperties) {
-        this.hasSlotOrProps();
-        super.willUpdate(changedProperties);
-    }
-    hasSlotOrProps() {
-        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
-        this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
-        this.hasSuffix = this.slotSuffixNodes?.length ? true : false;
-        this.hasPrefix = this.slotPrefixNodes?.length ? true : false;
-    }
-    validateFormElement() {
-        const select = this.shadowRoot?.querySelector("select");
-        if (!select || select.checkValidity())
-            return;
-        const formPublisher = this.getFormPublisher();
-        if (formPublisher) {
-            formPublisher.isFormValid = false;
-        }
-        select.reportValidity();
-    }
-    render() {
-        const slotClasses = {
-            "has-prefix": this.hasPrefix,
-            "has-suffix": this.hasSuffix,
-        };
-        //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
-        return html `
-      <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot name="label" @slotchange=${this.hasSlotOrProps}></slot
-      ></label>
-
-      <div class="form-control ${classMap(slotClasses)}">
-        <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
-        <div class="form-select-wrapper">
-          <select
-            id="form-element"
-            @change=${this.handleChange}
-            @blur=${this.handleBlur}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            ?multiple=${this.multiple}
-            size=${ifDefined(this.selectSize)}
-            ?autofocus=${this.autofocus}
-            .value="${this.value}"
-            class="form-element"
-            aria-label=${ifDefined(this.ariaLabel)}
-            aria-labelledby=${ifDefined(this.ariaLabelledby)}
-          >
-            ${repeat(this.options, (option) => option[this.valueKey], (option) => {
-            const isSelected = this.value == option[this.valueKey] ? true : false;
-            return html `<option ?selected=${isSelected} value="${option[this.valueKey]}">${option[this.wordingKey]}</option>`;
-        })}
-            <slot></slot>
-          </select>
-          <sonic-icon class="select-chevron" name="nav-arrow-down" .size=${this.size}></sonic-icon>
-        </div>
-        <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
-      </div>
-
-      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}"
-        >${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot
-      >
-    `;
-    }
-};
-Select.styles = [
-    fontSize,
-    formControl,
-    label,
-    description,
-    css `
-      .form-element {
-        appearance: none;
-      }
-
-      :host([disabled]) sonic-icon {
-        opacity: 0;
-      }
-
-      @supports selector(:has(*)) {
-        :host(:not([disabled])) .form-element:not(:has(option:only-child)) {
-          padding-right: max(1.275em, calc(1.5 * var(--sc-input-px)));
-        }
-      }
-      /*Firefox etc.*/
-      @supports not selector(:has(*)) {
-        :host(:not([disabled])) .form-element {
-          padding-right: max(1.275em, calc(1.5 * var(--sc-input-px)));
-        }
-      }
-
-      .form-select-wrapper {
-        position: relative;
-        width: 100%;
-      }
-
-      sonic-icon {
-        position: absolute;
-        right: calc(0.8 * var(--sc-input-px));
-        top: 50%;
-        pointer-events: none;
-        transform: translateY(-50%);
-        color: var(--sc-input-c);
-      }
-
-      option {
-        padding: 0.1rem var(--sc-input-px);
-        color: var(--sc-base-content);
-        background: var(--sc-base);
-      }
-
-      select[multiple] option {
-        background: transparent;
-        padding: 0;
-      }
-    `,
-];
-__decorate([
-    property({ type: String })
-], Select.prototype, "valueKey", void 0);
-__decorate([
-    property({ type: String })
-], Select.prototype, "wordingKey", void 0);
-__decorate([
-    property({ type: Boolean })
-], Select.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Select.prototype, "size", void 0);
-__decorate([
-    property({ type: Number })
-], Select.prototype, "selectSize", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Select.prototype, "status", void 0);
-__decorate([
-    property({ type: Array })
-], Select.prototype, "options", null);
-__decorate([
-    property({ reflect: true })
-], Select.prototype, "value", null);
-__decorate([
-    property({ type: Boolean })
-], Select.prototype, "forceAutoFill", void 0);
-__decorate([
-    property()
-], Select.prototype, "description", null);
-__decorate([
-    property()
-], Select.prototype, "label", null);
-__decorate([
-    queryAssignedNodes({ slot: "label", flatten: true })
-], Select.prototype, "slotLabelNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "description", flatten: true })
-], Select.prototype, "slotDescriptionNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "suffix", flatten: true })
-], Select.prototype, "slotSuffixNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "prefix", flatten: true })
-], Select.prototype, "slotPrefixNodes", void 0);
-__decorate([
-    state()
-], Select.prototype, "hasDescription", void 0);
-__decorate([
-    state()
-], Select.prototype, "hasLabel", void 0);
-__decorate([
-    state()
-], Select.prototype, "hasSuffix", void 0);
-__decorate([
-    state()
-], Select.prototype, "hasPrefix", void 0);
-Select = __decorate([
-    customElement(tagName)
-], Select);
-export { Select };

package/core/components/ui/form/textarea/textarea.d.ts

@@ -1,84 +0,0 @@
-import { LitElement, PropertyValues } from "lit";
-declare const Textarea_base: {
-    new (...args: any[]): {
-        validateFormElement(): void;
-        forceAutoFill: boolean;
-        _type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
-        type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
-        _description?: string | undefined;
-        description: string | undefined;
-        _label?: string | undefined;
-        label: string | undefined;
-        status: "error" | "default" | "success" | "warning" | "info";
-        tabindex?: number | undefined;
-        autocomplete?: "url" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
-        getFormPublisher(): any;
-        updateDataValue(): void;
-        handleChange(e?: Event | undefined): void;
-        handleBlur(e?: Event | undefined): void;
-        getValueForFormPublisher(): string | object | string[] | null | undefined;
-        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
-        focus?: (() => void) | undefined;
-        shadowRoot?: ShadowRoot | undefined;
-        error: boolean;
-        autofocus: boolean;
-        required: boolean;
-        disabled: true | null;
-        formDataProvider: string;
-        ariaLabelledby?: string | undefined;
-        ariaLabel?: string | undefined;
-        _value: string | object | string[] | null | undefined;
-        value: string | object | string[] | null | undefined;
-        _name: string;
-        name: string;
-        props: import("../../../../_types/types").CoreJSType;
-        propertyMap: object;
-        isConnected: boolean;
-        children: HTMLCollection;
-        appendChild(node: Node): Node;
-        getAncestorAttributeValue(attributeName: string): string;
-        hasAncestorAttribute(attributeName: string): boolean;
-        querySelectorAll(selector: string): NodeListOf<Element>;
-        publisher: any;
-        dataProvider: string | null;
-        noShadowDom: string | null;
-        debug: HTMLElement | null;
-        defferedDebug: boolean | null;
-        displayContents: boolean;
-        dispatchEvent(event: Event): void;
-        setAttribute(name: string, value: string): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        removeAttribute(name: string): void;
-        initPublisher(): void;
-        getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
-        connectedCallback(): void;
-        requestUpdate(): void;
-        getAttribute(name: string): string;
-        hasAttribute(attributeName: string): boolean;
-        disconnectedCallback(): void;
-        getBoundingClientRect(): DOMRect;
-    };
-} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
-export declare class Textarea extends Textarea_base {
-    static styles: import("lit").CSSResult[];
-    size: "" | "xs" | "sm" | "lg";
-    rows?: number;
-    cols?: number;
-    maxlength?: number;
-    minlength?: number;
-    wrap?: "hard" | "soft";
-    readonly: boolean;
-    placeholder?: string;
-    resize?: "none" | "both" | "horizontal" | "vertical" | "block" | "inline";
-    slotLabelNodes: Array<Node>;
-    slotDescriptionNodes: Array<Node>;
-    hasDescription: boolean;
-    hasLabel: boolean;
-    connectedCallback(): void;
-    willUpdate(changedProperties: PropertyValues): void;
-    hasSlotOrProps(): void;
-    validateFormElement(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};

package/core/components/ui/form/textarea/textarea.js

@@ -1,150 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, LitElement } from "lit";
-import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { description, formControl, label } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
-import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
-import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
-import { styleMap } from "lit/directives/style-map.js";
-const tagName = "sonic-textarea";
-let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
-    constructor() {
-        super(...arguments);
-        // @property({ type: String })
-        // type: "" | "primary" | "warning" | "danger" | "success" | "info" = "";
-        // @property({ type: String }) variant: "" | "ghost" | "outline" = "";
-        this.size = "";
-        this.readonly = false;
-        this.hasDescription = false;
-        this.hasLabel = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.hasSlotOrProps();
-    }
-    willUpdate(changedProperties) {
-        this.hasSlotOrProps();
-        super.willUpdate(changedProperties);
-    }
-    hasSlotOrProps() {
-        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
-        this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
-    }
-    validateFormElement() {
-        const textarea = this.shadowRoot?.querySelector("textarea");
-        if (!textarea || textarea.checkValidity())
-            return;
-        const formPublisher = this.getFormPublisher();
-        if (formPublisher) {
-            formPublisher.isFormValid = false;
-        }
-        textarea.reportValidity();
-    }
-    render() {
-        const textAreaStyle = {
-            resize: this.resize,
-        };
-        // let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
-        return html `
-      <label for="${this.id || "form-element"}" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot name="label" @slotchange=${this.hasSlotOrProps}></slot
-      ></label>
-
-      <div class="form-control">
-        <textarea
-          id="${this.id || "form-element"}"
-          @input=${this.handleChange}
-          @blur=${this.handleBlur}
-          disabled=${ifDefined(this.disabled)}
-          ?required=${this.required}
-          ?autofocus=${this.autofocus}
-          rows=${ifDefined(this.rows)}
-          cols=${ifDefined(this.cols)}
-          maxlength=${ifDefined(this.maxlength)}
-          minlength=${ifDefined(this.minlength)}
-          ?readonly=${this.readonly}
-          spellcheck=${ifDefined(this.spellcheck)}
-          autocomplete=${ifDefined(this.autocomplete)}
-          tabindex=${ifDefined(this.tabindex)}
-          wrap=${ifDefined(this.wrap)}
-          placeholder="${this.placeholder}"
-          class="form-element textarea custom-scroll"
-          aria-label=${ifDefined(this.ariaLabel)}
-          aria-labelledby=${ifDefined(this.ariaLabelledby)}
-          style=${styleMap(textAreaStyle)}
-        >
-${this.value}</textarea
-        >
-      </div>
-
-      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}"
-        >${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot
-      >
-    `;
-    }
-};
-Textarea.styles = [
-    fontSize,
-    formControl,
-    label,
-    description,
-    customScroll,
-    css `
-      textarea {
-        overflow-y: auto !important;
-        font-size: inherit;
-      }
-    `,
-];
-__decorate([
-    property({ type: String })
-], Textarea.prototype, "size", void 0);
-__decorate([
-    property({ type: Number })
-], Textarea.prototype, "rows", void 0);
-__decorate([
-    property({ type: Number })
-], Textarea.prototype, "cols", void 0);
-__decorate([
-    property({ type: Number })
-], Textarea.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: Number })
-], Textarea.prototype, "minlength", void 0);
-__decorate([
-    property({ type: String })
-], Textarea.prototype, "wrap", void 0);
-__decorate([
-    property({ type: Boolean })
-], Textarea.prototype, "readonly", void 0);
-__decorate([
-    property({ type: String })
-], Textarea.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String })
-], Textarea.prototype, "resize", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "label", flatten: true })
-], Textarea.prototype, "slotLabelNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "description", flatten: true })
-], Textarea.prototype, "slotDescriptionNodes", void 0);
-__decorate([
-    state()
-], Textarea.prototype, "hasDescription", void 0);
-__decorate([
-    state()
-], Textarea.prototype, "hasLabel", void 0);
-Textarea = __decorate([
-    customElement(tagName)
-], Textarea);
-export { Textarea };

package/core/components/ui/group/group.d.ts

@@ -1,16 +0,0 @@
-import { LitElement, PropertyValues } from "lit";
-export declare class Group extends LitElement {
-    alignItems: string;
-    label?: string;
-    description?: string;
-    slotLabelNodes: Array<Node>;
-    slotDescriptionNodes: Array<Node>;
-    hasDescription: boolean;
-    hasLabel: boolean;
-    static styles: import("lit").CSSResult[];
-    updated(): void;
-    connectedCallback(): void;
-    willUpdate(changedProperties: PropertyValues): void;
-    hasSlotOrProps(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/core/components/ui/group/group.js

@@ -1,118 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, css } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { customElement, property, state, queryAssignedNodes } from "lit/decorators.js";
-import { label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-const tagName = "sonic-group";
-let Group = class Group extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.alignItems = "center";
-        this.hasDescription = false;
-        this.hasLabel = false;
-    }
-    updated() {
-        const children = this.querySelectorAll("sonic-input, sonic-button, sonic-select");
-        const nbChildren = children.length;
-        if (nbChildren > 1) {
-            children.forEach((item, index) => {
-                const htmlElement = item;
-                if (index === 0) {
-                    htmlElement.style.setProperty("--sc-item-rounded-tr", "0");
-                    htmlElement.style.setProperty("--sc-item-rounded-br", "0");
-                }
-                else if (index === nbChildren - 1) {
-                    htmlElement.style.setProperty("--sc-item-rounded-tl", "0");
-                    htmlElement.style.setProperty("--sc-item-rounded-bl", "0");
-                }
-                else {
-                    htmlElement.style.setProperty("--sc-item-rounded-tr", "0");
-                    htmlElement.style.setProperty("--sc-item-rounded-br", "0");
-                    htmlElement.style.setProperty("--sc-item-rounded-tl", "0");
-                    htmlElement.style.setProperty("--sc-item-rounded-bl", "0");
-                }
-            });
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.hasSlotOrProps();
-    }
-    willUpdate(changedProperties) {
-        this.hasSlotOrProps();
-        super.willUpdate(changedProperties);
-    }
-    hasSlotOrProps() {
-        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
-        this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
-    }
-    render() {
-        const slotStyle = {
-            alignItems: this.alignItems,
-        };
-        return html `<span class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot name="label" @slotchange=${this.hasSlotOrProps}></slot
-      ></span>
-      <slot class="main-slot" style=${styleMap(slotStyle)}></slot>
-      <slot name="description" @slotchange=${this.hasSlotOrProps} class="${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
-      </slot>`;
-    }
-};
-Group.styles = [
-    fontSize,
-    label,
-    description,
-    css `
-      :host {
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      .main-slot {
-        width: 100%;
-        display: flex;
-      }
-      .hidden {
-        display: none;
-      }
-
-      ::slotted(sonic-button),
-      ::slotted(sonic-input),
-      ::slotted(sonic-select) {
-        flex-grow: 1;
-      }
-    `,
-];
-__decorate([
-    property({ type: String })
-], Group.prototype, "alignItems", void 0);
-__decorate([
-    property({ type: String })
-], Group.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], Group.prototype, "description", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "label", flatten: true })
-], Group.prototype, "slotLabelNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "description", flatten: true })
-], Group.prototype, "slotDescriptionNodes", void 0);
-__decorate([
-    state()
-], Group.prototype, "hasDescription", void 0);
-__decorate([
-    state()
-], Group.prototype, "hasLabel", void 0);
-Group = __decorate([
-    customElement(tagName)
-], Group);
-export { Group };