@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.3RBCYA4F.js

@@ -0,0 +1,147 @@
+// src/styles/form-control.styles.ts
+import { css } from "lit";
+var form_control_styles_default = css`
+  .form-control {
+    display: grid;
+    align-content: start;
+    grid-template:
+      'label tooltip .'
+      'field field field' 1fr
+      'helpText helpText helpText'
+      'errorText errorText errorText'
+      / auto auto minmax(0, 1fr);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .form-control .form-control__label {
+    grid-area: label;
+    display: none;
+    color: var(--dsa-color-input-label-on-base-default);
+  }
+
+  .form-control .form-control__tooltip {
+    display: inline-block;
+    grid-area: tooltip;
+  }
+
+  .form-control .form-control__field {
+    grid-area: field;
+  }
+
+  .form-control .form-control__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-toggle-group-spacing);
+  }
+
+  .form-control--options-horizontal .form-control__options {
+    flex-direction: row;
+  }
+
+  .form-control .form-control__help-text {
+    grid-area: helpText;
+    display: none;
+  }
+
+  .form-control .form-control__error-text {
+    grid-area: errorText;
+  }
+
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+  }
+
+  .form-control__label-required {
+    color: var(--dsa-wc-form-required-content-color);
+  }
+
+  .form-control--has-help-text .form-control__help-text {
+    display: block;
+    color: var(--dsa-color-input-label-on-base-helper);
+  }
+
+  .form-control--error .form-control__label {
+    color: var(--dsa-wc-error-text-color);
+  }
+
+  /* Small */
+  .form-control--has-label.form-control--small .form-control__label {
+    font: var(--dsa-wc-form-font-small);
+    padding-bottom: var(--dsa-spacing-4);
+  }
+
+  .form-control.form-control--small .form-control__tooltip {
+    font: var(--dsa-wc-form-font-small);
+    margin-left: var(--dsa-spacing-4);
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+
+  .form-control--small .form-control__help-text,
+  .form-control--small .form-control__error-text {
+    font: var(--dsa-wc-error-text-font-small);
+  }
+
+  .form-control.form-control--small .form-control__help-text {
+    padding-top: var(--dsa-spacing-4);
+  }
+
+  .form-control.form-control--small .form-control__error-text {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  /* Medium */
+  .form-control--has-label.form-control--medium .form-control__label {
+    font: var(--dsa-wc-form-font);
+    padding-bottom: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--medium .form-control__tooltip {
+    font: var(--dsa-wc-form-font);
+    margin-left: var(--dsa-spacing-4);
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+
+  .form-control--medium .form-control__help-text,
+  .form-control--medium .form-control__error-text {
+    font: var(--dsa-wc-error-text-font);
+  }
+
+  .form-control.form-control--medium .form-control__help-text {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--medium .form-control__error-text {
+    padding-top: var(--dsa-spacing-12);
+  }
+
+  /* Large */
+  .form-control--has-label.form-control--large .form-control__label {
+    font: var(--dsa-wc-form-font-large);
+    padding-bottom: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--large .form-control__tooltip {
+    font: var(--dsa-wc-form-font-large);
+    margin-left: var(--dsa-spacing-4);
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+
+  .form-control--large .form-control__help-text,
+  .form-control--large .form-control__error-text {
+    font: var(--dsa-wc-error-text-font-large);
+  }
+
+  .form-control.form-control--large .form-control__help-text {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  .form-control.form-control--large .form-control__error-text {
+    padding-top: var(--dsa-spacing-12);
+  }
+`;
+
+export {
+  form_control_styles_default
+};

package/dist/chunks/chunk.3XRQRY25.js

@@ -0,0 +1,25 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/menu-label/menu-label.styles.ts
+import { css } from "lit";
+var menu_label_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .menu-label {
+    display: inline-block;
+    font: var(--dsa-wc-menu-label-font);
+    color: var(--dsa-wc-menu-label-color);
+    padding: var(--dsa-wc-menu-label-padding);
+    user-select: none;
+  }
+`;
+
+export {
+  menu_label_styles_default
+};

package/dist/chunks/chunk.42W4S2HN.js

@@ -0,0 +1,145 @@
+import {
+  radio_button_styles_default
+} from "./chunk.DC6CT5PU.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/radio-button/radio-button.ts
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html } from "lit/static-html.js";
+var DSARadioButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleClick(e) {
+    if (this.disabled || this.readonly) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleReadonlyChange() {
+    this.disabled = this.readonly;
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+      button: true,
+      "button--on-base": true,
+      "button--toggle": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--readonly": this.readonly,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      // TODO: remove ?
+      "button--has-label": this.hasSlotController.test("[default]")
+    })}
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          ${this.readonly ? html`<dsa-icon
+                name="lock"
+                class="button__icon-readonly"
+              ></dsa-icon>` : ""}
+          <slot part="label" class="button__label"></slot>
+          ${this.checked ? html`<dsa-icon
+                name="check"
+                class="button__icon-check"
+              ></dsa-icon>` : ""}
+        </button>
+      </div>
+    `;
+  }
+};
+DSARadioButton.styles = radio_button_styles_default;
+__decorateClass([
+  query(".button")
+], DSARadioButton.prototype, "button", 2);
+__decorateClass([
+  query(".hidden-input")
+], DSARadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], DSARadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSARadioButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], DSARadioButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSARadioButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSARadioButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSARadioButton.prototype, "readonly", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSARadioButton.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("readonly")
+], DSARadioButton.prototype, "handleReadonlyChange", 1);
+DSARadioButton = __decorateClass([
+  customElement("dsa-radio-button")
+], DSARadioButton);
+
+export {
+  DSARadioButton
+};

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

