@supersoniks/concorde 1.1.40 → 1.1.42

package/core/components/ui/form/input/password-helper.js

@@ -0,0 +1,118 @@
+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, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { Subscriber } from "@supersoniks/concorde/mixins";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+const tagName = "sonic-password-helper"; // For Astro.build
+let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.minChars = 8;
+        this.hasNoChar = true;
+        this.hasEnoughChars = false;
+        this.hasMinuscule = false;
+        this.hasMajuscule = false;
+        this.hasNumber = false;
+        this.hasSpecialChar = false;
+        this.wording_password_helper_decription = "Le mot de passe doit contenir au moins :";
+        this.wording_password_helper_min_length = "8 caractères";
+        this.wording_password_helper_lower_case = "1 minuscule";
+        this.wording_password_helper_upper_case = "1 majuscule";
+        this.wording_password_helper_number = "1 chiffre";
+        this.wording_password_helper_special_char = "1 caractère spécial";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.name) {
+            this.checkValue = (v) => {
+                if (v) {
+                    this.hasNoChar = v.length == 0;
+                    this.hasEnoughChars = v.length > this.minChars;
+                }
+                else {
+                    this.hasNoChar = true;
+                    this.hasEnoughChars = false;
+                }
+                this.hasMinuscule = /[a-z]/.test(v);
+                this.hasMajuscule = /[A-Z]/.test(v);
+                this.hasNumber = /[0-9]/.test(v);
+                this.hasSpecialChar = /[!"#$%&'()*+,\-\.\/:;<=>?@[\]^_`{|}~]/.test(v);
+            };
+            PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"))[this.name].onAssign(this.checkValue);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkValue && this.name) {
+            PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"))[this.name].offAssign(this.checkValue);
+        }
+    }
+    getIcon(test) {
+        return test
+            ? html `<sonic-icon library="heroicons" , name="face-smile"></sonic-icon>`
+            : html `<sonic-icon library="heroicons" , name="x-circle"></sonic-icon>`;
+    }
+    render() {
+        if (this.hasNoChar)
+            return nothing;
+        return html `
+      <div>${this.wording_password_helper_decription}</div>
+      <div>${this.getIcon(this.hasEnoughChars)} ${this.wording_password_helper_min_length}</div>
+      <div>${this.getIcon(this.hasMinuscule)} ${this.wording_password_helper_lower_case}</div>
+      <div>${this.getIcon(this.hasMajuscule)} ${this.wording_password_helper_upper_case}</div>
+      <div>${this.getIcon(this.hasNumber)} ${this.wording_password_helper_number}</div>
+      <div>${this.getIcon(this.hasSpecialChar)} ${this.wording_password_helper_special_char}</div>
+    `;
+    }
+};
+__decorate([
+    property()
+], SonicComponent.prototype, "name", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "minChars", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasNoChar", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasEnoughChars", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasMinuscule", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasMajuscule", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasNumber", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasSpecialChar", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_decription", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_min_length", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_lower_case", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_upper_case", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_number", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_special_char", void 0);
+SonicComponent = __decorate([
+    customElement(tagName)
+], SonicComponent);
+export { SonicComponent };

