@ds-autonomie/web-components 1.7.0 → 1.9.0

package/dist/chunks/chunk.N5UMZAXE.js

@@ -0,0 +1,264 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/header-search/header-search.styles.ts
+import { css } from "lit";
+var header_search_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--dsa-spacing-8);
+    flex: 1;
+    width: 100%;
+  }
+
+  .mobile {
+    display: block;
+  }
+  .desktop {
+    display: none;
+  }
+
+  /* Input */
+  .input {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+    width: 100%;
+    min-width: 0;
+    font: var(--dsa-wc-input-text-field-font);
+    border-bottom: 1px solid var(--dsa-wc-header-search-input-color);
+  }
+
+  .input--focused {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .input__control {
+    display: inline-flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-weight: inherit;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    background: none;
+    box-shadow: none;
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+    color: var(--dsa-wc-header-search-input-color);
+
+    font-size: 14px;
+    padding: 8px 0 8px 8px;
+    height: 34px;
+  }
+  .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:focus {
+    outline: none;
+  }
+
+  /* Buttons */
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-style: solid;
+    border-width: var(--dsa-wc-button-border-width);
+    border-radius: var(--dsa-wc-button-border-radius);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 0 var(--dsa-wc-button-padding-horizontal);
+    transition: var(--dsa-wc-transition-x-fast) background-color,
+      var(--dsa-wc-transition-x-fast) color,
+      var(--dsa-wc-transition-x-fast) border,
+      var(--dsa-wc-transition-x-fast) box-shadow;
+    cursor: pointer;
+  }
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+  .button:focus {
+    outline: none;
+  }
+  .button:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .button--tertiary {
+    padding: 0;
+  }
+  .button--tertiary {
+    background-color: var(--dsa-wc-button-tertiary-on-base-color);
+    border: none;
+    color: var(--dsa-wc-button-tertiary-on-base-font-color);
+  }
+  .button--tertiary:hover {
+    background-color: var(--dsa-wc-button-tertiary-on-base-hover-color);
+    color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
+  }
+  .button--tertiary:active {
+    background-color: var(--dsa-wc-button-tertiary-on-base-active-color);
+    color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
+  }
+  .button--navigation {
+    padding: 0;
+  }
+  .button--navigation {
+    background-color: var(--dsa-wc-button-navigation-on-base-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-font-color);
+  }
+  .button--navigation:hover {
+    background-color: var(--dsa-wc-button-navigation-on-base-hover-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-hover-font-color);
+  }
+  .button--navigation:active {
+    background-color: var(--dsa-wc-button-navigation-on-base-active-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-active-font-color);
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-radius: var(--dsa-wc-icon-button-border-radius);
+    font-size: inherit;
+    padding: var(
+      --dsa-wc-internal-icon-button-padding,
+      var(--dsa-wc-icon-button-padding)
+    );
+    cursor: pointer;
+    transition: var(--dsa-wc-transition-x-fast) color;
+    -webkit-appearance: none;
+  }
+  .icon-button:focus {
+    outline: none;
+  }
+  .icon-button:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  .icon-button--primary {
+    background-color: var(--dsa-wc-button-primary-on-base-color);
+    border-color: var(--dsa-wc-button-primary-on-base-color);
+    color: var(--dsa-wc-button-primary-on-base-font-color);
+  }
+  .icon-button--primary:hover:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-primary-on-base-hover-color);
+    border-color: var(--dsa-wc-button-primary-on-base-hover-color);
+    color: var(--dsa-wc-button-primary-on-base-hover-font-color);
+  }
+  .icon-button--primary:active:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-primary-on-base-active-color);
+    border-color: var(--dsa-wc-button-primary-on-base-active-color);
+    color: var(--dsa-wc-button-primary-on-base-active-font-color);
+  }
+
+  #expand-button {
+    font: var(--dsa-wc-button-font);
+    height: var(--dsa-wc-form-input-height);
+    line-height: calc(
+      var(--dsa-wc-form-input-height) - var(--dsa-wc-button-border-width) * 2
+    );
+    padding: var(
+      --dsa-wc-internal-icon-button-padding,
+      var(--dsa-wc-icon-button-padding)
+    );
+  }
+  #expand-button dsa-icon {
+    width: 20px;
+    height: 20px;
+    pointer-events: none;
+  }
+  .expand-button__label {
+    display: none;
+  }
+
+  #submit-button dsa-icon {
+    width: 20px;
+    height: 20px;
+    pointer-events: none;
+  }
+
+  #cancel-button {
+    font: var(--dsa-wc-button-font-small);
+    height: var(--dsa-wc-form-input-height-small);
+    line-height: calc(
+      var(--dsa-wc-form-input-height-small) - var(--dsa-wc-button-border-width) *
+        2
+    );
+    border-radius: var(--dsa-wc-button-border-radius);
+    margin-inline-start: var(--dsa-spacing-8);
+  }
+
+  @media screen and (min-width: 720px) {
+    :host {
+      gap: var(--dsa-spacing-16);
+    }
+
+    .mobile {
+      display: none;
+    }
+    .desktop {
+      display: block;
+    }
+
+    .input__control {
+      font: var(--dsa-wc-header-search-input-font);
+      height: 40px;
+    }
+
+    #expand-button {
+      padding: unset;
+    }
+    #expand-button dsa-icon {
+      width: 1em;
+      height: 1em;
+      margin-inline-end: var(--dsa-wc-button-icon-spacing);
+    }
+    .expand-button__label {
+      display: unset;
+    }
+
+    #submit-button dsa-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    #cancel-button {
+      font: var(--dsa-wc-button-font);
+      height: var(--dsa-wc-form-input-height);
+      line-height: calc(
+        var(--dsa-wc-form-input-height) - var(--dsa-wc-button-border-width) * 2
+      );
+      border-radius: var(--dsa-wc-button-border-radius);
+      margin-inline-start: 0;
+    }
+  }
+`;
+
+export {
+  header_search_styles_default
+};

package/dist/chunks/chunk.N7H2OIPT.js

@@ -0,0 +1,82 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-row/table-row.styles.ts
+import { css } from "lit";
+var table_row_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-row;
+    border: none;
+    background: var(--dsa-wc-table-row-background);
+    font: var(--dsa-wc-table-row-font);
+    color: var(--dsa-wc-table-row-color);
+  }
+
+  :host(:hover:not([loading])),
+  :host(:hover[selected]) {
+    background: var(--dsa-wc-table-row-hover-background);
+  }
+
+  /* Selected State */
+  :host([selected]) {
+    background: var(--dsa-wc-table-row-selected-background);
+  }
+
+  /* Sizes */
+  :host([size='small']) {
+    block-size: var(--dsa-wc-table-row-small-height);
+  }
+
+  :host([size='medium']) {
+    block-size: var(--dsa-wc-table-row-medium-height);
+  }
+
+  :host([size='large']) {
+    block-size: var(--dsa-wc-table-row-large-height);
+  }
+
+  [part~='column-checkbox'] {
+    display: table-cell;
+    vertical-align: middle;
+    padding: var(--dsa-spacing-4) var(--dsa-spacing-8);
+    border-block-end: var(--dsa-wc-table-cell-border-size) solid
+      var(--dsa-wc-table-cell-border-color);
+    width: var(--dsa-wc-table-row-selectable-cell-width);
+  }
+
+  .column-checkbox--content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .column-expand-button {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    border-block-end: var(--dsa-wc-table-cell-border-size) solid
+      var(--dsa-wc-table-cell-border-color);
+    width: var(--dsa-wc-table-row-expandable-cell-width);
+  }
+
+  .expand-button {
+    display: none;
+    transform: rotateX(0deg);
+    transition: transform 200ms ease;
+  }
+
+  .column-expand-button--has-icon .expand-button {
+    display: inline-block;
+  }
+
+  .expand-button--expand-less {
+    transform: rotateX(-180deg);
+  }
+`;
+
+export {
+  table_row_styles_default
+};

