@supersoniks/concorde 3.1.64 → 3.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.64",
+  "version": "3.1.66",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/functional/list/list.ts

@@ -72,6 +72,7 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
   @property({ type: Object }) items?: ListItems;
   @property({ type: Object }) noItems?: () => DirectiveResult;
   @property({ type: Object }) skeleton?: () => DirectiveResult;
+  @property({ type: Object }) separator?: () => DirectiveResult;
 
   connectedCallback() {
     this.noShadowDom = "";
@@ -101,6 +102,14 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     if (!(this.isLoading && template)) return nothing;
     return templateContent(template) as DirectiveResult;
   }
+  renderSeparator() {
+    if (this.separator) {
+      return this.separator();
+    }
+    const template = this.templateParts["separator"];
+    if (!template) return nothing;
+    return templateContent(template) as DirectiveResult;
+  }
 
   renderLoadingState():
     | DirectiveResult<typeof TemplateContentDirective>
@@ -280,7 +289,7 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     const templateCount = this.templateList.length;
     let counter = -1;
     const extractValues = this.hasAttribute("extractValues");
-    const separator = this.templateParts["separator"];
+    const separator = this.renderSeparator();
     const length = props?.length || 0;
 
     const items = props?.slice(this.offset, this.offset + this.limit);
@@ -328,8 +337,8 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
           key
         );
         if (programmaticTemplate) {
-          return html`${programmaticTemplate}${separator && !isLastChild
-            ? templateContent(separator)
+          return html`${programmaticTemplate}${!isLastChild
+            ? separator
             : nothing}`;
         }
 
@@ -349,7 +358,7 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
               ? templateContent(templatePart)
               : templateContent(this.templateList[counter % templateCount])}
           </sonic-subscriber>
-          ${separator && !isLastChild ? templateContent(separator) : nothing}
+          ${!isLastChild ? separator : nothing}
         `;
       })}
     `;

package/src/core/components/functional/queue/queue.ts

@@ -229,6 +229,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
    * * Si pas d'expression *$offset* le composant se comporte un peu comme une liste, il ne va pas essayer de charger les éléments suivants
    */
   @property({ type: String }) dataProviderExpression = "";
+  @property({ type: Boolean }) invalidateOnPageShow = false;
 
   @property({ type: String }) idKey = "id";
 
@@ -356,6 +357,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
             displayContents
             lazyBoundsRatio=${this.lazyBoundsRatio}
             ?lazyload=${lazyload}
+            ?invalidateOnPageShow=${this.invalidateOnPageShow}
             localStorage=${this.localStorage}
             requestId=${this.requestId}
             .itemPropertyMap=${this.itemPropertyMap}

package/src/core/components/ui/form/checkbox/checkbox.md

@@ -51,11 +51,21 @@
 
 ## Check all checkbox
 <sonic-code>
-  <template>
-      <div formDataProvider="checkbox-check-all-demo">
-      <sonic-checkbox  checked name='someSharedName' value="all" checksAll>All</sonic-checkbox>
-      <sonic-checkbox checked name="someSharedName" value="foo">Foo</sonic-checkbox>
-      <sonic-checkbox checked name="someSharedName" value="bar">Bar</sonic-checkbox>
+  <template>    
+      <div formDataProvider="checkbox-check-all-demo" dataProvider="checkbox-check-all-demo">
+      <sonic-checkbox  name='someSharedName' value="all" checksAll>All</sonic-checkbox>
+      <sonic-divider></sonic-divider>
+      <div class="grid gap-2">
+      <sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
+      <sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
+      </div>
+      <sonic-divider></sonic-divider>
+      <div>
+        <span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
+        <div id="prunable-checkbox" class="flex gap-2 items-center">
+        <sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
+        <sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
+        </div>
     </div>
   </template>
 </sonic-code>

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

@@ -144,7 +144,7 @@ export class Checkbox extends FormCheckable(
 
       /*INPUT HOVER*/
       :host(:not([disabled])) label:hover input {
-        filter: brightness(0.97);
+        background-color: hsl(from var(--sc-input-bg) h s calc(l * 0.97));
       }
 
       ::slotted(a) {

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

@@ -246,8 +246,7 @@ export const formControl = css`
   :host(:not([disabled])) .form-element:hover,
   .form-element:focus-visible,
   .form-element:focus {
-    filter: brightness(0.97);
-    outline: none;
+    background-color: hsl(from var(--sc-input-bg) h s calc(l * 0.97));
   }
 
   .form-label {

package/src/core/components/ui/form/fieldset/fieldset.ts

@@ -77,6 +77,7 @@ export class Fieldset extends Subscriber(LitElement) {
   @property({ type: String }) iconName?: string;
   @property({ type: String }) iconLibrary?: string;
   @property({ type: String }) iconPrefix?: string;
+
   @property({ type: Boolean, reflect: true }) tight?: boolean;
 
   @property({ type: String, reflect: true }) variant:

package/src/core/components/ui/form/fieldset/legend-description.ts

@@ -13,6 +13,13 @@ export class LegendDescription extends LitElement {
         font-weight: var(--sc-font-weight-base, 400);
         font-style: var(--sc-font-style-base, normal);
         margin-top: 0.2em;
+        container-type: inline-size;
+      }
+
+      @container (max-inline-size: 28rem) {
+        :host {
+          font-size: 1rem;
+        }
       }
     `,
   ];

package/src/core/components/ui/form/fieldset/legend.ts

@@ -22,8 +22,14 @@ export class Legend extends LitElement {
         --sc-legend-color: var(--sc-base-content, #000);
         display: flex;
         width: 100%;
+        container-type: inline-size;
       }
 
+      @container (max-inline-size: 28rem) {
+        legend {
+          --sc-legend-font-size: 1.3rem;
+        }
+      }
       legend {
         font-size: var(--sc-legend-font-size);
         font-weight: var(--sc-legend-font-weight);
@@ -35,7 +41,7 @@ export class Legend extends LitElement {
         display: flex;
         width: 100%;
         align-items: flex-start;
-        gap: 0.5em;
+        gap: 0.35em;
       }
 
       slot[name="suffix"] {

package/src/core/components/ui/form/select/select.ts

@@ -58,14 +58,15 @@ export class Select extends FormElement(Subscriber(LitElement)) {
       }
 
       @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)));
+        :host([align="left"]:not([disabled]))
+          .form-element:not(:has(option:only-child)) {
+          padding-right: max(1.5em, 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)));
+        :host([align="left"]:not([disabled])) .form-element {
+          padding-right: max(1.5em, calc(1.5 * var(--sc-input-px)));
         }
       }
 
@@ -76,11 +77,12 @@ export class Select extends FormElement(Subscriber(LitElement)) {
 
       sonic-icon {
         position: absolute;
-        right: calc(0.8 * var(--sc-input-px));
         top: 50%;
         pointer-events: none;
         transform: translateY(-50%);
         color: var(--sc-input-c);
+        right: 0.1em;
+        width: 1.275em;
       }
 
       option {
@@ -93,6 +95,9 @@ export class Select extends FormElement(Subscriber(LitElement)) {
         background: transparent;
         padding: 0;
       }
+      :host([multiple]) sonic-icon {
+        display: none !important;
+      }
     `,
   ];
 

package/src/core/components/ui/toast/toast.ts

@@ -206,11 +206,9 @@ export class SonicToast extends LitElement {
   }
 }
 