package/core/components/ui/form/input/same-value-helper.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, nothing } from "lit";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class SonicComponent extends SonicComponent_base {
+    name?: string;
+    sameValueAs?: string;
+    descriptionWhenEqual: string;
+    descriptionWhenNotEqual: string;
+    areEqual: boolean;
+    hasNoChar: boolean;
+    checkValue?: (v: string) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export {};

package/core/components/ui/form/input/same-value-helper.js

@@ -0,0 +1,76 @@
+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, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { Subscriber } from "@supersoniks/concorde/mixins";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const tagName = "sonic-same-value-helper"; // For Astro.build
+let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.descriptionWhenEqual = "Correspondance : oui";
+        this.descriptionWhenNotEqual = "Correspondance : non";
+        this.areEqual = false;
+        this.hasNoChar = true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+        if (this.name && this.sameValueAs) {
+            this.checkValue = (v) => {
+                if (v)
+                    this.hasNoChar = v.length == 0;
+                else
+                    this.hasNoChar = true;
+                if (this.name && this.sameValueAs) {
+                    this.areEqual = formDataProvider[this.name].get() == formDataProvider[this.sameValueAs].get();
+                }
+            };
+            formDataProvider[this.name].onAssign(this.checkValue);
+            formDataProvider[this.sameValueAs].onAssign(this.checkValue);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkValue && this.name && this.sameValueAs) {
+            let formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+            formDataProvider[this.name].offAssign(this.checkValue);
+            formDataProvider[this.sameValueAs].offAssign(this.checkValue);
+        }
+    }
+    //TODO Multilangue
+    render() {
+        if (this.hasNoChar)
+            return nothing;
+        return html `
+      <span> ${this.areEqual ? unsafeHTML(this.descriptionWhenEqual) : unsafeHTML(this.descriptionWhenNotEqual)} </span>
+    `;
+    }
+};
+__decorate([
+    property()
+], SonicComponent.prototype, "name", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "sameValueAs", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "descriptionWhenEqual", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "descriptionWhenNotEqual", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "areEqual", void 0);
+__decorate([
+    state()
+], SonicComponent.prototype, "hasNoChar", void 0);
+SonicComponent = __decorate([
+    customElement(tagName)
+], SonicComponent);
+export { SonicComponent };

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

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+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) & typeof LitElement;
+/**
+ * TODO Améliorer et valider le fonctionnement avec JB et Julien. Puis possiblement merger sur concorde
+ * 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.
+ */
+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);
+    placeholder: string;
+    filteredFields: string;
+    readonly: boolean | null;
+    dataProviderExpression: string;
+    key: string;
+    value: string;
+    formDataProvider: string;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,137 @@
+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, 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";
+/**
+ * TODO Améliorer et valider le fonctionnement avec JB et Julien. Puis possiblement merger sur concorde
+ * 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)) {
+    constructor() {
+        super(...arguments);
+        // Filtering input
+        this._name = "";
+        this.forceAutoFill = false;
+        this.placeholder = "";
+        this.filteredFields = "";
+        this.readonly = null;
+        this.dataProviderExpression = "";
+        this.key = "";
+        this.value = "";
+        this.formDataProvider = "";
+    }
+    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;
+    }
+    set description(value) {
+        if (this.hasAttribute("description") && !this.forceAutoFill)
+            value = this.getAttribute("description");
+        this._description = value;
+        this.requestUpdate();
+    }
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (this.hasAttribute("label") && !this.forceAutoFill)
+            value = this.getAttribute("label");
+        this._label = value;
+        this.requestUpdate();
+    }
+    connectedCallback() {
+        this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <sonic-pop toggle="false" style="display:block;">
+        <sonic-input
+          type="text"
+          data-keyboard-nav="nav-autocomplete"
+          label="${ifDefined(this.label)}"
+          description="${ifDefined(this.description)}"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          clearable
+        ></sonic-input>
+        <sonic-menu slot="content">
+          <sonic-queue
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.formDataProvider}"
+            key="${this.key}"
+            .templates=${this.templateList}
+            displayContents
+          >
+          </sonic-queue>
+        </sonic-menu>
+      </sonic-pop>
+    `;
+    }
+};
+InputAutocomplete.styles = [
+    css `
+      :host {
+        display: block;
+      }
+    `,
+];
+__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);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "filteredFields", void 0);
+__decorate([
+    property({ type: Boolean })
+], InputAutocomplete.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "key", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "value", void 0);
+InputAutocomplete = __decorate([
+    customElement("sonic-input-autocomplete")
+], InputAutocomplete);
+export { InputAutocomplete };
+// //Ajout pour custom-elements-manifest pour storybook notamment
+// try {
+// 	customElements.define("sonic-input-autocomplete", InputAutocomplete);
+// } catch (e) {}

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

@@ -123,9 +123,13 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
             "has-prefix": this.hasPrefix,
             "has-suffix": this.hasSuffix,
         };
+        //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label) : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
+          name="label"
+          @slotchange=${this.onSlotChange}
+        ></slot
       ></label>
 
       <div class="form-control ${classMap(slotClasses)}">

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

@@ -48,9 +48,13 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         textarea.reportValidity();
     }
     render() {
+        // let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label) : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
+          name="label"
+          @slotchange=${this.onSlotChange}
+        ></slot
       ></label>
 
       <div class="form-control">

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

@@ -1,17 +1,17 @@
-import { LitElement } from "lit";
-declare type PopPlacement = "bottom" | "top" | "right" | "left";
+import { LitElement } from 'lit';
+declare type PopPlacement = 'bottom' | 'top' | 'right' | 'left';
 export declare class Pop extends LitElement {
     static pops: Set<Pop>;
     static styles: import("lit").CSSResult[];
     open: boolean;
     popBtn: HTMLElement;
     popContent: HTMLElement;
-    toggle: "true" | "false";
+    toggle: 'true' | 'false';
     inline: boolean;
     /**
      * Ombre
      */
