@sebgroup/green-core 3.25.2 → 3.26.0

package/components/radio/radio.component.js

@@ -20,17 +20,19 @@ let GdsRadio = class extends GdsElement {
     this.value = "";
     this.checked = false;
     this.disabled = false;
+    this.readonly = false;
     this.invalid = false;
     this._isFocused = false;
     __privateAdd(this, _handleClick, (e) => {
       if (this.disabled || !this.label) return;
       e.preventDefault();
-      this.checked = true;
       this.focus();
+      if (this.readonly) return;
+      this.checked = true;
       this.dispatchStandardEvent("input", { bubbles: true });
     });
     __privateAdd(this, _handleKeyDown, (e) => {
-      if (this.disabled) return;
+      if (this.disabled || this.readonly) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         this.checked = true;
@@ -59,7 +61,7 @@ let GdsRadio = class extends GdsElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("checked") || changedProperties.has("disabled") || changedProperties.has("invalid")) {
+    if (changedProperties.has("checked") || changedProperties.has("disabled") || changedProperties.has("readonly") || changedProperties.has("invalid")) {
       this._updateAriaState();
     }
   }
@@ -71,6 +73,7 @@ let GdsRadio = class extends GdsElement {
         ${radioToggle({
       checked: this.checked,
       disabled: this.disabled,
+      readonly: this.readonly,
       indeterminate: false,
       invalid: this.invalid
     })}
@@ -96,6 +99,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsRadio.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean })
 ], GdsRadio.prototype, "invalid", 2);

package/components/select/select.component.js

@@ -5,10 +5,11 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _isValueInitialized, _Select_instances, shouldShowFooter_fn, _handleSelectElementChange, setValueFromSelectElement_fn, renderFieldContents_fn, renderSlotLead_fn, renderMainLabel_fn, renderMainSlot_fn, renderChevron_fn;
+var _isValueInitialized, _Select_instances, shouldShowFooter_fn, _handleSelectElementChange, _handleSelectElementKeyDown, setValueFromSelectElement_fn, syncSelectElement_fn, renderFieldContents_fn, renderSlotLead_fn, renderMainLabel_fn, renderMainSlot_fn, renderChevron_fn;
 import { localized } from "@lit/localize";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
 import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-control-footer.component.js";
