@govtechsg/sgds-web-component 3.3.3-rc.0 → 3.3.3-rc.1

package/components/Card/sgds-card.d.ts

@@ -4,6 +4,7 @@ import { CardImageAdjustment, CardImagePosition } from "./types";
  * @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
+ * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
  * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
  * @slot subtitle - The subtitle of the card
@@ -14,16 +15,11 @@ import { CardImageAdjustment, CardImagePosition } from "./types";
  */
 export declare class SgdsCard extends CardElement {
     static styles: import("lit").CSSResult[];
-    /** @internal */
-    _imageNode: Array<Node>;
-    /** @internal */
-    _iconNode: Array<Node>;
     /** Sets the image position of the card. Available options: `before`, `after` */
     imagePosition: CardImagePosition;
     /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
     imageAdjustment: CardImageAdjustment;
     private readonly hasSlotController;
-    protected firstUpdated(): void;
     handleImgSlotChange(e: Event): void;
     render(): import("lit-html").TemplateResult;
 }

package/components/Card/sgds-card.js

@@ -1,16 +1,17 @@
 import { __decorate } from 'tslib';
-import { nothing } from 'lit';
 import { literal, html } from 'lit/static-html.js';
-import { queryAssignedNodes, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
 import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './card.js';
+import { nothing } from 'lit';
 
 /**
  * @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
+ * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
  * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
  * @slot subtitle - The subtitle of the card
@@ -26,43 +27,42 @@ class SgdsCard extends CardElement {
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
         this.imageAdjustment = "default";
-        this.hasSlotController = new HasSlotController(this, "description");
-    }
-    firstUpdated() {
-        if (this._imageNode.length === 0) {
-            const icon = this.shadowRoot.querySelector(".card-image");
-            icon.style.display = "none";
-        }
-        if (this._iconNode.length === 0) {
-            const media = this.shadowRoot.querySelector(".card-media");
-            media.style.display = "none";
-        }
+        this.hasSlotController = new HasSlotController(this, "image", "icon", "menu", "description");
     }
     handleImgSlotChange(e) {
         const childNodes = e.target.assignedNodes({ flatten: true });
         if (childNodes.length > 1) {
-            return console.error("Multiple elements passed into SgdsCard's image slot");
+            console.error("Multiple elements passed into SgdsCard's image slot");
+        }
+        if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
+            console.error("Both image and icon slots cannot be used together in SgdsCard");
         }
     }
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
         const hasDescriptionSlot = this.hasSlotController.test("description");
+        const hasImageSlot = this.hasSlotController.test("image");
+        const hasIconSlot = this.hasSlotController.test("icon");
+        const hasMenuSlot = this.hasSlotController.test("menu");
+        const hasUpperSlot = this.hasSlotController.test("upper");
         return html `
-      <${tag} 
+      <${tag}
         class="card ${classMap({
             disabled: this.disabled
         })}"
         tabindex=${cardTabIndex}
       >
         <div class="card-tinted-bg"></div>
-        <slot name="menu"></slot>
-        <div class="card-image">
-          <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
-        </div>
-        <div class="card-media">
-          <slot name="icon"></slot>
+        
+        ${hasMenuSlot ? html ` <slot name="menu"></slot> ` : nothing}
+        <div class=${classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
+          <slot name="upper">
+          ${hasImageSlot ? html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}
+          ${hasIconSlot ? html ` <slot name="icon"></slot> ` : nothing}
+          </slot>
         </div>
+
         <div class="card-body">
           <div class="card-header-container">
             <div class="card-header">
@@ -84,12 +84,6 @@ class SgdsCard extends CardElement {
     }
 }
 SgdsCard.styles = [...CardElement.styles, css_248z];
-__decorate([
-    queryAssignedNodes({ slot: "image", flatten: true })
-], SgdsCard.prototype, "_imageNode", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "icon", flatten: true })
-], SgdsCard.prototype, "_iconNode", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsCard.prototype, "imagePosition", void 0);

package/components/Card/sgds-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-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 { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\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 SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this._iconNode.length === 0) {\n      const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n      media.style.display = \"none\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        <slot name=\"menu\"></slot>\n        <div class=\"card-image\">\n          <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n        </div>\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"card-body\">\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport cardStyle from \"./card.css\";\nimport { nothing } from \"lit\";\n\n/**\n * @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\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 SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"menu\", \"description\");\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    const hasImageSlot = this.hasSlotController.test(\"image\");\n    const hasIconSlot = this.hasSlotController.test(\"icon\");\n    const hasMenuSlot = this.hasSlotController.test(\"menu\");\n    const hasUpperSlot = this.hasSlotController.test(\"upper\");\n    return html`\n      <${tag}\n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        \n        ${hasMenuSlot ? html` <slot name=\"menu\"></slot> ` : nothing}\n        <div class=${classMap({ \"card-image\": hasImageSlot, \"card-media\": hasIconSlot || hasUpperSlot })}>\n          <slot name=\"upper\">\n          ${hasImageSlot ? html` <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}\n          ${hasIconSlot ? html` <slot name=\"icon\"></slot> ` : nothing}\n          </slot>\n        </div>\n\n        <div class=\"card-body\">\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}

package/components/index.umd.js

@@ -13633,6 +13633,7 @@
    * @summary 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 menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
+   * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
    * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
    * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
    * @slot subtitle - The subtitle of the card
@@ -13648,43 +13649,42 @@
           this.imagePosition = "before";
           /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
           this.imageAdjustment = "default";
-          this.hasSlotController = new HasSlotController(this, "description");
-      }
-      firstUpdated() {
-          if (this._imageNode.length === 0) {
-              const icon = this.shadowRoot.querySelector(".card-image");
-              icon.style.display = "none";
-          }
-          if (this._iconNode.length === 0) {
-              const media = this.shadowRoot.querySelector(".card-media");
-              media.style.display = "none";
-          }
+          this.hasSlotController = new HasSlotController(this, "image", "icon", "menu", "description");
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
           if (childNodes.length > 1) {
-              return console.error("Multiple elements passed into SgdsCard's image slot");
+              console.error("Multiple elements passed into SgdsCard's image slot");
+          }
+          if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
+              console.error("Both image and icon slots cannot be used together in SgdsCard");
           }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
           const hasDescriptionSlot = this.hasSlotController.test("description");
+          const hasImageSlot = this.hasSlotController.test("image");
+          const hasIconSlot = this.hasSlotController.test("icon");
+          const hasMenuSlot = this.hasSlotController.test("menu");
+          const hasUpperSlot = this.hasSlotController.test("upper");
           return html `
-      <${tag} 
+      <${tag}
         class="card ${classMap({
             disabled: this.disabled
         })}"
         tabindex=${cardTabIndex}
       >
         <div class="card-tinted-bg"></div>
-        <slot name="menu"></slot>
-        <div class="card-image">
-          <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
-        </div>
-        <div class="card-media">
-          <slot name="icon"></slot>
+        
+        ${hasMenuSlot ? html ` <slot name="menu"></slot> ` : nothing}
+        <div class=${classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
+          <slot name="upper">
+          ${hasImageSlot ? html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}
+          ${hasIconSlot ? html ` <slot name="icon"></slot> ` : nothing}
+          </slot>
         </div>
+
         <div class="card-body">
           <div class="card-header-container">
             <div class="card-header">
@@ -13706,12 +13706,6 @@
       }
   }
   SgdsCard.styles = [...CardElement.styles, css_248z$S];
-  __decorate([
-      queryAssignedNodes({ slot: "image", flatten: true })
-  ], SgdsCard.prototype, "_imageNode", void 0);
-  __decorate([
-      queryAssignedNodes({ slot: "icon", flatten: true })
-  ], SgdsCard.prototype, "_iconNode", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsCard.prototype, "imagePosition", void 0);