@supersoniks/concorde 1.1.44 → 1.1.46

package/core/components/ui/alert/alert.js

@@ -27,22 +27,34 @@ let Alert = class Alert extends LitElement {
          * Titre du message d'erreur
          */
         this.label = "";
+        this.noIcon = false;
         /**
          * Peut être renseigné dans le slot pour créer des messages plus complexes
          */
         this.text = "";
+        this.dismissible = false;
         this.background = false;
         this.status = "default";
     }
     render() {
         return html `<div part="alert" class="alert">
-      <div>${this.status && html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}</div>
+      ${!this.noIcon
+            ? html `<div>${this.status && html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}</div>`
+            : nothing}
       <div>
         ${this.label ? html `<span class="label">${unsafeHTML(this.label)}</span>` : nothing}
         <slot>${this.text}</slot>
       </div>
+      ${this.dismissible
+            ? html `<sonic-button @click=${this.close} class="close-btn" variant="unstyled" shape="circle">
+            <sonic-icon name="cancel" size="lg"></sonic-icon>
+          </sonic-button>`
+            : nothing}
     </div>`;
     }
+    close() {
+        this.remove();
+    }
 };
 Alert.styles = [
     fontSize,
@@ -84,10 +96,12 @@ Alert.styles = [
       }
 
       /*background*/
+      :host([dismissible]) .alert,
       :host([background]) .alert {
         background: var(--sc-base);
         padding: 0.8em 1.15em;
       }
+      :host([dismissible]) .alert:before,
       :host([background]) .alert:before {
         background-color: currentColor;
         content: "";
@@ -101,6 +115,7 @@ Alert.styles = [
         border-radius: var(--sc-alert-rounded);
         pointer-events: none;
       }
+      :host([dismissible]) > div,
       :host([background]) > div {
         z-index: 2;
         position: relative;
@@ -117,17 +132,34 @@ Alert.styles = [
       :host([size="sm"]) .alert {
         --sc-alert-rounded: var(--sc-rounded-sm);
       }
+
+      /*Dismissible*/
+      :host([dismissible]) .alert {
+        padding-right: 3rem;
+      }
+      :host([dismissible]) .close-btn {
+        padding: 0.5em;
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+      }
     `,
 ];
 __decorate([
     property({ type: String })
 ], Alert.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "noIcon", void 0);
 __decorate([
     property({ type: String })
 ], Alert.prototype, "text", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Alert.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "dismissible", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Alert.prototype, "background", void 0);

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

@@ -10,7 +10,7 @@ export declare class Badge extends LitElement {
     /**
      * Le type change surtout la couleur composant
      */
-    type: "default" | "primary" | "warning" | "danger" | "success" | "info";
+    type: "default" | "primary" | "warning" | "danger" | "success" | "info" | "neutral";
     /**
      * Le composant par defaut sans se paramètre à forte afordance
      * * gost : composant super léger visuellement

package/core/components/ui/badge/badge.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-badge";
 /**
  * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
@@ -50,9 +50,10 @@ Badge.styles = [
 
         --sc-badge-border-with: var(--sc-form-border-width, 0.1rem);
         --sc-badge-border-color: transparent;
-        --sc-badge-border: var(--sc-badge-border-with) solid var(--sc-badge-border-color);
+        --sc-badge-border: var(--sc-badge-border-with) solid
+          var(--sc-badge-border-color);
 
-        --sc-badge-rounded: 99px;
+        --sc-badge-rounded: 0.85em;
         --sc-badge-fw: var(--sc-font-weight-base);
 
         display: inline-flex;
@@ -129,6 +130,11 @@ Badge.styles = [
         --sc-badge-gap: 0.5em;
       }
 
+      :host([contrast]) {
+        --sc-badge-color: var(--sc-contrast-content);
+        --sc-badge-bg: var(--sc-contrast);
+      }
+
       /*OUTLINE*/
       :host([variant="outline"][type]) {
         border-width: var(--sc-badge-border-with) !important;

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

@@ -58,6 +58,7 @@ declare const Button_base: {
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
+        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;
 /**

package/core/components/ui/button/button.js

@@ -198,14 +198,14 @@ Button.styles = [
         --sc-btn-ff: var(--sc-btn-font-family);
 
         --sc-btn-height: var(--sc-form-height);
-        --sc-btn-color: var(--sc-base-content);
-        --sc-btn-bg: var(--sc-base-100);
+        --btn-color: var(--sc-btn-color, var(--sc-base-content));
+        --btn-bg: var(--sc-btn-bg, var(--sc-base-100));
 
         --sc-btn-border-style: solid;
-        --sc-btn-border-with: var(--sc-form-border-width);
+        --sc-btn-border-width: var(--sc-form-border-width);
         --sc-btn-border-color: transparent;
 
-        --sc-btn-outline-bg-hover: var(--sc-base-100);
+        --btn-outline-bg-hover: var(--sc-btn-outline-bg-hover, var(--sc-base-100));
         --sc-btn-ghost-bg-hover: var(--sc-base-100);
 
         --sc-btn-active-color: var(--sc-base);
@@ -246,15 +246,15 @@ Button.styles = [
         border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
           var(--sc-item-rounded-bl);
 
-        background: var(--sc-btn-bg);
-        color: var(--sc-btn-color);
+        background: var(--btn-bg);
+        color: var(--btn-color);
 
         padding-top: var(--sc-btn-py);
         padding-bottom: var(--sc-btn-py);
         padding-left: var(--sc-btn-px);
         padding-right: var(--sc-btn-px);
 
-        border: var(--sc-btn-border-with) var(--sc-btn-border-style) var(--sc-btn-border-color);
+        border: var(--sc-btn-border-width) var(--sc-btn-border-style) var(--sc-btn-border-color);
         min-height: var(--sc-btn-height);
       }
 
@@ -273,33 +273,37 @@ Button.styles = [
 
       /*TYPES*/
       :host([type="default"]) button {
-        --sc-btn-color: var(--sc-base-content);
-        --sc-btn-bg: var(--sc-base-100);
+        --btn-color: var(--sc-base-content);
+        --btn-bg: var(--sc-base-100);
       }
 
       :host([type="primary"]) button {
-        --sc-btn-color: var(--sc-primary-content);
-        --sc-btn-bg: var(--sc-primary);
+        --btn-color: var(--sc-primary-content);
+        --btn-bg: var(--sc-primary);
       }
       :host([type="warning"]) button {
-        --sc-btn-color: var(--sc-warning-content);
-        --sc-btn-bg: var(--sc-warning);
+        --btn-color: var(--sc-warning-content);
+        --btn-bg: var(--sc-warning);
       }
       :host([type="danger"]) button {
-        --sc-btn-color: var(--sc-danger-content);
-        --sc-btn-bg: var(--sc-danger);
+        --btn-color: var(--sc-danger-content);
+        --btn-bg: var(--sc-danger);
       }
       :host([type="info"]) button {
-        --sc-btn-color: var(--sc-info-content);
-        --sc-btn-bg: var(--sc-info);
+        --btn-color: var(--sc-info-content);
+        --btn-bg: var(--sc-info);
       }
       :host([type="success"]) button {
-        --sc-btn-color: var(--sc-success-content);
-        --sc-btn-bg: var(--sc-success);
+        --btn-color: var(--sc-success-content);
+        --btn-bg: var(--sc-success);
       }
       :host([type="neutral"]) button {
-        --sc-btn-color: var(--sc-base);
-        --sc-btn-bg: var(--sc-base-600);
+        --btn-color: var(--sc-base);
+        --btn-bg: var(--sc-base-600);
+      }
+      :host([type="custom"]) button {
+        --btn-color: var(--sc-btn-custom-color);
+        --btn-bg: var(--sc-btn-custom-bg);
       }
 
       /*UNSTYLED*/
@@ -324,12 +328,12 @@ Button.styles = [
 
       /*GHOST*/
       :host([variant="ghost"][type]) button {
-        color: var(--sc-btn-bg);
+        color: var(--btn-bg);
         background: transparent;
       }
 
       :host([variant="ghost"][type="default"]) button {
-        color: var(--sc-btn-color);
+        color: var(--btn-color);
         background: transparent;
       }
 
@@ -350,8 +354,8 @@ Button.styles = [
 
       /*OUTLINE*/
       :host([variant="outline"][type]) button {
-        border-color: var(--sc-btn-bg);
-        color: var(--sc-btn-bg);
+        border-color: var(--btn-bg);
+        color: var(--btn-bg);
         background: transparent;
       }
 
@@ -363,7 +367,7 @@ Button.styles = [
 
       /*:host([variant="outline"]) button:focus,*/
       :host([variant="outline"]) button:hover {
-        background: var(--sc-btn-outline-bg-hover);
+        background: var(--btn-outline-bg-hover);
       }
 
       /*OUTLINE*/
@@ -388,7 +392,7 @@ Button.styles = [
       }
 
       :host([variant="link"][type]) button {
-        color: var(--sc-btn-bg);
+        color: var(--btn-bg);
       }
       :host([variant="link"][type="default"]) button {
         color: inherit;
@@ -408,7 +412,7 @@ Button.styles = [
       :host([shape="square"]) button {
         width: var(--sc-btn-height);
         height: var(--sc-btn-height);
-        overflow: hidden;
+        /*overflow: hidden;*/ /* fix bug #42622 */
         padding: 0;
         align-items: center;
         justify-content: 0;

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

@@ -59,6 +59,7 @@ declare const Checkbox_base: {
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
+        getBoundingClientRect(): DOMRect;
     };
 } & {
     new (...args: any[]): {
@@ -136,6 +137,7 @@ declare const Checkbox_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;
 /**
@@ -163,6 +165,7 @@ export declare class Checkbox extends Checkbox_base {
     touched: boolean;
     iconName: string;
     indeterminateIconName: string;
+    showAsIndeterminate: boolean;
     hasDescription: boolean;
     hasLabel: boolean;
     slotLabelNodes: Array<Node>;

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);