@sebgroup/green-core 1.20.0 → 1.20.2

package/components/badge/badge.js

@@ -1,245 +0,0 @@
-import "../../chunks/chunk.7TCXY7BP.js";
-import {
-  constrainSlots
-} from "../../chunks/chunk.KBYQYDL3.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateSet
-} from "../../chunks/chunk.5VURDMKE.js";
-
-// libs/core/src/components/badge/badge.ts
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { when } from "lit/directives/when.js";
-
-// libs/core/src/components/badge/style/badge.styles.css
-var badge_styles_default = `@layer gds-badge, shell, tokens, a11y, variants, types;
-
-@layer gds-badge {
-  @layer tokens {
-    :host {
-      --gds-badge-cl: rgba(53, 53, 49, 1);
-      --gds-badge-bg: rgba(243, 243, 242, 1);
-
-      --gds-badge-cl-information: rgba(53, 53, 49, 1);
-      --gds-badge-bg-information: rgba(243, 243, 242, 1);
-
-      --gds-badge-cl-success: rgba(0, 109, 49, 1);
-      --gds-badge-bg-success: rgba(234, 255, 232, 1);
-
-      --gds-badge-cl-warning: rgba(125, 87, 0, 1);
-      --gds-badge-bg-warning: rgba(255, 238, 217, 1);
-
-      --gds-badge-cl-error: rgba(186, 29, 0, 1);
-      --gds-badge-bg-error: rgba(255, 237, 233, 1);
-
-      --gds-badge-cl-disabled: rgba(157, 157, 149, 1);
-      --gds-badge-bg-disabled: rgba(249, 249, 249, 1);
-
-      --gds-badge-cl-surface: rgba(106, 106, 98, 1);
-      --gds-badge-bg-surface: rgba(255, 255, 255, 1);
-
-      /* Dark Mode */
-      --gds-badge-cl-dark: rgba(53, 53, 49, 1);
-      --gds-badge-bg-dark: rgba(243, 243, 242, 1);
-
-      --gds-badge-cl-information-dark: rgba(53, 53, 49, 1);
-      --gds-badge-bg-information-dark: rgba(243, 243, 242, 1);
-
-      --gds-badge-cl-success-dark: rgba(0, 109, 49, 1);
-      --gds-badge-bg-success-dark: rgba(234, 255, 232, 1);
-
-      --gds-badge-cl-warning-dark: rgba(125, 87, 0, 1);
-      --gds-badge-bg-warning-dark: rgba(255, 238, 217, 1);
-
-      --gds-badge-cl-error-dark: rgba(186, 29, 0, 1);
-      --gds-badge-bg-error-dark: rgba(255, 237, 233, 1);
-
-      --gds-badge-cl-disabled-dark: rgba(157, 157, 149, 1);
-      --gds-badge-bg-disabled-dark: rgba(249, 249, 249, 1);
-
-      --gds-badge-cl-surface-dark: rgba(106, 106, 98, 1);
-      --gds-badge-bg-surface-dark: rgba(255, 255, 255, 1);
-
-      --gds-badge-radii: 4px;
-
-      --gds-badge-fs: 12px;
-      --gds-badge-lh: 1;
-      --gds-badge-fw: 500;
-      --gds-badge-inline-padding: 10px;
-      --gds-badge-block-padding: 6px;
-    }
-  }
-  @layer a11y {
-    @media (prefers-color-scheme: dark) {
-      :host {
-        --gds-badge-cl: var(--gds-badge-cl-dark);
-        --gds-badge-bg: var(--gds-badge-bg-dark);
-
-        --gds-badge-cl-information: var(--gds-badge-cl-information-dark);
-        --gds-badge-bg-information: var(--gds-badge-bg-information-dark);
-
-        --gds-badge-cl-success: var(--gds-badge-cl-success-dark);
-        --gds-badge-bg-success: var(--gds-badge-bg-success-dark);
-
-        --gds-badge-cl-warning: var(--gds-badge-cl-warning-dark);
-        --gds-badge-bg-warning: var(--gds-badge-bg-warning-dark);
-
-        --gds-badge-cl-error: var(--gds-badge-cl-error-dark);
-        --gds-badge-bg-error: var(--gds-badge-bg-error-dark);
-
-        --gds-badge-cl-disabled: var(--gds-badge-cl-disabled-dark);
-        --gds-badge-bg-disabled: var(--gds-badge-bg-disabled-dark);
-
-        --gds-badge-cl-surface: var(--gds-badge-cl-surface-dark);
-        --gds-badge-bg-surface: var(--gds-badge-bg-surface-dark);
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      :host {
-        --gds-badge-motion: 0;
-      }
-    }
-
-    @media (prefers-reduced-transparency: reduce) {
-      :host {
-        --gds-badge-transparency: 1;
-      }
-    }
-
-    @media (prefers-contrast: more) {
-      :root {
-        --gds-badge-contrast: 1;
-      }
-    }
-  }
-
-  @layer shell {
-    .gds-badge {
-      align-items: center;
-      background-color: var(--gds-badge-bg);
-      border-radius: var(--gds-badge-radii);
-      color: var(--gds-badge-cl);
-      display: flex;
-      font-size: var(--gds-badge-fs);
-      font-weight: var(--gds-badge-fw);
-      gap: 1ch;
-      height: 1lh;
-      justify-content: center;
-      letter-spacing: normal;
-      line-height: var(--gds-badge-lh);
-      max-width: -moz-max-content;
-      max-width: max-content;
-      padding-block: var(--gds-badge-block-padding);
-      padding-inline: var(--gds-badge-inline-padding);
-      text-overflow: ellipsis;
-      text-transform: uppercase;
-      white-space: nowrap;
-
-      @layer variants {
-        :host([variant='information']) & {
-          --gds-badge-cl: var(--gds-badge-cl-information);
-          --gds-badge-bg: var(--gds-badge-bg-information);
-        }
-
-        :host([variant='success']) & {
-          --gds-badge-cl: var(--gds-badge-cl-success);
-          --gds-badge-bg: var(--gds-badge-bg-success);
-        }
-
-        :host([variant='warning']) & {
-          --gds-badge-cl: var(--gds-badge-cl-warning);
-          --gds-badge-bg: var(--gds-badge-bg-warning);
-        }
-
-        :host([variant='error']) & {
-          --gds-badge-cl: var(--gds-badge-cl-error);
-          --gds-badge-bg: var(--gds-badge-bg-error);
-        }
-
-        :host([variant='disabled']) & {
-          --gds-badge-cl: var(--gds-badge-cl-disabled);
-          --gds-badge-bg: var(--gds-badge-bg-disabled);
-          pointer-events: none;
-        }
-
-        :host([variant='surface']) & {
-          --gds-badge-cl: var(--gds-badge-cl-surface);
-          --gds-badge-bg: var(--gds-badge-bg-surface);
-        }
-      }
-
-      @layer types {
-        :host([type='counter']) & {
-          max-width: var(--gds-badge-counter-max-width);
-        }
-      }
-    }
-  }
-}
-`;
-
-// libs/core/src/components/badge/badge.ts
-var _internals;
-var GdsBadge = class extends LitElement {
-  constructor() {
-    super();
-    // Private members
-    __privateAdd(this, _internals, void 0);
-    this.variant = "";
-    this.type = "";
-    this.icon = "";
-    __privateSet(this, _internals, this.attachInternals());
-    constrainSlots(this);
-  }
-  slotIcon() {
-    return html` <slot name="icon" gds-allow="gds-icon"></slot> `;
-  }
-  slotLabel() {
-    var _a;
-    const content = ((_a = this.textContent) == null ? void 0 : _a.trim()) || "";
-    const hasLabel = content !== "";
-    let label = content;
-    if (this.type.toLowerCase() === "counter" && label.length > 4) {
-      label = label.substring(0, 4);
-      return hasLabel ? html`${label}` : "";
-    }
-    return hasLabel ? html`<slot part="label" gds-allow="#text"></slot>` : "";
-  }
-  // slotLabel() {
-  //   return this.textContent
-  //     ? html`<slot part="label" gds-allow="#text"></slot>`
-  //     : ''
-  // }
-  render() {
-    const hasIconSlot = this.querySelector('[slot="icon"]') !== null;
-    const content = html`${when(
-      hasIconSlot,
-      () => html`<slot name="icon" gds-allow="gds-icon"></slot>`
-    )}${this.slotLabel()}`;
-    return html`<div class="gds-badge">${content}</div>`;
-  }
-};
-_internals = new WeakMap();
-GdsBadge.styles = unsafeCSS(badge_styles_default);
-GdsBadge.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "variant" })
-], GdsBadge.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "type" })
-], GdsBadge.prototype, "type", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "icon" })
-], GdsBadge.prototype, "icon", 2);
-GdsBadge = __decorateClass([
-  customElement("gds-badge")
-], GdsBadge);
-export {
-  GdsBadge
-};

