@govtechsg/sgds-web-component 3.3.0 → 3.3.1

package/components/ThumbnailCard/sgds-thumbnail-card.d.ts

@@ -0,0 +1,24 @@
+import { CardElement } from "../../base/card-element";
+/**
+ * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.
+ * @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 SgdsThumbnailCard extends CardElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    _thumbnailNode: 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 SgdsThumbnailCard;

package/components/ThumbnailCard/sgds-thumbnail-card.js

@@ -0,0 +1,87 @@
+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 './thumbnail-card.js';
+
+/**
+ * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.
+ * @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 SgdsThumbnailCard extends CardElement {
+    constructor() {
+        super(...arguments);
+        /** Removes the card's internal padding when set to true.  */
+        this.noPadding = false;
+    }
+    firstUpdated() {
+        if (this._thumbnailNode.length === 0) {
+            const thumbnail = this.shadowRoot.querySelector(".card-thumbnail");
+            thumbnail.style.display = "none";
+            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">
+					<div class="card-thumbnail">
+            <slot name="thumbnail"></slot>
+          </div>
+					${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}>
+    `;
+    }
+}
+SgdsThumbnailCard.styles = [...CardElement.styles, css_248z];
+__decorate([
+    queryAssignedNodes({ slot: "thumbnail", flatten: true })
+], SgdsThumbnailCard.prototype, "_thumbnailNode", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "upper", flatten: true })
+], SgdsThumbnailCard.prototype, "_upperNode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsThumbnailCard.prototype, "noPadding", void 0);
+
+export { SgdsThumbnailCard, SgdsThumbnailCard as default };
+//# sourceMappingURL=sgds-thumbnail-card.js.map

package/components/ThumbnailCard/sgds-thumbnail-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-thumbnail-card.js","sources":["../../../src/components/ThumbnailCard/sgds-thumbnail-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 thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail 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 thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\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 SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"thumbnail\", flatten: true })\n  _thumbnailNode!: 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._thumbnailNode.length === 0) {\n      const thumbnail = this.shadowRoot.querySelector(\".card-thumbnail\") as HTMLDivElement;\n      thumbnail.style.display = \"none\";\n\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\t\t\t\t\t<div class=\"card-thumbnail\">\n            <slot name=\"thumbnail\"></slot>\n          </div>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${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 SgdsThumbnailCard;\n"],"names":["thumbnailCardStyle"],"mappings":";;;;;;;;AAOA;;;;;;;;;;AAUG;AACG,MAAO,iBAAkB,SAAQ,WAAW,CAAA;AAAlD,IAAA,WAAA,GAAA;;;QAW8C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAqD/D;IAnDW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACpC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAmB,CAAC;AACrF,YAAA,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAEjC,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;;;;;AAKtF,KAAA,EAAA,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;AAG5E,KAAA,EAAA,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;;AAIf,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AA9DM,iBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAI5D,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7B,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,iBAAA,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,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/ThumbnailCard/thumbnail-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=thumbnail]::slotted(*){height:auto;max-width:100%}`;
+
+export { css_248z as default };
+//# sourceMappingURL=thumbnail-card.js.map

package/components/ThumbnailCard/thumbnail-card.js.map

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

package/{src/components → components}/index.d.ts

@@ -21,7 +21,9 @@ export * from "./FileUpload/sgds-file-upload";
 export * from "./Footer/sgds-footer";
 export * from "./Icon/sgds-icon";
 export * from "./IconButton/sgds-icon-button";
+export * from "./IconCard/sgds-icon-card";
 export * from "./IconList/sgds-icon-list";
+export * from "./ImageCard/sgds-image-card";
 export * from "./Input/sgds-input";
 export * from "./Link/sgds-link";
 export * from "./Mainnav/sgds-mainnav";
@@ -29,6 +31,7 @@ export * from "./Mainnav/sgds-mainnav-dropdown";
 export * from "./Mainnav/sgds-mainnav-item";
 export * from "./Masthead/sgds-masthead";
 export * from "./Modal/sgds-modal";
+export * from "./OverflowMenu/sgds-overflow-menu";
 export * from "./Pagination/sgds-pagination";
 export * from "./ProgressBar/sgds-progress-bar";
 export * from "./QuantityToggle/sgds-quantity-toggle";
@@ -49,6 +52,7 @@ export * from "./Tab/sgds-tab-panel";
 export * from "./Table/sgds-table";
 export * from "./TableOfContents/sgds-table-of-contents";
 export * from "./Textarea/sgds-textarea";
+export * from "./ThumbnailCard/sgds-thumbnail-card";
 export * from "./Toast/sgds-toast";
 export * from "./Toast/sgds-toast-container";
 export * from "./Tooltip/sgds-tooltip";

package/components/index.js

@@ -21,7 +21,9 @@ export { SgdsFileUpload } from './FileUpload/sgds-file-upload.js';
 export { SgdsFooter } from './Footer/sgds-footer.js';
 export { SgdsIcon } from './Icon/sgds-icon.js';
 export { SgdsIconButton } from './IconButton/sgds-icon-button.js';
+export { SgdsIconCard } from './IconCard/sgds-icon-card.js';
 export { SgdsIconList } from './IconList/sgds-icon-list.js';
+export { SgdsImageCard } from './ImageCard/sgds-image-card.js';
 export { SgdsInput } from './Input/sgds-input.js';
 export { SgdsLink } from './Link/sgds-link.js';
 export { SgdsMainnav } from './Mainnav/sgds-mainnav.js';
@@ -29,6 +31,7 @@ export { SgdsMainnavDropdown } from './Mainnav/sgds-mainnav-dropdown.js';
 export { SgdsMainnavItem } from './Mainnav/sgds-mainnav-item.js';
 export { SgdsMasthead } from './Masthead/sgds-masthead.js';
 export { SgdsModal } from './Modal/sgds-modal.js';
+export { SgdsOverflowMenu } from './OverflowMenu/sgds-overflow-menu.js';
 export { SgdsPagination } from './Pagination/sgds-pagination.js';
 export { SgdsProgressBar } from './ProgressBar/sgds-progress-bar.js';
 export { SgdsQuantityToggle } from './QuantityToggle/sgds-quantity-toggle.js';
@@ -49,6 +52,7 @@ export { SgdsTabPanel } from './Tab/sgds-tab-panel.js';
 export { SgdsTable } from './Table/sgds-table.js';
 export { SgdsTableOfContents } from './TableOfContents/sgds-table-of-contents.js';
 export { SgdsTextarea } from './Textarea/sgds-textarea.js';
+export { SgdsThumbnailCard } from './ThumbnailCard/sgds-thumbnail-card.js';
 export { SgdsToast } from './Toast/sgds-toast.js';
 export { SgdsToastContainer } from './Toast/sgds-toast-container.js';
 export { SgdsTooltip } from './Tooltip/sgds-tooltip.js';

package/components/index.js.map

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