-    shadow: "" | "none" | "sm" | "md" | "lg";
+    shadow: '' | 'none' | 'sm' | 'md' | 'lg';
     placement: PopPlacement;
     positioningRuns: boolean;
     lastContentX: number;

package/core/components/ui/pop/pop.js

@@ -5,21 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Pop_1;
-import { html, LitElement, css } from "lit";
-import { customElement, query, state, property } from "lit/decorators.js";
-import HTML from "@supersoniks/concorde/core/utils/HTML";
-const tagName = "sonic-pop";
+import { html, LitElement, css } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
+import HTML from '@supersoniks/concorde/core/utils/HTML';
+const tagName = 'sonic-pop';
 let Pop = Pop_1 = class Pop extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
-        this.toggle = "true";
+        this.toggle = 'true';
         this.inline = false;
         /**
          * Ombre
          */
-        this.shadow = "lg";
-        this.placement = "bottom";
+        this.shadow = 'lg';
+        this.placement = 'bottom';
         this.positioningRuns = false;
         this.lastContentX = Number.NaN;
         this.lastContentY = Number.NaN;
@@ -32,16 +32,16 @@ let Pop = Pop_1 = class Pop extends LitElement {
         window.requestAnimationFrame(() => this.runPositioning());
     }
     _toggle(e) {
-        if (this.open && this.toggle == "false")
+        if (this.open && this.toggle == 'false')
             return;
-        if (e.type == "keydown" && (e.key != "ArrowDown" || this.open))
+        if (e.type == 'keydown' && (e.key != 'ArrowDown' || this.open))
             return;
         this.open = !this.open;
         this.open ? this._show() : this._hide();
     }
     _show() {
         this.open = true;
-        this.popContent.setAttribute("tabindex", "0");
+        this.popContent.setAttribute('tabindex', '0');
         if (this.popBtn && this.popContent && !this.positioningRuns) {
             this.positioningRuns = true;
             this.lastContentX = Number.NaN;
@@ -51,7 +51,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
     }
     _hide() {
         this.open = false;
-        this.popContent.setAttribute("tabindex", "-1");
+        this.popContent.setAttribute('tabindex', '-1');
         this.positioningRuns = false;
     }
     _handleClosePop(e) {
@@ -60,10 +60,10 @@ let Pop = Pop_1 = class Pop extends LitElement {
         Pop_1.pops.forEach((pop) => {
             const popContainsTarget = path.includes(pop);
             const popContentContainsTarget = path.includes(pop.querySelector('[slot="content"]'));
-            const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
-            if (e.type == "pointerdown" && popContainsTarget)
+            const isCloseManual = HTML.getAncestorAttributeValue(target, 'data-on-select') === 'keep';
+            if (e.type == 'pointerdown' && popContainsTarget)
                 return;
-            if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
+            if (e.type == 'click' && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
                 return;
             pop._hide();
         });
@@ -71,8 +71,8 @@ let Pop = Pop_1 = class Pop extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         if (Pop_1.pops.size == 0) {
-            document.addEventListener("pointerdown", this._handleClosePop);
-            document.addEventListener("click", this._handleClosePop);
+            document.addEventListener('pointerdown', this._handleClosePop);
+            document.addEventListener('click', this._handleClosePop);
         }
         Pop_1.pops.add(this);
     }
@@ -80,8 +80,8 @@ let Pop = Pop_1 = class Pop extends LitElement {
         super.disconnectedCallback();
         Pop_1.pops.delete(this);
         if (Pop_1.pops.size == 0) {
-            document.removeEventListener("pointerdown", this._handleClosePop);
-            document.removeEventListener("click", this._handleClosePop);
+            document.removeEventListener('pointerdown', this._handleClosePop);
+            document.removeEventListener('click', this._handleClosePop);
         }
     }
     _setUpMenu(placement) {
@@ -101,34 +101,34 @@ let Pop = Pop_1 = class Pop extends LitElement {
         let xRight = x0 + thisRect.width + 2 * padding;
         let yBottom = y0 + thisRect.height + padding;
         switch (placement) {
-            case "bottom":
+            case 'bottom':
                 y = yBottom;
                 break;
-            case "top":
+            case 'top':
                 y = yTop;
                 break;
-            case "left":
+            case 'left':
                 x = xLeft;
                 break;
-            case "right":
+            case 'right':
                 x = xRight;
                 break;
         }
         let dxRight = window.innerWidth - xRight - bodyRect.left - contentRect.width - shiftPadding;
-        if (dxRight < 0 && placement === "right")
+        if (dxRight < 0 && placement === 'right')
             x = xLeft;
-        if (dxRight < 0 && ["top", "bottom"].includes(placement))
+        if (dxRight < 0 && ['top', 'bottom'].includes(placement))
             x = Math.max(x + dxRight, xLeft + thisRect.width);
         let dxLeft = -bodyRect.left - xLeft;
-        if (dxLeft > shiftPadding && placement === "left")
+        if (dxLeft > shiftPadding && placement === 'left')
             x = xRight;
         let dyBottom = window.innerHeight - yBottom - bodyRect.top - contentRect.height - shiftPadding;
-        if (dyBottom < 0 && placement === "bottom")
+        if (dyBottom < 0 && placement === 'bottom')
             y = yTop;
-        if (dyBottom < 0 && ["left", "right"].includes(placement))
+        if (dyBottom < 0 && ['left', 'right'].includes(placement))
             y = Math.max(y + dyBottom, yTop + thisRect.height);
         let dyTop = -bodyRect.top - yTop;
-        if (dyTop > -shiftPadding && placement === "top")
+        if (dyTop > -shiftPadding && placement === 'top')
             y = yBottom;
         this.lastContentX = x;
         this.lastContentY = y;
@@ -145,7 +145,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
         tabindex="-1"
         part="content"
         class="  
-          ${this.open ? "is-open" : ""}"
+          ${this.open ? 'is-open' : ''}"
       ></slot>
     `;
     }
@@ -157,7 +157,8 @@ Pop.styles = [
         display: inline-block;
         vertical-align: middle;
       }
-      slot[name="content"] {
+      slot[name='content'] {
+        max-width: 80vw;
         background-color: var(--sc-base);
         position: absolute;
         z-index: 50;
@@ -165,36 +166,36 @@ Pop.styles = [
         transform: translateY(1rem) scale(0.95);
         opacity: 0;
         pointer-events: none;
-        transition-duration: 0.15s ;
+        transition-duration: 0.15s;
         transition-timing-function: ease;
-        transition-property:all;
+        transition-property: all;
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      slot[name="content"].is-open {
+      slot[name='content'].is-open {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;
-        transition-property:scale, opacity;
+        transition-property: scale, opacity;
         transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
       }
 
       /*OMBRE*/
-      :host([shadow]) slot[name="content"],
-      :host([shadow="md"]) slot[name="content"],
-      :host([shadow="true"]) slot[name="content"] {
+      :host([shadow]) slot[name='content'],
+      :host([shadow='md']) slot[name='content'],
+      :host([shadow='true']) slot[name='content'] {
         box-shadow: var(--sc-shadow);
       }
 
-      :host([shadow="sm"]) slot[name="content"] {
+      :host([shadow='sm']) slot[name='content'] {
         box-shadow: var(--sc-shadow-sm);
       }
 
-      :host([shadow="none"]) slot[name="content"] {
+      :host([shadow='none']) slot[name='content'] {
         box-shadow: none;
       }
 
-      :host([shadow="lg"]) slot[name="content"] {
+      :host([shadow='lg']) slot[name='content'] {
         box-shadow: var(--sc-shadow-lg);
       }
 
@@ -207,10 +208,10 @@ __decorate([
     state()
 ], Pop.prototype, "open", void 0);
 __decorate([
-    query("slot:not([name=content])")
+    query('slot:not([name=content])')
 ], Pop.prototype, "popBtn", void 0);
 __decorate([
-    query("slot[name=content]")
+    query('slot[name=content]')
 ], Pop.prototype, "popContent", void 0);
 __decorate([
     property({ type: String })

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

@@ -4,6 +4,9 @@ import "./button/button";
 import "./link/link";
 import "./progress/progress";
 import "./form/input/input";
+import "./form/input-autocomplete/input-autocomplete";
+import "./form/input/password-helper";
+import "./form/input/same-value-helper";
 import "./form/checkbox/checkbox";
 import "./form/radio/radio";
 import "./form/select/select";