@supersoniks/concorde 1.0.7 → 1.1.1

package/core/components/ui/form/fieldset/legend.js

@@ -0,0 +1,92 @@
+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 } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+let Legend = class Legend extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.iconName = "check";
+        this.iconPrefix = "";
+        this.description = "";
+        this.label = "";
+    }
+    render() {
+        return html `<legend part="legend">
+      <div class="legend-content">
+        ${this.label}<slot></slot>
+        <slot name="description" class="description"> ${this.description ? html `${this.description}` : ""}</slot>
+      </div>
+      <slot name="suffix"></slot>
+    </legend>`;
+    }
+};
+Legend.styles = [
+    css `
+      :host {
+        --sc-legend-font-size: 1.875rem;
+        --sc-legend-font-weight: var(--sc-headings-font-weight);
+        --sc-legend-font-style: var(--sc-headings-font-style);
+        --sc-legend-family: var(--sc-headings-font-family);
+        --sc-legend-line-height: var(--sc-headings-line-height);
+        display: flex;
+        width: 100%;
+      }
+
+      legend {
+        font-size: var(--sc-legend-font-size);
+        font-weight: var(--sc-legend-font-weight);
+        font-style: var(--sc-legend-font-style);
+        font-family: var(--sc-legend-font-family);
+        line-height: var(--sc-legend-line-height);
+        padding: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+
+      slot[name="suffix"]:not(:empty) {
+        display: block;
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .description {
+        color: var(--sc-neutral-500);
+        font-size: 1.25rem;
+        line-height: 1.2;
+        display: block;
+        font-weight: normal;
+        font-style: normal;
+        margin-top: 0.25eem;
+      }
+      .legend-content {
+        flex-grow: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconPrefix", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "label", void 0);
+Legend = __decorate([
+    customElement("sonic-legend")
+], Legend);
+export { Legend };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-legend", Legend);
+}
+catch (e) { }

package/core/components/ui/form/form-layout/form-actions.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from "lit";
+declare const FormActions_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class FormActions extends FormActions_base {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/form/form-layout/form-actions.js

@@ -0,0 +1,23 @@
+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 } from "lit";
+import { customElement } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+let FormActions = class FormActions extends Subscriber(LitElement) {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+FormActions = __decorate([
+    customElement("sonic-form-actions")
+], FormActions);
+export { FormActions };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-form-actions", FormActions);
+}
+catch (e) { }

package/core/components/ui/form/form-layout/form-layout.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from "lit";
+import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+declare const FormLayout_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class FormLayout extends FormLayout_base {
+    static styles: import("lit").CSSResult[];
+    _resizeController: ResizeController;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/form/form-layout/form-layout.js

@@ -0,0 +1,58 @@
+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 } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+let FormLayout = class FormLayout extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._resizeController = new ResizeController(this, {});
+    }
+    render() {
+        return html `<div class=${this.offsetWidth > 440 ? "cq--md" : ""}><slot></slot></div>`;
+    }
+};
+FormLayout.styles = [
+    css `
+      :host {
+        display: block;
+      }
+
+      div {
+        display: grid;
+        grid-gap: 1.5rem;
+        align-items: flex-start;
+      }
+
+      .cq--md {
+        grid-gap: 1.75rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      ::slotted(sonic-radio),
+      ::slotted(sonic-checkbox),
+      ::slotted(sonic-form-actions),
+      ::slotted(sonic-divider),
+      ::slotted(sonic-textarea) {
+        grid-column: 1 / -1;
+      }
+
+      ::slotted(sonic-divider) {
+        --sc-divider-my: 0;
+      }
+    `,
+];
+FormLayout = __decorate([
+    customElement("sonic-form-layout")
+], FormLayout);
+export { FormLayout };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-form-layout", FormLayout);
+}
+catch (e) { }

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

@@ -0,0 +1,84 @@
+import { LitElement } from "lit";
+declare const Input_base: {
+    new (...args: any[]): {
+        type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        tabindex: string | null;
+        autocomplete: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | null;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        handleChange(e?: any): void;
+        getValueForFormPublisher(): any;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: string;
+        _value: any;
+        value: any;
+        _name: string;
+        name: string;
+        props: any;
+        getAncestorAttributeValue(attributeName: string): string;
+        hasAncestorAttribute(attributeName: string): boolean;
+        querySelectorAll(selector: string): NodeListOf<Element>;
+        publisher: any;
+        dataProvider: String;
+        noShadowDom: string | null;
+        debug: HTMLElement | null;
+        defferedDebug: boolean | null;
+        makeShadow(props: Record<string, any>, value: any): any;
+        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;
+    };
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
+ * **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.
+ * **FormInput :**
+ * Uniquement des propriétés classiques d'un input HTML.
+ */
+export declare class Input extends Input_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Taille du composant, implique notamment des modifications de typo et de marge interne
+     */
+    size: "" | "xs" | "sm" | "lg";
+    list: "" | null;
+    placeholder: string;
+    readonly: boolean | null;
+    pattern: string | null;
+    min: string | null;
+    max: string | null;
+    step: string | null;
+    minlength: string | null;
+    maxlength: string | null;
+    label: string;
+    description: string;
+    inlineContent: boolean;
+    slotLabelNodes: Array<Node>;
+    slotDescriptionNodes: Array<Node>;
+    slotSuffixNodes: Array<Node>;
+    slotPrefixNodes: Array<Node>;
+    hasDescription: true | false;
+    hasLabel: true | false;
+    hasSuffix: true | false;
+    hasPrefix: true | false;
+    updated(): void;
+    onSlotChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,180 @@
+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 } from "lit";
+import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { formControl } from "../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 { classMap } from "lit/directives/class-map.js";
+/**
+ * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
+ * **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.
+ * **FormInput :**
+ * Uniquement des propriétés classiques d'un input HTML.
+ */
+let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
+        this.size = "";
+        this.list = null;
+        this.placeholder = "";
+        this.readonly = null;
+        this.pattern = null;
+        this.min = null;
+        this.max = null;
+        this.step = null;
+        this.minlength = null;
+        this.maxlength = null;
+        /*
+         * TODO
+         * Mutualiser avec le composant select
+         */
+        this.label = "";
+        this.description = "";
+        this.inlineContent = false;
+        this.hasDescription = false;
+        this.hasLabel = false;
+        this.hasSuffix = false;
+        this.hasPrefix = false;
+    }
+    updated() {
+        var _a, _b, _c, _d;
+        this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+        this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
+        this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
+    }
+    onSlotChange() {
+        this.requestUpdate();
+    }
+    render() {
+        const slotClasses = {
+            "has-prefix": this.hasPrefix,
+            "has-suffix": this.hasSuffix,
+        };
+        return html `
+      <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
+        >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+      ></label>
+
+      <div class="form-control ${classMap(slotClasses)}">
+        <div class=" ${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
+          <slot name="prefix" @slotchange=${this.onSlotChange}></slot>
+          <input
+            id="form-element"
+            part="input"
+            class="form-element input"
+            type=${this.type}
+            @input=${this.handleChange}
+            disabled="${ifDefined(this.disabled)}"
+            list=${ifDefined(this.list)}
+            readonly=${ifDefined(this.readonly)}
+            autofocus=${ifDefined(this.autofocus)}
+            required=${ifDefined(this.required)}
+            tabindex=${ifDefined(this.tabindex)}
+            pattern=${ifDefined(this.pattern)}
+            min=${ifDefined(this.min)}
+            max=${ifDefined(this.max)}
+            step=${ifDefined(this.step)}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            placeholder="${this.placeholder}"
+            .name=${this.name}
+            .value=${this.value}
+            autocomplete=${ifDefined(this.autocomplete)}
+          />
+          <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
+        </div>
+      </div>
+      <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
+        ${this.description ? html `${this.description}` : ""}
+      </slot>
+    `;
+    }
+};
+Input.styles = [formControl];
+__decorate([
+    property({ type: String })
+], Input.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "list", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "pattern", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "min", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "step", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "minlength", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Input.prototype, "inlineContent", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "label" })
+], Input.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description" })
+], Input.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "suffix" })
+], Input.prototype, "slotSuffixNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "prefix" })
+], Input.prototype, "slotPrefixNodes", void 0);
+__decorate([
+    state()
+], Input.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Input.prototype, "hasLabel", void 0);
+__decorate([
+    state()
+], Input.prototype, "hasSuffix", void 0);
+__decorate([
+    state()
+], Input.prototype, "hasPrefix", void 0);
+Input = __decorate([
+    customElement("sonic-input")
+], Input);
+export { Input };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-input", Input);
+}
+catch (e) { }

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

@@ -0,0 +1,12 @@
+import { Checkbox } from "../checkbox/checkbox";
+/**
+ * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
+ *
+ * * Le type d'input html utilisé passe également de checkbox à radio.
+ * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
+ */
+export declare class Radio extends Checkbox {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,55 @@
+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 } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Checkbox } from "../checkbox/checkbox";
+/**
+ * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
+ *
+ * * Le type d'input html utilisé passe également de checkbox à radio.
+ * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
+ */
+let Radio = class Radio extends Checkbox {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.radio = true;
+        // this.iconName = "circle-small";
+        // this.iconPrefix = "solid";
+        super.connectedCallback();
+        this.type = "radio";
+    }
+};
+Radio.styles = [
+    Checkbox.styles,
+    css `
+      :host input {
+        border-radius: 50%;
+      }
+
+      :host sonic-icon {
+        border-radius: 50%;
+        overflow: hidden;
+        background-color:var(--sc-primary-content);
+        line-height:0;
+        display:block;
+        font-size:0;
+        height:10px;
+        width:10px;
+      }
+    `,
+];
+Radio = __decorate([
+    customElement("sonic-radio")
+], Radio);
+export { Radio };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-radio", Radio);
+}
+catch (e) { }

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

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+declare const Select_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * #### 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.
+ */
+export declare class Select extends Select_base {
+    static styles: import("lit").CSSResult[];
+    valueKey: string;
+    wordingKey: string;
+    multiple: null;
+    size: "" | "xs" | "sm" | "lg";
+    selectSize: string | null;
+    private _options;
+    set options(value: Array<any>);
+    get options(): Array<any>;
+    _value: string;
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    label: string;
+    description: string;
+    slotLabelNodes: Array<Node>;
+    slotDescriptionNodes: Array<Node>;
+    slotSuffixNodes: Array<Node>;
+    slotPrefixNodes: Array<Node>;
+    hasDescription: true | false;
+    hasLabel: true | false;
+    hasSuffix: true | false;
+    hasPrefix: true | false;
+    updated(): void;
+    onSlotChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};