@sebgroup/green-core 1.15.0 → 1.16.0

package/components/input/input.js

@@ -0,0 +1,682 @@
+import {
+  GdsFormControlElement
+} from "../../chunks/chunk.YIQIH4RW.js";
+import {
+  tokens
+} from "../../chunks/chunk.7P5N6NZL.js";
+import "../../chunks/chunk.WM7HBMMV.js";
+import "../../chunks/chunk.2LQSDOD4.js";
+import "../../chunks/chunk.7TCXY7BP.js";
+import {
+  constrainSlots
+} from "../../chunks/chunk.6NM7ENKA.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import {
+  watch
+} from "../../chunks/chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../chunks/chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __spreadProps,
+  __spreadValues
+} from "../../chunks/chunk.5VURDMKE.js";
+
+// libs/core/src/components/input/input.ts
+import { LitElement, unsafeCSS } from "lit";
+import { property, queryAsync } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+import { nothing as nothing2 } from "lit/html.js";
+import { when } from "lit/directives/when.js";
+import { choose } from "lit/directives/choose.js";
+import { msg } from "@lit/localize";
+
+// libs/core/src/utils/directives/forward-attributes.ts
+import { Directive, PartType, directive } from "lit/directive.js";
+import { nothing } from "lit/html.js";
+var ForwardAttributesDirective = class extends Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ELEMENT) {
+      throw new Error(
+        "The `forwardAttributes` directive must be used in element bindings"
+      );
+    }
+  }
+  render(_filter) {
+    return nothing;
+  }
+  update(part, [filter]) {
+    var _a;
+    const element = part.element;
+    const host = (_a = part.options) == null ? void 0 : _a.host;
+    Array.from(host.attributes).forEach((attr) => {
+      if (filter(attr)) {
+        element.setAttribute(attr.name, attr.value);
+      }
+    });
+  }
+};
+var forwardAttributes = directive(ForwardAttributesDirective);
+
+// libs/core/src/components/input/input.styles.css
+var input_styles_default = `@layer tokens, a11y, base, simplified;
+
+@layer tokens {
+  :host {
+    --_color-bg: var(--gds-sys-color-container-container);
+
+    --_color-border: var(--gds-sys-color-stroke-stroke);
+    --_border-radius: 0.5rem;
+    --_border-width: 0.0625rem;
+    --_border-width-hover: 0.125rem;
+
+    --_color-outline-alpha: 60%;
+    --_color-outline: color-mix(
+      in srgb,
+      var(--_color-border),
+      transparent var(--_color-outline-alpha)
+    );
+
+    --_transition: var(--gds-sys-transition);
+    --_lh: 1.25;
+    --_core-min-block-size: 3.5rem;
+    --_gap: 0.5rem;
+    --_padding-block: 0.625rem;
+    --_padding-inline: 1rem;
+    --_core-icon-size: 1.5rem;
+    --_inner-height: 2rem;
+  }
+}
+
+@layer a11y {
+  /* @media (prefers-color-scheme: dark) {
+    :host {
+      --_color-bg: var(--_color-bg-dark);
+    }
+  } */
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_transition: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :host {
+      --_transparency: 1;
+    }
+  }
+
+  /* @media (prefers-contrast: more) {
+    :host {
+      --_color-bg: hsla(60, 4%, 96%, 1);
+      --_color-outline-alpha: 0%;
+    }
+  } */
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  :host {
+    contain: layout;
+    display: block;
+    isolation: isolate;
+  }
+
+  .head {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding-inline-end: 1rem;
+  }
+
+  label {
+    font-weight: 400;
+  }
+
+  .foot {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding-inline-end: 1rem;
+
+    gds-badge {
+      align-self: flex-end;
+    }
+
+    :first-child {
+      flex-grow: 1;
+    }
+  }
+
+  .supporting-text,
+  .error-text {
+    font-size: 0.875rem;
+  }
+
+  slot[name='extended-supporting-text'] {
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    display: block;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    opacity: 0;
+    padding: 1rem;
+    transition: var(--_transition);
+
+    [aria-hidden='false'] & {
+      opacity: 1;
+    }
+  }
+
+  div.extended-supporting-text {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: var(--_transition);
+
+    > * {
+      overflow: hidden;
+    }
+
+    &[aria-hidden='false'] {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+  }
+
+  input[type='number']::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  input,
+  textarea {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background-color: transparent;
+    border: 0;
+    box-sizing: border-box;
+    font-family: inherit;
+    font-size: var(--_fs);
+    line-height: var(--_lh);
+    margin: unset;
+    min-height: var(--_inner-height);
+    outline: none;
+    overflow: hidden;
+    padding: unset;
+    transition: var(--_transition);
+    width: 100%;
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-calendar-picker-indicator {
+      -webkit-appearance: none;
+              appearance: none;
+      background-color: rgb(195, 0, 255);
+      background-image: none;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 40px;
+    }
+  }
+
+  textarea {
+    max-height: max(var(--_inner-height), calc(1lh * var(--_lines)));
+    min-height: max(var(--_inner-height), calc(1lh * var(--_lines)));
+    overflow: hidden;
+    resize: none;
+    transition: unset;
+  }
+
+  .field {
+    align-items: flex-start;
+    background-color: var(--_color-bg);
+    block-size: -moz-max-content;
+    block-size: max-content;
+    border: var(--_border-width-hover) solid transparent;
+    border-block-end-color: transparent;
+    border-start-end-radius: var(--_border-radius);
+    border-start-start-radius: var(--_border-radius);
+    box-shadow: 0 var(--_border-width) 0 var(--_color-border);
+    cursor: text;
+    display: flex;
+    flex-direction: row;
+    gap: var(--_gap);
+    justify-content: center;
+    margin-block: var(--_gap);
+    min-block-size: var(--_core-min-block-size);
+    outline-color: transparent;
+    outline-offset: var(--_border-width);
+    outline-style: solid;
+    outline-width: var(--_border-width-hover);
+    padding-block: var(--_padding-block);
+    padding-inline: var(--_padding-inline);
+    position: relative;
+    transition: var(--_transition);
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    &:hover {
+      --_border-width: var(--_border-width-hover);
+    }
+
+    &:has(input:focus, textarea:focus) {
+      --_border-width: var(--_border-width-hover);
+      border: var(--_border-width) solid var(--_color-border);
+      border-radius: var(--_border-radius);
+      box-shadow: none;
+      outline-color: var(--_color-outline);
+      transition: var(--_transition);
+    }
+
+    slot {
+      align-items: center;
+      display: flex;
+      height: var(--_inner-height);
+    }
+  }
+
+  :host(:invalid) .field {
+    --_color-bg: var(--gds-sys-color-status-negative-negative-bright);
+    --_color-border: var(--gds-sys-color-stroke-stroke-negative);
+    --_color-outline: var(--gds-sys-color-stroke-stroke-negative);
+    color: var(--gds-sys-color-status-negative-on-negative-bright);
+  }
+
+  :host(:invalid) .error-text {
+    color: var(--gds-sys-color-status-negative-on-negative-bright);
+  }
+
+  :host(:invalid) label {
+    color: var(--gds-sys-color-status-negative-on-negative-bright);
+  }
+}
+
+@layer simplified {
+  :host([variant='simplified']) label {
+    align-items: center;
+    background-color: transparent;
+    display: block;
+    height: -moz-max-content;
+    height: max-content;
+    inset: 0;
+    width: 100%;
+
+    div {
+      line-height: var(--_lh);
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: var(--_transition);
+    }
+  }
+
+  :host([variant='simplified'])
+    label:has(
+      input:not(:-moz-placeholder-shown, [readonly]),
+      textarea:not(:-moz-placeholder-shown, [readonly])
+    ) {
+    div {
+      font-size: 0.75rem;
+      font-weight: 500;
+      top: 0.375rem;
+      transform: translateY(
+        translateY(calc(0px - var(--gds-input-label-translate)))
+      );
+    }
+
+    input,
+    textarea {
+      margin-top: 0.75rem;
+    }
+  }
+
+  :host([variant='simplified'])
+    label:has(
+      input:not(:placeholder-shown, [readonly]),
+      textarea:not(:placeholder-shown, [readonly])
+    ),
+  :host([variant='simplified']) label:focus-within {
+    div {
+      font-size: 0.75rem;
+      font-weight: 500;
+      top: 0.375rem;
+      transform: translateY(
+        translateY(calc(0px - var(--gds-input-label-translate)))
+      );
+    }
+
+    input,
+    textarea {
+      margin-top: 0.75rem;
+    }
+  }
+}
+`;
+
+// libs/core/src/components/input/input.ts
+var _renderDefault, renderDefault_fn, _renderSimplified, renderSimplified_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _handleSupportingTextBtnClick, _renderNativeInput, renderNativeInput_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderSupportingText, renderSupportingText_fn, _renderExtendedSupportingText, renderExtendedSupportingText_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn, _asyncRenderExtendedSupportingTextButton, asyncRenderExtendedSupportingTextButton_fn;
+var GdsInput = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    // variant="default"
+    __privateAdd(this, _renderDefault);
+    // variant="simplified"
+    __privateAdd(this, _renderSimplified);
+    __privateAdd(this, _renderNativeInput);
+    __privateAdd(this, _renderNativeTextarea);
+    __privateAdd(this, _renderSupportingText);
+    __privateAdd(this, _renderExtendedSupportingText);
+    __privateAdd(this, _renderClearButton);
+    __privateAdd(this, _shouldShowRemainingChars);
+    __privateAdd(this, _renderRemainingCharsBadge);
+    /**
+     * Returns a promise that resolves when the DOM query for the extended supporting text slot has resolved.
+     * If the slot is empty, an empty template is returned, otherwise the support text toggle button is returned.
+     */
+    __privateAdd(this, _asyncRenderExtendedSupportingTextButton);
+    this.value = "";
+    this.label = "";
+    this.supportingText = "";
+    this.showExtendedSupportingText = false;
+    this.clearable = false;
+    this.maxlength = Number.MAX_SAFE_INTEGER;
+    this.variant = "default";
+    this.multiline = false;
+    // Any attribute name added here will get forwarded to the native <input> element.
+    __privateAdd(this, _forwardableAttrs, (attr) => ["type", "placeholder", "required"].includes(attr.name));
+    __privateAdd(this, _handleOnInput, (e) => {
+      const element = e.target;
+      this.value = element.value;
+    });
+    __privateAdd(this, _handleOnChange, (e) => {
+      const element = e.target;
+      this.value = element.value;
+      this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    __privateAdd(this, _handleFieldClick, () => {
+      this.elInput.then((el) => el.focus());
+    });
+    __privateAdd(this, _handleClearBtnClick, () => {
+      this.value = "";
+    });
+    __privateAdd(this, _handleSupportingTextBtnClick, () => {
+      this.showExtendedSupportingText = !this.showExtendedSupportingText;
+      this.dispatchEvent(
+        new CustomEvent("gds-ui-state", {
+          bubbles: true,
+          composed: true,
+          detail: this.showExtendedSupportingText
+        })
+      );
+    });
+    /**
+     * Event handler for the form reset event.
+     */
+    this._handleFormReset = () => {
+      this.value = "";
+    };
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._setAutoHeight();
+  }
+  render() {
+    return html`${choose(this.variant, [
+      ["default", () => __privateMethod(this, _renderDefault, renderDefault_fn).call(this)],
+      ["simplified", () => __privateMethod(this, _renderSimplified, renderSimplified_fn).call(this)]
+    ])}`;
+  }
+  _setAutoHeight() {
+    if (!this.multiline)
+      return;
+    this.elInput.then((element) => {
+      const lines = (element.value.split("\n").length || 1).toString();
+      element == null ? void 0 : element.style.setProperty("--_lines", lines.toString());
+    });
+  }
+};
+_renderDefault = new WeakSet();
+renderDefault_fn = function() {
+  return html`
+      <div class="head">
+        <label for="input">${this.label}</label>
+        ${until(__privateMethod(this, _asyncRenderExtendedSupportingTextButton, asyncRenderExtendedSupportingTextButton_fn).call(this), nothing2)}
+      </div>
+
+      ${__privateMethod(this, _renderSupportingText, renderSupportingText_fn).call(this)} ${__privateMethod(this, _renderExtendedSupportingText, renderExtendedSupportingText_fn).call(this)}
+
+      <div class="field" @click=${__privateGet(this, _handleFieldClick)}>
+        <slot name="lead" gds-allow="gds-icon"></slot>
+        ${when(
+    this.multiline,
+    () => html`${__privateMethod(this, _renderNativeTextarea, renderNativeTextarea_fn).call(this)}`,
+    () => html`${__privateMethod(this, _renderNativeInput, renderNativeInput_fn).call(this)}`
+  )}
+        <slot name="trail" gds-allow="gds-badge"></slot>
+        ${__privateMethod(this, _renderClearButton, renderClearButton_fn).call(this)}
+      </div>
+
+      <div class="foot">
+        <div>
+          ${when(
+    this.invalid,
+    () => html`<span class="error-text">Error information</span>`
+  )}
+        </div>
+        ${when(
+    __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get),
+    () => __privateMethod(this, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn).call(this)
+  )}
+      </div>
+    `;
+};
+_renderSimplified = new WeakSet();
+renderSimplified_fn = function() {
+  return html`
+      <div class="field" @click=${__privateGet(this, _handleFieldClick)}>
+        <slot name="lead" gds-allow="gds-icon"></slot>
+        <label for="input">
+          <div>${this.label}</div>
+          ${when(
+    this.multiline,
+    () => html`${__privateMethod(this, _renderNativeTextarea, renderNativeTextarea_fn).call(this)}`,
+    () => html`${__privateMethod(this, _renderNativeInput, renderNativeInput_fn).call(this)}`
+  )}
+        </label>
+        <slot name="trail" gds-allow="gds-badge"></slot>
+        ${__privateMethod(this, _renderClearButton, renderClearButton_fn).call(this)}
+      </div>
+
+      <div class="foot">
+        ${__privateMethod(this, _renderSupportingText, renderSupportingText_fn).call(this)}
+        ${when(
+    __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get),
+    () => __privateMethod(this, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn).call(this)
+  )}
+        ${until(__privateMethod(this, _asyncRenderExtendedSupportingTextButton, asyncRenderExtendedSupportingTextButton_fn).call(this), nothing2)}
+      </div>
+
+      ${__privateMethod(this, _renderExtendedSupportingText, renderExtendedSupportingText_fn).call(this)}
+    `;
+};
+_forwardableAttrs = new WeakMap();
+_handleOnInput = new WeakMap();
+_handleOnChange = new WeakMap();
+_handleFieldClick = new WeakMap();
+_handleClearBtnClick = new WeakMap();
+_handleSupportingTextBtnClick = new WeakMap();
+_renderNativeInput = new WeakSet();
+renderNativeInput_fn = function() {
+  return html`
+      <input
+        @input=${__privateGet(this, _handleOnInput)}
+        @change=${__privateGet(this, _handleOnChange)}
+        .value=${this.value}
+        id="input"
+        aria-describedby="supporting-text"
+        placeholder=" "
+        ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
+      />
+    `;
+};
+_renderNativeTextarea = new WeakSet();
+renderNativeTextarea_fn = function() {
+  return html`
+      <textarea
+        @input=${__privateGet(this, _handleOnInput)}
+        @change=${__privateGet(this, _handleOnChange)}
+        .value=${this.value}
+        id="input"
+        aria-describedby="supporting-text"
+        placeholder=" "
+        ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
+      ></textarea>
+    `;
+};
+_renderSupportingText = new WeakSet();
+renderSupportingText_fn = function() {
+  return html`
+      <div class="supporting-text" id="supporting-text">
+        ${this.supportingText}
+      </div>
+    `;
+};
+_renderExtendedSupportingText = new WeakSet();
+renderExtendedSupportingText_fn = function() {
+  return html`
+      <div
+        class="extended-supporting-text"
+        aria-hidden="${!this.showExtendedSupportingText}"
+        ?inert="${!this.showExtendedSupportingText}"
+      >
+        <div>
+          <slot
+            name="extended-supporting-text"
+            @slotchange=${() => this.requestUpdate()}
+          ></slot>
+        </div>
+      </div>
+    `;
+};
+_renderClearButton = new WeakSet();
+renderClearButton_fn = function() {
+  if (this.clearable && this.value.length > 0)
+    return html`
+        <gds-button
+          size="small"
+          variant="tertiary"
+          label="${msg("Clear input")}"
+          @click=${__privateGet(this, _handleClearBtnClick)}
+        >
+          <gds-icon name="x"></gds-icon>
+        </gds-button>
+      `;
+  else
+    return nothing2;
+};
+_shouldShowRemainingChars = new WeakSet();
+shouldShowRemainingChars_get = function() {
+  return this.maxlength < Number.MAX_SAFE_INTEGER;
+};
+_renderRemainingCharsBadge = new WeakSet();
+renderRemainingCharsBadge_fn = function() {
+  const remaining = this.maxlength - this.value.length;
+  let variant;
+  if (remaining < 0) {
+    variant = "error";
+  } else if (remaining < 20) {
+    variant = "warning";
+  } else {
+    variant = "success";
+  }
+  return html`<gds-badge variant="${variant}">${remaining}</gds-badge>`;
+};
+_asyncRenderExtendedSupportingTextButton = new WeakSet();
+asyncRenderExtendedSupportingTextButton_fn = async function() {
+  return this.elExtendedSupportingTextSlot.then((slot) => {
+    if (slot.assignedElements().length > 0)
+      return html`
+          <gds-button
+            size="small"
+            variant="tertiary"
+            label="${msg("Show extended supporting text")}"
+            @click=${__privateGet(this, _handleSupportingTextBtnClick)}
+          >
+            <gds-icon name="info"></gds-icon>
+          </gds-button>
+        `;
+    else
+      return nothing2;
+  });
+};
+GdsInput.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
+  delegatesFocus: true
+});
+GdsInput.styles = [tokens, unsafeCSS(input_styles_default)];
+__decorateClass([
+  property()
+], GdsInput.prototype, "value", 2);
+__decorateClass([
+  property()
+], GdsInput.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "supporting-text" })
+], GdsInput.prototype, "supportingText", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], GdsInput.prototype, "showExtendedSupportingText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsInput.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsInput.prototype, "maxlength", 2);
+__decorateClass([
+  property()
+], GdsInput.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsInput.prototype, "multiline", 2);
+__decorateClass([
+  queryAsync("input, textarea")
+], GdsInput.prototype, "elInput", 2);
+__decorateClass([
+  queryAsync('slot[name="extended-supporting-text"]')
+], GdsInput.prototype, "elExtendedSupportingTextSlot", 2);
+__decorateClass([
+  watch("value")
+], GdsInput.prototype, "_setAutoHeight", 1);
+GdsInput = __decorateClass([
+  gdsCustomElement("gds-input")
+], GdsInput);
+export {
+  GdsInput
+};

package/components/radio/radio-group.js

@@ -0,0 +1,9 @@
+import {
+  GdsRadioGroup
+} from "../../chunks/chunk.TN6ZYAH3.js";
+import "../../chunks/chunk.7TCXY7BP.js";
+import "../../chunks/chunk.6NM7ENKA.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsRadioGroup
+};