@sebgroup/green-core 1.41.4 → 1.43.0

package/chunks/chunk.DONYL7JA.js

@@ -1,625 +0,0 @@
-import {
-  forwardAttributes
-} from "./chunk.YBOK7MI7.js";
-import {
-  GdsFormControlElement
-} from "./chunk.2BMJPIND.js";
-import {
-  constrainSlots
-} from "./chunk.KBYQYDL3.js";
-import {
-  tokens
-} from "./chunk.2WIGXRMD.js";
-import {
-  watch
-} from "./chunk.2WO4NHJ2.js";
-import {
-  gdsCustomElement,
-  html
-} from "./chunk.VOYMQ322.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.5VURDMKE.js";
-
-// libs/core/src/components/input/input.ts
-import { LitElement } from "lit";
-import { property, query, queryAsync } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
-import { nothing } 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/components/input/input.styles.ts
-import { css } from "lit";
-var styles = css`
-  @layer tokens, a11y, base, simplified;
-
-  @layer tokens {
-    :host {
-      --_color-bg: var(--gds-sys-color-container-container);
-
-      --_color-border: var(--gds-sys-color-stroke-stroke-variant1);
-      --_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 {
-      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 {
-        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: max-content;
-      border: var(--_border-width) solid var(--_color-border);
-      border-radius: var(--_border-radius);
-      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 {
-        --_color-bg: var(--gds-sys-color-container-container-dim2);
-      }
-
-      &: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: 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(: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.elInputAsync.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
-        })
-      );
-    });
-    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)]
-    ])}`;
-  }
-  _getValidityAnchor() {
-    return this.elInput;
-  }
-  _setAutoHeight() {
-    if (!this.multiline)
-      return;
-    this.elInputAsync.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), nothing)}
-      </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"></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">${this.validationMessage}</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"></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), nothing)}
-      </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="message" @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-cross-small />
-        </gds-button>
-      `;
-  else
-    return nothing;
-};
-_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 && slot.assignedElements().length > 0)
-      return html`
-          <gds-button
-            size="small"
-            variant="tertiary"
-            label="${msg("Show extended supporting text")}"
-            @click=${__privateGet(this, _handleSupportingTextBtnClick)}
-          >
-            <gds-icon-circle-info />
-          </gds-button>
-        `;
-    else
-      return nothing;
-  });
-};
-GdsInput.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
-  delegatesFocus: true
-});
-GdsInput.styles = [tokens, styles];
-__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({ type: String })
-], GdsInput.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean })
-], GdsInput.prototype, "multiline", 2);
-__decorateClass([
-  queryAsync("input, textarea")
-], GdsInput.prototype, "elInputAsync", 2);
-__decorateClass([
-  query("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
-};