@ds-autonomie/web-components 2.2.0 → 2.3.0

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

@@ -0,0 +1,141 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: inline-block;
+    position: relative;
+    width: auto;
+  }
+
+  .selectable-card {
+    display: inline-flex;
+    align-items: flex-start;
+    width: 100%;
+    border-style: solid;
+    border-width: var(--dsa-wc-selectable-card-border-width);
+    border-color: var(--dsa-wc-selectable-card-border-color);
+    border-radius: var(--dsa-wc-selectable-card-border-radius);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    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;
+    background-color: var(--dsa-wc-selectable-card-background-color);
+  }
+  .selectable-card__content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--dsa-wc-selectable-card-content-gap);
+  }
+  .selectable-card__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dsa-wc-selectable-card-text-gap);
+    text-align: start;
+    white-space: normal;
+  }
+
+  .selectable-card--horizontal {
+    flex-direction: row;
+    gap: var(--dsa-wc-selectable-card-horizontal-gap);
+    padding: var(--dsa-wc-selectable-card-horizontal-padding);
+  }
+  .selectable-card--horizontal .selectable-card__content {
+    flex-direction: row;
+  }
+  .selectable-card--horizontal .selectable-card__image {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .selectable-card--vertical {
+    flex-direction: column;
+    gap: var(--dsa-wc-selectable-card-vertical-gap);
+    padding: var(--dsa-wc-selectable-card-vertical-padding);
+  }
+  .selectable-card--vertical .selectable-card__content {
+    flex-direction: column;
+  }
+  .selectable-card--vertical .selectable-card__text {
+    align-items: center;
+    text-align: center;
+  }
+  .selectable-card--vertical .selectable-card__image {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .selectable-card__label {
+    font: var(--dsa-wc-selectable-card-label-font);
+    color: var(--dsa-wc-selectable-card-label-color);
+  }
+  .selectable-card__description {
+    font: var(--dsa-wc-selectable-card-description-font);
+    color: var(--dsa-wc-selectable-card-description-color);
+  }
+
+  /*  
+  * States
+  */
+  .selectable-card:hover {
+    background-color: var(--dsa-wc-selectable-card-hover-background-color);
+    border-color: var(--dsa-wc-selectable-card-hover-border-color);
+    box-shadow: inset 0 0 0 1px var(--dsa-wc-selectable-card-hover-border-color);
+  }
+
+  .selectable-card--checked,
+  .selectable-card:active {
+    background-color: var(--dsa-wc-selectable-card-checked-background-color);
+    border-color: var(--dsa-wc-selectable-card-checked-border-color);
+  }
+  .selectable-card:active {
+    box-shadow: inset 0 0 0 1px
+      var(--dsa-wc-selectable-card-checked-border-color);
+  }
+
+  .selectable-card--checked:hover {
+    background-color: var(
+      --dsa-wc-selectable-card-checked-hover-background-color
+    );
+    border-color: var(--dsa-wc-selectable-card-checked-hover-border-color);
+    box-shadow: inset 0 0 0 1px
+      var(--dsa-wc-selectable-card-checked-hover-border-color);
+  }
+
+  .selectable-card--readonly,
+  .selectable-card--disabled {
+    pointer-events: none;
+  }
+
+  .selectable-card.selectable-card--readonly {
+    background-color: var(--dsa-wc-selectable-card-read-only-background-color);
+    border-color: var(--dsa-wc-selectable-card-read-only-border-color);
+  }
+
+  .selectable-card.selectable-card--disabled {
+    background-color: var(--dsa-wc-selectable-card-disabled-background-color);
+    border-color: var(--dsa-wc-selectable-card-disabled-border-color);
+  }
+  .selectable-card.selectable-card--disabled .selectable-card__label,
+  .selectable-card.selectable-card--disabled .selectable-card__description {
+    color: var(--dsa-wc-selectable-card-disabled-color);
+  }
+
+  .selectable-card--error {
+    border-color: var(--dsa-wc-selectable-card-error-border-color);
+  }
+
+  .selectable-card:focus {
+    outline: none;
+  }
+
+  .selectable-card:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+`;

package/dist/internal/components/form-toggle-button/form-toggle-button.d.ts

@@ -12,10 +12,14 @@ export declare class FormToggleButton extends ShoelaceElement {
     checked: boolean;
     /** The input value. When selected, the parent group will receive this value. */
     value: string;
+    /** Indicates whether a parent checkbox-group has the disabled attribute with the value true */
+    parentDisabled: boolean;
     /** Disables the button. */
     disabled: boolean;
     /** The button's size. */
     size: 'small' | 'medium' | 'large';
+    /** Indicates whether a parent checkbox-group has the readonly attribute with the value true */
+    parentReadonly: boolean;
     /** Sets the button in readonly. */
     readonly: boolean;
     /** Indicates whether the button should be in error state */
@@ -23,7 +27,7 @@ export declare class FormToggleButton extends ShoelaceElement {
     protected handleClick(): void;
     private handleBlur;
     private handleFocus;
-    handleDisabledChange(): void;
+    handleDeactivatedChange(): void;
     /** Sets focus on the radio button. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the radio button. */

package/dist/internal/components/form-toggle-button/form-toggle-button.js

@@ -20,10 +20,14 @@ export class FormToggleButton extends ShoelaceElement {
          * it easier to style in button groups.
          */
         this.checked = false;
+        /** Indicates whether a parent checkbox-group has the disabled attribute with the value true */
+        this.parentDisabled = false;
         /** Disables the button. */
         this.disabled = false;
         /** The button's size. */
         this.size = 'medium';
+        /** Indicates whether a parent checkbox-group has the readonly attribute with the value true */
+        this.parentReadonly = false;
         /** Sets the button in readonly. */
         this.readonly = false;
         /** Indicates whether the button should be in error state */
@@ -38,8 +42,11 @@ export class FormToggleButton extends ShoelaceElement {
     handleFocus() {
         this.emit('dsa-focus');
     }
-    handleDisabledChange() {
-        if (this.disabled || this.readonly) {
+    handleDeactivatedChange() {
+        if (this.disabled ||
+            this.readonly ||
+            this.parentDisabled ||
+            this.parentReadonly) {
             this.button.setAttribute('aria-disabled', 'true');
         }
         else {
@@ -55,6 +62,9 @@ export class FormToggleButton extends ShoelaceElement {
         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
@@ -69,13 +79,13 @@ export class FormToggleButton extends ShoelaceElement {
             'button--medium': this.size === 'medium',
             'button--large': this.size === 'large',
             'button--checked': this.checked,
-            'button--readonly': this.readonly,
-            'button--disabled': this.disabled,
+            'button--readonly': isReadonly,
+            'button--disabled': isDisabled,
             'button--error': this.error,
             'button--checkbox': this.type === 'checkbox',
         })}
-          ?disabled=${this.disabled}
-          aria-disabled=${ifDefined(this.disabled || this.readonly ? 'true' : undefined)}
+          ?disabled=${isDisabled}
+          aria-disabled=${ifDefined(isDeactivated ? 'true' : undefined)}
           aria-invalid=${ifDefined(this.type === 'checkbox' && this.error ? 'true' : undefined)}
           type="button"
           value=${ifDefined(this.value)}
@@ -84,9 +94,10 @@ export class FormToggleButton extends ShoelaceElement {
           @click=${this.handleClick}
           title="${this.innerText}"
         >
-          ${this.readonly
+          ${isReadonly
             ? html `<dsa-icon
                 name="lock"
+                library="system"
                 class="button__icon-readonly"
               ></dsa-icon>`
             : ''}
@@ -94,6 +105,7 @@ export class FormToggleButton extends ShoelaceElement {
           ${this.type === 'checkbox' && this.checked
             ? html `<dsa-icon
                 name="check"
+                library="system"
                 class="button__icon-check"
               ></dsa-icon>`
             : ''}
@@ -112,12 +124,18 @@ __decorate([
 __decorate([
     property()
 ], FormToggleButton.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormToggleButton.prototype, "parentDisabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FormToggleButton.prototype, "disabled", void 0);
 __decorate([
     property({ reflect: true })
 ], FormToggleButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormToggleButton.prototype, "parentReadonly", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FormToggleButton.prototype, "readonly", void 0);
@@ -125,5 +143,7 @@ __decorate([
     property({ type: Boolean })
 ], FormToggleButton.prototype, "error", void 0);
 __decorate([
-    watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
-], FormToggleButton.prototype, "handleDisabledChange", null);
+    watch(['disabled', 'readonly', 'parentDisabled', 'parentReadonly'], {
+        waitUntilFirstUpdate: true,
+    })
+], FormToggleButton.prototype, "handleDeactivatedChange", null);

package/dist/internal/components/form-toggle-button/form-toggle-button.styles.js

@@ -113,6 +113,13 @@ export default css `
     color: var(--dsa-wc-toggle-button-error-color);
   }
 
+  @media (forced-colors: active) {
+    .button--toggle.button--checked {
+      border-style: double;
+      border-width: medium;
+    }
+  }
+
   /*
   * Checkbox specifics
   */

package/dist/internal/components/radio-icon/radio-icon.d.ts

@@ -0,0 +1,22 @@
+import type { CSSResultGroup } from 'lit';
+import '../../../components/icon/icon';
+import { ShoelaceElement } from '../../shoelace-element';
+export declare class DSAInternalRadioIcon extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    /** Draws the radio icon in a checked state. */
+    checked: boolean;
+    /** The radio's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Disables the radio. */
+    disabled: boolean;
+    /** Sets the radio in readonly. */
+    readonly: boolean;
+    /** Indicates whether the radio should be in error state */
+    error: boolean;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-internal-radio-icon': DSAInternalRadioIcon;
+    }
+}