package/components/checkbox/checkbox.d.ts

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

package/components/checkbox/checkbox.js

@@ -1,219 +0,0 @@
-import "../../chunks/chunk.7TCXY7BP.js";
-import {
-  constrainSlots
-} from "../../chunks/chunk.KBYQYDL3.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateSet
-} from "../../chunks/chunk.5VURDMKE.js";
-
-// libs/core/src/components/checkbox/checkbox.ts
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement } from "lit/decorators.js";
-
-// libs/core/src/components/checkbox/checkbox.css
-var checkbox_default = `:host {
-  --gds-checkbox-bg-color: hsl(0, 0%, 100%);
-  --gds-checkbox-border-color: hsla(60, 4%, 50%, 1);
-  --gds-checkbox-border-width: 2px;
-  --gds-checkbox-border-radius: 4px;
-  --gds-checkbox-color-hover: hsla(60, 6%, 90%, 1);
-  --gds-checkbox-color-active: hsla(60, 4%, 85%, 1);
-  --gds-checkbox-checked-color: hsla(60, 4%, 20%, 1);
-  --gds-checkbox-color-tick: hsl(0, 0%, 100%);
-}
-
-.gds-checkbox {
-  align-items: center;
-  border-radius: calc(var(--gds-checkbox-border-radius) * 2);
-  cursor: pointer;
-  display: flex;
-  height: 32px;
-  justify-content: center;
-  position: relative;
-  transition: all 248ms ease-in-out;
-  width: 32px;
-
-  input {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    aspect-ratio: 1/1;
-    background-color: var(--gds-checkbox-bg-color);
-    border: var(--gds-checkbox-border-width) solid
-      var(--gds-checkbox-border-color);
-    border-radius: var(--gds-checkbox-border-radius);
-    box-sizing: border-box;
-    cursor: pointer;
-    height: 16px;
-    margin: unset;
-    padding: unset;
-    position: relative;
-    transition: all 248ms cubic-bezier(0.2, 0.85, 0.32, 1.2);
-    width: 16px;
-
-    &::after {
-      border: var(--gds-checkbox-border-width) solid
-        var(--gds-checkbox-color-tick);
-      border-left: 0;
-      border-top: 0;
-      box-sizing: border-box;
-      content: '';
-      height: 8px;
-      inset: 1px 0 0 3.5px;
-      opacity: 0;
-      pointer-events: none;
-      position: absolute;
-      rotate: 43deg;
-      scale: 0.8;
-      transition: all 248ms cubic-bezier(0.2, 0.85, 0.32, 1.2);
-      width: 5px;
-    }
-
-    &:checked {
-      background-color: var(--gds-checkbox-checked-color);
-      border-color: var(--gds-checkbox-checked-color);
-      color: var(--gds-checkbox-checked-color-tick);
-
-      &::after {
-        opacity: 1;
-        scale: 1;
-      }
-    }
-
-    &[indeterminate],
-    &:indeterminate {
-      &::after {
-        border-left: 0;
-        border-radius: 0;
-        border-top: 0;
-        height: var(--gds-checkbox-border-width);
-        inset: 5px 0 0 2px;
-        opacity: 1;
-        rotate: 0deg;
-        scale: 1;
-        width: 8px;
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-
-  &:hover:has(input:not([disabled])) {
-    background-color: var(--gds-checkbox-color-hover);
-  }
-
-  &:active:has(input:not([disabled])) {
-    background-color: var(--gds-checkbox-color-active);
-
-    .gds-checkbox-core {
-      border-color: var(--gds-checkbox-checked-color);
-    }
-  }
-
-  &:has(input:checked) {
-    background-color: var(--gds-checkbox-color-hover);
-  }
-
-  &:has(input:disabled) {
-    cursor: not-allowed;
-  }
-
-  /* Invalid state */
-
-  &:has(input:invalid) {
-    --gds-checkbox-bg-color: hsla(13, 75%, 95%, 1);
-    --gds-checkbox-border-color: hsla(9, 75%, 38%, 1);
-    --gds-checkbox-checked-color: hsla(9, 75%, 38%, 1);
-    --gds-checkbox-color-active: hsla(12, 78%, 86%, 1);
-    --gds-checkbox-color-hover: hsla(12, 75%, 91%, 1);
-    --gds-checkbox-color-tick: hsla(0, 0%, 100%, 1);
-
-    input {
-      &::after {
-        border-color: var(--gds-checkbox-color-tick);
-      }
-
-      &:checked {
-        background-color: var(--gds-checkbox-checked-color);
-        border-color: var(--gds-checkbox-checked-color);
-        color: var(--gds-checkbox-checked-color-tick);
-      }
-    }
-
-    &:hover:has(input:not([disabled])) {
-      background-color: var(--gds-checkbox-color-hover);
-    }
-
-    &:active:has(input:not([disabled])) {
-      background-color: var(--gds-checkbox-color-active);
-
-      .gds-checkbox-core {
-        border-color: var(--gds-checkbox-checked-color);
-      }
-    }
-
-    &:has(input:checked) {
-      background-color: var(--gds-checkbox-color-hover);
-    }
-  }
-}
-`;
-
-// libs/core/src/components/checkbox/checkbox.ts
-var _internals;
-var GdsCheckbox = class extends LitElement {
-  constructor() {
-    super();
-    // Private members
-    __privateAdd(this, _internals, void 0);
-    this.inputElement = null;
-    this.exludeAttr = ["id", "label"];
-    __privateSet(this, _internals, this.attachInternals());
-    constrainSlots(this);
-  }
-  reflectAttributesToInput() {
-    if (this.inputElement) {
-      const attributes = this.attributes;
-      for (let i = 0; i < attributes.length; i++) {
-        const attribute = attributes[i];
-        if (!this.exludeAttr.includes(attribute.name)) {
-          this.inputElement.setAttribute(attribute.name, attribute.value);
-        }
-      }
-    }
-  }
-  update(changedProperties) {
-    var _a;
-    super.update(changedProperties);
-    if (!this.inputElement) {
-      this.inputElement = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(
-        "checkbox"
-      );
-    }
-    this.reflectAttributesToInput();
-  }
-  render() {
-    return html`
-      <label class="gds-checkbox">
-        <input id="checkbox" type="checkbox" />
-      </label>
-    `;
-  }
-};
-_internals = new WeakMap();
-GdsCheckbox.styles = unsafeCSS(checkbox_default);
-GdsCheckbox.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
-GdsCheckbox = __decorateClass([
-  customElement("gds-checkbox")
-], GdsCheckbox);
-export {
-  GdsCheckbox
-};

