@govtechsg/sgds-web-component 3.3.3-rc.0 → 3.3.3-rc.1
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/components/Card/index.umd.js +4023 -4074
- package/components/Card/index.umd.js.map +1 -1
- package/components/Card/sgds-card.d.ts +1 -5
- package/components/Card/sgds-card.js +21 -27
- package/components/Card/sgds-card.js.map +1 -1
- package/components/index.umd.js +19 -25
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +19 -25
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Card/sgds-card.cjs.js +20 -26
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js +21 -27
- package/react/components/Card/sgds-card.js.map +1 -1
package/package.json
CHANGED
|
@@ -4,18 +4,19 @@
|
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
|
|
6
6
|
var tslib = require('tslib');
|
|
7
|
-
var lit = require('lit');
|
|
8
7
|
var staticHtml_js = require('lit/static-html.js');
|
|
9
8
|
var decorators_js = require('lit/decorators.js');
|
|
10
9
|
var classMap_js = require('lit/directives/class-map.js');
|
|
11
10
|
var cardElement = require('../../base/card-element.cjs.js');
|
|
12
11
|
var slot = require('../../utils/slot.cjs.js');
|
|
13
12
|
var card = require('./card.cjs.js');
|
|
13
|
+
var lit = require('lit');
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
17
17
|
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
18
18
|
* @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.
|
|
19
|
+
* @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
|
|
19
20
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
20
21
|
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
21
22
|
* @slot subtitle - The subtitle of the card
|
|
@@ -31,43 +32,42 @@ class SgdsCard extends cardElement.CardElement {
|
|
|
31
32
|
this.imagePosition = "before";
|
|
32
33
|
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
33
34
|
this.imageAdjustment = "default";
|
|
34
|
-
this.hasSlotController = new slot.HasSlotController(this, "description");
|
|
35
|
-
}
|
|
36
|
-
firstUpdated() {
|
|
37
|
-
if (this._imageNode.length === 0) {
|
|
38
|
-
const icon = this.shadowRoot.querySelector(".card-image");
|
|
39
|
-
icon.style.display = "none";
|
|
40
|
-
}
|
|
41
|
-
if (this._iconNode.length === 0) {
|
|
42
|
-
const media = this.shadowRoot.querySelector(".card-media");
|
|
43
|
-
media.style.display = "none";
|
|
44
|
-
}
|
|
35
|
+
this.hasSlotController = new slot.HasSlotController(this, "image", "icon", "menu", "description");
|
|
45
36
|
}
|
|
46
37
|
handleImgSlotChange(e) {
|
|
47
38
|
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
48
39
|
if (childNodes.length > 1) {
|
|
49
|
-
|
|
40
|
+
console.error("Multiple elements passed into SgdsCard's image slot");
|
|
41
|
+
}
|
|
42
|
+
if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
|
|
43
|
+
console.error("Both image and icon slots cannot be used together in SgdsCard");
|
|
50
44
|
}
|
|
51
45
|
}
|
|
52
46
|
render() {
|
|
53
47
|
const tag = this.stretchedLink ? staticHtml_js.literal `a` : staticHtml_js.literal `div`;
|
|
54
48
|
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
55
49
|
const hasDescriptionSlot = this.hasSlotController.test("description");
|
|
50
|
+
const hasImageSlot = this.hasSlotController.test("image");
|
|
51
|
+
const hasIconSlot = this.hasSlotController.test("icon");
|
|
52
|
+
const hasMenuSlot = this.hasSlotController.test("menu");
|
|
53
|
+
const hasUpperSlot = this.hasSlotController.test("upper");
|
|
56
54
|
return staticHtml_js.html `
|
|
57
|
-
<${tag}
|
|
55
|
+
<${tag}
|
|
58
56
|
class="card ${classMap_js.classMap({
|
|
59
57
|
disabled: this.disabled
|
|
60
58
|
})}"
|
|
61
59
|
tabindex=${cardTabIndex}
|
|
62
60
|
>
|
|
63
61
|
<div class="card-tinted-bg"></div>
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<slot name="icon"></slot>
|
|
62
|
+
|
|
63
|
+
${hasMenuSlot ? staticHtml_js.html ` <slot name="menu"></slot> ` : lit.nothing}
|
|
64
|
+
<div class=${classMap_js.classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
|
|
65
|
+
<slot name="upper">
|
|
66
|
+
${hasImageSlot ? staticHtml_js.html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : lit.nothing}
|
|
67
|
+
${hasIconSlot ? staticHtml_js.html ` <slot name="icon"></slot> ` : lit.nothing}
|
|
68
|
+
</slot>
|
|
70
69
|
</div>
|
|
70
|
+
|
|
71
71
|
<div class="card-body">
|
|
72
72
|
<div class="card-header-container">
|
|
73
73
|
<div class="card-header">
|
|
@@ -89,12 +89,6 @@ class SgdsCard extends cardElement.CardElement {
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
SgdsCard.styles = [...cardElement.CardElement.styles, card["default"]];
|
|
92
|
-
tslib.__decorate([
|
|
93
|
-
decorators_js.queryAssignedNodes({ slot: "image", flatten: true })
|
|
94
|
-
], SgdsCard.prototype, "_imageNode", void 0);
|
|
95
|
-
tslib.__decorate([
|
|
96
|
-
decorators_js.queryAssignedNodes({ slot: "icon", flatten: true })
|
|
97
|
-
], SgdsCard.prototype, "_iconNode", void 0);
|
|
98
92
|
tslib.__decorate([
|
|
99
93
|
decorators_js.property({ type: String, reflect: true })
|
|
100
94
|
], SgdsCard.prototype, "imagePosition", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"sgds-card.cjs.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":["CardElement","HasSlotController","literal","html","classMap","nothing","cardStyle","__decorate","property"],"mappings":"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"}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { __decorate } from 'tslib';
|
|
3
|
-
import { nothing } from 'lit';
|
|
4
3
|
import { literal, html } from 'lit/static-html.js';
|
|
5
|
-
import {
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
6
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
6
|
import { CardElement } from '../../base/card-element.js';
|
|
8
7
|
import { HasSlotController } from '../../utils/slot.js';
|
|
9
8
|
import css_248z from './card.js';
|
|
9
|
+
import { nothing } from 'lit';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
|
|
13
13
|
* @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
|
|
14
14
|
* @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.
|
|
15
|
+
* @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
|
|
15
16
|
* @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
|
|
16
17
|
* @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
|
|
17
18
|
* @slot subtitle - The subtitle of the card
|
|
@@ -27,43 +28,42 @@ class SgdsCard extends CardElement {
|
|
|
27
28
|
this.imagePosition = "before";
|
|
28
29
|
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
29
30
|
this.imageAdjustment = "default";
|
|
30
|
-
this.hasSlotController = new HasSlotController(this, "description");
|
|
31
|
-
}
|
|
32
|
-
firstUpdated() {
|
|
33
|
-
if (this._imageNode.length === 0) {
|
|
34
|
-
const icon = this.shadowRoot.querySelector(".card-image");
|
|
35
|
-
icon.style.display = "none";
|
|
36
|
-
}
|
|
37
|
-
if (this._iconNode.length === 0) {
|
|
38
|
-
const media = this.shadowRoot.querySelector(".card-media");
|
|
39
|
-
media.style.display = "none";
|
|
40
|
-
}
|
|
31
|
+
this.hasSlotController = new HasSlotController(this, "image", "icon", "menu", "description");
|
|
41
32
|
}
|
|
42
33
|
handleImgSlotChange(e) {
|
|
43
34
|
const childNodes = e.target.assignedNodes({ flatten: true });
|
|
44
35
|
if (childNodes.length > 1) {
|
|
45
|
-
|
|
36
|
+
console.error("Multiple elements passed into SgdsCard's image slot");
|
|
37
|
+
}
|
|
38
|
+
if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
|
|
39
|
+
console.error("Both image and icon slots cannot be used together in SgdsCard");
|
|
46
40
|
}
|
|
47
41
|
}
|
|
48
42
|
render() {
|
|
49
43
|
const tag = this.stretchedLink ? literal `a` : literal `div`;
|
|
50
44
|
const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
|
|
51
45
|
const hasDescriptionSlot = this.hasSlotController.test("description");
|
|
46
|
+
const hasImageSlot = this.hasSlotController.test("image");
|
|
47
|
+
const hasIconSlot = this.hasSlotController.test("icon");
|
|
48
|
+
const hasMenuSlot = this.hasSlotController.test("menu");
|
|
49
|
+
const hasUpperSlot = this.hasSlotController.test("upper");
|
|
52
50
|
return html `
|
|
53
|
-
<${tag}
|
|
51
|
+
<${tag}
|
|
54
52
|
class="card ${classMap({
|
|
55
53
|
disabled: this.disabled
|
|
56
54
|
})}"
|
|
57
55
|
tabindex=${cardTabIndex}
|
|
58
56
|
>
|
|
59
57
|
<div class="card-tinted-bg"></div>
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<slot name="icon"></slot>
|
|
58
|
+
|
|
59
|
+
${hasMenuSlot ? html ` <slot name="menu"></slot> ` : nothing}
|
|
60
|
+
<div class=${classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
|
|
61
|
+
<slot name="upper">
|
|
62
|
+
${hasImageSlot ? html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}
|
|
63
|
+
${hasIconSlot ? html ` <slot name="icon"></slot> ` : nothing}
|
|
64
|
+
</slot>
|
|
66
65
|
</div>
|
|
66
|
+
|
|
67
67
|
<div class="card-body">
|
|
68
68
|
<div class="card-header-container">
|
|
69
69
|
<div class="card-header">
|
|
@@ -85,12 +85,6 @@ class SgdsCard extends CardElement {
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
SgdsCard.styles = [...CardElement.styles, css_248z];
|
|
88
|
-
__decorate([
|
|
89
|
-
queryAssignedNodes({ slot: "image", flatten: true })
|
|
90
|
-
], SgdsCard.prototype, "_imageNode", void 0);
|
|
91
|
-
__decorate([
|
|
92
|
-
queryAssignedNodes({ slot: "icon", flatten: true })
|
|
93
|
-
], SgdsCard.prototype, "_iconNode", void 0);
|
|
94
88
|
__decorate([
|
|
95
89
|
property({ type: String, reflect: true })
|
|
96
90
|
], SgdsCard.prototype, "imagePosition", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import {
|
|
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 } 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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"}
|