@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.DC6CT5PU.js

@@ -0,0 +1,109 @@
+import {
+  button_styles_default
+} from "./chunk.J2XNYTTZ.js";
+
+// src/components/radio-button/radio-button.styles.ts
+import { css } from "lit";
+var radio_button_styles_default = css`
+  ${button_styles_default}
+
+  .button__prefix,
+  .button__suffix,
+  .button__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+  }
+
+  .button--toggle {
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--dsa-wc-toggle-button-background-color);
+    border-color: var(--dsa-wc-toggle-button-border-color);
+    color: var(--dsa-wc-toggle-button-color);
+    border-width: 1px;
+    boder-style: solid;
+  }
+
+  .button--toggle:hover {
+    background-color: var(--dsa-wc-toggle-button-hover-background-color);
+    border-color: var(--dsa-wc-toggle-button-hover-border-color);
+    color: var(--dsa-wc-toggle-button-hover-color);
+  }
+
+  .button--toggle:active {
+    background-color: var(--dsa-wc-toggle-button-active-background-color);
+    border-color: var(--dsa-wc-toggle-button-active-border-color);
+    color: var(--dsa-wc-toggle-button-active-color);
+  }
+
+  .button--toggle.button--checked {
+    background-color: var(--dsa-wc-toggle-button-checked-background-color);
+    border-color: var(--dsa-wc-toggle-button-checked-border-color);
+    color: var(--dsa-wc-toggle-button-checked-color);
+  }
+  .button--toggle:hover.button--checked {
+    background-color: var(
+      --dsa-wc-toggle-button-checked-hover-background-color
+    );
+    border-color: var(--dsa-wc-toggle-button-checked-hover-border-color);
+    color: var(--dsa-wc-toggle-button-checked-hover-color);
+  }
+  .button--toggle:active.button--checked {
+    background-color: var(
+      --dsa-wc-toggle-button-checked-active-background-color
+    );
+    border-color: var(--dsa-wc-toggle-button-checked-active-border-color);
+    color: var(--dsa-wc-toggle-button-checked-active-color);
+  }
+
+  .button--toggle.button--readonly.button--disabled {
+    background-color: var(--dsa-wc-toggle-button-read-only-background-color);
+    border-color: var(--dsa-wc-toggle-button-read-only-border-color);
+    color: var(--dsa-wc-toggle-button-read-only-color);
+    padding-left: var(--dsa-wc-toggle-button-icon-padding-x);
+    cursor: not-allowed;
+  }
+  .button--toggle.button--checked.button--readonly {
+    background-color: var(
+      --dsa-wc-toggle-button-read-only-checked-background-color
+    );
+    border-color: var(--dsa-wc-toggle-button-read-only-checked-border-color);
+    color: var(--dsa-wc-toggle-button-read-only-checked-color);
+  }
+  .button--toggle.button--checked.button--readonly.button__icon-check {
+    color: var(--dsa-wc-toggle-button-read-only-checked-icon-color);
+  }
+
+  .button--toggle.button--disabled {
+    background-color: var(--dsa-wc-toggle-button-disabled-background-color);
+    border-color: var(--dsa-wc-toggle-button-disabled-border-color);
+    color: var(--dsa-wc-toggle-button-disabled-color);
+  }
+
+  .button--toggle .button__icon-check {
+    margin-inline-start: var(--dsa-wc-toggle-button-icon-spacing);
+  }
+
+  .button--toggle .button__icon-readonly {
+    margin-inline-end: var(--dsa-wc-toggle-button-icon-spacing);
+  }
+
+  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
+    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
+  .hidden-input {
+    all: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    outline: dotted 1px red;
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+
+export {
+  radio_button_styles_default
+};

package/dist/chunks/chunk.DRGGQ4WL.js

@@ -0,0 +1,9 @@
+// src/components/input-phone/input-phone.configs.ts
+var PhoneConfig = {
+  placeholder: "_ __ __ __ __",
+  pattern: "^((\\+)33|(\\+)590|(\\+)594|(\\+)596|(\\+)262)[1-9](\\d{2}){4}$"
+};
+
+export {
+  PhoneConfig
+};

package/dist/chunks/chunk.DSGUQNN4.js

@@ -0,0 +1,26 @@
+import {
+  visually_hidden_styles_default
+} from "./chunk.IOFPPNUO.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/visually-hidden/visually-hidden.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+var DSAVisuallyHidden = class extends ShoelaceElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+DSAVisuallyHidden.styles = visually_hidden_styles_default;
+DSAVisuallyHidden = __decorateClass([
+  customElement("dsa-visually-hidden")
+], DSAVisuallyHidden);
+
+export {
+  DSAVisuallyHidden
+};

package/dist/chunks/chunk.DURVPB6M.js

@@ -0,0 +1,391 @@
+import {
+  form_control_styles_default
+} from "./chunk.3RBCYA4F.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/select/select.styles.ts
+import { css } from "lit";
+var select_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--dsa-wc-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font: var(--dsa-wc-select-input-font);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    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);
+    padding: var(--dsa-wc-input-padding);
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-start: var(--dsa-wc-select-tag-margin-inline-start);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .select__tags dsa-tag {
+    cursor: pointer !important;
+    min-width: 0;
+  }
+
+  .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-select-tag-background) !important;
+    color: var(--dsa-wc-select-tag-color) !important;
+    border: solid 1px var(--dsa-wc-select-tag-border-color);
+  }
+
+  .select--error .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-select-tag-error-background) !important;
+    color: var(--dsa-wc-select-tag-error-color) !important;
+    border: solid 1px var(--dsa-wc-select-tag-error-border-color);
+  }
+
+  .select--error .select__tags dsa-tag::part(remove-button) {
+    color: var(--dsa-wc-select-tag-error-color) !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(dsa-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* On base selects */
+  .select--on-base .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-select-on-base-background-color,
+      var(--dsa-wc-input-on-base-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-select-on-base-border-color,
+        var(--dsa-wc-input-on-base-border-color)
+      );
+  }
+
+  .select--on-base:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-select-on-base-hover-border-color,
+      var(--dsa-wc-input-on-base-border-color-hover)
+    );
+    background-color: var(
+      --dsa-wc-internal-select-on-base-hover-background-color,
+      inherit
+    );
+  }
+  .select--on-base.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-select-on-base-disabled-background-color,
+      var(--dsa-wc-input-on-base-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-select-on-base-disabled-border-color,
+      var(--dsa-wc-input-on-base-border-color-disabled)
+    );
+    cursor: var(--dsa-wc-internal-select-disabled-cursor, not-allowed);
+    opacity: var(--dsa-wc-internal-select-disabled-opacity, 0.5);
+    outline: none;
+  }
+
+  .select--on-base:not(.select--disabled).select--open .select__combobox,
+  .select--on-base:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    z-index: 2;
+
+    background-color: var(
+      --dsa-wc-internal-select-on-base-active-background-color,
+      inherit
+    );
+  }
+
+  .select--on-base select__prefix {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .select--error.select--on-base:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+
+  .select--error.select--on-base:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  /* On Layer selects */
+  .select--on-layer .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-select-on-layer-background-color,
+      var(--dsa-wc-input-on-layer-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-select-on-layer-border-color,
+        var(--dsa-wc-input-on-layer-border-color)
+      );
+  }
+
+  .select--on-layer:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-select-on-layer-hover-border-color,
+      var(--dsa-wc-input-on-layer-border-color-hover)
+    );
+    background-color: var(
+      --dsa-wc-internal-select-on-layer-hover-background-color,
+      var(--dsa-wc-internal-select-on-layer-hover-background-color, inherit)
+    );
+  }
+
+  .select--on-layer.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-select-on-layer-disabled-background-color,
+      var(--dsa-wc-input-on-layer-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-select-on-layer-disabled-border-color,
+      var(--dsa-wc-input-on-layer-border-color-disabled)
+    );
+    opacity: var(--dsa-wc-internal-select-disabled-opacity, 0.5);
+    cursor: var(--dsa-wc-internal-select-disabled-cursor, not-allowed);
+    outline: none;
+  }
+
+  .select--on-layer:not(.select--disabled).select--open .select__combobox,
+  .select--on-layer:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+
+    background-color: var(
+      --dsa-wc-internal-select-on-layer-active-background-color,
+      inherit
+    );
+  }
+
+  .select--on-layer select__prefix {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .select--error.select--on-layer:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+
+  .select--error.select--on-layer:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    font: var(--dsa-wc-select-input-font-small);
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    font: var(--dsa-wc-select-input-font);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 3px;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+  .select--large .select__combobox {
+    font: var(--dsa-wc-select-input-font-large);
+  }
+  .select--large.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--dsa-wc-input-margin-inline);
+  }
+  .select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--dsa-wc-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  :not(.select--disabled) .select__clear:hover,
+  :not(.select--disabled) .select__expand-icon:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  .select--disabled .select__clear,
+  .select--disabled .select__expand-icon {
+    color: var(--dsa-wc-input-icon-color-disabled);
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--dsa-wc-select-icon-margin-inline);
+    color: var(--dsa-wc-input-icon-color);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: block;
+    position: relative;
+    font: var(--dsa-wc-input-text-field-font);
+    box-shadow: var(--dsa-wc-shadow-large);
+    background: var(--dsa-wc-select-listbox-background-color);
+    border: solid var(--dsa-wc-select-listbox-border-width)
+      var(--dsa-wc-select-listbox-background-color);
+    border-radius: var(--dsa-wc-select-listbox-border-radius);
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .select__listbox::slotted(dsa-divider) {
+    --spacing-start: var(--dsa-wc-select-listbox-divider-spacing);
+    --spacing-end: var(--dsa-wc-select-listbox-divider-spacing);
+  }
+
+  .select__listbox::slotted(small) {
+    font-size: var(--dsa-wc-input-text-field-font-small);
+    padding-inline: var(--dsa-wc-select-listbox-padding-inline);
+  }
+`;
+
+export {
+  select_styles_default
+};

