@sebgroup/green-core 1.20.0 → 1.20.2

package/components/input/input.js

@@ -1,658 +0,0 @@
-import {
-  forwardAttributes
-} from "../../chunks/chunk.YBOK7MI7.js";
-import {
-  tokens
-} from "../../chunks/chunk.W2XAWNZY.js";
-import {
-  GdsFormControlElement
-} from "../../chunks/chunk.XOARVFGN.js";
-import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.EM7MZKG5.js";
-import "../../chunks/chunk.W7CV3QYI.js";
-import "../../chunks/chunk.7TCXY7BP.js";
-import {
-  constrainSlots
-} from "../../chunks/chunk.KBYQYDL3.js";
-import {
-  watch
-} from "../../chunks/chunk.2WO4NHJ2.js";
-import "../../chunks/chunk.YO24ZYAD.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 } 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.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), 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" 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), 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="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 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.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 nothing;
-  });
-};
-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.d.ts

@@ -1,14 +0,0 @@
-import { LitElement } from 'lit';
-export declare class GdsRadio extends LitElement {
-    #private;
-    static styles: import("lit").CSSResult;
-    static shadowRootOptions: ShadowRootInit;
-    value: any;
-    constructor();
-    private inputElement;
-    private exludeAttr;
-    private reflectAttributesToInput;
-    update(changedProperties: Map<PropertyKey, unknown>): void;
-    handleClick(): void;
-    render(): import("lit").TemplateResult<1>;
-}