@govtechsg/sgds-web-component 3.1.2 → 3.2.0-rc.1

package/components/IconCard/sgds-icon-card.d.ts

@@ -0,0 +1,24 @@
+import { CardElement } from "../../base/card-element";
+/**
+ * @summary Icon cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
+ * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
+ * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
+ * @slot subtitle - The subtitle of the card
+ * @slot title - The title of the card
+ * @slot description - The paragrapher text of the card
+ * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
+ * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ */
+export declare class SgdsIconCard extends CardElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    _iconNode: Array<Node>;
+    /** @internal */
+    _upperNode: Array<Node>;
+    /** Removes the card's internal padding when set to true.  */
+    noPadding: boolean;
+    protected firstUpdated(): void;
+    render(): import("lit-html").TemplateResult;
+}
+export default SgdsIconCard;

package/components/IconCard/sgds-icon-card.js

@@ -0,0 +1,83 @@
+import { __decorate } from 'tslib';
+import { nothing } from 'lit';
+import { literal, html } from 'lit/static-html.js';
+import { queryAssignedNodes, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { CardElement } from '../../base/card-element.js';
+import css_248z from './icon-card.js';
+
+/**
+ * @summary Icon cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
+ * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
+ * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
+ * @slot subtitle - The subtitle of the card
+ * @slot title - The title of the card
+ * @slot description - The paragrapher text of the card
+ * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
+ * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ */
+class SgdsIconCard extends CardElement {
+    constructor() {
+        super(...arguments);
+        /** Removes the card's internal padding when set to true.  */
+        this.noPadding = false;
+    }
+    firstUpdated() {
+        if (this._iconNode.length === 0) {
+            if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
+                const media = this.shadowRoot.querySelector(".card-media");
+                media.style.display = "none";
+                const body = this.shadowRoot.querySelector(".card-body");
+                if (this.noPadding)
+                    body.style.padding = "0px";
+            }
+        }
+    }
+    render() {
+        const tag = this.stretchedLink ? literal `a` : literal `div`;
+        const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        return html `
+      <${tag} 
+        class="card ${classMap({
+            disabled: this.disabled
+        })}"
+        tabindex=${cardTabIndex}
+      >
+        ${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
+        <div class="card-media">
+          <slot name="icon"></slot>
+          ${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
+        </div>
+        <div class="card-body">
+          ${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
+          <div class="card-header-container">
+            <div class="card-header">
+              <slot name="subtitle"></slot>
+              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+            </div>
+            <slot></slot>
+          </div>
+          <p class="card-text">
+            <slot name="description"></slot>
+          </p>
+          <slot name="lower"></slot>
+          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+        </div>
+      </${tag}>
+    `;
+    }
+}
+SgdsIconCard.styles = [...CardElement.styles, css_248z];
+__decorate([
+    queryAssignedNodes({ slot: "icon", flatten: true })
+], SgdsIconCard.prototype, "_iconNode", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "upper", flatten: true })
+], SgdsIconCard.prototype, "_upperNode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsIconCard.prototype, "noPadding", void 0);
+
+export { SgdsIconCard, SgdsIconCard as default };
+//# sourceMappingURL=sgds-icon-card.js.map

package/components/IconCard/sgds-icon-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-icon-card.js","sources":["../../../src/components/IconCard/sgds-icon-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport IconCardStyle from \"./icon-card.css\";\n\n/**\n * @summary Icon cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsIconCard extends CardElement {\n  static styles = [...CardElement.styles, IconCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  protected firstUpdated() {\n    if (this._iconNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n          ${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n          ${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsIconCard;\n"],"names":["IconCardStyle"],"mappings":";;;;;;;;AAOA;;;;;;;;;;AAUG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAW8C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAgD/D;IA9CW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE;gBAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,gBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;gBAC3E,IAAI,IAAI,CAAC,SAAS;AAAE,oBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;aAChD;SACF;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAA,GAAG,GAAG,OAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnE,QAAA,OAAO,IAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAA,QAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;AAErB,QAAA,EAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA,CAAA,kCAAA,CAAoC,GAAG,OAAO,CAAA;;;AAGjF,UAAA,EAAA,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;AAG5E,UAAA,EAAA,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;;AAIpB,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AAzDM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAa,CAAxC,CAA0C;AAIvD,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxB,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/IconList/icon-list.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
+var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:flex-start;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=icon-list.js.map

package/components/IconList/index.umd.js

@@ -4268,7 +4268,7 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
+  var css_248z = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:flex-start;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
 
   /**
    * @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.

package/components/ImageCard/image-card.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=image-badge]::slotted(*){left:20px;position:absolute;top:20px}slot[name=image-action]::slotted(*){position:absolute;right:20px;top:20px}`;
+
+export { css_248z as default };
+//# sourceMappingURL=image-card.js.map

package/components/ImageCard/image-card.js.map

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

package/components/ImageCard/index.d.ts

@@ -0,0 +1,6 @@
+import { SgdsImageCard } from "./sgds-image-card";
+declare global {
+    interface HTMLElementTagNameMap {
+        "sgds-image-card": SgdsImageCard;
+    }
+}

package/components/ImageCard/index.js

@@ -0,0 +1,4 @@
+import { SgdsImageCard } from './sgds-image-card.js';
+
+customElements.define("sgds-image-card", SgdsImageCard);
+//# sourceMappingURL=index.js.map

package/components/ImageCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ImageCard/index.ts"],"sourcesContent":["import { SgdsImageCard } from \"./sgds-image-card\";\n\ncustomElements.define(\"sgds-image-card\", SgdsImageCard);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-image-card\": SgdsImageCard;\n  }\n}\n"],"names":[],"mappings":";;AAEA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC"}