-
-
-
 if (typeof window !== "undefined") {
-  window[sonicClassPrefix+"Toast"] = window[sonicClassPrefix+"Toast"]  || SonicToast;
+  window[sonicClassPrefix + "Toast"] =
+    window[sonicClassPrefix + "Toast"] || SonicToast;
 }
 
 /**

package/src/core/mixins/FormCheckable.ts

@@ -62,8 +62,6 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
      */
     @property({ type: Boolean }) radio: true | null = null;
 
-    @property({ type: Boolean }) unCheckOnDisconnect = false;
-
     /**
      * propriété checked avec des caractéristiques similaire à un input html classique.
      */
@@ -229,7 +227,7 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
             checkAllPublisher.checkMode = "noneChecked";
           }
         }
-        if (allValues.indexOf(this.value) == -1) {
+        if (allValues.indexOf(this.value) == -1 && this.unsetOnDisconnect()) {
           this.checked = null;
         }
       }
@@ -249,6 +247,9 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
         this.setAttribute("indeterminate", "");
       }
     };
+    unset() {
+      this.checked = null;
+    }
     disconnectedCallback(): void {
       super.disconnectedCallback();
 

package/src/core/mixins/FormElement.ts

@@ -20,6 +20,8 @@ export interface FormElementInterface extends SubscriberInterface {
   setValueFromPublisher(value: FormElementValue): void;
   setFormPublisherValue(value: FormElementValue): void;
   getFormPublisherValue(): FormElementValue;
+  unsetOnDisconnect(): boolean;
+  unset(): void;
 
   validateFormElement(): void;
   focus?: () => void;
@@ -101,6 +103,9 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
     validateFormElement() {
       //Implémentation dans une sous classe
     }
+    unsetOnDisconnect() {
+      return this.hasAttribute("unsetOnDisconnect");
+    }
 
     updateDataValue() {
       const name = this.getAttribute("name");
@@ -313,8 +318,14 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       super.connectedCallback();
       this.addKeyboardNavigation();
     }
+    unset() {
+      this.value = null;
+    }
 
     disconnectedCallback() {
+      if (this.unsetOnDisconnect()) {
+        this.unset();
+      }
       super.disconnectedCallback();
       if (this._name && this.publisher)
         traverseDotNotation(this.publisher, this._name).offAssign(

package/src/core/mixins/Subscriber.ts

@@ -168,7 +168,6 @@ const Subscriber = <
       this.requestUpdate();
     }
 
-   
     protected updated(_changedProperties: PropertyValues): void {
       super.updated(_changedProperties);
       const ref = this.shadowRoot || this;
@@ -211,11 +210,10 @@ const Subscriber = <
         this.initWording();
         this.shouldRenderLazy = false;
       }
-      
+
       this.initPublisher();
       this.addDebugger();
       super.connectedCallback();
-
     }
 
     disconnectedCallback() {
@@ -343,8 +341,6 @@ const Subscriber = <
       this.props = v;
     };
 
-  
-
     initPublisher() {
       if (!document) return;
       if (this.publisher) {
@@ -367,6 +363,7 @@ const Subscriber = <
 
         let pub = mng.get(publisherId, {
           localStorageMode: this.getAttribute("localStorage") || "disabled",
+          invalidateOnPageShow: this.hasAttribute("invalidateOnPageShow"),
         });
         this.dataProvider = publisherId;
 
@@ -381,10 +378,9 @@ const Subscriber = <
         }
         this.publisher = pub;
       }
-      if(this.hasAttribute("lazyRendering")) {
+      if (this.hasAttribute("lazyRendering")) {
         return;
-      }
-      else{
+      } else {
         this.startPublisher();
       }
     }