@supersoniks/concorde 3.1.50 → 3.1.53

package/docs/svg/regular/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M576 256C576 305 502.1 336 464.2 336H382.2L282.4 496C276.4 506 266.4 512 254.4 512H189.5C179.5 512 169.5 508 163.5 500C157.6 492 155.6 480.1 158.6 471L201.5 336H152.5L113.6 388C107.6 396 98.61 400 88.62 400H31.7C22.72 400 12.73 396 6.74 388C.7485 380-1.248 370 1.747 360L31.7 256L.7488 152C-1.248 143 .7488 133 6.74 125C12.73 117 22.72 112 31.7 112H88.62C98.61 112 107.6 117 113.6 125L152.5 176H201.5L158.6 41C155.6 32 157.6 21 163.5 13C169.5 5 179.5 0 189.5 0H254.4C265.4 0 277.4 7 281.4 16L381.2 176H463.2C502.1 176 576 208 576 256H576zM527.1 256C525.1 246 489.1 224 463.2 224H355.3L245.4 48H211.5L266.4 224H128.6L80.63 160H53.67L81.63 256L53.67 352H80.63L128.6 288H266.4L211.5 464H245.4L355.3 288H463.2C490.1 288 526.1 267 527.1 256V256z"/></svg>

package/docs/svg/solid/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.50",
+  "version": "3.1.53",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -141,6 +141,9 @@
     "./select": "./src/core/components/ui/form/select/select.ts",
     "./ui/select": "./src/core/components/ui/form/select/select.ts",
     "./ui/form/select": "./src/core/components/ui/form/select/select.ts",
+    "./switch": "./src/core/components/ui/form/switch/switch.ts",
+    "./ui/switch": "./src/core/components/ui/form/switch/switch.ts",
+    "./ui/form/switch": "./src/core/components/ui/form/switch/switch.ts",
     "./textarea": "./src/core/components/ui/form/textarea/textarea.ts",
     "./ui/textarea": "./src/core/components/ui/form/textarea/textarea.ts",
     "./ui/form/textarea": "./src/core/components/ui/form/textarea/textarea.ts",

package/src/core/components/functional/if/if.md

@@ -1,4 +1,4 @@
-# if / condition
+# if
 
 The **sonic-if** component shows its content based on the value of its reactive property names **condition**
 

package/src/core/components/ui/button/button.md

@@ -1,7 +1,5 @@
 # Button
 
-
-
 ## Type
 <sonic-code>
   <template>

package/src/core/components/ui/card/card.md

@@ -83,7 +83,7 @@
       <sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
     </sonic-card-header>
     <sonic-card-main >
-      <sonic-image rounded ratio="11/4" src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
+      <sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
       </sonic-image>
       <p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
     </sonic-card-main>

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

