@govtechsg/sgds-web-component 3.0.3 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/components/Card/index.umd.js +1 -0
  2. package/components/Card/index.umd.js.map +1 -1
  3. package/components/Card/sgds-card.d.ts +1 -0
  4. package/components/Card/sgds-card.js +1 -0
  5. package/components/Card/sgds-card.js.map +1 -1
  6. package/components/DescriptionList/description-list.js +1 -1
  7. package/components/DescriptionList/index.umd.js +5 -2
  8. package/components/DescriptionList/index.umd.js.map +1 -1
  9. package/components/DescriptionList/sgds-description-list-group.js +4 -1
  10. package/components/DescriptionList/sgds-description-list-group.js.map +1 -1
  11. package/components/index.umd.js +6 -2
  12. package/components/index.umd.js.map +1 -1
  13. package/css/grid.css +4 -4
  14. package/index.umd.js +6 -2
  15. package/index.umd.js.map +1 -1
  16. package/package.json +1 -1
  17. package/react/components/Card/sgds-card.cjs.js +1 -0
  18. package/react/components/Card/sgds-card.cjs.js.map +1 -1
  19. package/react/components/Card/sgds-card.js +1 -0
  20. package/react/components/Card/sgds-card.js.map +1 -1
  21. package/react/components/DescriptionList/description-list.cjs.js +1 -1
  22. package/react/components/DescriptionList/description-list.js +1 -1
  23. package/react/components/DescriptionList/sgds-description-list-group.cjs.js +4 -1
  24. package/react/components/DescriptionList/sgds-description-list-group.cjs.js.map +1 -1
  25. package/react/components/DescriptionList/sgds-description-list-group.js +4 -1
  26. package/react/components/DescriptionList/sgds-description-list-group.js.map +1 -1