@@ -41,6 +42,10 @@ let Select = class extends GdsFormControlElement {
     __privateAdd(this, _isValueInitialized, false);
     __privateAdd(this, _handleSelectElementChange, (e) => {
       e.stopPropagation();
+      if (this.readonly) {
+        __privateMethod(this, _Select_instances, syncSelectElement_fn).call(this);
+        return;
+      }
       __privateMethod(this, _Select_instances, setValueFromSelectElement_fn).call(this);
       requestAnimationFrame(() => {
         this.dispatchCustomEvent("input", {
@@ -55,6 +60,9 @@ let Select = class extends GdsFormControlElement {
         });
       });
     });
+    __privateAdd(this, _handleSelectElementKeyDown, (e) => {
+      if (this.readonly && e.key !== "Tab") e.preventDefault();
+    });
   }
   get value() {
     return this._internalValue;
@@ -116,6 +124,7 @@ let Select = class extends GdsFormControlElement {
       <gds-field-base
         .size=${this.size}
         .disabled=${this.disabled}
+        .readonly=${this.readonly}
         .invalid=${this.invalid}
         .multiline=${this.multiple}
         align-items=${this.multiple ? "flex-start" : "center"}
@@ -140,6 +149,7 @@ let Select = class extends GdsFormControlElement {
       const clone = node.cloneNode(true);
       clone.addEventListener("change", __privateGet(this, _handleSelectElementChange));
       clone.addEventListener("input", __privateGet(this, _handleSelectElementChange));
+      clone.addEventListener("keydown", __privateGet(this, _handleSelectElementKeyDown));
       clone.setAttribute(
         "aria-describedby",
         "supporting-text extended-supporting-text sub-label message"
@@ -147,10 +157,19 @@ let Select = class extends GdsFormControlElement {
       clone.ariaLabel = this.label;
       clone.setAttribute("id", "select");
       clone.disabled = this.disabled;
+      clone.setAttribute("aria-readonly", String(this.readonly));
       clone.className = "native-control";
-      if (!__privateGet(this, _isValueInitialized))
-        this._internalValue = clone.value;
-      else clone.value = this.value;
+      if (!__privateGet(this, _isValueInitialized)) {
+        if (clone.multiple) {
+          this._internalValue = Array.from(clone.selectedOptions).map(
+            (option) => option.value
+          );
+        } else {
+          this._internalValue = clone.value;
+        }
+      } else {
+        __privateMethod(this, _Select_instances, syncSelectElement_fn).call(this, clone);
+      }
       return clone;
     });
     this._elSelectContainer.replaceChildren(...cloned);
@@ -177,14 +196,7 @@ let Select = class extends GdsFormControlElement {
     return this.selectElement;
   }
   _handleValueChange() {
-    if (!this.selectElement) return;
-    if (this.multiple) {
-      const valArr = this.value || [];
-      Array.from(this.selectElement.options).forEach((option) => {
-        option.selected = valArr.includes(option.value);
-      });
-    } else this.selectElement.value = this.value;
-    this.requestUpdate();
+    __privateMethod(this, _Select_instances, syncSelectElement_fn).call(this, this.selectElement);
   }
 };
 _isValueInitialized = new WeakMap();
@@ -193,6 +205,7 @@ shouldShowFooter_fn = function() {
   return !this.plain && this.invalid;
 };
 _handleSelectElementChange = new WeakMap();
+_handleSelectElementKeyDown = new WeakMap();
 setValueFromSelectElement_fn = function() {
   if (!this.selectElement) return;
   if (this.multiple) {
@@ -202,6 +215,16 @@ setValueFromSelectElement_fn = function() {
     this.value = this.selectElement.value;
   }
 };
+syncSelectElement_fn = function(selectElement = this.selectElement) {
+  if (!selectElement) return;
+  if (selectElement.multiple) {
+    const valArr = this.value || [];
+    Array.from(selectElement.options).forEach((option) => {
+      option.selected = valArr.includes(option.value);
+    });
+  } else selectElement.value = this.value;
+  this.requestUpdate();
+};
 /**
  * Renders the main content area of the select field.
  * Composes the field from various sub-elements.
@@ -246,7 +269,11 @@ renderMainSlot_fn = function() {
 renderChevron_fn = function() {
   if (!this.multiple) {
     return html`
-        <gds-icon-chevron-bottom slot="action"></gds-icon-chevron-bottom>
+        <gds-icon-chevron-bottom
+          class="chevron"
+          color=${ifDefined(this.readonly ? "disabled-01" : void 0)}
+          slot="action"
+        ></gds-icon-chevron-bottom>
       `;
   }
 };

package/components/select/select.styles.js

@@ -26,6 +26,10 @@ const style = css`
       width: 100%;
     }
 
+    :host([readonly]) select {
+      pointer-events: none;
+    }
+
     label {
       flex: 1;
     }

package/components/switch/switch.component.js

@@ -4,7 +4,7 @@ import {
   __privateGet,
   __privateMethod
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _Switch_instances, renderNativeInput_fn, renderLabel_fn, renderThumb_fn, renderTrack_fn, _handleChange, dispatchChangeEvents_fn, _handleKeyDown, syncFormValue_fn, triggerPerimeterRipple_fn;
+var _Switch_instances, renderNativeInput_fn, renderLabel_fn, renderThumb_fn, renderLockIcon_fn, renderTrack_fn, _handleChange, dispatchChangeEvents_fn, _handleKeyDown, syncFormValue_fn, triggerPerimeterRipple_fn;
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -18,6 +18,7 @@ import {
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsFormControlElement } from "../form/form-control.js";
 import { IconCheckmark } from "../icon/icons/checkmark.component.js";
+import { IconLock } from "../icon/icons/lock.component.js";
 import { styles } from "./switch.styles.js";
 let Switch = class extends GdsFormControlElement {
   constructor() {
@@ -28,12 +29,16 @@ let Switch = class extends GdsFormControlElement {
     this.size = "large";
     this["justify-content"] = "flex-start";
     __privateAdd(this, _handleChange, () => {
+      if (this.readonly) {
+        this._input.checked = this.checked;
+        return;
+      }
       this.checked = this._input.checked;
       __privateMethod(this, _Switch_instances, triggerPerimeterRipple_fn).call(this);
       __privateMethod(this, _Switch_instances, dispatchChangeEvents_fn).call(this);
     });
     __privateAdd(this, _handleKeyDown, (event) => {
-      if (this.disabled) return;
+      if (this.disabled || this.readonly) return;
       if (event.key === "Enter") {
         event.preventDefault();
         this._input.click();
@@ -65,6 +70,7 @@ let Switch = class extends GdsFormControlElement {
       switch: true,
       checked: this.checked,
       disabled: this.disabled,
+      readonly: this.readonly,
       "control-start": this.controlPlacement === "start",
       small: this.size === "small"
     };
@@ -85,6 +91,7 @@ renderNativeInput_fn = function() {
         .checked=${this.checked}
         ?disabled=${this.disabled}
         aria-label=${ifDefined(this.label ? void 0 : "Switch")}
+        aria-readonly=${this.readonly}
         @keydown=${__privateGet(this, _handleKeyDown)}
         @change=${__privateGet(this, _handleChange)}
       />
@@ -104,9 +111,20 @@ renderThumb_fn = function() {
       ></gds-icon-checkmark>
     </span>`;
 };
+renderLockIcon_fn = function() {
+  if (!this.readonly) return null;
+  return html`<gds-icon-lock
+      size="${this.size === "small" ? "s" : "m"}"
+      color="${this.checked ? "neutral-03" : "disabled-01"}"
+      class="lock-icon"
+      solid
+    ></gds-icon-lock>`;
+};
 renderTrack_fn = function() {
   return html`
-      <span class="track" aria-hidden="true"> ${__privateMethod(this, _Switch_instances, renderThumb_fn).call(this)} </span>
+      <span class="track" aria-hidden="true">
+        ${__privateMethod(this, _Switch_instances, renderThumb_fn).call(this)} ${__privateMethod(this, _Switch_instances, renderLockIcon_fn).call(this)}
+      </span>
     `;
 };
 _handleChange = new WeakMap();
@@ -170,7 +188,7 @@ let GdsSwitch = class extends withLayoutChildProps(
 ) {
 };
 GdsSwitch = __decorateClass([
-  gdsCustomElement("gds-switch", { dependsOn: [IconCheckmark] })
+  gdsCustomElement("gds-switch", { dependsOn: [IconCheckmark, IconLock] })
 ], GdsSwitch);
 export {
   GdsSwitch

package/components/switch/switch.styles.js

@@ -67,6 +67,7 @@ const style = css`
     --switch-thumb-left-checked: calc(
       100% - var(--switch-thumb-size-checked) - 2px
     );
+    --switch-lock-icon-inset: var(--gds-sys-space-4xs);
   }
 
   .switch.small .label {
@@ -84,6 +85,7 @@ const style = css`
     --switch-thumb-left-checked: calc(
       100% - var(--switch-thumb-size-checked) - 2px
     );
+    --switch-lock-icon-inset: var(--gds-sys-space-3xs);
   }
 
   :is(.track, .thumb, .perimeter) {
@@ -175,6 +177,18 @@ const style = css`
     transform-origin: center;
   }
 
+  .lock-icon {
+    position: absolute;
+    top: 50%;
+    right: var(--switch-lock-icon-inset);
+    translate: 0 -50%;
+  }
+
+  .checked .lock-icon {
+    right: auto;
+    left: var(--switch-lock-icon-inset);
+  }
+
   @media (pointer: fine) {
     .switch:not(.disabled):not(:active):hover .thumb {
       scale: 1.085;
@@ -230,6 +244,26 @@ const style = css`
     color: var(--gds-sys-color-l3-disabled-01);
   }
 
+  .switch.readonly .track {
+    border-color: var(--gds-sys-color-l3-disabled-02);
+  }
+
+  .switch.readonly .thumb {
+    background: var(--gds-sys-color-content-disabled-01);
+  }
+
+  .switch.readonly.checked .track {
+    background-color: var(--gds-sys-color-l3-disabled-02);
+  }
+
+  .switch.readonly.checked .checkmark {
+    color: var(--gds-sys-color-content-disabled-01);
+  }
+
+  .switch.readonly.checked .thumb {
+    background: var(--gds-sys-color-content-disabled-02);
+  }
+
   @media (prefers-color-scheme: dark) {
     .switch.disabled .track {
       opacity: 0.4;

package/components/table/table.component.js

@@ -1083,7 +1083,8 @@ renderCheckbox_fn = function({
     checked,
     indeterminate,
     disabled,
-    invalid: false
+    invalid: false,
+    readonly: false
   })}
       </div>
     `;

package/components/textarea/textarea.component.js

@@ -55,10 +55,12 @@ let Textarea = class extends GdsFormControlElement {
       });
     };
     __privateAdd(this, _handleOnInput, (e) => {
+      if (this.readonly) return;
       const element = e.target;
       this.value = element.value;
     });
     __privateAdd(this, _handleOnChange, (e) => {
+      if (this.readonly) return;
       const element = e.target;
       this.value = element.value;
       this.dispatchStandardEvent("change", {
@@ -226,7 +228,9 @@ let Textarea = class extends GdsFormControlElement {
 
       <gds-field-base
         id="field"
+        .size=${this.size}
         .disabled=${this.disabled}
+        .readonly=${this.readonly}
         .invalid=${this.invalid}
         @click=${__privateGet(this, _handleFieldClick)}
         multiline
@@ -336,6 +340,7 @@ renderNativeTextarea_fn = function() {
         aria-describedby="supporting-text extended-supporting-text sub-label message"
         aria-errormessage="footer"
         placeholder=" "
+        ?readonly=${this.readonly}
         autocapitalize=${ifDefined(this.autocapitalize)}
         autocomplete=${ifDefined(this.autocomplete)}
         autocorrect=${ifDefined(this.autocorrect)}
@@ -349,7 +354,7 @@ renderNativeTextarea_fn = function() {
     `;
 };
 renderClearButton_fn = function() {
-  if (this.clearable && (this.value?.length || 0) > 0)
+  if (this.clearable && !this.readonly && (this.value?.length || 0) > 0)
     return html`
         <gds-button
           size="small"