@govtechsg/sgds-web-component 3.0.3 → 3.0.5
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.
- package/Masthead/index.js +11 -2
- package/components/Card/index.umd.js +3 -2
- package/components/Card/index.umd.js.map +1 -1
- package/components/Card/sgds-card.d.ts +2 -1
- package/components/Card/sgds-card.js +3 -2
- package/components/Card/sgds-card.js.map +1 -1
- package/components/DescriptionList/description-list.js +1 -1
- package/components/DescriptionList/index.umd.js +5 -2
- package/components/DescriptionList/index.umd.js.map +1 -1
- package/components/DescriptionList/sgds-description-list-group.js +4 -1
- package/components/DescriptionList/sgds-description-list-group.js.map +1 -1
- package/components/Masthead/index.umd.js +11 -2
- package/components/Masthead/index.umd.js.map +1 -1
- package/components/Masthead/masthead.js +1 -1
- package/components/Masthead/sgds-masthead.d.ts +2 -0
- package/components/Masthead/sgds-masthead.js +10 -1
- package/components/Masthead/sgds-masthead.js.map +1 -1
- package/components/index.umd.js +19 -6
- package/components/index.umd.js.map +1 -1
- package/css/grid.css +4 -4
- package/index.umd.js +19 -6
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Card/sgds-card.cjs.js +3 -2
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js +3 -2
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/DescriptionList/description-list.cjs.js +1 -1
- package/react/components/DescriptionList/description-list.js +1 -1
- package/react/components/DescriptionList/sgds-description-list-group.cjs.js +4 -1
- package/react/components/DescriptionList/sgds-description-list-group.cjs.js.map +1 -1
- package/react/components/DescriptionList/sgds-description-list-group.js +4 -1
- package/react/components/DescriptionList/sgds-description-list-group.js.map +1 -1
- package/react/components/Masthead/masthead.cjs.js +1 -1
- package/react/components/Masthead/masthead.js +1 -1
- package/react/components/Masthead/sgds-masthead.cjs.js +10 -1
- package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -1
- package/react/components/Masthead/sgds-masthead.js +10 -1
- package/react/components/Masthead/sgds-masthead.js.map +1 -1
|
@@ -5,6 +5,7 @@ export type CardOrientation = "vertical" | "horizontal";
|
|
|
5
5
|
/**
|
|
6
6
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
7
7
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
8
|
+
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
8
9
|
* @slot subtitle - The subtitle of the card
|
|
9
10
|
* @slot title - The title of the card
|
|
10
11
|
* @slot description - The paragrapher text of the card
|
|
@@ -28,7 +29,7 @@ export declare class SgdsCard extends CardElement {
|
|
|
28
29
|
orientation: CardOrientation;
|
|
29
30
|
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
30
31
|
imagePosition: CardImagePosition;
|
|
31
|
-
/**
|
|
32
|
+
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
32
33
|
imageAdjustment: CardImageAdjustment;
|
|
33
34
|
protected firstUpdated(): void;
|
|
34
35
|
handleTitleSlotChange(e: Event): void;
|
|
@@ -8,6 +8,7 @@ import css_248z from './card.js';
|
|
|
8
8
|
/**
|
|
9
9
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
10
10
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
11
|
+
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
11
12
|
* @slot subtitle - The subtitle of the card
|
|
12
13
|
* @slot title - The title of the card
|
|
13
14
|
* @slot description - The paragrapher text of the card
|
|
@@ -24,7 +25,7 @@ class SgdsCard extends CardElement {
|
|
|
24
25
|
this.orientation = "vertical";
|
|
25
26
|
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
26
27
|
this.imagePosition = "before";
|
|
27
|
-
/**
|
|
28
|
+
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
28
29
|
this.imageAdjustment = "default";
|
|
29
30
|
}
|
|
30
31
|
firstUpdated() {
|
|
@@ -55,7 +56,7 @@ class SgdsCard extends CardElement {
|
|
|
55
56
|
if (childNodes.length > 1) {
|
|
56
57
|
return console.error("Multiple elements passed into SgdsCard's link slot");
|
|
57
58
|
}
|
|
58
|
-
if (this.stretchedLink) {
|
|
59
|
+
if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
|
|
59
60
|
const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
|
|
60
61
|
this.card.setAttribute("href", hyperlink.href);
|
|
61
62
|
const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport cardStyle from \"./card.css\";\n\nexport type CardImageAdjustment = \"default\" | \"padding around\" | \"aspect ratio\";\nexport type CardImagePosition = \"before\" | \"after\";\nexport type CardOrientation = \"vertical\" | \"horizontal\";\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 image - Accepts an image or svg element of 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 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 @query(\"a.card\") card: HTMLAnchorElement;\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 /** @internal */\n @queryAssignedNodes({ slot: \"link\", flatten: true })\n _linkNode!: Array<Node>;\n\n /** Extends the link passed in slot[name=\"link\"] to the entire card */\n @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n /** Disables the card */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n /** Sets the image position of the card. Available options: `before`, `after` */\n @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n /**
|
|
1
|
+
{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport cardStyle from \"./card.css\";\n\nexport type CardImageAdjustment = \"default\" | \"padding around\" | \"aspect ratio\";\nexport type CardImagePosition = \"before\" | \"after\";\nexport type CardOrientation = \"vertical\" | \"horizontal\";\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 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 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 @query(\"a.card\") card: HTMLAnchorElement;\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 /** @internal */\n @queryAssignedNodes({ slot: \"link\", flatten: true })\n _linkNode!: Array<Node>;\n\n /** Extends the link passed in slot[name=\"link\"] to the entire card */\n @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n /** Disables the card */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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 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 icon = this.shadowRoot.querySelector(\".card-icon\") as HTMLDivElement;\n icon.style.display = \"none\";\n }\n if (this.disabled && this._linkNode.length > 0) {\n const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n hyperlink.setAttribute(\"disabled\", \"true\");\n hyperlink.removeAttribute(\"href\");\n }\n }\n\n handleTitleSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n hyperlink.removeAttribute(\"href\");\n }\n return;\n }\n\n handleLinkSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n | Array<HTMLLinkElement>\n | Array<HTMLAnchorElement>;\n\n if (childNodes.length > 1) {\n return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n }\n\n if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n this.card.setAttribute(\"href\", hyperlink.href);\n const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n linkSlot.style.display = \"none\";\n }\n return;\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\n return html`\n <${tag} \n class=\"card ${classMap({\n disabled: this.disabled\n })}\"\n tabindex=${cardTabIndex}\n >\n <div class=\"card-image\">\n <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n </div>\n <div class=\"card-icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"card-body\">\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 <p class=\"card-text\">\n <slot name=\"description\"></slot>\n </p>\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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = 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}`;
|
|
3
|
+
var css_248z = 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}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=description-list.js.map
|
|
@@ -4298,7 +4298,7 @@
|
|
|
4298
4298
|
_updateDescriptionLists() {
|
|
4299
4299
|
if (!this._descriptionLists)
|
|
4300
4300
|
return;
|
|
4301
|
-
this._descriptionLists.forEach(descriptionList => {
|
|
4301
|
+
this._descriptionLists.forEach((descriptionList, index) => {
|
|
4302
4302
|
if (this.stacked) {
|
|
4303
4303
|
descriptionList.setAttribute("stacked", "");
|
|
4304
4304
|
}
|
|
@@ -4311,6 +4311,9 @@
|
|
|
4311
4311
|
else {
|
|
4312
4312
|
descriptionList.removeAttribute("bordered");
|
|
4313
4313
|
}
|
|
4314
|
+
if (index === this._descriptionLists.length - 1) {
|
|
4315
|
+
descriptionList.setAttribute("isLastChild", "");
|
|
4316
|
+
}
|
|
4314
4317
|
});
|
|
4315
4318
|
}
|
|
4316
4319
|
updated(_changedProperties) {
|
|
@@ -4362,7 +4365,7 @@
|
|
|
4362
4365
|
queryAssignedElements({ flatten: true })
|
|
4363
4366
|
], SgdsDescriptionListGroup.prototype, "_descriptionLists", void 0);
|
|
4364
4367
|
|
|
4365
|
-
var css_248z = 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}`;
|
|
4368
|
+
var css_248z = 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}`;
|
|
4366
4369
|
|
|
4367
4370
|
let id = 0;
|
|
4368
4371
|
/**
|