package/dist/chunks/{chunk.7PKGNYXP.js → chunk.NZK7MHS3.js}

@@ -3,7 +3,10 @@ import {
 } from "./chunk.WFHOSUOX.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.27JQOQHL.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
@@ -22,6 +25,7 @@ var DSATag = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.iconButtonSize = "small";
     this.disableRemovableFocus = false;
     this.variant = "purple-100";
     this.size = "medium";
@@ -31,6 +35,19 @@ var DSATag = class extends ShoelaceElement {
   handleRemoveClick() {
     this.emit("dsa-remove");
   }
+  updateIconButtonSize() {
+    switch (this.size) {
+      case "small":
+        this.iconButtonSize = "xsmall";
+        break;
+      case "medium":
+        this.iconButtonSize = "small";
+        break;
+      case "large":
+        this.iconButtonSize = "medium";
+        break;
+    }
+  }
   render() {
     return html`
       <span
@@ -61,6 +78,7 @@ var DSATag = class extends ShoelaceElement {
                 name="close"
                 label=${`${this.localize.term("remove")} ${this.label}`}
                 class="tag__remove"
+                size=${this.iconButtonSize}
                 @click=${this.handleRemoveClick}
                 ?disable-tab-index=${this.disableRemovableFocus}
               ></dsa-icon-button>
@@ -85,6 +103,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSATag.prototype, "label", 2);
+__decorateClass([
+  watch("size")
+], DSATag.prototype, "updateIconButtonSize", 1);
 DSATag = __decorateClass([
   customElement("dsa-tag")
 ], DSATag);

package/dist/chunks/{chunk.AXG2LFB3.js → chunk.O3TGEE3I.js}

@@ -56,7 +56,8 @@ var form_control_styles_default = css`
   }
 
   .form-control--has-label .form-control__label {
-    display: inline-block;
+    display: inline-flex;
+    gap: 4px;
   }
 
   .form-control__label-required {

package/dist/chunks/chunk.ONIFK4NH.js

@@ -0,0 +1,156 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/pagination/pagination.styles.ts
+import { css } from "lit";
+var pagination_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--dsa-spacing-16);
+    font: var(--dsa-wc-pagination-font);
+    color: var(--dsa-wc-pagination-color);
+    container-type: inline-size;
+  }
+
+  .pagination__items {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 2rem;
+    justify-content: space-between;
+  }
+
+  .divider {
+    display: none;
+  }
+
+  .pagination__itemsperpage {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  ::slotted(dsa-select) {
+    width: 70px;
+  }
+
+  .pagination__navigation--mobile {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .pagination__navigation__page-input {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--dsa-spacing-4);
+  }
+  dsa-input {
+    width: 32px;
+  }
+  @media screen and (min-width: 420px) {
+    dsa-input {
+      width: 48px;
+    }
+  }
+
+  .pagination__navigation--desktop {
+    display: none;
+    margin-inline-start: auto;
+  }
+
+  @container (min-width: 905px) {
+    .pagination {
+      height: var(--dsa-wc-pagination-height-desktop);
+    }
+
+    .pagination__items {
+      width: auto;
+      justify-content: start;
+    }
+
+    .divider {
+      display: block;
+    }
+
+    .pagination__navigation--mobile {
+      display: none;
+    }
+
+    .pagination__navigation--desktop {
+      display: block;
+    }
+  }
+
+  @supports not (container-type: inline-size) {
+    @media screen and (min-width: 905px) {
+      .pagination {
+        height: var(--dsa-wc-pagination-height-desktop);
+      }
+
+      .pagination__items {
+        width: auto;
+        justify-content: start;
+      }
+
+      .divider {
+        display: block;
+      }
+
+      .pagination__navigation--mobile {
+        display: none;
+      }
+
+      .pagination__navigation--desktop {
+        display: block;
+      }
+    }
+  }
+
+  /* Skeleton */
+  .skeleton {
+    display: grid;
+    grid-template:
+      'navigation navigation navigation' var(--dsa-spacing-32)
+      'results . itemsperpage' var(--dsa-spacing-32)
+      / auto;
+    gap: var(--dsa-spacing-16);
+    align-items: center;
+  }
+  .skeleton__navigation {
+    grid-area: navigation;
+  }
+  .skeleton__results {
+    grid-area: results;
+  }
+  .skeleton__itemsperpage {
+    grid-area: itemsperpage;
+  }
+
+  @media screen and (min-width: 905px) {
+    .skeleton {
+      grid-template:
+        'results itemsperpage . navigation navigation' var(--dsa-spacing-32)
+        / auto;
+    }
+  }
+`;
+
+export {
+  pagination_styles_default
+};

package/dist/chunks/{chunk.YZ66DKLU.js → chunk.OQ2AY2BC.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.AXG2LFB3.js";
+} from "./chunk.O3TGEE3I.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/chunk.OSR4H2UW.js

@@ -0,0 +1,17 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-body/table-body.styles.ts
+import { css } from "lit";
+var table_body_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-row-group;
+  }
+`;
+
+export {
+  table_body_styles_default
+};

package/dist/chunks/{chunk.KG6MIENB.js → chunk.OXPE4AH7.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.OZWZRPR2.js

@@ -0,0 +1,56 @@
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/header-external-link/header-external-link.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// src/components/header-external-link/header-external-link.style.ts
+import { css } from "lit";
+var header_external_link_style_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-flex;
+  }
+
+  dsa-divider {
+    --spacing-start: var(--dsa-spacing-24);
+    --spacing-end: var(--dsa-spacing-24);
+  }
+
+  :host(:last-of-type) dsa-divider {
+    display: none;
+  }
+`;
+
+// src/components/header-external-link/header-external-link.ts
+var DSAHeaderExternalLink = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
+  render() {
+    return html`
+      <slot></slot>
+      <dsa-divider vertical></dsa-divider>
+    `;
+  }
+};
+DSAHeaderExternalLink.styles = header_external_link_style_default;
+DSAHeaderExternalLink = __decorateClass([
+  customElement("dsa-header-external-link")
+], DSAHeaderExternalLink);
+
+export {
+  DSAHeaderExternalLink
+};

package/dist/chunks/{chunk.WGN7OZLZ.js → chunk.P6TKBTE3.js}

@@ -11,13 +11,13 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
 import {
   alert_styles_default
-} from "./chunk.Z6TBD2AC.js";
+} from "./chunk.INLQD4SQ.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -178,6 +178,7 @@ var DSAAlert = class extends ShoelaceElement {
               <dsa-icon-button
                 part="close-button"
                 class="alert__close-button"
+                size="xlarge"
                 name="close"
                 label=${this.localize.term("close")}
                 @click=${this.handleCloseClick}

package/dist/chunks/chunk.PFGVYROJ.js

@@ -0,0 +1,26 @@
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/internal/loading-state-element.ts
+import { property } from "lit/decorators.js";
+var LoadingStateElement = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.skeletonEffect = "none";
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LoadingStateElement.prototype, "loading", 2);
+__decorateClass([
+  property({ attribute: "skeleton-effect", reflect: true })
+], LoadingStateElement.prototype, "skeletonEffect", 2);
+
+export {
+  LoadingStateElement
+};