@ds-autonomie/web-components 2.5.1 → 2.7.0

package/dist/chunks/chunk.44PC44MV.js

@@ -0,0 +1,152 @@
+import {
+  filter_base_styles_default
+} from "./chunk.E3IQDNCT.js";
+
+// src/components/filter-date/filter-date.styles.ts
+import { css } from "lit";
+var filter_date_styles_default = css`
+  ${filter_base_styles_default}
+
+  .filter-button {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    min-height: var(--dsa-wc-form-input-height);
+    padding: var(--dsa-spacing-4) var(--dsa-spacing-4) var(--dsa-spacing-4)
+      var(--dsa-spacing-12);
+    border: 1px solid var(--dsa-wc-filter-date-border-color);
+    border-radius: var(--dsa-wc-filter-date-border-radius);
+    font: var(--dsa-wc-filter-date-font);
+    background-color: var(--dsa-wc-filter-date-background-color);
+  }
+  .filter-button > * {
+    line-height: 1.875rem;
+  }
+
+  .filter-button--date-active {
+    background-color: var(--dsa-wc-filter-date-active-background-color);
+  }
+
+  .filter-button:focus-within:not(.filter-button--icon-focused) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  .filter-button:hover:not(.filter-button--disabled):not(
+      .filter-button--readonly
+    ),
+  .filter-button:focus-within,
+  .filter-button--date-active,
+  .filter-button--opened {
+    border-color: var(--dsa-wc-filter-date-active-border-color);
+  }
+
+  .filter-button--disabled {
+    background-color: var(--dsa-wc-filter-button-disabled-background-color);
+    border-color: var(--dsa-wc-filter-button-disabled-border-color);
+    opacity: var(--dsa-wc-opacity-50);
+  }
+
+  .filter-button--readonly {
+    background-color: var(--dsa-wc-filter-button-readonly-background-color);
+    border-color: var(--dsa-wc-filter-button-readonly-border-color);
+    pointer-events: none;
+  }
+
+  .filter-input {
+    margin-left: var(--dsa-spacing-8);
+  }
+
+  .filter-button--no-calendar {
+    padding-right: var(--dsa-spacing-12);
+  }
+
+  .filter-button--date-active .filter-input {
+    color: var(--dsa-wc-filter-date-input-color);
+  }
+
+  .filter-input::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  .filter-input::-webkit-datetime-edit-month-field,
+  .filter-input::-webkit-datetime-edit-day-field,
+  .filter-input::-webkit-datetime-edit-year-field {
+    text-transform: uppercase;
+  }
+
+  .filter-button--date-active .filter-input.filter-input--invalid {
+    color: var(--dsa-wc-error-text-color);
+  }
+
+  .filter-label {
+    display: contents;
+    flex-shrink: 0;
+    font: inherit;
+    color: var(--dsa-wc-filter-date-label-color);
+  }
+
+  .filter-separator {
+    color: var(--dsa-color-primitive-colors-neutral-600);
+    margin-left: var(--dsa-spacing-8);
+  }
+
+  .filter__trigger::part(base) {
+    color: var(--dsa-wc-filter-date-icon-button-color);
+  }
+
+  .filter-button--opened .filter__trigger::part(base),
+  .filter__trigger:hover::part(base),
+  .filter__trigger:focus::part(base) {
+    color: var(--dsa-wc-filter-date-active-icon-button-color);
+  }
+
+  .filter-button--disabled .filter__trigger::part(base) {
+    color: var(-dsa-wc-filter-date-disabled-icon-button-color);
+  }
+
+  .filter-button--readonly .filter__trigger::part(base) {
+    color: var(--dsa-wc-filter-date-readonly-icon-button-color);
+  }
+
+  .filter .filter__panel {
+    padding: var(--dsa-wc-filter-date-panel-padding);
+  }
+
+  /**
+   * In drawer 
+   **/
+  :host([drawer]) .filter__content {
+    display: flex;
+    justify-content: center;
+    padding: var(--dsa-spacing-16) var(--dsa-spacing-16) var(--dsa-spacing-8);
+  }
+  :host([drawer]) #drawer__filter::part(filter-button) {
+    background: var(--dsa-wc-filter-date-active-background-color);
+  }
+  :host([drawer]) #drawer__filter::part(filter-label) {
+    display: block;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  :host([drawer]) .filter__footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--dsa-spacing-8) var(--dsa-spacing-16);
+  }
+`;
+
+export {
+  filter_date_styles_default
+};

