@govtechsg/sgds-web-component 3.0.0-rc.6 → 3.0.1

package/components/ActionCard/sgds-action-card.d.ts

@@ -1,54 +0,0 @@
-import { Ref } from "lit/directives/ref.js";
-import { CardElement } from "../../base/card-element";
-import { SgdsCheckbox } from "../Checkbox/sgds-checkbox";
-import { SgdsRadio } from "../Radio/sgds-radio";
-/**
- * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
- * @slot icon - Icon content in the card-subtitile
- * @slot card-subtitle - The subtitle of the card
- * @slot card-title - The title of the card
- * @slot card-text - The paragrapher text of the card
- *
- * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed
- *
- * @csspart base - The action card base wrapper
- * @csspart body - The action card body
- * @csspart subtitle - The action card subtitle
- * @csspart title - The action card title
- * @csspart text - The action card text
- */
-export declare class SgdsActionCard extends CardElement {
-    static styles: import("lit").CSSResult[];
-    static dependencies: {
-        "sgds-checkbox": typeof SgdsCheckbox;
-        "sgds-radio": typeof SgdsRadio;
-    };
-    /** @internal */
-    inputRef: Ref<SgdsCheckbox | SgdsRadio>;
-    /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
-    name: string;
-    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
-    value: string;
-    /** Disables the input (so the user can't check / uncheck it). */
-    disabled: boolean;
-    /** Draws the input in a checked state. */
-    checked: boolean;
-    /** The type of input of the action card */
-    type: TypeVariant;
-    /** Controls the active styling of the action card */
-    active: boolean;
-    /** Simulates a click on the input control*/
-    click(): void;
-    /** @internal Declare the click event listener*/
-    handleInputChange(): Promise<void>;
-    /** @internal The input's id. */
-    private inputId;
-    /** @internal */
-    handleRadioCheckedChange(): Promise<void>;
-    /** @internal */
-    handleDisabledChange(): Promise<void>;
-    private _handleKeyDown;
-    render(): import("lit-html").TemplateResult;
-}
-export type TypeVariant = "checkbox" | "radio";
-export default SgdsActionCard;

package/components/ActionCard/sgds-action-card.js