package/components/input/input.d.ts

@@ -1,69 +0,0 @@
-import { GdsFormControlElement } from '../form-control';
-/**
- * @summary A custom input element that can be used in forms.
- * @status beta
- *
- * @element gds-input
- *.
- * @slot lead - Accepts `gds-icon`. Use this to place an icon in the start of the field.
- * @slot trail - Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example.
- * @slot extended-supporting-text - A longer supporting text can be placed here. It will be
- *       displayed in a panel when the user clicks the info button.
- */
-export declare class GdsInput extends GdsFormControlElement<string> {
-    #private;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-    };
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    value: string;
-    /**
-     * The label displayed above the field
-     */
-    label: string;
-    /**
-     * The supporting text displayed between the label and the field itself
-     */
-    supportingText: string;
-    /**
-     * Whether the supporting text should be displayed or not.
-     */
-    showExtendedSupportingText: boolean;
-    /**
-     * Whether the field should be clearable or not. Clearable fields will display a clear button when
-     * the field has a value.
-     */
-    clearable: boolean;
-    /**
-     * The maximum number of characters allowed in the field.
-     */
-    maxlength: number;
-    /**
-     * The variant of the input field. The default variant displays a label, supporting text, and
-     * extended supporting text. The simplified variant only displays the field itself and the
-     * supporting text below.
-     *
-     * The simplified variant should only be used in specific cases, for example when the input field
-     * is placed inside a table cell or in a space-constrained layout.
-     *
-     * A typical form should use the default variant.
-     */
-    variant: 'default' | 'simplified';
-    /**
-     * Whether the input field should be multiline or not. Multiline fields will render a textarea
-     * internally instead of an input.
-     */
-    multiline: boolean;
-    private elInput;
-    private elExtendedSupportingTextSlot;
-    constructor();
-    connectedCallback(): void;
-    render(): any;
-    private _setAutoHeight;
-    /**
-     * Event handler for the form reset event.
-     */
-    _handleFormReset: () => void;
-}