package/components/DescriptionList/sgds-description-list-group.js CHANGED
@@ -33,7 +33,7 @@ class SgdsDescriptionListGroup extends SgdsElement {
33
33
  _updateDescriptionLists() {
34
34
  if (!this._descriptionLists)
35
35
  return;
36
- this._descriptionLists.forEach(descriptionList => {
36
+ this._descriptionLists.forEach((descriptionList, index) => {
37
37
  if (this.stacked) {
38
38
  descriptionList.setAttribute("stacked", "");
39
39
  }
@@ -46,6 +46,9 @@ class SgdsDescriptionListGroup extends SgdsElement {
46
46
  else {
47
47
  descriptionList.removeAttribute("bordered");
48
48
  }
49
+ if (index === this._descriptionLists.length - 1) {
50
+ descriptionList.setAttribute("isLastChild", "");
51
+ }
49
52
  });
50
53
  }
51
54
  updated(_changedProperties) {
package/components/DescriptionList/sgds-description-list-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-description-list-group.js","sources":["../../../src/components/DescriptionList/sgds-description-list-group.ts"],"sourcesContent":["import { html, nothing, PropertyValues } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport descriptionListGroupStyle from \"./description-list-group.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\n/**\n * @summary Description List Group organizes multiple description lists.\n *\n * @slot default - The slot for `description-list` components\n * @slot title - Slot for the title content\n * @slot description - Slot for the description content\n *\n */\nexport class SgdsDescriptionListGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, descriptionListGroupStyle];\n\n /** When true, adds a border around the entire group. */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** When true, the description lists are displayed in a stacked layout. */\n @property({ type: Boolean, reflect: true }) stacked = false;\n\n @queryAssignedElements({ flatten: true })\n private _descriptionLists!: HTMLElement[];\n\n /** @internal */\n private readonly hasSlotController = new HasSlotController(this, \"title\", \"description\");\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute(\"role\", \"list\");\n this.updateComplete.then(() => {\n this._updateDescriptionLists();\n });\n }\n\n private _updateDescriptionLists() {\n if (!this._descriptionLists) return;\n this._descriptionLists.forEach(descriptionList => {\n if (this.stacked) {\n descriptionList.setAttribute(\"stacked\", \"\");\n } else {\n descriptionList.removeAttribute(\"stacked\");\n }\n if (this.bordered) {\n descriptionList.setAttribute(\"bordered\", \"\");\n } else {\n descriptionList.removeAttribute(\"bordered\");\n }\n });\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has(\"stacked\")) {\n this._updateDescriptionLists();\n }\n if (_changedProperties.has(\"bordered\")) {\n this._updateDescriptionLists();\n }\n }\n\n render() {\n const hasTitleSlot = this.hasSlotController.test(\"title\");\n const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n return html`\n <div class=\"container\" part=\"base\">\n ${hasTitleSlot || hasDescriptionSlot\n ? html`\n <div class=\"header\">\n ${hasTitleSlot\n ? html` <div class=\"title\">\n <slot name=\"title\"></slot>\n </div>`\n : nothing}\n ${hasDescriptionSlot\n ? html`\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n `\n : nothing}\n </div>\n `\n : nothing}\n <div>\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDescriptionListGroup;\n"],"names":["descriptionListGroupStyle"],"mappings":";;;;;;;AAMA;;;;;;;AAOG;AACG,MAAO,wBAAyB,SAAQ,WAAW,CAAA;AAAzD,IAAA,WAAA,GAAA;;;QAI8C,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAM3C,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;KAgE1F;IA9DC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAClC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAK;YAC5B,IAAI,CAAC,uBAAuB,EAAE,CAAC;AACjC,SAAC,CAAC,CAAC;KACJ;IAEO,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAAE,OAAO;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,eAAe,IAAG;AAC/C,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,eAAe,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;aAC7C;iBAAM;AACL,gBAAA,eAAe,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;aAC5C;AACD,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,eAAe,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;aAC9C;iBAAM;AACL,gBAAA,eAAe,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;aAC7C;AACH,SAAC,CAAC,CAAC;KACJ;AAES,IAAA,OAAO,CAAC,kBAAkC,EAAA;AAClD,QAAA,IAAI,kBAAkB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACrC,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;AACD,QAAA,IAAI,kBAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACtC,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;KACF;IAED,MAAM,GAAA;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1D,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACtE,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEL,QAAA,EAAA,YAAY,IAAI,kBAAkB;cAChC,IAAI,CAAA,CAAA;;kBAEE,YAAY;kBACV,IAAI,CAAA,CAAA;;AAEG,0BAAA,CAAA;AACT,kBAAE,OAAO,CAAA;kBACT,kBAAkB;kBAChB,IAAI,CAAA,CAAA;;;;AAIH,oBAAA,CAAA;AACH,kBAAE,OAAO,CAAA;;AAEd,YAAA,CAAA;AACH,cAAE,OAAO,CAAA;;;;;KAKd,CAAC;KACH;;AA3EM,wBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAyB,CAApD,CAAsD;AAGvB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpD,UAAA,CAAA;AADP,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACC,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"sgds-description-list-group.js","sources":["../../../src/components/DescriptionList/sgds-description-list-group.ts"],"sourcesContent":["import { html, nothing, PropertyValues } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport descriptionListGroupStyle from \"./description-list-group.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\n/**\n * @summary Description List Group organizes multiple description lists.\n *\n * @slot default - The slot for `description-list` components\n * @slot title - Slot for the title content\n * @slot description - Slot for the description content\n *\n */\nexport class SgdsDescriptionListGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, descriptionListGroupStyle];\n\n /** When true, adds a border around the entire group. */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** When true, the description lists are displayed in a stacked layout. */\n @property({ type: Boolean, reflect: true }) stacked = false;\n\n @queryAssignedElements({ flatten: true })\n private _descriptionLists!: HTMLElement[];\n\n /** @internal */\n private readonly hasSlotController = new HasSlotController(this, \"title\", \"description\");\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute(\"role\", \"list\");\n this.updateComplete.then(() => {\n this._updateDescriptionLists();\n });\n }\n\n private _updateDescriptionLists() {\n if (!this._descriptionLists) return;\n this._descriptionLists.forEach((descriptionList, index) => {\n if (this.stacked) {\n descriptionList.setAttribute(\"stacked\", \"\");\n } else {\n descriptionList.removeAttribute(\"stacked\");\n }\n if (this.bordered) {\n descriptionList.setAttribute(\"bordered\", \"\");\n } else {\n descriptionList.removeAttribute(\"bordered\");\n }\n\n if (index === this._descriptionLists.length - 1) {\n descriptionList.setAttribute(\"isLastChild\", \"\");\n }\n });\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has(\"stacked\")) {\n this._updateDescriptionLists();\n }\n if (_changedProperties.has(\"bordered\")) {\n this._updateDescriptionLists();\n }\n }\n\n render() {\n const hasTitleSlot = this.hasSlotController.test(\"title\");\n const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n return html`\n <div class=\"container\" part=\"base\">\n ${hasTitleSlot || hasDescriptionSlot\n ? html`\n <div class=\"header\">\n ${hasTitleSlot\n ? html` <div class=\"title\">\n <slot name=\"title\"></slot>\n </div>`\n : nothing}\n ${hasDescriptionSlot\n ? html`\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n `\n : nothing}\n </div>\n `\n : nothing}\n <div>\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDescriptionListGroup;\n"],"names":["descriptionListGroupStyle"],"mappings":"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"}
package/components/index.umd.js CHANGED
@@ -10092,6 +10092,7 @@
10092
10092
  /**
10093
10093
  * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
10094
10094
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
10095
+ * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
10095
10096
  * @slot subtitle - The subtitle of the card
10096
10097
  * @slot title - The title of the card
10097
10098
  * @slot description - The paragrapher text of the card
@@ -22349,7 +22350,7 @@
22349
22350
  watch("value")
22350
22351
  ], SgdsDatepicker.prototype, "_handleValueChange", null);
22351
22352
 
22352
- var css_248z$w = css`:host([bordered]) .container:last-child{border-bottom:none}:host([stacked]) .container{align-items:flex-start;flex-direction:column;gap:var(--sgds-gap-xs);justify-content:flex-start}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;gap:var(--sgds-gap-xs);justify-content:space-between;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-2)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}`;
22353
+ var css_248z$w = css`:host([bordered][islastchild]) .container:last-child{border-bottom:none}:host([stacked]) .container{align-items:flex-start;flex-direction:column;gap:var(--sgds-gap-xs);justify-content:flex-start}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;gap:var(--sgds-gap-xs);justify-content:space-between;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-2)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}`;
22353
22354
 
22354
22355
  let id$2 = 0;
22355
22356
  /**
@@ -22480,7 +22481,7 @@
22480
22481
  _updateDescriptionLists() {
22481
22482
  if (!this._descriptionLists)
22482
22483
  return;
22483
- this._descriptionLists.forEach(descriptionList => {
22484
+ this._descriptionLists.forEach((descriptionList, index) => {
22484
22485
  if (this.stacked) {
22485
22486
  descriptionList.setAttribute("stacked", "");
22486
22487
  }
@@ -22493,6 +22494,9 @@
22493
22494
  else {
22494
22495
  descriptionList.removeAttribute("bordered");
22495
22496
  }
22497
+ if (index === this._descriptionLists.length - 1) {
22498
+ descriptionList.setAttribute("isLastChild", "");
22499
+ }
22496
22500
  });
22497
22501
  }
22498
22502
  updated(_changedProperties) {