@@ -1,148 +0,0 @@
-import { __decorate } from 'tslib';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { live } from 'lit/directives/live.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { html } from 'lit/static-html.js';
-import { CardElement } from '../../base/card-element.js';
-import genId from '../../utils/generateId.js';
-import { watch } from '../../utils/watch.js';
-import { SgdsCheckbox } from '../Checkbox/sgds-checkbox.js';
-import { SgdsRadio } from '../Radio/sgds-radio.js';
-import css_248z from './action-card.js';
-
-/**
- * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
- * @slot icon - Icon content in the card-subtitile
- * @slot card-subtitle - The subtitle of the card
- * @slot card-title - The title of the card
- * @slot card-text - The paragrapher text of the card
- *
- * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed
- *
- * @csspart base - The action card base wrapper
- * @csspart body - The action card body
- * @csspart subtitle - The action card subtitle
- * @csspart title - The action card title
- * @csspart text - The action card text
- */
-class SgdsActionCard extends CardElement {
-    constructor() {
-        super(...arguments);
-        /** @internal */
-        this.inputRef = createRef();
-        /** Disables the input (so the user can't check / uncheck it). */
-        this.disabled = false;
-        /** Draws the input in a checked state. */
-        this.checked = false;
-        /** The type of input of the action card */
-        this.type = "checkbox";
-        /** Controls the active styling of the action card */
-        this.active = false;
-        /** @internal The input's id. */
-        this.inputId = genId("action-card", "input");
-    }
-    /** Simulates a click on the input control*/
-    click() {
-        this.inputRef.value.click();
-    }
-    /** @internal Declare the click event listener*/
-    async handleInputChange() {
-        this.inputRef.value.click();
-        this.emit("sgds-change");
-    }
-    /** @internal */
-    async handleRadioCheckedChange() {
-        this.active = this.checked;
-    }
-    /** @internal */
-    async handleDisabledChange() {
-        this.active = !this.disabled;
-    }
-    _handleKeyDown(event) {
-        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-        if (event.key === "Enter" && !hasModifier) {
-            this.handleInputChange();
-        }
-    }
-    render() {
-        const checkbox = html `<sgds-checkbox
-      ${ref(this.inputRef)}
-      ?disabled=${this.disabled}
-      id=${this.inputId}
-      @click=${this.handleInputChange}
-      @keydown=${this._handleKeyDown}
-      .value=${live(this.value)}
-      ?checked=${live(this.checked)}
-      @sgds-change=${(e) => (this.checked = e.detail.checked)}
-    ></sgds-checkbox>`;
-        const radio = html `<sgds-radio
-      ${ref(this.inputRef)}
-      ?disabled=${this.disabled}
-      id=${this.inputId}
-      @click=${this.handleInputChange}
-      @keydown=${this._handleKeyDown}
-      .value=${live(this.value)}
-      ?checked=${live(this.checked)}
-    ></sgds-radio>`;
-        return html `
-      <div
-        tabindex=${this.disabled ? "-1" : "0"}
-        @click=${this.handleInputChange}
-        @keydown=${this._handleKeyDown}
-        variant="card-action"
-        class="sgds card
-        ${classMap({
-            [`text-${this.textColor}`]: this.textColor,
-            ["is-active"]: this.active
-        })}
-        "
-        part="base"
-      >
-        <div class="card-body" part="body">
-          <h6 class="card-subtitle" part="subtitle">
-            <div>
-              <slot name="icon"></slot>
-              <slot name="card-subtitle"></slot>
-            </div>
-            <div class="card-input">${this.type === "checkbox" ? checkbox : radio}</div>
-          </h6>
-          <h5 class="card-title" part="title"><slot name="card-title"></slot></h5>
-          <p class="card-text" part="text"><slot name="card-text"></slot></p>
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsActionCard.styles = [...CardElement.styles, css_248z];
-SgdsActionCard.dependencies = {
-    "sgds-checkbox": SgdsCheckbox,
-    "sgds-radio": SgdsRadio
-};
-__decorate([
-    property({ reflect: true })
-], SgdsActionCard.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], SgdsActionCard.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsActionCard.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsActionCard.prototype, "checked", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SgdsActionCard.prototype, "type", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], SgdsActionCard.prototype, "active", void 0);
-__decorate([
-    watch("checked")
-], SgdsActionCard.prototype, "handleRadioCheckedChange", null);
-__decorate([
-    watch("disabled")
-], SgdsActionCard.prototype, "handleDisabledChange", null);
-
-export { SgdsActionCard, SgdsActionCard as default };
-//# sourceMappingURL=sgds-action-card.js.map

package/components/ActionCard/sgds-action-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sgds-action-card.js","sources":["../../../src/components/ActionCard/sgds-action-card.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport { html } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { SgdsRadio } from \"../Radio/sgds-radio\";\nimport actionCardStyles from \"./action-card.css\";\n\n/**\n * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.\n * @slot icon - Icon content in the card-subtitile\n * @slot card-subtitle - The subtitle of the card\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n *\n * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed\n *\n * @csspart base - The action card base wrapper\n * @csspart body - The action card body\n * @csspart subtitle - The action card subtitle\n * @csspart title - The action card title\n * @csspart text - The action card text\n */\nexport class SgdsActionCard extends CardElement {\n  static styles = [...CardElement.styles, actionCardStyles];\n  static dependencies = {\n    \"sgds-checkbox\": SgdsCheckbox,\n    \"sgds-radio\": SgdsRadio\n  };\n  /** @internal */\n  inputRef: Ref<SgdsCheckbox | SgdsRadio> = createRef();\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ reflect: true }) name: string;\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String }) value: string;\n  /** Disables the input (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /** Draws the input in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The type of input of the action card */\n  @property({ type: String, reflect: true }) type: TypeVariant = \"checkbox\";\n\n  /** Controls the active styling of the action card */\n  @property({ reflect: true, type: Boolean })\n  active = false;\n\n  /** Simulates a click on the input control*/\n  public click() {\n    this.inputRef.value.click();\n  }\n  /** @internal Declare the click event listener*/\n  async handleInputChange() {\n    this.inputRef.value.click();\n    this.emit(\"sgds-change\");\n  }\n  /** @internal The input's id. */\n  private inputId: string = genId(\"action-card\", \"input\");\n\n  /** @internal */\n  @watch(\"checked\")\n  async handleRadioCheckedChange() {\n    this.active = this.checked;\n  }\n  /** @internal */\n  @watch(\"disabled\")\n  async handleDisabledChange() {\n    this.active = !this.disabled;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.handleInputChange();\n    }\n  }\n\n  render() {\n    const checkbox = html`<sgds-checkbox\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n      @sgds-change=${(e: CustomEvent) => (this.checked = e.detail.checked)}\n    ></sgds-checkbox>`;\n\n    const radio = html`<sgds-radio\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n    ></sgds-radio>`;\n\n    return html`\n      <div\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleInputChange}\n        @keydown=${this._handleKeyDown}\n        variant=\"card-action\"\n        class=\"sgds card\n        ${classMap({\n          [`text-${this.textColor}`]: this.textColor,\n          [\"is-active\"]: this.active\n        })}\n        \"\n        part=\"base\"\n      >\n        <div class=\"card-body\" part=\"body\">\n          <h6 class=\"card-subtitle\" part=\"subtitle\">\n            <div>\n              <slot name=\"icon\"></slot>\n              <slot name=\"card-subtitle\"></slot>\n            </div>\n            <div class=\"card-input\">${this.type === \"checkbox\" ? checkbox : radio}</div>\n          </h6>\n          <h5 class=\"card-title\" part=\"title\"><slot name=\"card-title\"></slot></h5>\n          <p class=\"card-text\" part=\"text\"><slot name=\"card-text\"></slot></p>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type TypeVariant = \"checkbox\" | \"radio\";\n\nexport default SgdsActionCard;\n"],"names":["actionCardStyles"],"mappings":"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"}

