@supersoniks/concorde 4.8.0 → 4.9.1

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

@@ -0,0 +1,323 @@
+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, queryAssignedNodes, state, } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { formControl, label, description, } 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 "@supersoniks/concorde/core/components/ui/icon/icon";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
+const tagName = "sonic-select";
+/**
+ * #### FormElement :
+ * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+ * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
+ * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
+ * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ */
+let Select = class Select extends FormElement(Subscriber(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.valueKey = "value";
+        this.wordingKey = "wording";
+        this.multiple = false;
+        this.status = "default";
+        this._options = [];
+        this.hasDoneFirstUpdate = false;
+        this._value = "";
+        this.updateOptions = () => {
+            const options = this.querySelectorAll("option");
+            if (options.length > 0) {
+                this.options = Array.from(options).map((option) => {
+                    return {
+                        value: option.value,
+                        wording: option.text,
+                        selected: option.hasAttribute("selected"),
+                    };
+                });
+            }
+        };
+        /*
+         * TODO
+         * Mutualiser avec le composant textarea / input
+         */
+        this.forceAutoFill = false;
+        this.hasDescription = false;
+        this.hasLabel = false;
+        this.hasSuffix = false;
+        this.hasPrefix = false;
+    }
+    set options(options) {
+        this._options = options;
+        for (const option of options) {
+            if (option.selected) {
+                this.value = option[this.valueKey] || "";
+            }
+        }
+        const value = this.value || this.getAttribute("value");
+        if (!value && this._options.length > 0) {
+            this.value = this._options[0][this.valueKey];
+        }
+        this.requestUpdate();
+    }
+    get options() {
+        return this._options;
+    }
+    firstUpdated(changedProperties) {
+        this.hasDoneFirstUpdate = true;
+        super.firstUpdated(changedProperties);
+    }
+    set value(value) {
+        if (value == null && !this.hasDoneFirstUpdate)
+            return;
+        if (!value)
+            value = "";
+        if (this._value == value)
+            return;
+        this._value = value;
+        this.updateFormPublisherValue();
+        this.requestUpdate();
+    }
+    get value() {
+        return this._value;
+    }
+    updateFormPublisherValue() {
+        this.setFormPublisherValue(this.value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.hasSlotOrProps();
+        this.updateOptions();
+    }
+    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();
+    }
+    willUpdate(changedProperties) {
+        this.hasSlotOrProps();
+        super.willUpdate(changedProperties);
+    }
+    hasSlotOrProps() {
+        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
+        this.hasDescription =
+            this.description || this.slotDescriptionNodes?.length ? true : false;
+        this.hasSuffix = this.slotSuffixNodes?.length ? true : false;
+        this.hasPrefix = this.slotPrefixNodes?.length ? true : false;
+    }
+    validateFormElement() {
+        const select = this.shadowRoot?.querySelector("select");
+        if (!select || select.checkValidity())
+            return;
+        const formPublisher = this.getFormPublisher();
+        if (formPublisher) {
+            formPublisher.isFormValid = false;
+        }
+        select.reportValidity();
+    }
+    render() {
+        const slotClasses = {
+            "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 /*+ labelStarSuffix*/) : ""}<slot
+          name="label"
+          @slotchange=${this.hasSlotOrProps}
+        ></slot
+      ></label>
+
+      <div class="form-control ${classMap(slotClasses)}">
+        <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
+        <div class="form-select-wrapper">
+          <select
+            data-form-element
+            id="form-element"
+            @change=${this.handleChange}
+            @blur=${this.handleBlur}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            ?multiple=${this.multiple}
+            size=${ifDefined(this.selectSize)}
+            ?autofocus=${this.autofocus}
+            .value="${this.value}"
+            class="form-element"
+            aria-label=${ifDefined(this.ariaLabel)}
+            aria-labelledby=${ifDefined(this.ariaLabelledby)}
+          >
+            ${repeat(this.options, (option) => option[this.valueKey], (option) => {
+            const isSelected = this.value == option[this.valueKey] ? true : false;
+            return html `<option
+                  ?selected=${isSelected}
+                  value="${option[this.valueKey]}"
+                >
+                  ${option[this.wordingKey]}
+                </option>`;
+        })}
+            <slot></slot>
+          </select>
+          <sonic-icon
+            class="select-chevron"
+            name="nav-arrow-down"
+            .size=${this.size}
+          ></sonic-icon>
+        </div>
+        <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
+      </div>
+
+      <slot
+        name="description"
+        @slotchange=${this.hasSlotOrProps}
+        class="${this.hasDescription ? "form-description" : "hidden"}"
+        >${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot
+      >
+    `;
+    }
+};
+Select.styles = [
+    fontSize,
+    formControl,
+    label,
+    description,
+    css `
+      .form-element {
+        appearance: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      :host([disabled]) sonic-icon {
+        opacity: 0;
+      }
+
+      @supports selector(:has(*)) {
+        :host(:not([disabled]):not([align="center"]))
+          .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]):not([align="center"])) .form-element {
+          padding-right: max(1.5em, calc(1.5 * var(--sc-input-px)));
+        }
+      }
+
+      .form-select-wrapper {
+        position: relative;
+        width: 100%;
+      }
+
+      sonic-icon {
+        position: absolute;
+        top: 50%;
+        pointer-events: none;
+        transform: translateY(-50%);
+        color: var(--sc-input-c);
+        right: 0.1em;
+        width: 1.275em;
+      }
+
+      option {
+        padding: 0.1rem var(--sc-input-px, 0);
+        color: var(--sc-base-content, #000);
+        background: var(--sc-base, #fff);
+      }
+
+      select[multiple] option {
+        background: transparent;
+        padding: 0;
+      }
+      :host([multiple]) sonic-icon {
+        display: none !important;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Select.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "wordingKey", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Select.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], Select.prototype, "selectSize", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Select.prototype, "status", void 0);
+__decorate([
+    property({ type: Array })
+], Select.prototype, "options", null);
+__decorate([
+    property({ reflect: true })
+], Select.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "forceAutoFill", void 0);
+__decorate([
+    property()
+], Select.prototype, "description", null);
+__decorate([
+    property()
+], Select.prototype, "label", null);
+__decorate([
+    queryAssignedNodes({ slot: "label", flatten: true })
+], Select.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description", flatten: true })
+], Select.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "suffix", flatten: true })
+], Select.prototype, "slotSuffixNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "prefix", flatten: true })
+], Select.prototype, "slotPrefixNodes", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasLabel", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasSuffix", void 0);
+__decorate([
+    state()
+], Select.prototype, "hasPrefix", void 0);
+Select = __decorate([
+    customElement(tagName)
+], Select);
+export { Select };
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/form/select/select.ts"],"names":[],"mappings":"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"}