@@ -11,7 +11,7 @@ const tagName = "sonic-divider";
 export class Divider extends LitElement {
   static styles = [
     css`
-      :host {
+      :host { 
         --sc-divider-my: 0.5rem;
         --sc-divider-mx: 0;
         --sc-divider-border-width: max(

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

@@ -46,6 +46,7 @@ export class Checkbox extends FormCheckable(
         );
         --sc-checkbox-bg: var(--sc-input-bg);
         --sc-checkbox-color: transparent;
+        font-size: var(--sc-_fs);
       }
 
       * {
@@ -58,7 +59,6 @@ export class Checkbox extends FormCheckable(
         gap: 0.5em;
         line-height: 1.2;
         align-items: flex-start;
-        font-size: var(--sc-_fs);
       }
 
       .icon-container {

package/src/core/components/ui/form/form-layout/form-layout.md

@@ -31,6 +31,7 @@
       <sonic-divider></sonic-divider>
       <sonic-textarea label="Message" rows="5">
       </sonic-textarea>
+      <sonic-switch>Activer une superbe option</sonic-switch>
       <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
       <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
       <sonic-form-actions>

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

@@ -62,6 +62,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     | "lg"
     | "xl"
     | "2xl";
+  @property({ type: String }) inputmode?: string;
   @property({ type: String }) list?: string;
   @property({ type: String }) placeholder?: string;
   @property({ type: String }) pattern?: string;
@@ -217,6 +218,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
               min=${ifDefined(this.min)}
               max=${ifDefined(this.max)}
               step=${ifDefined(this.step)}
+              inputmode=${ifDefined(this.inputmode)}  
               src=${ifDefined(this.src)}
               minlength=${ifDefined(this.minlength)}
               maxlength=${ifDefined(this.maxlength)}

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

@@ -0,0 +1,84 @@
+# Switch
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="switchSizeExemple">
+      <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
+      <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
+      <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
+      <sonic-switch name="size" value="default" >default switch</sonic-switch>
+      <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
+      <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
+      <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-switch checked
+    >Already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-switch disabled
+    >Disabled switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-switch disabled checked
+    >Disabled but already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## switch with link
+<sonic-code>
+  <template>
+  <sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use
+<sonic-code>
+  <template>
+      <sonic-subscriber dataProvider="jokeFilterswitch" class="text-xl my-4 block font-bold">
+        Remove following jokes :
+        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
+      </sonic-subscriber>
+      <div formDataProvider="jokeFilterswitch"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
+        <sonic-switch name="blacklistFlags"  value="nsfw">nsfw</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="religious">religious</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="political">political</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="racist" checked >racist</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="sexist"  >sexist</sonic-switch>
+        <sonic-switch name="blacklistFlags"   value="explicit">explicit</sonic-switch>
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?amount=10&lang=en"
+        dataFilterProvider="jokeFilterswitch"
+        serviceURL="https://v2.jokeapi.dev"
+        key="jokes"
+      >
+        <template>
+          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
+            <sonic-value key="joke"></sonic-value>
+            <sonic-value key="setup" class="font-bold"></sonic-value><br>
+            <sonic-value key="delivery"></sonic-value>
+          </div>
+        </template>
+      </sonic-queue>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,77 @@
+import { css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+
+const tagName = "sonic-switch";
+@customElement(tagName)
+export class Switch extends Checkbox {
+  static styles = [
+    Checkbox.styles,
+    css`
+      sonic-icon {
+        display: none;
+      }
+
+      .icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: baseline;
+        position: relative;
+        font-size: var(--sc-_fs, 1rem);
+      }
+      :host([disabled]) .icon-container {
+        cursor: not-allowed;
+      }
+
+      :host input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        flex-shrink: 0;
+        width: 100%;
+        width: calc(var(--sc-_fs) * 2.5) !important;
+        cursor: pointer;
+        border-radius: 1.75em;
+        background-color: var(--sc-checkbox-bg);
+      }
+
+      :host input:checked {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        flex-shrink: 0;
+        width: 100%;
+        width: calc(var(--sc-_fs) * 2.5) !important;
+        cursor: pointer;
+        border-radius: 1.75em;
+        border-color: var(--sc-primary, var(--sc-base-content, #fff));
+        background-color: var(--sc-primary, var(--sc-base-content, #fff));
+      }
+
+      .icon-container::after {
+        content: "";
+        position: absolute;
+        height: round(calc(95% - var(--sc-checkbox-border-width)), 1px);
+        aspect-ratio: 1/1;
+        border-radius: 50%;
+        left: var(--sc-checkbox-border-width);
+        top: 50%;
+        transform: translateY(-50%);
+        display: block;
+        background-color: var(--sc-input-color, var(--sc-base-content, #000));
+        transition: all 0.2s ease-in-out;
+      }
+
+      .icon-container:has(input:checked)::after {
+        left: calc(100% - var(--sc-checkbox-border-width));
+        background-color: var(--sc-primary-content, var(--sc-base, #fff));
+        transform: translateX(-100%) translateY(-50%);
+      }
+
+      input + sonic-icon {
+        display: none;
+      }
+    `,
+  ];
+}

package/src/core/components/ui/image/image.md

@@ -6,38 +6,38 @@
   <template>
     <div class="grid gap-8 grid-cols-3 items-center">
       <sonic-image
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
         ratio="1/1"
       >
       </sonic-image>
       <sonic-image
         rounded="sm"
         ratio="1/1"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         rounded
         ratio="1/1"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         rounded="md"
         ratio="1/1"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         rounded="lg"
         ratio="1/1"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         rounded="full"
         ratio="1/1"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
     </div>
@@ -50,22 +50,22 @@
   <template>
     <div class="grid gap-8 grid-cols-2 items-center">
       <sonic-image
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         ratio="16/9"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         ratio="1/1"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
       <sonic-image
         ratio="2/3"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
     </div>
@@ -78,13 +78,13 @@
   <template>
     <div class="grid gap-8 grid-cols-2 items-center">
       <sonic-image
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
         ratio="11/4"
       >
       </sonic-image>
       <sonic-image
         objectPosition="center top"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
         ratio="11/4"
       >
       </sonic-image>
@@ -99,7 +99,7 @@
     <div class="h-96 relative">
       <sonic-image
         cover
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       >
       </sonic-image>
     </div>

package/src/core/components/ui/modal/modal.md

@@ -101,7 +101,7 @@
       <sonic-image
         cover
         objectPosition="center 20%"
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       ></sonic-image>
     </sonic-modal>
   </template>
@@ -116,7 +116,7 @@
       <sonic-modal-close></sonic-modal-close>
       <sonic-image
         cover
-        src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
       ></sonic-image>
     </sonic-modal>
   </template>

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

@@ -12,6 +12,7 @@ import "./form/input/password-helper";
 import "./form/input/same-value-helper";
 import "./form/checkbox/checkbox";
 import "./form/radio/radio";
+import "./form/switch/switch";
 import "./form/select/select";
 import "./form/textarea/textarea";
 import "./form/fieldset/fieldset";