@ds-autonomie/web-components 2.2.0 → 2.3.0

package/dist/internal/components/checkbox-box/checkbox-box.d.ts

@@ -0,0 +1,27 @@
+import type { CSSResultGroup } from 'lit';
+import '../../../components/icon/icon';
+import { ShoelaceElement } from '../../shoelace-element';
+export declare class DSAInternalCheckboxBox extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    /** Draws the checkbox in a checked state. */
+    checked: boolean;
+    /**
+     * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+     * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
+     */
+    indeterminate: boolean;
+    /** The checkbox's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Disables the checkbox. */
+    disabled: boolean;
+    /** Sets the checkbox in readonly. */
+    readonly: boolean;
+    /** Indicates whether the checkbox should be in error state */
+    error: boolean;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-internal-checkbox-box': DSAInternalCheckboxBox;
+    }
+}

package/dist/internal/components/checkbox-box/checkbox-box.js

@@ -0,0 +1,94 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import '../../../components/icon/icon';
+import { ShoelaceElement } from '../../shoelace-element';
+import styles from './checkbox-box.styles';
+let DSAInternalCheckboxBox = class DSAInternalCheckboxBox extends ShoelaceElement {
+    constructor() {
+        super(...arguments);
+        /** Draws the checkbox in a checked state. */
+        this.checked = false;
+        /**
+         * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+         * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
+         */
+        this.indeterminate = false;
+        /** The checkbox's size. */
+        this.size = 'medium';
+        /** Disables the checkbox. */
+        this.disabled = false;
+        /** Sets the checkbox in readonly. */
+        this.readonly = false;
+        /** Indicates whether the checkbox should be in error state */
+        this.error = false;
+    }
+    render() {
+        return html `
+      <span
+        part="control"
+        class=${classMap({
+            checkbox__control: true,
+            'checkbox__control--checked': this.checked,
+            'checkbox__control--indeterminate': this.indeterminate,
+            'checkbox__control--disabled': this.disabled,
+            'checkbox__control--readonly': this.readonly,
+            'checkbox__control--error': this.error,
+            'checkbox__control--small': this.size === 'small',
+            'checkbox__control--medium': this.size === 'medium',
+            'checkbox__control--large': this.size === 'large',
+        })}
+      >
+        ${this.checked
+            ? html `
+              <dsa-icon
+                part="checked-icon"
+                class="checkbox__checked-icon"
+                name="done"
+                library="system"
+              ></dsa-icon>
+            `
+            : ''}
+        ${!this.checked && this.indeterminate
+            ? html `
+              <dsa-icon
+                part="indeterminate-icon"
+                class="checkbox__indeterminate-icon"
+                name="horizontal_rule"
+                library="system"
+              ></dsa-icon>
+            `
+            : ''}
+      </span>
+    `;
+    }
+};
+DSAInternalCheckboxBox.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ reflect: true })
+], DSAInternalCheckboxBox.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], DSAInternalCheckboxBox.prototype, "error", void 0);
+DSAInternalCheckboxBox = __decorate([
+    customElement('dsa-internal-checkbox-box')
+], DSAInternalCheckboxBox);
+export { DSAInternalCheckboxBox };

package/dist/internal/components/checkbox-box/checkbox-box.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/internal/components/checkbox-box/checkbox-box.styles.js