package/dist/js/core/components/ui/form/switch/switch.js

@@ -0,0 +1,90 @@
+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 { css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+const tagName = "sonic-switch";
+let Switch = class Switch extends Checkbox {
+    constructor() {
+        super();
+        this.unique = true;
+    }
+};
+Switch.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;
+      }
+    `,
+];
+Switch = __decorate([
+    customElement(tagName)
+], Switch);
+export { Switch };
+//# sourceMappingURL=switch.js.map

package/dist/js/core/components/ui/form/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/form/switch/switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iEAAiE,CAAC;AAE3F,MAAM,OAAO,GAAG,cAAc,CAAC;AAExB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAuElC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;;AAzEM,aAAM,GAAG;IACd,QAAQ,CAAC,MAAM;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiEF;CACF,AApEY,CAoEX;AArES,MAAM;IADlB,aAAa,CAAC,OAAO,CAAC;GACV,MAAM,CA2ElB"}

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

@@ -0,0 +1,162 @@
+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 { css, html, LitElement } from "lit";
+import { customElement, property, queryAssignedNodes, state, } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { description, formControl, label, } 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";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { styleMap } from "lit/directives/style-map.js";
+const tagName = "sonic-textarea";
+let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
+    constructor() {
+        super(...arguments);
+        // @property({ type: String })
+        // type: "" | "primary" | "warning" | "danger" | "success" | "info" = "";
+        // @property({ type: String }) variant: "" | "ghost" | "outline" = "";
+        this.size = "md";
+        this.readonly = false;
+        this.resize = "vertical";
+        this.hasDescription = false;
+        this.hasLabel = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.hasSlotOrProps();
+    }
+    willUpdate(changedProperties) {
+        this.hasSlotOrProps();
+        super.willUpdate(changedProperties);
+    }
+    hasSlotOrProps() {
+        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
+        this.hasDescription =
+            this.description || this.slotDescriptionNodes?.length ? true : false;
+    }
+    validateFormElement() {
+        const textarea = this.shadowRoot?.querySelector("textarea");
+        if (!textarea || textarea.checkValidity())
+            return;
+        const formPublisher = this.getFormPublisher();
+        if (formPublisher) {
+            formPublisher.isFormValid = false;
+        }
+        textarea.reportValidity();
+    }
+    render() {
+        const textAreaStyle = {
+            resize: this.resize,
+        };
+        // let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
+        return html `
+      <label
+        for="${this.id || "form-element"}"
+        class="${this.hasLabel ? "form-label" : "hidden"}"
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
+          name="label"
+          @slotchange=${this.hasSlotOrProps}
+        ></slot
+      ></label>
+
+      <div class="form-control">
+        <textarea
+          data-form-element
+          id="${this.id || "form-element"}"
+          @input=${this.handleChange}
+          @blur=${this.handleBlur}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?autofocus=${this.autofocus}
+          rows=${ifDefined(this.rows)}
+          cols=${ifDefined(this.cols)}
+          maxlength=${ifDefined(this.maxlength)}
+          minlength=${ifDefined(this.minlength)}
+          ?readonly=${this.readonly}
+          spellcheck=${ifDefined(this.spellcheck)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          tabindex=${ifDefined(this.tabindex)}
+          wrap=${ifDefined(this.wrap)}
+          placeholder="${this.placeholder}"
+          class="form-element textarea custom-scroll"
+          aria-label=${ifDefined(this.ariaLabel)}
+          aria-labelledby=${ifDefined(this.ariaLabelledby)}
+          style=${styleMap(textAreaStyle)}
+        >
+${this.value}</textarea
+        >
+      </div>
+
+      <slot
+        name="description"
+        @slotchange=${this.hasSlotOrProps}
+        class="${this.hasDescription ? "form-description" : "hidden"}"
+        >${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot
+      >
+    `;
+    }
+};
+Textarea.styles = [
+    fontSize,
+    formControl,
+    label,
+    description,
+    customScroll,
+    css `
+      textarea {
+        overflow-y: auto !important;
+        font-size: inherit;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], Textarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number })
+], Textarea.prototype, "cols", void 0);
+__decorate([
+    property({ type: Number })
+], Textarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Number })
+], Textarea.prototype, "minlength", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "wrap", void 0);
+__decorate([
+    property({ type: Boolean })
+], Textarea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], Textarea.prototype, "resize", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "label", flatten: true })
+], Textarea.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description", flatten: true })
+], Textarea.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "hasLabel", void 0);
+Textarea = __decorate([
+    customElement(tagName)
+], Textarea);
+export { Textarea };
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/form/textarea/textarea.ts"],"names":[],"mappings":"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"}