@supersoniks/concorde 1.0.5 → 1.0.8

package/core/mixins/FormCheckable.d.ts

@@ -0,0 +1,72 @@
+import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
+declare type Constructor<T> = new (...args: any[]) => T;
+declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T) => {
+    new (...args: any[]): {
+        /**
+         *  Voir  la mixin FormElement.
+         */
+        _value: string | null;
+        value: string | null;
+        /**
+         * Voir  la mixin FormElement
+         */
+        _name: string;
+        name: string;
+        /**
+         * comme radio,mais peut être désélectionné après sélection
+         */
+        unique: true | null;
+        /**
+          Active le mode radio
+         */
+        radio: true | null;
+        /**
+         * propriété checked avec des caractéristiques similaire à un input html classique.
+         */
+        _checked: true | null;
+        checked: true | null;
+        setCheckedValue(checked: true | null): void;
+        handleChange(): void;
+        /**
+         * Voir la mixin FormElement
+         * Le comportement est ici modifié fonction de son mode (checkbox, radio, unique)
+         */
+        getValueForFormPublisher(): any;
+        /**
+         * Voir la mixin FormElement
+         * Le comportement est modifié de la manière suivante :
+         * L'état du composant (checked) est mis à jour en fonction de la valeur fournie par le publisher associé au composant / en fonction de sont mode (radio, unique)
+         */
+        setFormValueFromPublisher(value: any): void;
+        initPublisher(): void;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: 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;
+        getApiConfiguration(): import("../utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & T;
+export default Form;

package/core/mixins/FormCheckable.js

@@ -0,0 +1,144 @@
+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 { property } from "lit/decorators.js";
+const Form = (superClass) => {
+    /**
+     * FormCheckable ajoute un comportement de sélection (checked) a tout FormElement qui utilise cette mixin.
+     * Il est notamment utilisé par sonic-checkbox, sonic-radio et sonic-button
+     * * Par défaut le fonctionnement est celui d'une checkbox classique.
+     * * Dans ce cas, a la sélection, formPublisher[this.name] = [this.value, ...autres valeurs d'élémen,ts sélectionnés ayant le même nom];
+     * * En activant le mode radio à l'aide du flag dédié, un seul FormElement ayant la même propriété name peut être sélectionné à la fois.
+     * * Dans ce cas, a la sélection, formPublisher[this.name] = this.value;
+     */
+    class FormCheckable extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             *  Voir  la mixin FormElement.
+             */
+            this._value = "";
+            /**
+             * Voir  la mixin FormElement
+             */
+            this._name = "";
+            /**
+             * comme radio,mais peut être désélectionné après sélection
+             */
+            this.unique = null;
+            /**
+              Active le mode radio
+             */
+            this.radio = null;
+            /**
+             * propriété checked avec des caractéristiques similaire à un input html classique.
+             */
+            this._checked = null;
+        }
+        get value() {
+            return this._value;
+        }
+        set value(value) {
+            if (this.hasAttribute("value"))
+                value = this.getAttribute("value");
+            if (this._value == value)
+                return;
+            this._value = value;
+            this.updateDataValue();
+            this.requestUpdate();
+        }
+        get name() {
+            return this._name;
+        }
+        set name(value) {
+            if (this.hasAttribute("name"))
+                value = this.getAttribute("name");
+            this._name = value;
+        }
+        get checked() {
+            return this._checked;
+        }
+        set checked(checked) {
+            this.setCheckedValue(checked);
+        }
+        setCheckedValue(checked) {
+            if (this._checked == checked)
+                return;
+            this._checked = checked;
+            this.updateDataValue();
+            this.requestUpdate();
+            if (this.publisher && !this.radio && !this.unique) {
+                this.publisher.checked = this._checked;
+            }
+        }
+        handleChange() {
+            this.checked = this.checked ? (!this.radio ? null : true) : true;
+            const event = new Event("change");
+            this.dispatchEvent(event);
+        }
+        /**
+         * Voir la mixin FormElement
+         * Le comportement est ici modifié fonction de son mode (checkbox, radio, unique)
+         */
+        getValueForFormPublisher() {
+            let publisher = this.getFormPublisher();
+            let currentValue = publisher[this.name].get();
+            if (this.unique || this.radio) {
+                return this.checked && this.value != null ? this.value : currentValue;
+            }
+            if (!Array.isArray(currentValue)) {
+                currentValue = [];
+            }
+            currentValue = currentValue.slice(0);
+            let idx = currentValue.indexOf(this.value);
+            if (this.checked === true && idx === -1)
+                currentValue.push(this.value);
+            if (this.checked === null && idx !== -1)
+                currentValue.splice(idx, 1);
+            return currentValue;
+        }
+        /**
+         * Voir la mixin FormElement
+         * Le comportement est modifié de la manière suivante :
+         * L'état du composant (checked) est mis à jour en fonction de la valeur fournie par le publisher associé au composant / en fonction de sont mode (radio, unique)
+         */
+        setFormValueFromPublisher(value) {
+            if (this.unique || this.radio) {
+                this.checked = this.value == value ? true : null;
+                return;
+            }
+            if (!Array.isArray(value))
+                value = [];
+            this.checked = value.indexOf(this.value) !== -1 ? true : null;
+        }
+        initPublisher() {
+            super.initPublisher();
+            if (!this.hasAttribute("checked")) {
+                return;
+            }
+            if (!this.publisher || this.publisher.get().checked !== false) {
+                this.checked = true;
+            }
+        }
+    }
+    __decorate([
+        property()
+    ], FormCheckable.prototype, "value", null);
+    __decorate([
+        property()
+    ], FormCheckable.prototype, "name", null);
+    __decorate([
+        property({ type: Boolean })
+    ], FormCheckable.prototype, "unique", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormCheckable.prototype, "radio", void 0);
+    __decorate([
+        property()
+    ], FormCheckable.prototype, "checked", null);
+    return FormCheckable;
+};
+export default Form;

package/core/mixins/FormElement.d.ts

@@ -0,0 +1,21 @@
+import { SubscriberInterface } from "@supersoniks/concorde/core/mixins/Subscriber";
+declare type Constructor<T> = new (...args: any[]) => T;
+export interface FormElementInterface extends SubscriberInterface {
+    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;
+    get value(): any;
+    set value(value: any);
+    _name: string;
+    get name(): string;
+    set name(value: string);
+}
+declare const Form: <T extends Constructor<SubscriberInterface>>(superClass: T) => Constructor<FormElementInterface> & T;
+export default Form;

package/core/mixins/FormElement.js

@@ -0,0 +1,229 @@
+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 { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import { property } from "lit/decorators.js";
+import Objects from "../utils/Objects";
+const keyboardLoops = new Map();
+const Form = (superClass) => {
+    /**
+     * ## FormElement est la mixin utilisée par les éléments de formulaire de concorde ainsi que par le composant sonic-button.
+     * * 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 renseignent 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.
+     *
+     */
+    class FormElement extends superClass {
+        constructor(...args) {
+            super();
+            this.error = null;
+            this.autofocus = null;
+            this.disabled = null;
+            this.required = null;
+            this.onValueAssign = null;
+            this.onFormValueAssign = null;
+            this.formDataProvider = "";
+            /**
+             * Le nom du champ avec des caractéristiques similaire à un input html classique.
+             */
+            this._name = "";
+            /**
+             * La valeur du champ avec des caractéristiques similaire à un input html classique :
+             */
+            this._value = "";
+            args;
+            this.onValueAssign = (value) => {
+                this.setValueFromPublisher(value);
+            };
+            this.onFormValueAssign = (value) => {
+                this.setFormValueFromPublisher(value);
+            };
+        }
+        get name() {
+            return this._name;
+        }
+        set name(value) {
+            this._name = value;
+        }
+        updateDataValue() {
+            if (this._name) {
+                let formPublisher = this.getFormPublisher();
+                if (formPublisher) {
+                    formPublisher[this._name] = this.getValueForFormPublisher();
+                    this.setFormValueFromPublisher(formPublisher[this.name].get());
+                }
+            }
+        }
+        getFormPublisher() {
+            if (!this.formDataProvider) {
+                this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+            }
+            if (this.formDataProvider) {
+                return PublisherManager.get(this.formDataProvider);
+            }
+            else
+                return this.publisher;
+        }
+        /**
+         * Mise en forme de la valeur fournie au formPublisher associé au composant
+         * Destinée à être surchargée si besoin (cf Form-checkable)
+         */
+        getValueForFormPublisher() {
+            return this.value;
+        }
+        /**
+         * Mise à jour de la valeur interne du composant en fonction de la valeur venant du publisher associé au composant
+         * Destinée à être surchargée si besoin (cf Form-checkable)
+         */
+        setValueFromPublisher(value) {
+            this.value = value;
+        }
+        /**
+         * Mise à jour de la valeur interne du composant en fonction de la valeur venant du formPublisher associé au composant
+         * Destinée à être surchargée si besoin (cf Form-checkable)
+         */
+        setFormValueFromPublisher(value) {
+            this.value = value;
+        }
+        get value() {
+            return this._value;
+        }
+        set value(value) {
+            if (Objects.isObject(value) && value.hasOwnProperty("__value") && value.value == undefined)
+                return;
+            if (value == null)
+                return;
+            if (this._value == value)
+                return;
+            this._value = value;
+            this.updateDataValue();
+            this.requestUpdate();
+        }
+        initPublisher() {
+            if (this._name && this.publisher)
+                this.publisher[this._name].offAssign(this.onValueAssign);
+            let formPublisher = this.getFormPublisher();
+            if (this._name && formPublisher)
+                formPublisher[this._name].offAssign(this.onFormValueAssign);
+            super.initPublisher();
+            if (!this.name)
+                this._name = this.getAttribute("name");
+            if (!this.value)
+                this._value = this.getAttribute("value");
+            this.updateDataValue();
+            if (this.publisher && this._name) {
+                this.publisher[this._name].onAssign(this.onValueAssign);
+            }
+            formPublisher = this.getFormPublisher();
+            if (this._name && formPublisher)
+                formPublisher[this._name].onAssign(this.onFormValueAssign);
+        }
+        handleChange(e) {
+            this.value = e.target.value;
+            const event = new Event("change");
+            this.dispatchEvent(event);
+        }
+        /**
+         * Ajoute un comportement de navigation au clavier pour les éléments de formulaire
+         * data-keyboard-nav peut contenir plusieurs valeurs qui identifient les boucles de navigation auquelles est attaché cet élément.
+         * Les valeurs sont séparées par des espaces.
+         * En appuyant sur la touche "Down", le composant va se déplacer dans la boucle de navigation correspondante en suivant le flux.
+         * En appuyant sur la touche "Up", le déplacement inverse est effectué.
+         */
+        addKeyboardNavigation() {
+            let keyboardLoopIds = this.getAncestorAttributeValue("data-keyboard-nav");
+            if (!keyboardLoopIds)
+                return;
+            let split = keyboardLoopIds.split(" ");
+            let keyboardLoopId = split[0];
+            if (!keyboardLoopId)
+                return;
+            for (let keyboardLoopId2 of split) {
+                if (!keyboardLoops.has(keyboardLoopId2)) {
+                    keyboardLoops.set(keyboardLoopId2, []);
+                }
+                let keyboardLoop = keyboardLoops.get(keyboardLoopId2);
+                if (keyboardLoop.indexOf(this) == -1) {
+                    keyboardLoop.push(this);
+                }
+            }
+            let keyboardLoop = keyboardLoops.get(keyboardLoopId);
+            this.addEventListener("keydown", (e) => {
+                if (!["ArrowDown", "ArrowUp"].includes(e.key))
+                    return;
+                let selector = "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled])";
+                let loop = keyboardLoop.filter((el) => {
+                    let child = el.shadowRoot.querySelector(selector);
+                    if (!child)
+                        return false;
+                    let cpStyle = window.getComputedStyle(child);
+                    return (cpStyle.display !== "none" &&
+                        cpStyle.display !== "" &&
+                        cpStyle.pointerEvents != "none" &&
+                        cpStyle.visibility !== "hidden" &&
+                        child.getBoundingClientRect().width > 0);
+                });
+                let next = null;
+                if (e.key == "ArrowDown") {
+                    let index = loop.indexOf(this);
+                    if (index == loop.length - 1) {
+                        next = loop[0];
+                    }
+                    else {
+                        next = loop[index + 1];
+                    }
+                }
+                else if (e.key == "ArrowUp") {
+                    let index = loop.indexOf(this);
+                    if (index == 0) {
+                        next = loop[loop.length - 1];
+                    }
+                    else {
+                        next = loop[index - 1];
+                    }
+                }
+                let elt = next.shadowRoot.querySelector(selector);
+                if (elt) {
+                    elt.focus();
+                    e.preventDefault();
+                }
+            });
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addKeyboardNavigation();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (this._name && this.publisher)
+                this.publisher[this._name].offAssign(this.onValueAssign);
+            let formPublisher = this.getFormPublisher();
+            if (this._name && formPublisher)
+                formPublisher[this._name].offAssign(this.onFormValueAssign);
+        }
+    }
+    __decorate([
+        property({ type: Boolean })
+    ], FormElement.prototype, "error", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormElement.prototype, "autofocus", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormElement.prototype, "disabled", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormElement.prototype, "required", void 0);
+    __decorate([
+        property()
+    ], FormElement.prototype, "name", null);
+    __decorate([
+        property()
+    ], FormElement.prototype, "value", null);
+    return FormElement;
+};
+export default Form;

package/core/mixins/FormInput.d.ts

@@ -0,0 +1,49 @@
+import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
+declare type Constructor<T> = new (...args: any[]) => T;
+declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T) => {
+    new (...args: any[]): {
+        /**
+         * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
+         * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
+         */
+        type: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+        tabindex: string | null;
+        autocomplete: "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "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;
+    };
+} & T;
+export default Form;

package/core/mixins/FormInput.js

@@ -0,0 +1,33 @@
+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 { property } from "lit/decorators.js";
+const Form = (superClass) => {
+    class FormInput extends superClass {
+        constructor(...args) {
+            super();
+            /**
+             * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
+             * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
+             */
+            this.type = "text";
+            this.tabindex = null;
+            this.autocomplete = null;
+            args;
+        }
+    }
+    __decorate([
+        property({ type: String })
+    ], FormInput.prototype, "type", void 0);
+    __decorate([
+        property({ type: String })
+    ], FormInput.prototype, "tabindex", void 0);
+    __decorate([
+        property({ type: String })
+    ], FormInput.prototype, "autocomplete", void 0);
+    return FormInput;
+};
+export default Form;

package/core/mixins/Subscriber.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+import { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
+declare type Constructor<T> = new (...args: any[]) => T;
+export interface SubscriberInterface {
+    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): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    removeAttribute(name: string): void;
+    initPublisher(): void;
+    getApiConfiguration(): APIConfiguration;
+    connectedCallback(): void;
+    requestUpdate(): void;
+    getAttribute(name: string): string;
+    hasAttribute(attributeName: String): boolean;
+    disconnectedCallback(): void;
+}
+declare const Subscriber: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SubscriberInterface> & T;
+export default Subscriber;