package/dist/chunks/chunk.DXVNWE2M.js

@@ -0,0 +1,166 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/drawer/drawer.styles.ts
+import { css } from "lit";
+var drawer_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    --size: 25rem;
+    --header-spacing: var(--dsa-wc-drawer-spacing);
+    --body-spacing: var(--dsa-wc-drawer-spacing);
+    --footer-spacing: var(--dsa-wc-drawer-spacing);
+
+    display: contents;
+  }
+
+  .drawer {
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    font: var(--dsa-wc-drawer-content-font);
+  }
+
+  .drawer--contained {
+    position: absolute;
+    z-index: initial;
+  }
+
+  .drawer--fixed {
+    position: fixed;
+    z-index: var(--dsa-wc-z-index-drawer);
+  }
+
+  .drawer__panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--dsa-wc-drawer-background-color);
+    overflow: auto;
+    pointer-events: all;
+  }
+
+  .drawer__panel:focus {
+    outline: none;
+  }
+
+  .drawer--top .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--end .drawer__panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer--bottom .drawer__panel {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--start .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer__header {
+    display: flex;
+  }
+
+  .drawer__title {
+    flex: 1 1 auto;
+    font: var(--dsa-wc-drawer-header-font);
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .drawer__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--dsa-wc-drawer-header-actions-gap);
+    padding: 0 var(--header-spacing);
+  }
+
+  .drawer__header-actions dsa-icon-button,
+  .drawer__header-actions ::slotted(dsa-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: 1.25rem;
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__footer {
+    border-top: var(--dsa-wc-drawer-footer-border-top);
+    text-align: right;
+    padding: var(--footer-spacing);
+  }
+
+  .drawer__footer ::slotted(dsa-button:not(:last-of-type)) {
+    margin-inline-end: var(--dsa-wc-drawer-footer-button-margin-inline-end);
+  }
+
+  .drawer:not(.drawer--has-footer) .drawer__footer {
+    display: none;
+  }
+
+  .drawer__overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--dsa-wc-drawer-overlay-color);
+    pointer-events: all;
+    opacity: 0.4;
+  }
+
+  .drawer--contained .drawer__overlay {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px var(--dsa-color-background-base);
+    }
+  }
+`;
+
+export {
+  drawer_styles_default
+};