package/react/action-card/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/action-card/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ActionCard/sgds-action-card\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-action-card\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-action-card\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,kBAAkB,EAAEC,6BAAS,CAAC,CAAC;AAExC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/action-card/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/action-card/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ActionCard/sgds-action-card\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-action-card\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-action-card\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAExC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/base/link-element.cjs.js

@@ -1,60 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var lit = require('lit');
-var sgdsElement = require('./sgds-element.cjs.js');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-var ifDefined_js = require('lit/directives/if-defined.js');
-var watch = require('../utils/watch.cjs.js');
-
-/**
- * @slot default - Default slot for SgdsMainnavItem anchor element
- * @slot default - Default slot for SgdsMainnavItem anchor element
- */
-class LinkElement extends sgdsElement["default"] {
-    constructor() {
-        super(...arguments);
-        /** when true, sets the active stylings of .nav-link */
-        this.active = false;
-        /** Disables the SgdsMainnavItem */
-        this.disabled = false;
-    }
-    _handleDisabled() {
-        this.setAttribute("aria-disabled", `${this.disabled}`);
-    }
-    render() {
-        return lit.html `
-      <a
-        href=${this.disabled ? "javascript:void(0)" : ifDefined_js.ifDefined(this.href)}
-        class="nav-link ${classMap_js.classMap({
-            disabled: this.disabled,
-            active: this.active
-        })} "
-        ?disabled=${this.disabled}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled ? "-1" : "0"}
-      >
-        <slot></slot>
-      </a>
-    `;
-    }
-}
-tslib.__decorate([
-    decorators_js.property({ type: Boolean })
-], LinkElement.prototype, "active", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String })
-], LinkElement.prototype, "href", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], LinkElement.prototype, "disabled", void 0);
-tslib.__decorate([
-    watch.watch("disabled")
-], LinkElement.prototype, "_handleDisabled", null);
-
-exports["default"] = LinkElement;
-//# sourceMappingURL=link-element.cjs.js.map