@@ -0,0 +1,79 @@
+import {
+  include_styles_default
+} from "./chunk.NNBOLKWI.js";
+import {
+  requestInclude
+} from "./chunk.XNEONNEJ.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/include/include.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSAInclude = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach(
+      (attr) => newScript.setAttribute(attr.name, attr.value)
+    );
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("dsa-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach(
+          (script) => this.executeScript(script)
+        );
+      }
+      this.emit("dsa-load");
+    } catch (e) {
+      this.emit("dsa-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+DSAInclude.styles = include_styles_default;
+__decorateClass([
+  property()
+], DSAInclude.prototype, "src", 2);
+__decorateClass([
+  property()
+], DSAInclude.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "allow-scripts", type: Boolean })
+], DSAInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], DSAInclude.prototype, "handleSrcChange", 1);
+DSAInclude = __decorateClass([
+  customElement("dsa-include")
+], DSAInclude);
+
+export {
+  DSAInclude
+};

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

@@ -0,0 +1,241 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/tab-group/tab-group.styles.ts
+import { css } from "lit";
+var tab_group_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+  }
+
+  .tab-group__indicator {
+    position: absolute;
+    transition: var(--dsa-wc-transition-fast) translate ease,
+      var(--dsa-wc-transition-fast) width ease;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    position: relative;
+    padding: 0 1.75rem;
+  }
+
+  .tab-group__body {
+    display: block;
+    overflow: auto;
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1.75rem;
+  }
+
+  .tab-group__scroll-button--start {
+    left: 0;
+  }
+
+  .tab-group__scroll-button--end {
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--start {
+    left: auto;
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--end {
+    left: 0;
+    right: auto;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--top .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: 0;
+    border-bottom: solid var(--dsa-wc-tab-group-indicator-track-width)
+      var(--dsa-wc-tab-group-indicator-color);
+  }
+
+  .tab-group--top .tab-group__body {
+    order: 2;
+  }
+
+  /*
+   * Bottom
+   */
+
+  .tab-group--bottom {
+    flex-direction: column;
+  }
+
+  .tab-group--bottom .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--bottom .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--bottom .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
+
+  .tab-group--bottom .tab-group__indicator {
+    top: calc(-1 * var(--dsa-wc-tab-group-track-width));
+    border-top: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-indicator-color);
+  }
+
+  .tab-group--bottom .tab-group__body {
+    order: 1;
+  }
+
+  .tab-group--bottom ::slotted(dsa-tab-panel) {
+    --padding: 0 0 var(--dsa-spacing-16) 0;
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: calc(-1 * var(--dsa-wc-tab-group-track-width));
+    border-right: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-indicator-color);
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    right: auto;
+    left: calc(-1 * var(--dsa-wc-tab-group-track-width));
+  }
+
+  .tab-group--start .tab-group__body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(dsa-tab-panel) {
+    --padding: 0 0 0 var(--dsa-spacing-16);
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-track-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: calc(-1 * var(--dsa-wc-tab-group-track-width));
+    border-inline-start: solid var(--dsa-wc-tab-group-track-width)
+      var(--dsa-wc-tab-group-indicator-color);
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    left: auto;
+  }
+
+  .tab-group--end .tab-group__body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(dsa-tab-panel) {
+    --padding: 0 var(--dsa-spacing-16) 0 0;
+  }
+`;
+
+export {
+  tab_group_styles_default
+};

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

@@ -0,0 +1,75 @@
+import {
+  progress_bar_styles_default
+} from "./chunk.SGIGGO5M.js";
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/progress-bar/progress-bar.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+var DSAProgressBar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.indeterminate = false;
+    this.label = "";
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "progress-bar": true,
+      "progress-bar--indeterminate": this.indeterminate,
+      "progress-bar--rtl": this.localize.dir() === "rtl"
+    })}
+        role="progressbar"
+        title=${ifDefined(this.title)}
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate ? 0 : this.value}
+      >
+        <div
+          part="indicator"
+          class="progress-bar__indicator"
+          style=${styleMap({ width: `${this.value}%` })}
+        >
+          ${!this.indeterminate ? html`
+                <div part="label" class="progress-bar__label">
+                  ${this.value}%
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+DSAProgressBar.styles = progress_bar_styles_default;
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DSAProgressBar.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAProgressBar.prototype, "indeterminate", 2);
+__decorateClass([
+  property()
+], DSAProgressBar.prototype, "label", 2);
+DSAProgressBar = __decorateClass([
+  customElement("dsa-progress-bar")
+], DSAProgressBar);
+
+export {
+  DSAProgressBar
+};