@supersoniks/concorde 1.1.45 → 1.1.46

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

@@ -41,6 +41,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
         this.touched = false;
         this.iconName = "check";
         this.indeterminateIconName = "minus-small";
+        this.showAsIndeterminate = false;
         this.hasDescription = false;
         this.hasLabel = false;
     }
@@ -56,7 +57,8 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
     hasSlotOrProps() {
         var _a, _b;
         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.hasDescription =
+            this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
     }
     render() {
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
@@ -69,6 +71,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             @click=${this.handleChange}
             @blur=${this.handleBlur}
             ?required=${this.required}
+            ?data-indeterminate=${this.showAsIndeterminate}
             .disabled=${ifDefined(this.disabled)}
             .checked=${ifDefined(this.checked)}
             .name=${this.name}
@@ -77,7 +80,9 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             aria-label=${ifDefined(this.ariaLabel)}
             aria-labelledby=${ifDefined(this.ariaLabelledby)}
           />
-          <sonic-icon name="${this.checked == "indeterminate" ? this.indeterminateIconName : this.iconName}" class="sc-input-icon"></sonic-icon>
+          <sonic-icon name="${this.checked == "indeterminate" || this.showAsIndeterminate
+            ? this.indeterminateIconName
+            : this.iconName}" class="sc-input-icon"></sonic-icon>
         </span>
 
         <div class="checkbox-text ${!this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"}">
@@ -134,7 +139,8 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-checkbox-bg);
-        border: var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
+        border: var(--sc-checkbox-border-width) solid
+          var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -169,11 +175,13 @@ Checkbox.styles = [
 
       /*Active */
       input:checked,
+      input[data-indeterminate],
       input[checked] {
         --sc-checkbox-border-color: var(--sc-primary);
         --sc-checkbox-bg: var(--sc-primary);
       }
       input:checked + sonic-icon,
+      input[data-indeterminate] + sonic-icon,
       input[checked] + sonic-icon {
         --sc-checkbox-color: var(--sc-primary-content);
         transform: translateX(-50%) translateY(-50%) scale(1);
@@ -228,6 +236,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "indeterminateIconName", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "showAsIndeterminate", void 0);
 __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", void 0);

package/core/components/ui/form/css/form-control.d.ts

@@ -1,3 +1,4 @@
+export declare const passwordToggle: import("lit").CSSResult;
 export declare const label: import("lit").CSSResult;
 export declare const description: import("lit").CSSResult;
 export declare const formControl: import("lit").CSSResult;

package/core/components/ui/form/css/form-control.js

@@ -1,4 +1,16 @@
 import { css } from "lit";
+export const passwordToggle = css `
+  .password-toggle {
+    color: var(--sc-input-c);
+    font-size: var(--sc-input-fs);
+    cursor: pointer;
+    margin-right: calc(-0.5 * var(--sc-input-px));
+  }
+
+  :host([inlineContent]) .has-suffix .password-toggle {
+    margin-right: 0;
+  }
+`;
 export const label = css `
   :host {
     --sc-label-fs: var(--sc-fs, 1rem);
@@ -168,6 +180,11 @@ export const formControl = css `
     margin-left: auto;
   }
 
+  :host([inlineContent]) .no-suffix slot[name="suffix"],
+  :host([inlineContent]) .no-prefix slot[name="prefix"] {
+    display: none;
+  }
+
   /* :host([inlineContent]) .input {
 
   }*/

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

@@ -50,14 +50,12 @@ declare const Input_base: {
         removeAttribute(name: string): void;
         initPublisher(): void;
         getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
-        /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
         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 Input extends Input_base {
@@ -78,6 +76,7 @@ export declare class Input extends Input_base {
     src?: string;
     inlineContent: boolean;
     disableInlineContentFocus: boolean;
+    showPasswordToggle: boolean;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
@@ -87,15 +86,18 @@ export declare class Input extends Input_base {
     hasLabel: boolean;
     hasSuffix: boolean;
     hasPrefix: boolean;
+    isPassword: boolean;
     sameValueAsHandle?: (v: string) => void;
     sameValueAsName?: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues): void;
+    setSelectionRange(start: number, end: number): void;
     hasSlotOrProps(): void;
     inlineContentFocus(): void;
     changeTimeoutId?: ReturnType<typeof setTimeout>;
     handleChange(e?: Event): void;
+    togglePasswordVisibility(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement, property, queryAssignedNodes, state, } from "lit/decorators.js";
 import { query } from "lit/decorators/query.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl, label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { formControl, label, description, passwordToggle, } 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";
@@ -32,10 +32,12 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.readonly = false;
         this.inlineContent = false;
         this.disableInlineContentFocus = false;
+        this.showPasswordToggle = false;
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
         this.hasPrefix = false;
+        this.isPassword = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -48,6 +50,11 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                 return;
             formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
         }
+        if (this.type == "password") {
+            this.isPassword = true;
+            this.showPasswordToggle = true;
+            this.inlineContent = true;
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -62,10 +69,14 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.hasSlotOrProps();
         super.willUpdate(changedProperties);
     }
+    setSelectionRange(start, end) {
+        this.input.setSelectionRange(start, end);
+    }
     hasSlotOrProps() {
         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.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;
     }
@@ -84,10 +95,19 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             clearTimeout(this.changeTimeoutId);
         this.changeTimeoutId = setTimeout(() => super.handleChange(e), parseInt(this.getAttribute("inputDelayMs")));
     }
+    // toggle password visibility
+    togglePasswordVisibility() {
+        this.isPassword = !this.isPassword;
+        this._type = this.isPassword ? "password" : "text";
+        console.log(this.isPassword);
+        // this.type = this.isPassword ? "password" : "text";
+    }
     render() {
         const slotClasses = {
             "has-prefix": this.hasPrefix,
             "has-suffix": this.hasSuffix,
+            "no-suffix": !this.hasSuffix,
+            "no-prefix": !this.hasPrefix,
         };
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
@@ -128,6 +148,20 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
               .name=${this.name}
               .value=${this.value}
             />
+              ${this.showPasswordToggle
+            ? html `<sonic-button
+                      shape="circle"
+                      class="password-toggle"
+                      @click=${this.togglePasswordVisibility}
+                      aria-label="Toggle password visibility"
+                      variant="unstyled"
+                    >
+                      <sonic-icon
+                        library="heroicons"
+                        name=${this.isPassword ? "eye" : "eye-slash"}
+                      ></sonic-icon>
+                    </sonic-button>`
+            : ""}
             <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
           </div>
         </div>
@@ -148,11 +182,15 @@ Input.styles = [
     formControl,
     label,
     description,
+    passwordToggle,
     css `
       :host([type="hidden"]) {
         appearance: none !important;
         display: none !important;
       }
+      :host > .form-control {
+        position: relative;
+      }
     `,
 ];
 __decorate([
@@ -194,6 +232,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "disableInlineContentFocus", void 0);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "showPasswordToggle", void 0);
 __decorate([
     queryAssignedNodes({ slot: "label" })
 ], Input.prototype, "slotLabelNodes", void 0);
@@ -221,6 +262,9 @@ __decorate([
 __decorate([
     state()
 ], Input.prototype, "hasPrefix", void 0);
+__decorate([
+    state()
+], Input.prototype, "isPassword", void 0);
 Input = __decorate([
     customElement(tagName)
 ], Input);

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 {};