package/react/base/link-element.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link-element.cjs.js","sources":["../../../src/base/link-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"./sgds-element\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { watch } from \"../utils/watch\";\n\n/**\n * @slot default - Default slot for SgdsMainnavItem anchor element\n * @slot default - Default slot for SgdsMainnavItem anchor element\n */\n\nexport default class LinkElement extends SgdsElement {\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Href attribute for anchor element in SgdsMainnavItem */\n  @property({ type: String })\n  href: string;\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <a\n        href=${this.disabled ? \"javascript:void(0)\" : ifDefined(this.href)}\n        class=\"nav-link ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":["SgdsElement","html","ifDefined","classMap","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;AAOA;;;AAGG;AAEkB,MAAA,WAAY,SAAQA,sBAAW,CAAA;AAApD,IAAA,WAAA,GAAA;;;QAGE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAOf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAuBlB;IApBC,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEA,aAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAGC,sBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAChD,wBAAA,EAAAC,oBAAQ,CAAC;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACU,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;mBACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;AACF,CAAA;AA9BCC,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACd,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IADCE,WAAK,CAAC,UAAU,CAAC;AAGjB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,IAAA,CAAA;;;;"}

package/react/base/link-element.js

@@ -1,56 +0,0 @@
-'use client';
-import { __decorate } from 'tslib';
-import { html } from 'lit';
-import SgdsElement from './sgds-element.js';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { watch } from '../utils/watch.js';
-
-/**
- * @slot default - Default slot for SgdsMainnavItem anchor element
- * @slot default - Default slot for SgdsMainnavItem anchor element
- */
-class LinkElement extends SgdsElement {
-    constructor() {
-        super(...arguments);
-        /** when true, sets the active stylings of .nav-link */
-        this.active = false;
-        /** Disables the SgdsMainnavItem */
-        this.disabled = false;
-    }
-    _handleDisabled() {
-        this.setAttribute("aria-disabled", `${this.disabled}`);
-    }
-    render() {
-        return html `
-      <a
-        href=${this.disabled ? "javascript:void(0)" : ifDefined(this.href)}
-        class="nav-link ${classMap({
-            disabled: this.disabled,
-            active: this.active
-        })} "
-        ?disabled=${this.disabled}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled ? "-1" : "0"}
-      >
-        <slot></slot>
-      </a>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean })
-], LinkElement.prototype, "active", void 0);
-__decorate([
-    property({ type: String })
-], LinkElement.prototype, "href", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LinkElement.prototype, "disabled", void 0);
-__decorate([
-    watch("disabled")
-], LinkElement.prototype, "_handleDisabled", null);
-
-export { LinkElement as default };
-//# sourceMappingURL=link-element.js.map

package/react/base/link-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"link-element.js","sources":["../../../src/base/link-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"./sgds-element\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { watch } from \"../utils/watch\";\n\n/**\n * @slot default - Default slot for SgdsMainnavItem anchor element\n * @slot default - Default slot for SgdsMainnavItem anchor element\n */\n\nexport default class LinkElement extends SgdsElement {\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Href attribute for anchor element in SgdsMainnavItem */\n  @property({ type: String })\n  href: string;\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <a\n        href=${this.disabled ? \"javascript:void(0)\" : ifDefined(this.href)}\n        class=\"nav-link ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAOA;;;AAGG;AAEkB,MAAA,WAAY,SAAQ,WAAW,CAAA;AAApD,IAAA,WAAA,GAAA;;;QAGE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAOf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAuBlB;IApBC,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEA,aAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAChD,wBAAA,EAAA,QAAQ,CAAC;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACU,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;mBACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;KAIxC,CAAC;KACH;AACF,CAAA;AA9BC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACd,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,CAAC;AAGjB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,IAAA,CAAA;;;;"}

package/react/components/ActionCard/action-card.cjs.js

@@ -1,11 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var lit = require('lit');
-
-var css_248z = lit.css`.sgds.card[variant*=card-action]{transition-duration:.3s;transition-property:box-shadow,border-color;transition-timing-function:ease-in-out}.card-body{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}slot[name=icon]::slotted(*){margin-right:1rem}.sgds.card[variant*=card-action].is-active,.sgds.card[variant*=card-action]:hover{border-color:transparent;box-shadow:var(--sgds-box-shadow),inset 0 0 0 2.1px var(--sgds-link)}.sgds.card[variant*=card-action] .card-subtitle{align-items:center;display:flex;justify-content:space-between}.sgds.card[variant*=card-action] .card-title{color:var(--sgds-body-color);margin-bottom:0}`;
-
-exports["default"] = css_248z;
-//# sourceMappingURL=action-card.cjs.js.map

package/react/components/ActionCard/action-card.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-card.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/ActionCard/action-card.js

@@ -1,7 +0,0 @@
-'use client';
-import { css } from 'lit';
-
-var css_248z = css`.sgds.card[variant*=card-action]{transition-duration:.3s;transition-property:box-shadow,border-color;transition-timing-function:ease-in-out}.card-body{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}slot[name=icon]::slotted(*){margin-right:1rem}.sgds.card[variant*=card-action].is-active,.sgds.card[variant*=card-action]:hover{border-color:transparent;box-shadow:var(--sgds-box-shadow),inset 0 0 0 2.1px var(--sgds-link)}.sgds.card[variant*=card-action] .card-subtitle{align-items:center;display:flex;justify-content:space-between}.sgds.card[variant*=card-action] .card-title{color:var(--sgds-body-color);margin-bottom:0}`;
-
-export { css_248z as default };
-//# sourceMappingURL=action-card.js.map

package/react/components/ActionCard/action-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/ActionCard/sgds-action-card.cjs.js

@@ -1,154 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-var live_js = require('lit/directives/live.js');
-var ref_js = require('lit/directives/ref.js');
-var staticHtml_js = require('lit/static-html.js');
-var cardElement = require('../../base/card-element.cjs.js');
-var generateId = require('../../utils/generateId.cjs.js');
-var watch = require('../../utils/watch.cjs.js');
-var sgdsCheckbox = require('../Checkbox/sgds-checkbox.cjs.js');
-var sgdsRadio = require('../Radio/sgds-radio.cjs.js');
-var actionCard = require('./action-card.cjs.js');
-
-/**
- * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
- * @slot icon - Icon content in the card-subtitile
- * @slot card-subtitle - The subtitle of the card
- * @slot card-title - The title of the card
- * @slot card-text - The paragrapher text of the card
- *
- * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed
- *
- * @csspart base - The action card base wrapper
- * @csspart body - The action card body
- * @csspart subtitle - The action card subtitle
- * @csspart title - The action card title
- * @csspart text - The action card text
- */
-class SgdsActionCard extends cardElement.CardElement {
-    constructor() {
-        super(...arguments);
-        /** @internal */
-        this.inputRef = ref_js.createRef();
-        /** Disables the input (so the user can't check / uncheck it). */
-        this.disabled = false;
-        /** Draws the input in a checked state. */
-        this.checked = false;
-        /** The type of input of the action card */
-        this.type = "checkbox";
-        /** Controls the active styling of the action card */
-        this.active = false;
-        /** @internal The input's id. */
-        this.inputId = generateId["default"]("action-card", "input");
-    }
-    /** Simulates a click on the input control*/
-    click() {
-        this.inputRef.value.click();
-    }
-    /** @internal Declare the click event listener*/
-    async handleInputChange() {
-        this.inputRef.value.click();
-        this.emit("sgds-change");
-    }
-    /** @internal */
-    async handleRadioCheckedChange() {
-        this.active = this.checked;
-    }
-    /** @internal */
-    async handleDisabledChange() {
-        this.active = !this.disabled;
-    }
-    _handleKeyDown(event) {
-        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-        if (event.key === "Enter" && !hasModifier) {
-            this.handleInputChange();
-        }
-    }
-    render() {
-        const checkbox = staticHtml_js.html `<sgds-checkbox
-      ${ref_js.ref(this.inputRef)}
-      ?disabled=${this.disabled}
-      id=${this.inputId}
-      @click=${this.handleInputChange}
-      @keydown=${this._handleKeyDown}
-      .value=${live_js.live(this.value)}
-      ?checked=${live_js.live(this.checked)}
-      @sgds-change=${(e) => (this.checked = e.detail.checked)}
-    ></sgds-checkbox>`;
-        const radio = staticHtml_js.html `<sgds-radio
-      ${ref_js.ref(this.inputRef)}
-      ?disabled=${this.disabled}
-      id=${this.inputId}
-      @click=${this.handleInputChange}
-      @keydown=${this._handleKeyDown}
-      .value=${live_js.live(this.value)}
-      ?checked=${live_js.live(this.checked)}
-    ></sgds-radio>`;
-        return staticHtml_js.html `
-      <div
-        tabindex=${this.disabled ? "-1" : "0"}
-        @click=${this.handleInputChange}
-        @keydown=${this._handleKeyDown}
-        variant="card-action"
-        class="sgds card
-        ${classMap_js.classMap({
-            [`text-${this.textColor}`]: this.textColor,
-            ["is-active"]: this.active
-        })}
-        "
-        part="base"
-      >
-        <div class="card-body" part="body">
-          <h6 class="card-subtitle" part="subtitle">
-            <div>
-              <slot name="icon"></slot>
-              <slot name="card-subtitle"></slot>
-            </div>
-            <div class="card-input">${this.type === "checkbox" ? checkbox : radio}</div>
-          </h6>
-          <h5 class="card-title" part="title"><slot name="card-title"></slot></h5>
-          <p class="card-text" part="text"><slot name="card-text"></slot></p>
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsActionCard.styles = [...cardElement.CardElement.styles, actionCard["default"]];
-SgdsActionCard.dependencies = {
-    "sgds-checkbox": sgdsCheckbox.SgdsCheckbox,
-    "sgds-radio": sgdsRadio.SgdsRadio
-};
-tslib.__decorate([
-    decorators_js.property({ reflect: true })
-], SgdsActionCard.prototype, "name", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String })
-], SgdsActionCard.prototype, "value", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsActionCard.prototype, "disabled", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsActionCard.prototype, "checked", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsActionCard.prototype, "type", void 0);
-tslib.__decorate([
-    decorators_js.property({ reflect: true, type: Boolean })
-], SgdsActionCard.prototype, "active", void 0);
-tslib.__decorate([
-    watch.watch("checked")
-], SgdsActionCard.prototype, "handleRadioCheckedChange", null);
-tslib.__decorate([
-    watch.watch("disabled")
-], SgdsActionCard.prototype, "handleDisabledChange", null);
-
-exports.SgdsActionCard = SgdsActionCard;
-exports["default"] = SgdsActionCard;
-//# sourceMappingURL=sgds-action-card.cjs.js.map

