@politiet/sheriff-web-components 2.1.3 → 2.2.0
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/dist/index.d.ts +5 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/sds-alert/sds-alert.component.d.ts +25 -0
- package/dist/sds-alert/sds-alert.component.d.ts.map +1 -0
- package/dist/sds-alert/sds-alert.component.js +73 -0
- package/dist/sds-alert/sds-alert.component.js.map +1 -0
- package/dist/sds-alert/sds-alert.d.ts +3 -19
- package/dist/sds-alert/sds-alert.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.js +2 -55
- package/dist/sds-alert/sds-alert.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +5 -4
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.component.d.ts +44 -0
- package/dist/sds-button/sds-button.component.d.ts.map +1 -0
- package/dist/sds-button/sds-button.component.js +159 -0
- package/dist/sds-button/sds-button.component.js.map +1 -0
- package/dist/sds-button/sds-button.d.ts +2 -42
- package/dist/sds-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +2 -151
- package/dist/sds-button/sds-button.js.map +1 -1
- package/dist/sds-heading/sds-heading.component.d.ts +16 -0
- package/dist/sds-heading/sds-heading.component.d.ts.map +1 -0
- package/dist/sds-heading/sds-heading.component.js +50 -0
- package/dist/sds-heading/sds-heading.component.js.map +1 -0
- package/dist/sds-heading/sds-heading.d.ts +2 -14
- package/dist/sds-heading/sds-heading.d.ts.map +1 -1
- package/dist/sds-heading/sds-heading.js +2 -42
- package/dist/sds-heading/sds-heading.js.map +1 -1
- package/dist/sds-icon/sds-icon.component.d.ts +31 -0
- package/dist/sds-icon/sds-icon.component.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.component.js +73 -0
- package/dist/sds-icon/sds-icon.component.js.map +1 -0
- package/dist/sds-icon/sds-icon.d.ts +2 -29
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.js +3 -67
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sds-text/sds-text.component.d.ts +17 -0
- package/dist/sds-text/sds-text.component.d.ts.map +1 -0
- package/dist/sds-text/sds-text.component.js +33 -0
- package/dist/sds-text/sds-text.component.js.map +1 -0
- package/dist/sds-text/sds-text.d.ts +2 -15
- package/dist/sds-text/sds-text.d.ts.map +1 -1
- package/dist/sds-text/sds-text.js +2 -25
- package/dist/sds-text/sds-text.js.map +1 -1
- package/dist/sheriff-web-components.js +118 -114
- package/package.json +1 -1
|
@@ -1,49 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
type ButtonType = 'button' | 'submit' | 'reset';
|
|
4
|
-
type ButtonVariant = SDS_VARIANTS | 'critical';
|
|
5
|
-
type ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
|
|
6
|
-
type TargetTypes = '_self' | '_blank' | '_parent' | '_top';
|
|
7
|
-
export interface SDSButtonProps {
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
form?: string;
|
|
10
|
-
href?: string;
|
|
11
|
-
icon?: boolean;
|
|
12
|
-
loading?: boolean;
|
|
13
|
-
name?: string;
|
|
14
|
-
size?: ButtonSize;
|
|
15
|
-
target?: TargetTypes;
|
|
16
|
-
type?: ButtonType;
|
|
17
|
-
value?: string;
|
|
18
|
-
variant?: ButtonVariant;
|
|
19
|
-
}
|
|
20
|
-
export declare class SDSButton extends LitElement {
|
|
21
|
-
static styles: import("lit").CSSResult[];
|
|
22
|
-
static formAssociated: boolean;
|
|
23
|
-
readonly internals: ElementInternals;
|
|
24
|
-
disabled: boolean;
|
|
25
|
-
icon: boolean;
|
|
26
|
-
loading: boolean;
|
|
27
|
-
form?: string;
|
|
28
|
-
href?: string;
|
|
29
|
-
name?: string;
|
|
30
|
-
size: ButtonSize;
|
|
31
|
-
target?: TargetTypes;
|
|
32
|
-
type: ButtonType;
|
|
33
|
-
value: string;
|
|
34
|
-
variant: ButtonVariant;
|
|
35
|
-
constructor();
|
|
36
|
-
updated(changed: PropertyValues): void;
|
|
37
|
-
private readonly _handleClick;
|
|
38
|
-
focus(): void;
|
|
39
|
-
blur(): void;
|
|
40
|
-
click(): void;
|
|
41
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
1
|
+
import { SDSButtonComponent } from './sds-button.component';
|
|
2
|
+
export declare class SDSButton extends SDSButtonComponent {
|
|
42
3
|
}
|
|
43
4
|
declare global {
|
|
44
5
|
interface HTMLElementTagNameMap {
|
|
45
6
|
'sds-button': SDSButton;
|
|
46
7
|
}
|
|
47
8
|
}
|
|
48
|
-
export {};
|
|
49
9
|
//# sourceMappingURL=sds-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,qBACa,SAAU,SAAQ,kBAAkB;CAAG;AAEpD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -4,159 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { LitElement, html, nothing } from 'lit';
|
|
8
|
-
import { property } from 'lit/decorators.js';
|
|
9
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
7
|
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
12
|
-
import {
|
|
13
|
-
let SDSButton = class SDSButton extends
|
|
14
|
-
constructor() {
|
|
15
|
-
super();
|
|
16
|
-
this.disabled = false;
|
|
17
|
-
this.icon = false;
|
|
18
|
-
this.loading = false;
|
|
19
|
-
this.size = 'lg';
|
|
20
|
-
this.type = 'button';
|
|
21
|
-
this.value = '';
|
|
22
|
-
this.variant = 'primary';
|
|
23
|
-
this._handleClick = (event) => {
|
|
24
|
-
event.preventDefault();
|
|
25
|
-
event.stopImmediatePropagation();
|
|
26
|
-
if (!this.disabled) {
|
|
27
|
-
switch (this.type) {
|
|
28
|
-
case 'submit': {
|
|
29
|
-
const submitEvent = new CustomEvent('submit', {
|
|
30
|
-
bubbles: true,
|
|
31
|
-
composed: true,
|
|
32
|
-
cancelable: true,
|
|
33
|
-
});
|
|
34
|
-
const shouldSubmit = this.dispatchEvent(submitEvent);
|
|
35
|
-
if (shouldSubmit) {
|
|
36
|
-
if (this.form) {
|
|
37
|
-
const root = this.getRootNode();
|
|
38
|
-
const formElement = root.querySelector(`form#${this.form}`);
|
|
39
|
-
formElement?.requestSubmit();
|
|
40
|
-
}
|
|
41
|
-
else if (this.internals.form) {
|
|
42
|
-
this.internals.form.requestSubmit();
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
break;
|
|
46
|
-
}
|
|
47
|
-
case 'reset': {
|
|
48
|
-
const resetEvent = new CustomEvent('reset', {
|
|
49
|
-
bubbles: true,
|
|
50
|
-
composed: true,
|
|
51
|
-
cancelable: true,
|
|
52
|
-
});
|
|
53
|
-
const shouldReset = this.dispatchEvent(resetEvent);
|
|
54
|
-
if (shouldReset) {
|
|
55
|
-
if (this.form) {
|
|
56
|
-
const root = this.getRootNode();
|
|
57
|
-
const formElement = root.querySelector(`form#${this.form}`);
|
|
58
|
-
formElement?.reset();
|
|
59
|
-
}
|
|
60
|
-
else if (this.internals.form) {
|
|
61
|
-
this.internals.form.reset();
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
break;
|
|
65
|
-
}
|
|
66
|
-
default:
|
|
67
|
-
this.dispatchEvent(new CustomEvent('click', {
|
|
68
|
-
bubbles: true,
|
|
69
|
-
composed: true,
|
|
70
|
-
}));
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
this.internals = this.attachInternals();
|
|
75
|
-
this.attachShadow({ mode: 'open', delegatesFocus: true });
|
|
76
|
-
}
|
|
77
|
-
updated(changed) {
|
|
78
|
-
// Cast critical variant to danger palette to prevent breaking changes
|
|
79
|
-
if (changed.has('variant') && this.variant === 'critical') {
|
|
80
|
-
this.setAttribute('data-palette', 'danger');
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
focus() {
|
|
84
|
-
if (!this.disabled)
|
|
85
|
-
this.shadowRoot?.querySelector('button')?.focus();
|
|
86
|
-
}
|
|
87
|
-
blur() {
|
|
88
|
-
if (!this.disabled)
|
|
89
|
-
this.shadowRoot?.querySelector('button')?.blur();
|
|
90
|
-
}
|
|
91
|
-
click() {
|
|
92
|
-
if (!this.disabled)
|
|
93
|
-
this.shadowRoot?.querySelector('button')?.click();
|
|
94
|
-
}
|
|
95
|
-
render() {
|
|
96
|
-
const buttonClasses = {
|
|
97
|
-
'sds-button': true,
|
|
98
|
-
'sds-button--as-link': !!this.href,
|
|
99
|
-
};
|
|
100
|
-
if (this.href) {
|
|
101
|
-
return html ` <a id="link" class="${classMap(buttonClasses)}" href="${this.href}" target="${ifDefined(this.target)}">
|
|
102
|
-
<slot name="before"></slot>
|
|
103
|
-
<slot></slot>
|
|
104
|
-
<slot name="after"></slot>
|
|
105
|
-
</a>`;
|
|
106
|
-
}
|
|
107
|
-
return html `
|
|
108
|
-
<button
|
|
109
|
-
id="control"
|
|
110
|
-
form="${ifDefined(this.form)}"
|
|
111
|
-
class="${classMap(buttonClasses)}"
|
|
112
|
-
type="${this.type}"
|
|
113
|
-
name="${ifDefined(this.name)}"
|
|
114
|
-
value="${ifDefined(this.value)}"
|
|
115
|
-
?disabled="${this.disabled}"
|
|
116
|
-
@click="${this._handleClick}"
|
|
117
|
-
>
|
|
118
|
-
${this.loading ? html `<sds-loader slot="before" ?contrast="${this.variant !== 'primary'}"></sds-loader>` : nothing} ${this.loading ? nothing : html `<slot name="before"></slot>`}
|
|
119
|
-
<slot></slot>
|
|
120
|
-
${this.loading ? nothing : html `<slot name="after"></slot>`}
|
|
121
|
-
</button>
|
|
122
|
-
`;
|
|
123
|
-
}
|
|
8
|
+
import { SDSButtonComponent } from './sds-button.component';
|
|
9
|
+
let SDSButton = class SDSButton extends SDSButtonComponent {
|
|
124
10
|
};
|
|
125
|
-
SDSButton.styles = [styles];
|
|
126
|
-
SDSButton.formAssociated = true;
|
|
127
|
-
__decorate([
|
|
128
|
-
property({ type: Boolean, reflect: true })
|
|
129
|
-
], SDSButton.prototype, "disabled", void 0);
|
|
130
|
-
__decorate([
|
|
131
|
-
property({ type: Boolean, reflect: true })
|
|
132
|
-
], SDSButton.prototype, "icon", void 0);
|
|
133
|
-
__decorate([
|
|
134
|
-
property({ type: Boolean, reflect: true })
|
|
135
|
-
], SDSButton.prototype, "loading", void 0);
|
|
136
|
-
__decorate([
|
|
137
|
-
property({ type: String, reflect: true })
|
|
138
|
-
], SDSButton.prototype, "form", void 0);
|
|
139
|
-
__decorate([
|
|
140
|
-
property({ type: String, reflect: true })
|
|
141
|
-
], SDSButton.prototype, "href", void 0);
|
|
142
|
-
__decorate([
|
|
143
|
-
property({ type: String, reflect: true })
|
|
144
|
-
], SDSButton.prototype, "name", void 0);
|
|
145
|
-
__decorate([
|
|
146
|
-
property({ type: String, reflect: true })
|
|
147
|
-
], SDSButton.prototype, "size", void 0);
|
|
148
|
-
__decorate([
|
|
149
|
-
property({ type: String, reflect: true })
|
|
150
|
-
], SDSButton.prototype, "target", void 0);
|
|
151
|
-
__decorate([
|
|
152
|
-
property({ type: String, reflect: true })
|
|
153
|
-
], SDSButton.prototype, "type", void 0);
|
|
154
|
-
__decorate([
|
|
155
|
-
property({ type: String, reflect: true })
|
|
156
|
-
], SDSButton.prototype, "value", void 0);
|
|
157
|
-
__decorate([
|
|
158
|
-
property({ type: String, reflect: true })
|
|
159
|
-
], SDSButton.prototype, "variant", void 0);
|
|
160
11
|
SDSButton = __decorate([
|
|
161
12
|
guardedCustomElement('sds-button')
|
|
162
13
|
], SDSButton);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDS_SIZES, SDS_VARIANTS } from '../types';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = SDS_VARIANTS | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\tdisabled?: boolean;\n\tform?: string;\n\thref?: string;\n\ticon?: boolean;\n\tloading?: boolean;\n\tname?: string;\n\tsize?: ButtonSize;\n\ttarget?: TargetTypes;\n\ttype?: ButtonType;\n\tvalue?: string;\n\tvariant?: ButtonVariant;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) icon: boolean = false;\n\t@property({ type: Boolean, reflect: true }) loading: boolean = false;\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) size: ButtonSize = 'lg';\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\t@property({ type: String, reflect: true }) type: ButtonType = 'button';\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) variant: ButtonVariant = 'primary';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to danger palette to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.setAttribute('data-palette', 'danger');\n\t\t}\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tif (this.href) {\n\t\t\treturn html` <a id=\"link\" class=\"${classMap(buttonClasses)}\" href=\"${this.href}\" target=\"${ifDefined(this.target)}\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t${this.loading ? html`<sds-loader slot=\"before\" ?contrast=\"${this.variant !== 'primary'}\"></sds-loader>` : nothing} ${this.loading ? nothing : html`<slot name=\"before\"></slot>`}\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.loading ? nothing : html`<slot name=\"after\"></slot>`}\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGrD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,kBAAkB;CAAG,CAAA;AAAvC,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAA8B","sourcesContent":["import { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSButtonComponent } from './sds-button.component';\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends SDSButtonComponent {}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { SDS_SIZES } from '../types';
|
|
3
|
+
type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
4
|
+
type DisplaySize = 'l' | 'm' | 's' | SDS_SIZES;
|
|
5
|
+
export interface SDSHeadingProps {
|
|
6
|
+
level?: Level;
|
|
7
|
+
size?: DisplaySize;
|
|
8
|
+
}
|
|
9
|
+
export declare class SDSHeadingComponent extends LitElement {
|
|
10
|
+
static styles: import("lit").CSSResult[];
|
|
11
|
+
level: SDSHeadingProps['level'];
|
|
12
|
+
size?: SDSHeadingProps['size'];
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
+
}
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=sds-heading.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-heading.component.d.ts","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,qBAAa,mBAAoB,SAAQ,UAAU;IAClD,OAAgB,MAAM,4BAAY;IAES,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAQ;IACvC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEjE,MAAM;CA2Bf"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
+
import { styles } from './sds-heading.styles';
|
|
11
|
+
export class SDSHeadingComponent extends LitElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.level = 'h1';
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
const headingClasses = {
|
|
18
|
+
'sds-heading': true,
|
|
19
|
+
'sds-heading--xl': this.size === 'xl',
|
|
20
|
+
'sds-heading--lg': this.size === 'l' || this.size === 'lg',
|
|
21
|
+
'sds-heading--md': this.size === 'm' || this.size === 'md',
|
|
22
|
+
'sds-heading--sm': this.size === 's' || this.size === 'sm',
|
|
23
|
+
'sds-heading--xs': this.size === 'xs',
|
|
24
|
+
};
|
|
25
|
+
switch (this.level?.toLowerCase()) {
|
|
26
|
+
case 'h1':
|
|
27
|
+
return html `<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;
|
|
28
|
+
case 'h2':
|
|
29
|
+
return html `<h2 class=${classMap(headingClasses)}><slot></slot></h2>`;
|
|
30
|
+
case 'h3':
|
|
31
|
+
return html `<h3 class=${classMap(headingClasses)}><slot></slot></h3>`;
|
|
32
|
+
case 'h4':
|
|
33
|
+
return html `<h4 class=${classMap(headingClasses)}><slot></slot></h4>`;
|
|
34
|
+
case 'h5':
|
|
35
|
+
return html `<h5 class=${classMap(headingClasses)}><slot></slot></h5>`;
|
|
36
|
+
case 'h6':
|
|
37
|
+
return html `<h6 class=${classMap(headingClasses)}><slot></slot></h6>`;
|
|
38
|
+
default:
|
|
39
|
+
return html `<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
SDSHeadingComponent.styles = [styles];
|
|
44
|
+
__decorate([
|
|
45
|
+
property({ type: String, reflect: true })
|
|
46
|
+
], SDSHeadingComponent.prototype, "level", void 0);
|
|
47
|
+
__decorate([
|
|
48
|
+
property({ type: String, reflect: true })
|
|
49
|
+
], SDSHeadingComponent.prototype, "size", void 0);
|
|
50
|
+
//# sourceMappingURL=sds-heading.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-heading.component.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAW9C,MAAM,OAAO,mBAAoB,SAAQ,UAAU;IAAnD;;QAG4C,UAAK,GAA6B,IAAI,CAAC;IA8BnF,CAAC;IA3BS,MAAM;QACd,MAAM,cAAc,GAAG;YACtB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACrC,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAC1D,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAC1D,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAC1D,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SACrC,CAAC;QAEF,QAAQ,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;YACnC,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;YACvE;gBACC,OAAO,IAAI,CAAA,aAAa,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC;QACxE,CAAC;IACF,CAAC;;AA/Be,0BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAwC;AACvC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-heading.styles';\nimport { SDS_SIZES } from '../types';\n\ntype Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype DisplaySize = 'l' | 'm' | 's' | SDS_SIZES;\n\nexport interface SDSHeadingProps {\n\tlevel?: Level;\n\tsize?: DisplaySize;\n}\n\nexport class SDSHeadingComponent extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) level: SDSHeadingProps['level'] = 'h1';\n\t@property({ type: String, reflect: true }) size?: SDSHeadingProps['size'];\n\n\toverride render() {\n\t\tconst headingClasses = {\n\t\t\t'sds-heading': true,\n\t\t\t'sds-heading--xl': this.size === 'xl',\n\t\t\t'sds-heading--lg': this.size === 'l' || this.size === 'lg',\n\t\t\t'sds-heading--md': this.size === 'm' || this.size === 'md',\n\t\t\t'sds-heading--sm': this.size === 's' || this.size === 'sm',\n\t\t\t'sds-heading--xs': this.size === 'xs',\n\t\t};\n\n\t\tswitch (this.level?.toLowerCase()) {\n\t\t\tcase 'h1':\n\t\t\t\treturn html`<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=${classMap(headingClasses)}><slot></slot></h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=${classMap(headingClasses)}><slot></slot></h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=${classMap(headingClasses)}><slot></slot></h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=${classMap(headingClasses)}><slot></slot></h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=${classMap(headingClasses)}><slot></slot></h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;\n\t\t}\n\t}\n}\n"]}
|
|
@@ -1,21 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
4
|
-
type DisplaySize = 'l' | 'm' | 's' | SDS_SIZES;
|
|
5
|
-
export interface SDSHeadingProps {
|
|
6
|
-
level?: Level;
|
|
7
|
-
size?: DisplaySize;
|
|
8
|
-
}
|
|
9
|
-
export declare class SDSHeading extends LitElement {
|
|
10
|
-
static styles: import("lit").CSSResult[];
|
|
11
|
-
level: SDSHeadingProps['level'];
|
|
12
|
-
size?: SDSHeadingProps['size'];
|
|
13
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
1
|
+
import { SDSHeadingComponent } from './sds-heading.component';
|
|
2
|
+
export declare class SDSHeading extends SDSHeadingComponent {
|
|
14
3
|
}
|
|
15
4
|
declare global {
|
|
16
5
|
interface HTMLElementTagNameMap {
|
|
17
6
|
'sds-heading': SDSHeading;
|
|
18
7
|
}
|
|
19
8
|
}
|
|
20
|
-
export {};
|
|
21
9
|
//# sourceMappingURL=sds-heading.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-heading.d.ts","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sds-heading.d.ts","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,qBACa,UAAW,SAAQ,mBAAmB;CAAG;AAEtD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
|
|
@@ -4,50 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { LitElement, html } from 'lit';
|
|
8
|
-
import { property } from 'lit/decorators.js';
|
|
9
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
10
7
|
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
11
|
-
import {
|
|
12
|
-
let SDSHeading = class SDSHeading extends
|
|
13
|
-
constructor() {
|
|
14
|
-
super(...arguments);
|
|
15
|
-
this.level = 'h1';
|
|
16
|
-
}
|
|
17
|
-
render() {
|
|
18
|
-
const headingClasses = {
|
|
19
|
-
'sds-heading': true,
|
|
20
|
-
'sds-heading--xl': this.size === 'xl',
|
|
21
|
-
'sds-heading--lg': this.size === 'l' || this.size === 'lg',
|
|
22
|
-
'sds-heading--md': this.size === 'm' || this.size === 'md',
|
|
23
|
-
'sds-heading--sm': this.size === 's' || this.size === 'sm',
|
|
24
|
-
'sds-heading--xs': this.size === 'xs',
|
|
25
|
-
};
|
|
26
|
-
switch (this.level?.toLowerCase()) {
|
|
27
|
-
case 'h1':
|
|
28
|
-
return html `<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;
|
|
29
|
-
case 'h2':
|
|
30
|
-
return html `<h2 class=${classMap(headingClasses)}><slot></slot></h2>`;
|
|
31
|
-
case 'h3':
|
|
32
|
-
return html `<h3 class=${classMap(headingClasses)}><slot></slot></h3>`;
|
|
33
|
-
case 'h4':
|
|
34
|
-
return html `<h4 class=${classMap(headingClasses)}><slot></slot></h4>`;
|
|
35
|
-
case 'h5':
|
|
36
|
-
return html `<h5 class=${classMap(headingClasses)}><slot></slot></h5>`;
|
|
37
|
-
case 'h6':
|
|
38
|
-
return html `<h6 class=${classMap(headingClasses)}><slot></slot></h6>`;
|
|
39
|
-
default:
|
|
40
|
-
return html `<h1 class=${classMap(headingClasses)}><slot></slot></h1>`;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
8
|
+
import { SDSHeadingComponent } from './sds-heading.component';
|
|
9
|
+
let SDSHeading = class SDSHeading extends SDSHeadingComponent {
|
|
43
10
|
};
|
|
44
|
-
SDSHeading.styles = [styles];
|
|
45
|
-
__decorate([
|
|
46
|
-
property({ type: String, reflect: true })
|
|
47
|
-
], SDSHeading.prototype, "level", void 0);
|
|
48
|
-
__decorate([
|
|
49
|
-
property({ type: String, reflect: true })
|
|
50
|
-
], SDSHeading.prototype, "size", void 0);
|
|
51
11
|
SDSHeading = __decorate([
|
|
52
12
|
guardedCustomElement('sds-heading')
|
|
53
13
|
], SDSHeading);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-heading.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sds-heading.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAGvD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,mBAAmB;CAAG,CAAA;AAAzC,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAA+B","sourcesContent":["import { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSHeadingComponent } from './sds-heading.component';\n\n@guardedCustomElement('sds-heading')\nexport class SDSHeading extends SDSHeadingComponent {}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-heading': SDSHeading;\n\t}\n}\n"]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { type IconPromise } from './sds-icon-loader';
|
|
3
|
+
import { SDS_SIZES } from '../types';
|
|
4
|
+
type IconSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;
|
|
5
|
+
export interface SDSIconProps {
|
|
6
|
+
name?: string;
|
|
7
|
+
size?: 's' | 'm' | IconSizes;
|
|
8
|
+
color?: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare class SDSIconComponent extends LitElement {
|
|
12
|
+
static styles: import("lit").CSSResult[];
|
|
13
|
+
private static readonly iconLoader;
|
|
14
|
+
static setLoadLocal(loadLocal: boolean): void;
|
|
15
|
+
static registerResolver(resolver: IconPromise): void;
|
|
16
|
+
name: string;
|
|
17
|
+
size?: 's' | 'm' | IconSizes;
|
|
18
|
+
color: string;
|
|
19
|
+
label: string;
|
|
20
|
+
private svg;
|
|
21
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
22
|
+
/**
|
|
23
|
+
* Wraps the icon loader's callback in a promise. Even if the loader
|
|
24
|
+
* calls the callback synchronously, awaiting the promise defers the
|
|
25
|
+
* property update to the next microtask.
|
|
26
|
+
*/
|
|
27
|
+
private fetchIcon;
|
|
28
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=sds-icon.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-icon.component.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxD,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAAY;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAEzD,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAI7C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAIT,IAAI,EAAE,MAAM,CAAM;IAClB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAM;IACnB,KAAK,EAAE,MAAM,CAAM;IAErD,OAAO,CAAC,GAAG,CAAc;IAEzB,MAAM;IAQf;;;;OAIG;YACW,SAAS;IAWd,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAMjF"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
+
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
11
|
+
import { SDSIconLoader } from './sds-icon-loader';
|
|
12
|
+
import { styles } from './sds-icon.styles';
|
|
13
|
+
export class SDSIconComponent extends LitElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.name = '';
|
|
17
|
+
this.color = '';
|
|
18
|
+
this.label = '';
|
|
19
|
+
this.svg = '';
|
|
20
|
+
}
|
|
21
|
+
static setLoadLocal(loadLocal) {
|
|
22
|
+
this.iconLoader.loadLocal = loadLocal;
|
|
23
|
+
}
|
|
24
|
+
static registerResolver(resolver) {
|
|
25
|
+
this.iconLoader.resolver = resolver;
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
return html `
|
|
29
|
+
<div class="sds-icon" role="${ifDefined(this.label ? 'img' : undefined)}" style="${ifDefined(this.color ? `color:${this.color}` : undefined)}" aria-label="${ifDefined(this.label)}">
|
|
30
|
+
${this.name ? html `<slot aria-hidden="true">${unsafeSVG(this.svg)}</slot>` : html `<slot aria-hidden="true"></slot>`}
|
|
31
|
+
</div>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Wraps the icon loader's callback in a promise. Even if the loader
|
|
36
|
+
* calls the callback synchronously, awaiting the promise defers the
|
|
37
|
+
* property update to the next microtask.
|
|
38
|
+
*/
|
|
39
|
+
async fetchIcon() {
|
|
40
|
+
if (!this.name) {
|
|
41
|
+
this.svg = '';
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const svg = await new Promise((resolve) => {
|
|
45
|
+
SDSIconComponent.iconLoader.resolve(this.name, resolve);
|
|
46
|
+
});
|
|
47
|
+
this.svg = svg;
|
|
48
|
+
}
|
|
49
|
+
updated(changedProperties) {
|
|
50
|
+
super.updated(changedProperties);
|
|
51
|
+
if (changedProperties.has('name') && this.name) {
|
|
52
|
+
void this.fetchIcon();
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
SDSIconComponent.styles = [styles];
|
|
57
|
+
SDSIconComponent.iconLoader = new SDSIconLoader();
|
|
58
|
+
__decorate([
|
|
59
|
+
property({ type: String, reflect: true })
|
|
60
|
+
], SDSIconComponent.prototype, "name", void 0);
|
|
61
|
+
__decorate([
|
|
62
|
+
property({ type: String, reflect: true })
|
|
63
|
+
], SDSIconComponent.prototype, "size", void 0);
|
|
64
|
+
__decorate([
|
|
65
|
+
property({ type: String, reflect: true })
|
|
66
|
+
], SDSIconComponent.prototype, "color", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
property({ type: String, reflect: true })
|
|
69
|
+
], SDSIconComponent.prototype, "label", void 0);
|
|
70
|
+
__decorate([
|
|
71
|
+
state()
|
|
72
|
+
], SDSIconComponent.prototype, "svg", void 0);
|
|
73
|
+
//# sourceMappingURL=sds-icon.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-icon.component.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAoB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAW3C,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAa4C,SAAI,GAAW,EAAE,CAAC;QAElB,UAAK,GAAW,EAAE,CAAC;QACnB,UAAK,GAAW,EAAE,CAAC;QAE7C,QAAG,GAAW,EAAE,CAAC;IAgCnC,CAAC;IA7CA,MAAM,CAAC,YAAY,CAAC,SAAkB;QACrC,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,QAAqB;QAC5C,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACrC,CAAC;IASQ,MAAM;QACd,OAAO,IAAI,CAAA;iCACoB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;MAC/K,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC;;GAEpH,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,SAAS;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QACD,MAAM,GAAG,GAAG,MAAM,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;YACjD,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IAChB,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChD,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;;AAhDe,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEV,2BAAU,GAAG,IAAI,aAAa,EAAE,AAAtB,CAAuB;AAUd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAmB;AAClB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA8B;AAC7B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAoB;AACnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAoB;AAE7C;IAAhB,KAAK,EAAE;6CAA0B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { SDSIconLoader, type IconPromise } from './sds-icon-loader';\nimport { styles } from './sds-icon.styles';\nimport { SDS_SIZES } from '../types';\n\ntype IconSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\nexport interface SDSIconProps {\n\tname?: string;\n\tsize?: 's' | 'm' | IconSizes;\n\tcolor?: string;\n\tlabel?: string;\n}\n\nexport class SDSIconComponent extends LitElement {\n\tstatic override styles = [styles];\n\n\tprivate static readonly iconLoader = new SDSIconLoader();\n\n\tstatic setLoadLocal(loadLocal: boolean): void {\n\t\tthis.iconLoader.loadLocal = loadLocal;\n\t}\n\n\tstatic registerResolver(resolver: IconPromise): void {\n\t\tthis.iconLoader.resolver = resolver;\n\t}\n\n\t@property({ type: String, reflect: true }) name: string = '';\n\t@property({ type: String, reflect: true }) size?: 's' | 'm' | IconSizes;\n\t@property({ type: String, reflect: true }) color: string = '';\n\t@property({ type: String, reflect: true }) label: string = '';\n\n\t@state() private svg: string = '';\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"sds-icon\" role=\"${ifDefined(this.label ? 'img' : undefined)}\" style=\"${ifDefined(this.color ? `color:${this.color}` : undefined)}\" aria-label=\"${ifDefined(this.label)}\">\n\t\t\t\t${this.name ? html`<slot aria-hidden=\"true\">${unsafeSVG(this.svg)}</slot>` : html`<slot aria-hidden=\"true\"></slot>`}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/**\n\t * Wraps the icon loader's callback in a promise. Even if the loader\n\t * calls the callback synchronously, awaiting the promise defers the\n\t * property update to the next microtask.\n\t */\n\tprivate async fetchIcon() {\n\t\tif (!this.name) {\n\t\t\tthis.svg = '';\n\t\t\treturn;\n\t\t}\n\t\tconst svg = await new Promise<string>((resolve) => {\n\t\t\tSDSIconComponent.iconLoader.resolve(this.name, resolve);\n\t\t});\n\t\tthis.svg = svg;\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('name') && this.name) {\n\t\t\tvoid this.fetchIcon();\n\t\t}\n\t}\n}\n"]}
|
|
@@ -1,36 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import { SDS_SIZES } from '../types';
|
|
4
|
-
type IconSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;
|
|
5
|
-
export interface SDSIconProps {
|
|
6
|
-
name?: string;
|
|
7
|
-
size?: 's' | 'm' | IconSizes;
|
|
8
|
-
color?: string;
|
|
9
|
-
label?: string;
|
|
10
|
-
}
|
|
11
|
-
export declare class SDSIcon extends LitElement {
|
|
12
|
-
static styles: import("lit").CSSResult[];
|
|
13
|
-
private static readonly iconLoader;
|
|
14
|
-
static setLoadLocal(loadLocal: boolean): void;
|
|
15
|
-
static registerResolver(resolver: IconPromise): void;
|
|
16
|
-
name: string;
|
|
17
|
-
size?: 's' | 'm' | IconSizes;
|
|
18
|
-
color: string;
|
|
19
|
-
label: string;
|
|
20
|
-
private svg;
|
|
21
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
22
|
-
/**
|
|
23
|
-
* Wraps the icon loader's callback in a promise. Even if the loader
|
|
24
|
-
* calls the callback synchronously, awaiting the promise defers the
|
|
25
|
-
* property update to the next microtask.
|
|
26
|
-
*/
|
|
27
|
-
private fetchIcon;
|
|
28
|
-
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
1
|
+
import { SDSIconComponent } from './sds-icon.component';
|
|
2
|
+
export declare class SDSIcon extends SDSIconComponent {
|
|
29
3
|
}
|
|
30
4
|
declare global {
|
|
31
5
|
interface HTMLElementTagNameMap {
|
|
32
6
|
'sds-icon': SDSIcon;
|
|
33
7
|
}
|
|
34
8
|
}
|
|
35
|
-
export {};
|
|
36
9
|
//# sourceMappingURL=sds-icon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,qBACa,OAAQ,SAAQ,gBAAgB;CAAG;AAEhD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|