package/dist/internal/components/radio-icon/radio-icon.js

@@ -0,0 +1,66 @@
+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 './radio-icon.styles';
+let DSAInternalRadioIcon = class DSAInternalRadioIcon extends ShoelaceElement {
+    constructor() {
+        super(...arguments);
+        /** Draws the radio icon in a checked state. */
+        this.checked = false;
+        /** The radio's size. */
+        this.size = 'medium';
+        /** Disables the radio. */
+        this.disabled = false;
+        /** Sets the radio in readonly. */
+        this.readonly = false;
+        /** Indicates whether the radio should be in error state */
+        this.error = false;
+    }
+    render() {
+        return html `
+      <span
+        part="control"
+        class=${classMap({
+            radio__control: true,
+            'radio__control--checked': this.checked,
+            'radio__control--disabled': this.disabled,
+            'radio__control--readonly': this.readonly,
+            'radio__control--error': this.error,
+            'radio__control--small': this.size === 'small',
+            'radio__control--medium': this.size === 'medium',
+            'radio__control--large': this.size === 'large',
+        })}
+      >
+        ${this.checked ? html ` <span class="radio__inner"></span> ` : ''}
+      </span>
+    `;
+    }
+};
+DSAInternalRadioIcon.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalRadioIcon.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true })
+], DSAInternalRadioIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalRadioIcon.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DSAInternalRadioIcon.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], DSAInternalRadioIcon.prototype, "error", void 0);
+DSAInternalRadioIcon = __decorate([
+    customElement('dsa-internal-radio-icon')
+], DSAInternalRadioIcon);
+export { DSAInternalRadioIcon };