package/dist/chunks/chunk.4H63REQH.js

@@ -0,0 +1,207 @@
+import {
+  renderFormElementErrors
+} from "./chunk.IZBHR7GP.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/internal/components/form-control/form-control-layout.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var FormControlLayout = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "label",
+      "prefix",
+      "suffix",
+      "tooltip"
+    );
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.variant = "base";
+    this.label = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.placeholder = "";
+    this.readonly = false;
+    this.error = false;
+    this.errorMessage = "";
+    this.form = "";
+    this.required = false;
+    this.description = "";
+    this.success = false;
+    this.successMessage = "";
+  }
+  renderInput() {
+    return html``;
+  }
+  renderCounter() {
+    return html``;
+  }
+  renderSuccessMessage() {
+    return html``;
+  }
+  handleLabelClick() {
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    if (!hasLabel && !this.title) {
+      a11yWarning(
+        "Form controls require a label attribute or a label slot for accessibility"
+      );
+    }
+    if (this.error && !this.errorMessage) {
+      a11yWarning(
+        "Form controls requires an error-message attribute for accessibility when the error attribute is set"
+      );
+    }
+    return html`
+        <div
+          part="form-control"
+          class=${classMap({
+      "form-control": true,
+      "form-control--error": this.error,
+      "form-control--success": this.success && !this.error,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+        >
+          <label
+            id="label"
+            part="form-control-label"
+            class='form-control__label'
+            for="input"
+            aria-hidden=${ifDefined(hasLabel ? void 0 : "true")}
+            @click=${this.handleLabelClick}
+          >
+            ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
+            <slot name="label">${this.label}</slot>
+          </label>
+          <slot name="tooltip" class="form-control__tooltip"></slot>
+  
+          <div part="form-control-input" class="form-control-input form-control__field">
+            ${this.renderInput()}  
+          </div>
+  
+          <slot
+            name="help-text"
+            part="form-control-help-text"
+            id="help-text"
+            class="form-control__help-text"
+            aria-hidden=${hasHelpText ? "false" : "true"}
+          >
+            ${this.helpText}
+          </slot>
+  
+          ${this.renderCounter()}
+
+          ${this.description !== "" ? html`
+                  <p id="description" class="form-control__description">
+                    ${this.description}
+                  </p>
+                ` : ""}
+  
+          ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
+          ${this.success ? this.renderSuccessMessage() : ""}
+          </div>
+        </div>
+      `;
+  }
+};
+__decorateClass([
+  property()
+], FormControlLayout.prototype, "title", 2);
+__decorateClass([
+  property()
+], FormControlLayout.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], FormControlLayout.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], FormControlLayout.prototype, "variant", 2);
+__decorateClass([
+  property()
+], FormControlLayout.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], FormControlLayout.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FormControlLayout.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], FormControlLayout.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FormControlLayout.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormControlLayout.prototype, "error", 2);
+__decorateClass([
+  property({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value ? value.split("|") : "",
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
+], FormControlLayout.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ reflect: true })
+], FormControlLayout.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FormControlLayout.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], FormControlLayout.prototype, "description", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormControlLayout.prototype, "success", 2);
+__decorateClass([
+  property({
+    attribute: "success-message",
+    converter: {
+      fromAttribute: (value) => value ? value.split("|") : "",
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
+], FormControlLayout.prototype, "successMessage", 2);
+
+export {
+  FormControlLayout
+};

package/dist/chunks/chunk.4RETAYTP.js

@@ -0,0 +1,77 @@
+import {
+  table_head_styles_default
+} from "./chunk.6WKAXIB2.js";
+import {
+  DSATable
+} from "./chunk.DEX3YH65.js";
+import {
+  LoadingStateElement
+} from "./chunk.VCWTTC33.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/table-head/table-head.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSATableHead = class extends LoadingStateElement {
+  constructor() {
+    super(...arguments);
+    this.role = "rowgroup";
+  }
+  handleDefaultSlotChange() {
+    const parent = this.parentElement;
+    if (parent instanceof DSATable) {
+      parent.handleHeaderRowExpandable();
+      parent.handleHeaderRowSelectable();
+      parent.handleAlignmentChange();
+      parent.handleHeaderCellsCount();
+    }
+  }
+  // Gets an array of all <dsa-table-header-row> elements
+  getAllRows() {
+    return [
+      ...this.querySelectorAll("dsa-table-header-row")
+    ];
+  }
+  // Gets an array of all <dsa-table-header-cell> elements
+  getAllCells() {
+    return [
+      ...this.querySelectorAll("dsa-table-header-cell")
+    ];
+  }
+  handleLoading() {
+    this.setAttribute("aria-busy", this.loading.toString());
+    const allRows = this.getAllRows();
+    allRows.forEach((el) => el.loading = this.loading);
+    const allCells = this.getAllCells();
+    allCells.forEach((el) => el.loading = this.loading);
+  }
+  handleSkeletonEffectChange() {
+    const allCells = this.getAllCells();
+    allCells.forEach((el) => el.skeletonEffect = this.skeletonEffect);
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleDefaultSlotChange}></slot> `;
+  }
+};
+DSATableHead.styles = table_head_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSATableHead.prototype, "role", 2);
+__decorateClass([
+  watch("loading")
+], DSATableHead.prototype, "handleLoading", 1);
+__decorateClass([
+  watch("skeletonEffect")
+], DSATableHead.prototype, "handleSkeletonEffectChange", 1);
+DSATableHead = __decorateClass([
+  customElement("dsa-table-head")
+], DSATableHead);
+
+export {
+  DSATableHead
+};

package/dist/chunks/chunk.4TZQFWYO.js

@@ -0,0 +1,131 @@
+import {
+  tab_styles_default
+} from "./chunk.2LWUWDHO.js";
+import {
+  LocalizeController
+} from "./chunk.SK3KWU2I.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/tab/tab.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var id = 0;
+var DSATab = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.attrId = ++id;
+    this.componentId = `dsa-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+  firstUpdated() {
+    const closeButton = this.closeButton;
+    if (closeButton !== null) {
+      closeButton.updateComplete.then(() => {
+        closeButton.button.setAttribute("tabindex", this.active ? "0" : "-1");
+      });
+    }
+  }
+  handleCloseClick(event) {
+    event.stopPropagation();
+    this.emit("dsa-close");
+  }
+  handleActiveChange() {
+    var _a;
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+    (_a = this.closeButton) == null ? void 0 : _a.button.setAttribute("tabindex", this.active ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    this.tabIndex = this.disabled ? -1 : 0;
+  }
+  render() {
+    var _a;
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+        tabindex=${ifDefined(this.disabled ? "-1" : null)}
+      >
+        <div class="tab__content">
+          <slot part="label"></slot>
+          <div class="tab__width-placeholder">
+            ${(_a = this.defaultSlot) == null ? void 0 : _a.assignedNodes().map((node) => node.cloneNode(true))}
+          </div>
+        </div>
+        ${this.closable ? html`
+              <dsa-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                name="close"
+                label=${this.closeButtonLabel && this.closeButtonLabel !== "" ? this.closeButtonLabel : this.localize.term("close")}
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                library="system"
+              ></dsa-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+DSATab.styles = tab_styles_default;
+__decorateClass([
+  query(".tab")
+], DSATab.prototype, "tab", 2);
+__decorateClass([
+  query("[part~=close-button]")
+], DSATab.prototype, "closeButton", 2);
+__decorateClass([
+  query("slot:not([name])")
+], DSATab.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATab.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATab.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSATab.prototype, "closable", 2);
+__decorateClass([
+  property({ attribute: "close-button-label" })
+], DSATab.prototype, "closeButtonLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATab.prototype, "disabled", 2);
+__decorateClass([
+  watch("active")
+], DSATab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], DSATab.prototype, "handleDisabledChange", 1);
+DSATab = __decorateClass([
+  customElement("dsa-tab")
+], DSATab);
+
+export {
+  DSATab
+};