@supersoniks/concorde 1.1.44 → 1.1.46

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

@@ -3,7 +3,67 @@ import "@supersoniks/concorde/core/components/ui/form/input/input";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
 import "@supersoniks/concorde/core/components/functional/queue/queue";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
-declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
+import { Size } from "../../_css/size";
+type ListItem = Record<string, string>;
+declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & {
+    new (...args: any[]): {
+        validateFormElement(): void;
+        forceAutoFill: boolean;
+        _type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
+        _description?: string | undefined;
+        description: string | undefined;
+        _label?: string | undefined;
+        label: string | undefined;
+        tabindex?: number | undefined;
+        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" | undefined;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        handleChange(e?: Event | undefined): void;
+        handleBlur(e?: Event | undefined): void;
+        getValueForFormPublisher(): string | object | string[] | null | undefined;
+        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("../../../../mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 /**
  * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
  * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
@@ -11,24 +71,44 @@ declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../
  */
 export declare class InputAutocomplete extends InputAutocomplete_base {
     static styles: import("lit").CSSResult[];
-    _name: string;
-    get name(): string;
-    set name(value: string);
-    forceAutoFill: boolean;
-    _description?: string;
-    get description(): string | undefined;
-    set description(value: string | undefined);
-    _label?: string;
-    get label(): string | undefined;
-    set label(value: string | undefined);
+    /**
+     * Possibles mutualisation avec text
+     */
+    size: Size;
     placeholder: string;
     filteredFields: string;
     readonly: boolean | null;
     dataProviderExpression: string;
+    select?: boolean;
     key: string;
-    value: string;
+    searchParameter: string;
+    /**
+     * Les dataProviders
+     */
+    private searchDataProvider;
+    private initSearchDataProvider;
+    private queueDataProvider;
+    private initQueueDataProvider;
+    private lastValidSearch;
+    private searchPublisher?;
+    private countPublisher?;
+    private initCountPublisher?;
+    private formValuePublisher?;
+    /**
+     * Les fonctions de gestion
+     */
+    private updateSearchParameter;
+    private initSearchParameter;
+    private selectListItem;
+    private findSearchedItem;
+    private findSelection;
+    private setSearchFromSelection;
+    private updateActiveSelection;
     connectedCallback(): void;
-    formDataProvider: string;
+    disconnectedCallback(): void;
+    queryQueueListItem(queueDataProvider: string, itemFinder: (listItem: ListItem) => boolean, itemMutator: (listItem: ListItem) => void): void;
+    setSelectionRange(start: number, end: number): void;
+    handleHide(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -4,87 +4,222 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { Subscriber, TemplatesContainer } from "@supersoniks/concorde/mixins";
+import { FormInput, FormElement, Subscriber, TemplatesContainer, } from "@supersoniks/concorde/mixins";
 import "@supersoniks/concorde/core/components/ui/form/input/input";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
 import "@supersoniks/concorde/core/components/functional/queue/queue";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 /**
  * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
  * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
  * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
  */
-let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(Subscriber(LitElement)) {
+let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
-        // Filtering input
-        this._name = "";
-        this.forceAutoFill = false;
+        /**
+         * Possibles mutualisation avec text
+         */
+        this.size = "md";
         this.placeholder = "";
         this.filteredFields = "";
         this.readonly = null;
         this.dataProviderExpression = "";
         this.key = "";
-        this.value = "";
-        this.formDataProvider = "";
+        this.searchParameter = "";
+        /**
+         * Les dataProviders
+         */
+        this.searchDataProvider = "";
+        this.initSearchDataProvider = "";
+        this.queueDataProvider = "";
+        this.initQueueDataProvider = "";
+        this.lastValidSearch = "";
+        /**
+         * Les fonctions de gestion
+         */
+        this.updateSearchParameter = (value) => {
+            if (value == "") {
+                this.lastValidSearch = "";
+                return;
+            }
+            this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
+        };
+        this.initSearchParameter = () => {
+            this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
+        };
+        this.selectListItem = (listItem) => {
+            var _a;
+            (_a = this.formValuePublisher) === null || _a === void 0 ? void 0 : _a.set(listItem[this.name]);
+        };
+        this.findSearchedItem = (listItem) => {
+            var _a;
+            return (listItem[this.searchParameter || this.name] == ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()));
+        };
+        this.findSelection = (listItem) => {
+            return listItem[this.name] == this.value;
+        };
+        this.setSearchFromSelection = (listItem) => {
+            var _a;
+            this.lastValidSearch = listItem[this.searchParameter || this.name];
+            (_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.set(this.lastValidSearch);
+        };
+        this.updateActiveSelection = () => {
+            var _a, _b, _c;
+            this.queryQueueListItem(this.queueDataProvider, this.findSearchedItem, this.selectListItem);
+            if (!this.select &&
+                this.lastValidSearch &&
+                this.lastValidSearch != ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) &&
+                ((_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.get())) {
+                (_c = this.formValuePublisher) === null || _c === void 0 ? void 0 : _c.set("");
+            }
+        };
     }
-    get name() {
-        return this._name;
-    }
-    set name(value) {
-        if (this.hasAttribute("name") && !this.forceAutoFill)
-            value = this.getAttribute("name");
-        this._name = value;
-        this.requestUpdate();
-    }
-    get description() {
-        return this._description;
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        /**
+         * Nom de la valeur de recherche
+         * Si non défini, on utilise name
+         **/
+        const searchParameter = this.searchParameter || this.name;
+        /**
+         * Nommage des différents dataProviders utilisés
+         */
+        const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        const dpPrefix = formDataProvider + "__autocomplete";
+        this.initSearchDataProvider = `${dpPrefix}_init_search__`;
+        this.initQueueDataProvider = `${dpPrefix}_init_queue__`;
+        this.searchDataProvider = `${dpPrefix}_search__`;
+        this.queueDataProvider = `${dpPrefix}_queue__`;
+        /**
+         * Les publishers utilisés plusieurs fois dans la classe son miss en propriétés privées de la classe
+         */
+        const getPublisher = PublisherManager.get;
+        this.searchPublisher = getPublisher(this.searchDataProvider)[searchParameter];
+        this.formValuePublisher = getPublisher(formDataProvider)[this.name];
+        this.countPublisher = getPublisher(this.queueDataProvider).resultCount;
+        this.initCountPublisher = getPublisher(this.initQueueDataProvider).resultCount;
+        /**
+         * Si une valeur est fourrnie a l'initialisation, un queue spécifique appelle le service avec le name founi en paramètre
+         * Pour récupérer la valeur de searchParameter correspondante et renseigner l'input
+         **/
+        if (this.value) {
+            PublisherManager.get(this.initSearchDataProvider)[this.name] = this.value;
+        }
+        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.onAssign(this.initSearchParameter);
+        /**
+         * Lorsque la sélection change, on met à jour la valeur de recherche
+         */
+        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.onAssign(this.updateSearchParameter);
+        /**
+         * Lorsque La valeur de recherche change, que le composant n'est pas en mode select
+         * et qu'elle est différente de la derniere recherche valide on désactive la selection
+         */
+        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.onAssign(this.updateActiveSelection);
     }
-    set description(value) {
-        if (this.hasAttribute("description") && !this.forceAutoFill)
-            value = this.getAttribute("description");
-        this._description = value;
-        this.requestUpdate();
+    disconnectedCallback() {
+        var _a, _b, _c;
+        super.disconnectedCallback();
+        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.offAssign(this.initSearchParameter);
+        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.offAssign(this.updateSearchParameter);
+        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.offAssign(this.updateActiveSelection);
+        const getPublisher = PublisherManager.get;
+        getPublisher(this.initSearchDataProvider).delete();
+        getPublisher(this.initQueueDataProvider).delete();
+        getPublisher(this.searchDataProvider).delete();
+        getPublisher(this.queueDataProvider).delete();
     }
-    get label() {
-        return this._label;
+    queryQueueListItem(queueDataProvider, itemFinder, itemMutator) {
+        const queuePublisher = PublisherManager.get(queueDataProvider);
+        let listItem;
+        const listsDescriptors = queuePublisher.get();
+        if (!Array.isArray(listsDescriptors))
+            return;
+        for (const listDescriptor of listsDescriptors) {
+            const list = PublisherManager.get(listDescriptor.dataProvider).get();
+            if (!Array.isArray(list))
+                continue;
+            listItem = list.find(itemFinder);
+            console.log(listItem);
+            if (listItem) {
+                break;
+            }
+        }
+        if (listItem) {
+            itemMutator(listItem);
+        }
     }
-    set label(value) {
-        if (this.hasAttribute("label") && !this.forceAutoFill)
-            value = this.getAttribute("label");
-        this._label = value;
-        this.requestUpdate();
+    setSelectionRange(start, end) {
+        var _a;
+        (_a = this.querySelector("sonic-input")) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
     }
-    connectedCallback() {
-        this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-        super.connectedCallback();
+    handleHide() {
+        var _a, _b, _c;
+        if (!this.select)
+            return;
+        if (((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) == "") {
+            this.lastValidSearch = "";
+            (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.set("");
+            return;
+        }
+        (_c = this.searchPublisher) === null || _c === void 0 ? void 0 : _c.set(this.lastValidSearch);
     }
     render() {
         return html `
-      <sonic-pop toggle="false" style="display:block;">
+      <sonic-pop noToggle style="display:block;" @hide=${this.handleHide}>
         <sonic-input
+          debug
+          dataProvider="${this.initSearchDataProvider + Math.random()}"
+          formDataProvider="${this.searchDataProvider}"
           type="search"
-          data-keyboard-nav="nav-autocomplete"
+          data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
           label="${ifDefined(this.label)}"
           description="${ifDefined(this.description)}"
-          name="${ifDefined(this.name)}"
-          value="${ifDefined(this.value)}"
+          name="${ifDefined(this.searchParameter || this.name)}"
+          placeholder="${ifDefined(this.placeholder)}"
+          ?readonly="${this.readonly}"
           autocomplete="off"
           clearable
-        ></sonic-input>
+          inlineContent
+          size=${this.size}
+        >
+          ${this.select
+            ? html `
+                <sonic-icon
+                  slot="suffix"
+                  class="select-chevron"
+                  name="nav-arrow-down"
+                  .size=${this.size}
+                ></sonic-icon>
+              `
+            : nothing}
+        </sonic-input>
         <sonic-menu slot="content">
           <sonic-queue
+            dataProvider="${this.queueDataProvider}"
             filteredFields=${this.filteredFields}
             dataProviderExpression="${this.dataProviderExpression}"
-            dataFilterProvider="${this.formDataProvider}"
+            dataFilterProvider="${this.searchDataProvider}"
             key="${this.key}"
             .templates=${this.templateList}
             displayContents
           >
           </sonic-queue>
+          <sonic-queue
+            noLazyload
+            dataProvider="${this.initQueueDataProvider}"
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.initSearchDataProvider}"
+            key="${this.key}"
+            displayContents
+          >
+          </sonic-queue>
         </sonic-menu>
       </sonic-pop>
     `;
@@ -98,17 +233,8 @@ InputAutocomplete.styles = [
     `,
 ];
 __decorate([
-    property()
-], InputAutocomplete.prototype, "name", null);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "forceAutoFill", void 0);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "description", null);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "label", null);
+    property({ type: String })
+], InputAutocomplete.prototype, "size", void 0);
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "placeholder", void 0);
@@ -121,12 +247,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: Boolean })
+], InputAutocomplete.prototype, "select", void 0);
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "key", void 0);
 __decorate([
     property({ type: String })
-], InputAutocomplete.prototype, "value", void 0);
+], InputAutocomplete.prototype, "searchParameter", void 0);
 InputAutocomplete = __decorate([
     customElement("sonic-input-autocomplete")
 ], InputAutocomplete);

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

@@ -203,9 +203,16 @@ Select.styles = [
         opacity: 0;
       }
 
-      /* Désactive padding right pour les sélecteur désactivé avec une option*/
-      :host(:not([disabled])) .form-element:not(:has(option:only-child)) {
-        padding-right: max(1em, calc(0.8 * var(--sc-input-px)));
+      @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 {
@@ -223,10 +230,15 @@ Select.styles = [
       }
 
       option {
-        padding: 0.1rem 5rem;
+        padding: 0.1rem var(--sc-input-px);
         color: var(--sc-base-content);
         background: var(--sc-base);
       }
+
+      select[multiple] option {
+        background: transparent;
+        padding: 0;
+      }
     `,
 ];
 __decorate([

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

@@ -55,6 +55,7 @@ declare const Textarea_base: {
         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 {

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

@@ -19,7 +19,7 @@ let Group = class Group extends LitElement {
         this.hasLabel = false;
     }
     updated() {
-        const children = this.querySelectorAll("sonic-input, sonic-button");
+        const children = this.querySelectorAll("sonic-input, sonic-button, sonic-select");
         const nbChildren = children.length;
         if (nbChildren > 1) {
             children.forEach((item, index) => {
@@ -91,6 +91,12 @@ Group.styles = [
       .hidden {
         display: none;
       }
+
+      ::slotted(sonic-button),
+      ::slotted(sonic-input),
+      ::slotted(sonic-select) {
+        flex-grow: 1;
+      }
     `,
 ];
 __decorate([

package/core/components/ui/icon/icon.js

@@ -44,7 +44,7 @@ let Icon = class Icon extends LitElement {
             return;
         this.renderId++;
         const frameRenderId = this.renderId;
-        window.requestAnimationFrame(() => __awaiter(this, void 0, void 0, function* () {
+        (window.queueMicrotask || window.requestAnimationFrame)(() => __awaiter(this, void 0, void 0, function* () {
             if (frameRenderId != this.renderId) {
                 return;
             }

package/core/components/ui/modal/modal-close.js

@@ -26,9 +26,8 @@ ModalClose.styles = [
         display: block;
         align-self: flex-end;
         height: 0;
-        top: 0;
-        padding-top: 0.5rem;
-        padding-right: 0.5rem;
+        top: 0.5rem;
+        right: 0.5rem;
         transform: translate3d(calc(var(--sc-modal-px)), calc(-1 * var(--sc-modal-py)), 0);
         z-index: 20;
       }

package/core/components/ui/modal/modal-content.js

@@ -16,6 +16,7 @@ ModalContent.styles = [
     css `
       :host {
         display: block;
+        width: 100%;
       }
     `,
 ];

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

@@ -6,17 +6,25 @@ import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
 import "@supersoniks/concorde/core/components/ui/modal/modal-title";
 declare type ModalCreateOptions = {
     content?: string;
+    zIndex?: string;
+    paddingX?: string;
+    paddingY?: string;
+    width?: string;
+    maxWidth?: string;
+    removeOnHide?: boolean;
 };
 declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("@supersoniks/concorde/core/_types/types").CoreJSType>) & typeof LitElement;
 export declare class Modal extends Modal_base {
     static styles: import("lit").CSSResult[];
     forceAction: boolean;
+    removeOnHide: boolean;
     align: "center" | "right" | "left";
     padding: string;
     maxWidth: string;
     maxHeight: string;
     width: string;
     height: string;
+    zIndex: string;
     fullScreen: boolean;
     visible: boolean;
     modalWrapper: HTMLDivElement;