package/dist/internal/components/radio-icon/radio-icon.styles.d.ts

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

package/dist/internal/components/radio-icon/radio-icon.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: contents;
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .radio__control--small {
+    --toggle-size: var(--dsa-wc-radio-size-small);
+    --toggle-inner-size: var(--dsa-wc-radio-inner-size-small);
+  }
+
+  .radio__control--medium {
+    --toggle-size: var(--dsa-wc-radio-size);
+    --toggle-inner-size: var(--dsa-wc-radio-inner-size);
+  }
+
+  .radio__control--large {
+    --toggle-size: var(--dsa-wc-radio-size-large);
+    --toggle-inner-size: var(--dsa-wc-radio-inner-size-large);
+  }
+
+  .radio__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: solid var(--dsa-wc-radio-border-width) var(--dsa-wc-radio-color);
+    border-radius: 50%;
+    background-color: none;
+    color: var(--dsa-wc-radio-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;
+  }
+
+  .radio__control.radio--small {
+    border-width: var(--dsa-wc-radio-border-width-small);
+  }
+
+  /* Hover */
+  :host(:hover)
+    .radio__control:not(.radio__control--checked):not(
+      .radio__control--disabled
+    ):not(.radio__control--readonly) {
+    border-color: var(--dsa-wc-radio-color-hover);
+  }
+
+  /* Checked */
+  .radio__control--checked {
+    border-color: var(--dsa-wc-radio-color-active);
+  }
+  .radio__control--checked .radio__inner {
+    border-radius: 50%;
+    background-color: var(--dsa-wc-radio-color-active);
+    width: var(--toggle-inner-size);
+    height: var(--toggle-inner-size);
+  }
+
+  /* Disabled */
+  .radio__control--disabled {
+    border-color: var(--dsa-wc-radio-color-disabled);
+  }
+  .radio__control--checked.radio__control--disabled .radio__inner {
+    background-color: var(--dsa-wc-radio-color-disabled);
+  }
+
+  /* Readonly */
+  .radio__control--readonly {
+    border-color: var(--dsa-wc-radio-border-color-readonly);
+  }
+  .radio__control--checked.radio__control--readonly .radio__inner {
+    border-color: var(--dsa-wc-radio-border-color-readonly);
+    background-color: var(--dsa-wc-radio-color-readonly);
+  }
+`;

package/dist/styles/form-control.styles.js

@@ -31,11 +31,27 @@ export default css `
   }
 
   .form-control .form-control__options {
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     gap: var(--dsa-wc-toggle-group-spacing);
   }
 
+  .form-control.form-control--has-buttons .form-control__options,
+  .form-control.form-control--has-cards .form-control__options {
+    gap: var(--dsa-spacing-8);
+  }
+  .form-control:not(.form-control--options-horizontal).form-control--has-buttons
+    .form-control__options {
+    min-width: 120px;
+    max-width: 400px;
+  }
+  .form-control:not(.form-control--options-horizontal).form-control--has-cards
+    .form-control__options {
+    display: flex;
+    min-width: 204px;
+    max-width: 660px;
+  }
+
   .form-control--options-horizontal .form-control__options {
     flex-direction: row;
     flex-wrap: wrap;