@supersoniks/concorde 1.1.24 → 1.1.25

package/core/components/ui/toast/toast-item.js

@@ -14,6 +14,7 @@ const icon = {
     error: "warning-circled-outline",
     info: "info-empty",
 };
+const tagName = "sonic-toast-item";
 let SonicToastItem = class SonicToastItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,6 +23,7 @@ let SonicToastItem = class SonicToastItem extends LitElement {
         this.status = "";
         this.ghost = false;
         this.preserve = false;
+        this.maxHeight = '10rem';
         this.visible = true;
     }
     render() {
@@ -30,22 +32,25 @@ let SonicToastItem = class SonicToastItem extends LitElement {
         }
         return html `<div
       class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
-      
     >
-      ${this.status &&
-            html `<sonic-icon prefix="iconoir" name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
-      
-      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
-        <sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon>
-      </button>
+    
+    <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
+    <sonic-icon  name="cancel" size="lg"></sonic-icon>
+    </button>
+    <div class="sonic-toast-content custom-scroll"  style="max-height: ${this.maxHeight} ;">
       
-      <div class="sonic-toast-text">
-        ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
-        ${this.text ? unsafeHTML(this.text) : ""}
-        <slot></slot>
-      </div>
-
-      ${!this.preserve ? this.autoHide() : ""}
+        ${this.status &&
+            html `<sonic-icon  name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+        
+          
+          <div class="sonic-toast-text">
+          ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
+          ${this.text ? unsafeHTML(this.text) : ""}
+          <slot></slot>
+          </div>
+          
+          ${!this.preserve ? this.autoHide() : ""}
+        </div>
     </div>`;
     }
     hide() {
@@ -71,6 +76,7 @@ SonicToastItem.styles = [
       :host {
         display: block;
         pointer-events: auto;
+        position: relative;
         --sc-toast-status-color: transparent;
         --sc-toast-color: var(--sc-base-content);
         --sc-toast-bg: var(--sc-base);
@@ -78,13 +84,6 @@ SonicToastItem.styles = [
         --sc-toast-shadow: var(--sc-shadow-lg);
       }
 
-      .sonic-toast-area {
-        pointer-events: none;
-        width: calc(100% - 2.5rem);
-        max-width: 64ch;
-        gap: 1rem;
-      }
-
       .fixed-area {
         position: fixed;
         bottom: 1.25rem;
@@ -97,22 +96,27 @@ SonicToastItem.styles = [
       .sonic-toast {
         position: relative;
         pointer-events: auto;
-        background: var(--sc-toast-bg);
+        overflow:hidden;
+        line-height: 1.25;
         color: var(--sc-toast-color);
         box-shadow: var(--sc-toast-shadow);
         border-radius: var(--sc-toast-rounded);
-        padding: 1em 2.5rem 1em 1em;
-        line-height: 1.25;
+        background: var(--sc-toast-bg);
+      }
+
+      .sonic-toast-content {
+        padding: 1em 2rem 1em 1em;
         display: flex;
         gap: 0.5rem;
-        max-height: 10rem;
         overflow: auto;
-      }
+        position:relative;
+      } 
 
       .sonic-toast-text {
         align-self: center;
         margin-top: auto;
         margin-bottom: auto;
+        max-width:70ch;
       }
 
       ::slotted(a),
@@ -126,6 +130,7 @@ SonicToastItem.styles = [
       .sonic-toast-close {
         all: unset;
         position: absolute;
+        z-index:4;
         pointer-events: initial;
         right: 0.5em;
         top: 0.5em;
@@ -186,11 +191,10 @@ SonicToastItem.styles = [
       .error,
       .info,
       .warning {
-        border-top: 3px solid var(--sc-toast-status-color, curentColor);
+        border-top: 3px solid var(--sc-toast-status-color, currentColor);
       }
 
       .sonic-toast:before {
-        background-color: var(--sc-toast-status-color);
         content: "";
         display: block;
         position: absolute;
@@ -201,22 +205,45 @@ SonicToastItem.styles = [
         opacity: 0.05;
         pointer-events: none;
         transition: 0.2s;
-        border-radius: var(--sc-toast-status-color);
+        border-radius: var(--sc-toast-rounded);
+        background-color: var(--sc-toast-status-color);
       }
+      
       .sonic-toast:hover:before {
         opacity: 0.025;
       }
+
       .info .sonic-toast-icon,
       .error .sonic-toast-icon,
       .success .sonic-toast-icon,
       .warning .sonic-toast-icon {
-        color: var(--sc-toast-status-color, curentColor);
+        color: var(--sc-toast-status-color, currentColor);
+      }
+
+      .sonic-toast-icon {
+        position:sticky;
+        top:0;
       }
 
       .ghost {
         opacity: 0.85;
         pointer-events: none;
       }
+
+      /*TODO :: mutualiser le scroll */
+      .custom-scroll::-webkit-scrollbar {
+        width: 0.8rem;
+        border: solid 3px transparent;
+        border-radius: var(--sc-rounded);
+        background:transparent;
+      }
+
+      .custom-scroll::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 2rem 2rem var(--sc-base-500);
+        border-radius: var(--sc-rounded);
+        border: solid 3px transparent;
+      }
+
     `,
 ];
 __decorate([
@@ -234,10 +261,13 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SonicToastItem.prototype, "preserve", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "maxHeight", void 0);
 __decorate([
     state()
 ], SonicToastItem.prototype, "visible", void 0);
 SonicToastItem = __decorate([
-    customElement("sonic-toast-item")
+    customElement(tagName)
 ], SonicToastItem);
 export { SonicToastItem };

package/core/components/ui/toast/toast.js

@@ -13,6 +13,7 @@ import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { styleMap } from "lit/directives/style-map.js";
 import "./toast-item";
+const tagName = "sonic-toast";
 let SonicToast = class SonicToast extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,22 +23,22 @@ let SonicToast = class SonicToast extends LitElement {
         return this;
     }
     render() {
+        const isIframe = !(window.parent == window);
         let styles = {
             pointerEvents: "none",
-            width: "calc(100% - 2.5rem)",
-            maxWidth: "64ch",
             gap: "1rem",
             display: "flex",
+            margin: "1rem"
         };
-        if (window.parent == window) {
-            styles = Object.assign(Object.assign({}, styles), { position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "999", flexDirection: "column-reverse" });
+        if (!isIframe) {
+            styles = Object.assign(Object.assign({}, styles), { margin: "0", width: "calc(100% - 2.5rem)", position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "999", maxWidth: "64ch", flexDirection: "column-reverse" });
         }
         // ${window.parent == window ? "fixed-area" : ""}
         if (!this.toasts)
             return nothing;
         return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
-          <sonic-toast-item status=${item.status} ?ghost=${item.ghost} ?preserve=${item.preserve} id=${item.id}
+          <sonic-toast-item maxHeight=${isIframe ? 'none' : '10rem'} status=${item.status} ?ghost=${item.ghost} ?preserve=${item.preserve} id=${item.id}
             @hide=${() => this.removeItem(item)}
             ${animate({
             keyframeOptions: {
@@ -108,7 +109,7 @@ __decorate([
     property({ type: Array })
 ], SonicToast.prototype, "toasts", void 0);
 SonicToast = __decorate([
-    customElement("sonic-toast")
+    customElement(tagName)
 ], SonicToast);
 export { SonicToast };
 if (typeof window !== "undefined") {

package/core/components/ui/tooltip/tooltip.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+const tagName = "sonic-tooltip";
 let Tooltip = class Tooltip extends LitElement {
     constructor() {
         super(...arguments);
@@ -63,6 +64,11 @@ __decorate([
     property({ type: Boolean })
 ], Tooltip.prototype, "disabled", void 0);
 Tooltip = __decorate([
-    customElement("sonic-tooltip")
+    customElement(tagName)
 ], Tooltip);
 export { Tooltip };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, Tooltip);
+}
+catch (e) { }

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

@@ -11,6 +11,7 @@ import "./form/textarea/textarea";
 import "./form/fieldset/fieldset";
 import "./form/fieldset/legend";
 import "./form/form-layout/form-layout";
+import "./form/form-actions/form-actions";
 import "./group/group";
 import "./icon/icon";
 import "./image/image";

package/core/components/ui/ui.js

@@ -14,6 +14,7 @@ import "./form/textarea/textarea";
 import "./form/fieldset/fieldset";
 import "./form/fieldset/legend";
 import "./form/form-layout/form-layout";
+import "./form/form-actions/form-actions";
 import "./group/group";
 // MISC
 import "./icon/icon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {
@@ -82,8 +82,8 @@
     "./ui/form/fieldset/legend-description": "./core/components/ui/form/fieldset/legend-description",
     "./core/components/ui/form/fieldset/legend": "./core/components/ui/form/fieldset/legend",
     "./ui/form/fieldset/legend": "./core/components/ui/form/fieldset/legend",
-    "./core/components/ui/form/form-layout/form-actions": "./core/components/ui/form/form-layout/form-actions",
-    "./ui/form/form-layout/form-actions": "./core/components/ui/form/form-layout/form-actions",
+    "./core/components/ui/form/form-actions/form-actions": "./core/components/ui/form/form-actions/form-actions",
+    "./ui/form/form-actions": "./core/components/ui/form/form-actions/form-actions",
     "./core/components/ui/form/form-layout/form-layout": "./core/components/ui/form/form-layout/form-layout",
     "./ui/form/form-layout": "./core/components/ui/form/form-layout/form-layout",
     "./core/components/ui/form/input/input": "./core/components/ui/form/input/input",

package/core/components/ui/form/form-layout/form-actions.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from "lit";
-declare const FormActions_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-export declare class FormActions extends FormActions_base {
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};