@@ -0,0 +1,98 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: contents;
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .checkbox__control--small {
+    --toggle-size: var(--dsa-wc-checkbox-size-small);
+  }
+
+  .checkbox__control--medium {
+    --toggle-size: var(--dsa-wc-checkbox-size);
+  }
+
+  .checkbox__control--large {
+    --toggle-size: var(--dsa-wc-checkbox-size-large);
+  }
+
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: var(--dsa-wc-checkbox-border);
+    border-radius: var(--dsa-wc-checkbox-border-radius);
+    background-color: var(--dsa-wc-checkbox-background-color);
+    color: var(--dsa-wc-checkbox-icon-color);
+    transition: var(--dsa-wc-transition-fast) border-color,
+      var(--dsa-wc-transition-fast) background-color,
+      var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) box-shadow;
+    box-sizing: border-box;
+  }
+
+  .checkbox__control.checkbox__control--small {
+    border-radius: var(--dsa-wc-checkbox-border-radius-small);
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  /* Hover */
+  :host(:hover)
+    .checkbox__control:not(.checkbox__control--checked):not(
+      .checkbox__control--disabled
+    ):not(.checkbox__control--readonly) {
+    border-color: var(--dsa-wc-checkbox-color-hover);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox__control--checked,
+  .checkbox__control--indeterminate {
+    border-color: var(--dsa-wc-checkbox-color-active);
+    background-color: var(--dsa-wc-checkbox-color-active);
+  }
+
+  /* Checked/indeterminate + hover */
+  :host(:hover)
+    .checkbox.checkbox__control--checked:not(.checkbox__control--disabled):not(
+      .checkbox__control--readonly
+    ),
+  :host(:hover)
+    .checkbox.checkbox__control--indeterminate:not(
+      .checkbox__control--disabled
+    ):not(.checkbox__control--readonly) {
+    border-color: var(--dsa-wc-checkbox-color-active);
+    background-color: var(--dsa-wc-checkbox-color-active);
+  }
+
+  /* Disabled */
+  .checkbox__control--disabled {
+    border-color: var(--dsa-wc-checkbox-color-disabled);
+  }
+  .checkbox__control--checked.checkbox__control--disabled,
+  .checkbox__control--indeterminate.checkbox__control--disabled {
+    background-color: var(--dsa-wc-checkbox-color-disabled);
+  }
+
+  /* Readonly */
+  .checkbox__control--readonly {
+    border-color: var(--dsa-wc-checkbox-border-color-readonly);
+    color: var(--dsa-wc-checkbox-color-readonly);
+    background-color: var(--dsa-wc-checkbox-background-color);
+  }
+`;

package/dist/internal/components/date-field/date-field.d.ts

@@ -26,6 +26,7 @@ export default class DSAInternalDateField extends ShoelaceElement implements Sho
     private dateOrder;
     private delimiter;
     private lastPressedKey;
+    private internalValueChange;
     /** The parent element accessible name */
     parentName: string;
     /** A description for accessibility */

package/dist/internal/components/date-field/date-field.js

@@ -53,6 +53,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         ];
         this.delimiter = '/';
         this.lastPressedKey = '';
+        this.internalValueChange = false;
         /** The parent element accessible name */
         this.parentName = '';
         /** A description for accessibility */
@@ -132,10 +133,15 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         });
     }
     handleBlur(event) {
+        this.handleChange();
         const currentTarget = event.currentTarget;
         // Wait for the potential newly focused element to be added
-        setTimeout(() => (this.focusedInput = this.focusedInput.filter((input) => input !== currentTarget)), 0);
-        this.handleChange();
+        setTimeout(() => {
+            this.focusedInput = this.focusedInput.filter((input) => input !== currentTarget);
+            if (this.focusedInput.length === 0) {
+                this.internalValueChange = false;
+            }
+        }, 0);
     }
     handleChange() {
         const previousValue = this.value;
@@ -146,16 +152,19 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         if (this.selectedDay > this.dayInput.max) {
             this.selectedDay = this.dayInput.max;
         }
-        if (selectedDay !== '' &&
-            selectedMonth !== '' &&
-            selectedYear !== '' &&
-            isValidDate(tentativeDate)) {
-            this.value = tentativeDate;
+        if (selectedDay === '' && selectedMonth === '' && selectedYear === '') {
+            this.setCustomValidity('');
+            this.value = '';
         }
-        else {
+        else if (!isValidDate(tentativeDate)) {
             this.setCustomValidity(this.localize.term('invalidDate'));
             this.value = '';
         }
+        else {
+            this.setCustomValidity('');
+            this.value = tentativeDate;
+        }
+        this.internalValueChange = true;
         this.formControlController.updateValidity();
         if (this.value !== previousValue) {
             this.emit('dsa-change');
@@ -262,6 +271,10 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
     }
     handleValueChange() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.internalValueChange) {
+                this.internalValueChange = false;
+                return;
+            }
             if (this.value === '') {
                 this.selectedDay = '';
                 this.selectedMonth = '';
@@ -273,6 +286,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
                 this.selectedYear = `${new Date(this.value).getFullYear()}`.padStart(4, '0');
             }
             yield this.updateComplete;
+            this.setCustomValidity('');
             this.formControlController.updateValidity();
         });
     }
@@ -408,7 +422,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         ?required=${this.required}
         min=${ifDefined(this.min)}
         max=${ifDefined(this.max)}
-        .value=${live(`${this.selectedYear}-${this.selectedMonth}-${this.selectedDay}`)}
+        .value=${live(this.value)}
         tabindex="-1"
         aria-hidden="true"
         @invalid=${this.handleInvalid}

package/dist/internal/components/form-control/form-control-layout.d.ts

@@ -37,5 +37,6 @@ export declare class FormControlLayout extends ShoelaceElement {
     required: boolean;
     protected renderInput(): import("lit").TemplateResult<1>;
     protected renderCounter(): import("lit").TemplateResult<1>;
+    protected handleLabelClick(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/internal/components/form-control/form-control-layout.js

@@ -55,6 +55,9 @@ export class FormControlLayout extends ShoelaceElement {
     renderCounter() {
         return html ``;
     }
+    handleLabelClick() {
+        // To be overridden by subclasses
+    }
     render() {
         const hasLabelSlot = this.hasSlotController.test('label');
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
@@ -82,6 +85,7 @@ export class FormControlLayout extends ShoelaceElement {
             class='form-control__label'
             for="input"
             aria-hidden=${ifDefined(hasLabel ? undefined : 'true')}
+            @click=${this.handleLabelClick}
           >
             ${this.required
             ? html `<span class="form-control__label-required">*</span>`

package/dist/internal/components/form-selectable-card/form-selectable-card-stories.d.ts

@@ -0,0 +1,2 @@
+import type { ArgTypes } from '@storybook/web-components';
+export declare const getFormSelectableCardArgTypes: (tableCategory: string) => ArgTypes;

package/dist/internal/components/form-selectable-card/form-selectable-card-stories.js

@@ -0,0 +1,77 @@
+export const getFormSelectableCardArgTypes = (tableCategory) => {
+    return {
+        'card_?disabled': {
+            name: 'disabled',
+            description: 'Disables the card',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+                category: tableCategory,
+            },
+            control: { type: 'boolean' },
+        },
+        'card_?readonly': {
+            name: 'readonly',
+            description: 'Sets the card in readonly',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+                category: tableCategory,
+            },
+            control: { type: 'boolean' },
+        },
+        'card_?error': {
+            name: 'error',
+            description: 'Sets the card in error',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+                category: tableCategory,
+            },
+            control: { type: 'boolean' },
+        },
+        card_value: {
+            name: 'value',
+            description: "The element's value. When selected, the parent group will receive this value",
+            table: {
+                type: { summary: 'string' },
+                category: tableCategory,
+            },
+            control: false,
+        },
+        card_layout: {
+            name: 'layout',
+            description: "The element's layout direction, either horizontal or vertical.",
+            table: {
+                type: { summary: "'horizontal' | 'vertical'" },
+                defaultValue: { summary: 'horizontal' },
+                category: tableCategory,
+            },
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+        },
+        card_updateComplete: {
+            name: 'updateComplete',
+            description: 'A read-only promise that resolves when the component has finished updating',
+            control: false,
+            table: {
+                category: tableCategory,
+            },
+        },
+        slot_image: {
+            name: 'image',
+            description: '(Story) Add image slot',
+            table: {
+                category: 'story',
+            },
+        },
+        story_container_width: {
+            name: 'Container width',
+            description: '(Story) change the container width',
+            table: {
+                category: 'story',
+            },
+            control: { type: 'number' },
+        },
+    };
+};

package/dist/internal/components/form-selectable-card/form-selectable-card.d.ts

@@ -0,0 +1,38 @@
+import type { CSSResultGroup } from 'lit';
+import '../../../components/icon/icon';
+import { ShoelaceElement } from '../../shoelace-element';
+import '../checkbox-box/checkbox-box';
+import '../radio-icon/radio-icon';
+export declare class FormSelectableCard extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    button: HTMLInputElement;
+    protected type: 'radio' | 'checkbox';
+    /**
+     * @internal The card's checked state. This is exposed as an "internal" attribute so we can reflect it, making
+     * it easier to style in card groups.
+     */
+    checked: boolean;
+    /** The input value. When selected, the parent group will receive this value. */
+    value: string;
+    /** Disables the card. */
+    disabled: boolean;
+    /** Indicates whether a parent checkbox-group has the disabled attribute with the value true */
+    parentDisabled: boolean;
+    /** Sets the card in readonly. */
+    readonly: boolean;
+    /** Indicates whether a parent checkbox-group has the readonly attribute with the value true */
+    parentReadonly: boolean;
+    /** Indicates whether the card should be in error state */
+    error: boolean;
+    /** The card layout orientation */
+    layout: 'horizontal' | 'vertical';
+    protected handleClick(): void;
+    private handleBlur;
+    private handleFocus;
+    handleDisabledChange(): void;
+    /** Sets focus on the radio button. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the radio button. */
+    blur(): void;
+    render(): import("lit").TemplateResult;
+}

package/dist/internal/components/form-selectable-card/form-selectable-card.js

@@ -0,0 +1,182 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property, query } 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';
+import '../../../components/icon/icon';
+import { ShoelaceElement } from '../../shoelace-element';
+import { watch } from '../../watch';
+import '../checkbox-box/checkbox-box';
+import '../radio-icon/radio-icon';
+import styles from './form-selectable-card.styles';
+export class FormSelectableCard extends ShoelaceElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal The card's checked state. This is exposed as an "internal" attribute so we can reflect it, making
+         * it easier to style in card groups.
+         */
+        this.checked = false;
+        /** Disables the card. */
+        this.disabled = false;
+        /** Indicates whether a parent checkbox-group has the disabled attribute with the value true */
+        this.parentDisabled = false;
+        /** Sets the card in readonly. */
+        this.readonly = false;
+        /** Indicates whether a parent checkbox-group has the readonly attribute with the value true */
+        this.parentReadonly = false;
+        /** Indicates whether the card should be in error state */
+        this.error = false;
+        /** The card layout orientation */
+        this.layout = 'horizontal';
+    }
+    handleClick() {
+        // To be overridden by subclasses
+    }
+    handleBlur() {
+        this.emit('dsa-blur');
+    }
+    handleFocus() {
+        this.emit('dsa-focus');
+    }
+    handleDisabledChange() {
+        if (this.disabled ||
+            this.readonly ||
+            this.parentDisabled ||
+            this.parentReadonly) {
+            this.button.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.button.removeAttribute('aria-disabled');
+        }
+    }
+    /** Sets focus on the radio button. */
+    focus(options) {
+        this.button.focus(options);
+    }
+    /** Removes focus from the radio button. */
+    blur() {
+        this.button.blur();
+    }
+    render() {
+        const isDisabled = this.disabled || this.parentDisabled;
+        const isReadonly = this.readonly || this.parentReadonly;
+        const isDeactivated = isDisabled || isReadonly;
+        return html `
+      <div part="base">
+        <button
+          part="${`button${this.checked ? ' selectable-card--checked' : ''}`}"
+          role=${this.type}
+          aria-checked="${this.checked}"
+          class=${classMap({
+            'selectable-card': true,
+            'selectable-card--vertical': this.layout === 'vertical',
+            'selectable-card--horizontal': this.layout === 'horizontal',
+            'selectable-card--on-base': true,
+            'selectable-card--toggle': true,
+            'selectable-card--medium': true,
+            'selectable-card--checked': this.checked,
+            'selectable-card--readonly': isReadonly,
+            'selectable-card--disabled': isDisabled,
+            'selectable-card--error': this.error,
+            'selectable-card--checkbox': this.type === 'checkbox',
+        })}
+          ?disabled=${isDisabled}
+          aria-disabled=${ifDefined(isDeactivated ? 'true' : undefined)}
+          aria-invalid=${ifDefined(this.type === 'checkbox' && this.error ? 'true' : undefined)}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+          title="${this.innerText}"
+        >
+          ${this.type === 'radio'
+            ? html `
+                <dsa-internal-radio-icon
+                  ?checked=${this.checked}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  ?error=${this.error}
+                ></dsa-internal-radio-icon>
+              `
+            : html `
+                <dsa-internal-checkbox-box
+                  ?checked=${this.checked}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  ?error=${this.error}
+                ></dsa-internal-checkbox-box>
+              `}
+
+          <div class="selectable-card__content">
+            ${this.layout === 'vertical'
+            ? html `
+                  <slot
+                    name="image"
+                    part="image"
+                    class="selectable-card__image"
+                  ></slot>
+                `
+            : ''}
+            <div class="selectable-card__text">
+              <slot part="label" class="selectable-card__label"></slot>
+              <slot
+                name="description"
+                part="description"
+                class="selectable-card__description"
+              ></slot>
+            </div>
+            ${this.layout === 'horizontal'
+            ? html `
+                  <slot
+                    name="image"
+                    part="image"
+                    class="selectable-card__image"
+                  ></slot>
+                `
+            : ''}
+          </div>
+        </button>
+      </div>
+    `;
+    }
+}
+FormSelectableCard.styles = styles;
+__decorate([
+    query('.selectable-card')
+], FormSelectableCard.prototype, "button", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FormSelectableCard.prototype, "checked", void 0);
+__decorate([
+    property()
+], FormSelectableCard.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FormSelectableCard.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormSelectableCard.prototype, "parentDisabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FormSelectableCard.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormSelectableCard.prototype, "parentReadonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormSelectableCard.prototype, "error", void 0);
+__decorate([
+    property()
+], FormSelectableCard.prototype, "layout", void 0);
+__decorate([
+    watch(['disabled', 'readonly', 'parentDisabled', 'parentReadonly'], {
+        waitUntilFirstUpdate: true,
+    })
+], FormSelectableCard.prototype, "handleDisabledChange", null);

package/dist/internal/components/form-selectable-card/form-selectable-card.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;