package/react/components/ActionCard/sgds-action-card.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sgds-action-card.cjs.js","sources":["../../../../src/components/ActionCard/sgds-action-card.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport { html } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsCheckbox } from \"../Checkbox/sgds-checkbox\";\nimport { SgdsRadio } from \"../Radio/sgds-radio\";\nimport actionCardStyles from \"./action-card.css\";\n\n/**\n * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.\n * @slot icon - Icon content in the card-subtitile\n * @slot card-subtitle - The subtitle of the card\n * @slot card-title - The title of the card\n * @slot card-text - The paragrapher text of the card\n *\n * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed\n *\n * @csspart base - The action card base wrapper\n * @csspart body - The action card body\n * @csspart subtitle - The action card subtitle\n * @csspart title - The action card title\n * @csspart text - The action card text\n */\nexport class SgdsActionCard extends CardElement {\n  static styles = [...CardElement.styles, actionCardStyles];\n  static dependencies = {\n    \"sgds-checkbox\": SgdsCheckbox,\n    \"sgds-radio\": SgdsRadio\n  };\n  /** @internal */\n  inputRef: Ref<SgdsCheckbox | SgdsRadio> = createRef();\n  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */\n  @property({ reflect: true }) name: string;\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String }) value: string;\n  /** Disables the input (so the user can't check / uncheck it). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /** Draws the input in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The type of input of the action card */\n  @property({ type: String, reflect: true }) type: TypeVariant = \"checkbox\";\n\n  /** Controls the active styling of the action card */\n  @property({ reflect: true, type: Boolean })\n  active = false;\n\n  /** Simulates a click on the input control*/\n  public click() {\n    this.inputRef.value.click();\n  }\n  /** @internal Declare the click event listener*/\n  async handleInputChange() {\n    this.inputRef.value.click();\n    this.emit(\"sgds-change\");\n  }\n  /** @internal The input's id. */\n  private inputId: string = genId(\"action-card\", \"input\");\n\n  /** @internal */\n  @watch(\"checked\")\n  async handleRadioCheckedChange() {\n    this.active = this.checked;\n  }\n  /** @internal */\n  @watch(\"disabled\")\n  async handleDisabledChange() {\n    this.active = !this.disabled;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.handleInputChange();\n    }\n  }\n\n  render() {\n    const checkbox = html`<sgds-checkbox\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n      @sgds-change=${(e: CustomEvent) => (this.checked = e.detail.checked)}\n    ></sgds-checkbox>`;\n\n    const radio = html`<sgds-radio\n      ${ref(this.inputRef)}\n      ?disabled=${this.disabled}\n      id=${this.inputId}\n      @click=${this.handleInputChange}\n      @keydown=${this._handleKeyDown}\n      .value=${live(this.value)}\n      ?checked=${live(this.checked)}\n    ></sgds-radio>`;\n\n    return html`\n      <div\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this.handleInputChange}\n        @keydown=${this._handleKeyDown}\n        variant=\"card-action\"\n        class=\"sgds card\n        ${classMap({\n          [`text-${this.textColor}`]: this.textColor,\n          [\"is-active\"]: this.active\n        })}\n        \"\n        part=\"base\"\n      >\n        <div class=\"card-body\" part=\"body\">\n          <h6 class=\"card-subtitle\" part=\"subtitle\">\n            <div>\n              <slot name=\"icon\"></slot>\n              <slot name=\"card-subtitle\"></slot>\n            </div>\n            <div class=\"card-input\">${this.type === \"checkbox\" ? checkbox : radio}</div>\n          </h6>\n          <h5 class=\"card-title\" part=\"title\"><slot name=\"card-title\"></slot></h5>\n          <p class=\"card-text\" part=\"text\"><slot name=\"card-text\"></slot></p>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type TypeVariant = \"checkbox\" | \"radio\";\n\nexport default SgdsActionCard;\n"],"names":["CardElement","createRef","genId","html","ref","live","classMap","actionCardStyles","SgdsCheckbox","SgdsRadio","__decorate","property","watch"],"mappings":"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"}