@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.WNHQYL5W.js

@@ -0,0 +1,298 @@
+import {
+  form_control_styles_default
+} from "./chunk.3RBCYA4F.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/input/input.styles.ts
+import { css } from "lit";
+var input_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .input {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+    width: 100%;
+    font: var(--dsa-wc-input-text-field-font);
+    overflow: hidden;
+    transition: var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) border,
+      var(--dsa-wc-transition-fast) box-shadow,
+      var(--dsa-wc-transition-fast) background-color;
+    border-radius: var(--dsa-wc-input-border-radius);
+  }
+
+  .input--focused:not(.input--disabled):not(.input--readonly) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  /* On Layer inputs */
+  .input--on-layer {
+    background-color: var(--dsa-wc-input-on-layer-background-color);
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-layer-border-color);
+  }
+
+  .input--on-layer:hover:not(.input--disabled):not(.input--readonly) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-hover);
+  }
+
+  .input--on-layer.input--focused:not(.input--disabled):not(.input--readonly)
+    .input__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .input--on-layer.input--disabled {
+    background-color: var(--dsa-wc-input-on-layer-background-color-disabled);
+    border-color: var(--dsa-wc-input-on-layer-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--on-layer.input--readonly {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+  }
+  .input--on-layer.input--disabled .input__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
+  }
+
+  .input--error.input--on-layer:not(.input--disabled):not(.input--readonly) {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+  .input--error.input--on-layer:hover:not(.input--disabled):not(
+      .input--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  .input--on-layer .input__control::placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+    user-select: none;
+  }
+
+  /* On Base inputs */
+  .input--on-base {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-color-input-border-on-base-enabled);
+    background-color: var(--dsa-color-input-background-on-base-enabled);
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input--on-base:hover:not(.input--disabled):not(.input--readonly) {
+    border-color: var(--dsa-wc-input-on-base-border-color-hover);
+  }
+
+  .input--on-base.input--disabled {
+    border-color: var(--dsa-wc-input-on-base-border-color-disabled);
+    background-color: var(--dsa-wc-input-on-base-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--on-base.input--readonly {
+    background-color: var(--dsa-wc-input-on-base-locked-background-color);
+    border-color: var(--dsa-wc-input-on-base-locked-border-color);
+  }
+
+  .input--error.input--on-base:not(.input--disabled):not(.input--readonly) {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+  .input--error.input--on-base:hover:not(.input--disabled):not(
+      .input--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  .input--on-base .input__control::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+    user-select: none;
+  }
+
+  /* Input Control */
+  .input__control {
+    display: inline-flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: var(--dsa-wc-input-padding);
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input__control:autofill,
+  .input__control:-webkit-autofill,
+  .input__control:autofill:hover,
+  .input__control:-webkit-autofill:hover,
+  .input__control:autofill:focus,
+  .input__control:-webkit-autofill:focus,
+  .input__control:autofill:active,
+  .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--dsa-wc-form-input-height-large)
+      var(--dsa-wc-form-input-autocomplete-background) inset !important;
+    -webkit-text-fill-color: var(--dsa-wc-input-on-base-text-field-input-color);
+    caret-color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input:hover:not(.input--disabled):not(.input--readonly) .input__control {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input__control:focus {
+    outline: none;
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small {
+    font: var(--dsa-wc-input-text-field-font-small);
+    height: var(--dsa-wc-form-input-height-small);
+  }
+
+  .input > .input__action-button {
+    --padding: var(--dsa-spacing-4);
+  }
+
+  .input > .input__action-button + .input__action-button {
+    margin-right: var(--dsa-wc-input-action-buttons-spacing);
+  }
+  .input > .input__action-button:last-of-type {
+    margin-right: var(--dsa-wc-input-padding-x);
+  }
+
+  .input > .input__control + .input__action-button {
+    margin-left: auto;
+    z-index: 1;
+  }
+
+  .form-control--has-prefix-icon .input__control {
+    padding-left: calc(
+      1.25rem + var(--dsa-wc-input-padding-x) + var(--dsa-wc-input-spacing-left)
+    );
+  }
+  .form-control--has-hide-icon .input__control {
+    --dsa-input-suffix-icon-padding: calc(
+      1.25rem + var(--dsa-wc-input-padding-x)
+    );
+    --dsa-input-suffix-icon-count: 1;
+    padding-right: calc(
+      var(--dsa-input-suffix-icon-count) * var(--dsa-input-suffix-icon-padding) +
+        var(--dsa-wc-input-spacing-left)
+    );
+  }
+  .form-control--has-hide-icon.form-control--has-clear-icon .input__control {
+    --dsa-input-suffix-icon-count: 2;
+  }
+
+  .input--small .input__control {
+    height: calc(
+      var(--dsa-wc-form-input-height-small) - var(--dsa-wc-input-border-width) *
+        2
+    );
+  }
+
+  .input--medium {
+    height: var(--dsa-wc-form-input-height);
+  }
+
+  .input--medium .input__control {
+    height: calc(
+      var(--dsa-wc-form-input-height) - var(--dsa-wc-input-border-width) * 2
+    );
+  }
+
+  .input--large {
+    font: var(--dsa-wc-input-text-field-font-large);
+    height: var(--dsa-wc-form-input-height-large);
+  }
+
+  .input--large .input__control {
+    height: calc(
+      var(--dsa-wc-form-input-height-large) - var(--dsa-wc-input-border-width) *
+        2
+    );
+  }
+
+  .input__action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    color: var(--dsa-color-input-icon-on-base-enabled);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .input__action-button:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+    fill: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  /*
+  * Custom styling for Date and Time type
+  */
+
+  input[type='time']::-webkit-calendar-picker-indicator,
+  input[type='date']::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  .input__prefix-icon,
+  .input__prefix {
+    color: var(--dsa-wc-input-icon-color);
+    pointer-events: none;
+    font-size: 1.25rem;
+  }
+
+  .input__prefix,
+  .input__prefix::slotted(*) {
+    position: absolute;
+    left: var(--dsa-wc-input-padding-x);
+    z-index: 1;
+  }
+
+  .input--empty .input__clear {
+    visibility: hidden;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+`;
+
+export {
+  input_styles_default
+};

package/dist/chunks/chunk.WSVP75MH.js

@@ -0,0 +1,102 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.PULHNCDM.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.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";
+var DSABreadcrumbItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "prefix",
+      "suffix"
+    );
+    this.rel = "noreferrer noopener";
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    return html`
+      <li
+        part="base"
+        class=${classMap({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          class="breadcrumb-item__prefix"
+        ></slot>
+
+        ${isLink ? html`
+              <a
+                part="label"
+                class="breadcrumb-item__label"
+                href="${this.href}"
+                target="${ifDefined(this.target ? this.target : void 0)}"
+                rel=${ifDefined(this.target ? this.rel : void 0)}
+              >
+                <slot></slot>
+              </a>
+            ` : html`
+              <button
+                role="link"
+                part="label"
+                type="button"
+                class="breadcrumb-item__label"
+              >
+                <slot></slot>
+              </button>
+            `}
+
+        <slot
+          name="suffix"
+          part="suffix"
+          class="breadcrumb-item__suffix"
+        ></slot>
+
+        <dsa-icon
+          class="breadcrumb-item__separator"
+          aria-hidden="true"
+          name=${this.localize.dir() === "rtl" ? "keyboard_arrow_left" : "keyboard_arrow_right"}
+        ></dsa-icon>
+      </li>
+    `;
+  }
+};
+DSABreadcrumbItem.styles = breadcrumb_item_styles_default;
+__decorateClass([
+  property()
+], DSABreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSABreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSABreadcrumbItem.prototype, "rel", 2);
+DSABreadcrumbItem = __decorateClass([
+  customElement("dsa-breadcrumb-item")
+], DSABreadcrumbItem);
+
+export {
+  DSABreadcrumbItem
+};

package/dist/chunks/chunk.XNEONNEJ.js

@@ -0,0 +1,23 @@
+// src/components/include/request.ts
+var includeFiles = /* @__PURE__ */ new Map();
+function requestInclude(src, mode = "cors") {
+  const prev = includeFiles.get(src);
+  if (prev !== void 0) {
+    return Promise.resolve(prev);
+  }
+  const fileDataPromise = fetch(src, { mode }).then(async (response) => {
+    const res = {
+      ok: response.ok,
+      status: response.status,
+      html: await response.text()
+    };
+    includeFiles.set(src, res);
+    return res;
+  });
+  includeFiles.set(src, fileDataPromise);
+  return fileDataPromise;
+}
+
+export {
+  requestInclude
+};

package/dist/chunks/chunk.XSCX6TC5.js

@@ -0,0 +1,127 @@
+import {
+  icon_button_styles_default
+} from "./chunk.QFJA3MTV.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/icon-button/icon-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, literal } from "lit/static-html.js";
+var DSAIconButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasFocus = false;
+    this.disableTabIndex = false;
+    this.label = "";
+    this.disabled = false;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      "icon-button": true,
+      "icon-button--disabled": !isLink && this.disabled,
+      "icon-button--focused": this.hasFocus
+    })}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : "button")}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(
+      isLink && this.target ? "noreferrer noopener" : void 0
+    )}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label="${this.label}"
+        tabindex=${this.disableTabIndex || this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <dsa-icon
+          class="icon-button__icon"
+          name=${ifDefined(this.name)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+        ></dsa-icon>
+      </${tag}>
+    `;
+  }
+};
+DSAIconButton.styles = icon_button_styles_default;
+__decorateClass([
+  query(".icon-button")
+], DSAIconButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], DSAIconButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "disable-tab-index" })
+], DSAIconButton.prototype, "disableTabIndex", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "library", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "src", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAIconButton.prototype, "disabled", 2);
+DSAIconButton = __decorateClass([
+  customElement("dsa-icon-button")
+], DSAIconButton);
+
+export {
+  DSAIconButton
+};

package/dist/chunks/chunk.XWUQFDIN.js

@@ -0,0 +1,15 @@
+// src/components/avatar-group/avatar-group.styles.ts
+import { css } from "lit";
+var avatar_group_styles_default = css`
+  .avatar-group > ::slotted(dsa-avatar:not(:first-of-type)) {
+    margin-left: var(--dsa-wc-avatar-group-margin-left);
+  }
+
+  .avatar-group > ::slotted(dsa-avatar) {
+    --dsa-wc-internal-avatar-border: var(--dsa-wc-avatar-border);
+  }
+`;
+
+export {
+  avatar_group_styles_default
+};

package/dist/chunks/chunk.Y3ZUFLVS.js

@@ -0,0 +1,90 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/card/card.styles.ts
+import { css } from "lit";
+var card_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--dsa-wc-card-background);
+    box-shadow: var(--dsa-wc-card-box-shadow);
+    border: var(--dsa-wc-card-border);
+    border-radius: var(--dsa-wc-card-border-radius);
+  }
+
+  .card__image {
+    display: flex;
+    border: var(--dsa-wc-card-border);
+    border-top-left-radius: var(--dsa-wc-card-border-radius);
+    border-top-right-radius: var(--dsa-wc-card-border-radius);
+    margin: calc(-1 * var(--dsa-wc-card-border-width));
+    overflow: hidden;
+  }
+
+  .card__image::slotted(img) {
+    display: block;
+    width: 100%;
+  }
+
+  .card:not(.card--has-image) .card__image {
+    display: none;
+  }
+
+  .card__header {
+    font: var(--dsa-wc-card-title-font);
+    display: block;
+    border-bottom: solid var(--dsa-wc-card-border-width)
+      var(--dsa-wc-card-border-color);
+    padding: calc(var(--dsa-wc-card-padding) / 2) var(--dsa-wc-card-padding);
+  }
+
+  .card:not(.card--has-header) .card__header {
+    display: none;
+  }
+
+  .card:not(.card--has-image) .card__header {
+    border-top-left-radius: var(--dsa-wc-card-border-radius);
+    border-top-right-radius: var(--dsa-wc-card-border-radius);
+  }
+
+  .card__body {
+    padding: var(--dsa-wc-card-padding);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    font: var(--dsa-wc-card-body-font);
+    display: block;
+  }
+
+  /*Add padding to scrollbar*/
+  .card__body-container {
+    margin: var(--dsa-wc-card-padding);
+    overflow: auto;
+  }
+
+  .card--has-footer .card__footer {
+    display: flex;
+    gap: 16px;
+    flex-direction: row;
+    justify-content: flex-end;
+    text-align: right;
+    background-color: var(--dsa-wc-card-background);
+    border-top: var(--dsa-wc-card-border);
+    padding: var(--dsa-wc-card-padding);
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+`;
+
+export {
+  card_styles_default
+};

package/dist/chunks/chunk.YCXTCVAZ.js

@@ -0,0 +1,30 @@
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.6M63UXML.js";
+
+// src/internal/shoelace-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ShoelaceElement = class extends LitElement {
+  emit(name, options) {
+    const event = new CustomEvent(name, __spreadValues({
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {}
+    }, options));
+    this.dispatchEvent(event);
+    return event;
+  }
+};
+__decorateClass([
+  property()
+], ShoelaceElement.prototype, "dir", 2);
+__decorateClass([
+  property()
+], ShoelaceElement.prototype, "lang", 2);
+
+export {
+  ShoelaceElement
+};