@politiet/sheriff-web-components 1.3.6 → 1.3.7
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/sds-button/sds-button.component.d.ts +41 -0
- package/dist/sds-button/sds-button.component.d.ts.map +1 -0
- package/dist/sds-button/sds-button.component.js +155 -0
- package/dist/sds-button/sds-button.component.js.map +1 -0
- package/dist/sds-button/sds-button.d.ts +2 -39
- package/dist/sds-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +2 -147
- package/dist/sds-button/sds-button.js.map +1 -1
- package/dist/sds-heading/sds-heading.component.d.ts +15 -0
- package/dist/sds-heading/sds-heading.component.d.ts.map +1 -0
- package/dist/sds-heading/sds-heading.component.js +53 -0
- package/dist/sds-heading/sds-heading.component.js.map +1 -0
- package/dist/sds-heading/sds-heading.d.ts +2 -13
- package/dist/sds-heading/sds-heading.d.ts.map +1 -1
- package/dist/sds-heading/sds-heading.js +2 -45
- package/dist/sds-heading/sds-heading.js.map +1 -1
- package/dist/sds-icon/sds-icon.component.d.ts +22 -0
- package/dist/sds-icon/sds-icon.component.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.component.js +81 -0
- package/dist/sds-icon/sds-icon.component.js.map +1 -0
- package/dist/sds-icon/sds-icon.d.ts +2 -20
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.js +3 -75
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sds-notification/sds-notification.component.d.ts +18 -0
- package/dist/sds-notification/sds-notification.component.d.ts.map +1 -0
- package/dist/sds-notification/sds-notification.component.js +71 -0
- package/dist/sds-notification/sds-notification.component.js.map +1 -0
- package/dist/sds-notification/sds-notification.d.ts +2 -14
- package/dist/sds-notification/sds-notification.d.ts.map +1 -1
- package/dist/sds-notification/sds-notification.js +2 -57
- package/dist/sds-notification/sds-notification.js.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.component.d.ts +12 -0
- package/dist/sds-paragraph/sds-paragraph.component.d.ts.map +1 -0
- package/dist/sds-paragraph/sds-paragraph.component.js +33 -0
- package/dist/sds-paragraph/sds-paragraph.component.js.map +1 -0
- package/dist/sds-paragraph/sds-paragraph.d.ts +2 -5
- package/dist/sds-paragraph/sds-paragraph.d.ts.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.js +2 -25
- package/dist/sds-paragraph/sds-paragraph.js.map +1 -1
- package/dist/sheriff-web-components.js +631 -551
- package/package.json +1 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
type ButtonType = 'button' | 'submit' | 'reset';
|
|
3
|
+
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';
|
|
4
|
+
type ButtonSize = 'large' | 'medium' | 'small';
|
|
5
|
+
type TargetTypes = '_self' | '_blank' | '_parent' | '_top';
|
|
6
|
+
export interface SDSButtonProps {
|
|
7
|
+
type?: ButtonType;
|
|
8
|
+
variant?: ButtonVariant;
|
|
9
|
+
size?: ButtonSize;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
name?: string;
|
|
12
|
+
value?: string;
|
|
13
|
+
form?: string;
|
|
14
|
+
href?: string;
|
|
15
|
+
target?: TargetTypes;
|
|
16
|
+
onClick?: (event: CustomEvent) => void;
|
|
17
|
+
onSubmit?: (event: CustomEvent) => void;
|
|
18
|
+
onReset?: (event: CustomEvent) => void;
|
|
19
|
+
}
|
|
20
|
+
export declare class SDSButtonComponent extends LitElement {
|
|
21
|
+
static styles: import("lit").CSSResult[];
|
|
22
|
+
static formAssociated: boolean;
|
|
23
|
+
readonly internals: ElementInternals;
|
|
24
|
+
type: ButtonType;
|
|
25
|
+
variant: ButtonVariant;
|
|
26
|
+
size: ButtonSize;
|
|
27
|
+
disabled: boolean;
|
|
28
|
+
name?: string;
|
|
29
|
+
value: string;
|
|
30
|
+
form?: string;
|
|
31
|
+
href?: string;
|
|
32
|
+
target?: TargetTypes;
|
|
33
|
+
constructor();
|
|
34
|
+
private readonly _handleClick;
|
|
35
|
+
focus(): void;
|
|
36
|
+
blur(): void;
|
|
37
|
+
click(): void;
|
|
38
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
39
|
+
}
|
|
40
|
+
export {};
|
|
41
|
+
//# sourceMappingURL=sds-button.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-button.component.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AACvE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC/C,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,qBAAa,kBAAmB,SAAQ,UAAU;IACjD,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAG5C,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAEiB,QAAQ,EAAE,OAAO,CAAS;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;;IAQhE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAyCf"}
|
|
@@ -0,0 +1,155 @@
|
|
|
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 { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
+
import { styles } from './sds-button.styles';
|
|
12
|
+
export class SDSButtonComponent extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super();
|
|
15
|
+
this.type = 'button';
|
|
16
|
+
this.variant = 'primary';
|
|
17
|
+
this.size = 'large';
|
|
18
|
+
this.disabled = false;
|
|
19
|
+
this.value = '';
|
|
20
|
+
this._handleClick = (event) => {
|
|
21
|
+
event.preventDefault();
|
|
22
|
+
event.stopImmediatePropagation();
|
|
23
|
+
if (!this.disabled) {
|
|
24
|
+
switch (this.type) {
|
|
25
|
+
case 'submit': {
|
|
26
|
+
const submitEvent = new CustomEvent('submit', {
|
|
27
|
+
bubbles: true,
|
|
28
|
+
composed: true,
|
|
29
|
+
cancelable: true,
|
|
30
|
+
});
|
|
31
|
+
const shouldSubmit = this.dispatchEvent(submitEvent);
|
|
32
|
+
if (shouldSubmit) {
|
|
33
|
+
if (this.form) {
|
|
34
|
+
const root = this.getRootNode();
|
|
35
|
+
const formElement = root.querySelector(`form#${this.form}`);
|
|
36
|
+
formElement?.requestSubmit();
|
|
37
|
+
}
|
|
38
|
+
else if (this.internals.form) {
|
|
39
|
+
this.internals.form.requestSubmit();
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
case 'reset': {
|
|
45
|
+
const resetEvent = new CustomEvent('reset', {
|
|
46
|
+
bubbles: true,
|
|
47
|
+
composed: true,
|
|
48
|
+
cancelable: true,
|
|
49
|
+
});
|
|
50
|
+
const shouldReset = this.dispatchEvent(resetEvent);
|
|
51
|
+
if (shouldReset) {
|
|
52
|
+
if (this.form) {
|
|
53
|
+
const root = this.getRootNode();
|
|
54
|
+
const formElement = root.querySelector(`form#${this.form}`);
|
|
55
|
+
formElement?.reset();
|
|
56
|
+
}
|
|
57
|
+
else if (this.internals.form) {
|
|
58
|
+
this.internals.form.reset();
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
break;
|
|
62
|
+
}
|
|
63
|
+
default:
|
|
64
|
+
this.dispatchEvent(new CustomEvent('click', {
|
|
65
|
+
bubbles: true,
|
|
66
|
+
composed: true,
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
this.internals = this.attachInternals();
|
|
72
|
+
this.attachShadow({ mode: 'open', delegatesFocus: true });
|
|
73
|
+
}
|
|
74
|
+
focus() {
|
|
75
|
+
if (!this.disabled)
|
|
76
|
+
this.shadowRoot?.querySelector('button')?.focus();
|
|
77
|
+
}
|
|
78
|
+
blur() {
|
|
79
|
+
if (!this.disabled)
|
|
80
|
+
this.shadowRoot?.querySelector('button')?.blur();
|
|
81
|
+
}
|
|
82
|
+
click() {
|
|
83
|
+
if (!this.disabled)
|
|
84
|
+
this.shadowRoot?.querySelector('button')?.click();
|
|
85
|
+
}
|
|
86
|
+
render() {
|
|
87
|
+
const buttonClasses = {
|
|
88
|
+
'sds-button': true,
|
|
89
|
+
'sds-button--secondary': this.variant === 'secondary',
|
|
90
|
+
'sds-button--tertiary': this.variant === 'tertiary',
|
|
91
|
+
'sds-button--critical': this.variant === 'critical',
|
|
92
|
+
'sds-button--medium': this.size === 'medium',
|
|
93
|
+
'sds-button--small': this.size === 'small',
|
|
94
|
+
'sds-button--as-link': !!this.href,
|
|
95
|
+
};
|
|
96
|
+
if (this.href) {
|
|
97
|
+
return html ` <a
|
|
98
|
+
id="link"
|
|
99
|
+
class="${classMap(buttonClasses)}"
|
|
100
|
+
href="${this.href}"
|
|
101
|
+
target="${ifDefined(this.target)}"
|
|
102
|
+
>
|
|
103
|
+
<slot name="before"></slot>
|
|
104
|
+
<slot></slot>
|
|
105
|
+
<slot name="after"></slot>
|
|
106
|
+
</a>`;
|
|
107
|
+
}
|
|
108
|
+
return html `
|
|
109
|
+
<button
|
|
110
|
+
id="control"
|
|
111
|
+
form="${ifDefined(this.form)}"
|
|
112
|
+
class="${classMap(buttonClasses)}"
|
|
113
|
+
type="${this.type}"
|
|
114
|
+
name="${ifDefined(this.name)}"
|
|
115
|
+
value="${ifDefined(this.value)}"
|
|
116
|
+
?disabled="${this.disabled}"
|
|
117
|
+
@click="${this._handleClick}"
|
|
118
|
+
>
|
|
119
|
+
<slot name="before"></slot>
|
|
120
|
+
<slot></slot>
|
|
121
|
+
<slot name="after"></slot>
|
|
122
|
+
</button>
|
|
123
|
+
`;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
SDSButtonComponent.styles = [styles];
|
|
127
|
+
SDSButtonComponent.formAssociated = true;
|
|
128
|
+
__decorate([
|
|
129
|
+
property({ type: String, reflect: true })
|
|
130
|
+
], SDSButtonComponent.prototype, "type", void 0);
|
|
131
|
+
__decorate([
|
|
132
|
+
property({ type: String, reflect: true })
|
|
133
|
+
], SDSButtonComponent.prototype, "variant", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
property({ type: String, reflect: true })
|
|
136
|
+
], SDSButtonComponent.prototype, "size", void 0);
|
|
137
|
+
__decorate([
|
|
138
|
+
property({ type: Boolean, reflect: true })
|
|
139
|
+
], SDSButtonComponent.prototype, "disabled", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
property({ type: String, reflect: true })
|
|
142
|
+
], SDSButtonComponent.prototype, "name", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
property({ type: String, reflect: true })
|
|
145
|
+
], SDSButtonComponent.prototype, "value", void 0);
|
|
146
|
+
__decorate([
|
|
147
|
+
property({ type: String, reflect: true })
|
|
148
|
+
], SDSButtonComponent.prototype, "form", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
property({ type: String, reflect: true })
|
|
151
|
+
], SDSButtonComponent.prototype, "href", void 0);
|
|
152
|
+
__decorate([
|
|
153
|
+
property({ type: String, reflect: true })
|
|
154
|
+
], SDSButtonComponent.prototype, "target", void 0);
|
|
155
|
+
//# sourceMappingURL=sds-button.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-button.component.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } 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 { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\ttype?: ButtonType;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tdisabled?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tform?: string;\n\thref?: string;\n\ttarget?: TargetTypes;\n\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\nexport class SDSButtonComponent extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) value: string = '';\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 }) target?: TargetTypes;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\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--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--critical': this.variant === 'critical',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\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\n\t\t\t\tid=\"link\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\thref=\"${this.href}\"\n\t\t\t\ttarget=\"${ifDefined(this.target)}\"\n\t\t\t>\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<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n"]}
|
|
@@ -1,46 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';
|
|
4
|
-
type ButtonSize = 'large' | 'medium' | 'small';
|
|
5
|
-
type TargetTypes = '_self' | '_blank' | '_parent' | '_top';
|
|
6
|
-
export interface SDSButtonProps {
|
|
7
|
-
type?: ButtonType;
|
|
8
|
-
variant?: ButtonVariant;
|
|
9
|
-
size?: ButtonSize;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
name?: string;
|
|
12
|
-
value?: string;
|
|
13
|
-
form?: string;
|
|
14
|
-
href?: string;
|
|
15
|
-
target?: TargetTypes;
|
|
16
|
-
onClick?: (event: CustomEvent) => void;
|
|
17
|
-
onSubmit?: (event: CustomEvent) => void;
|
|
18
|
-
onReset?: (event: CustomEvent) => void;
|
|
19
|
-
}
|
|
20
|
-
export declare class SDSButton extends LitElement {
|
|
21
|
-
static styles: import("lit").CSSResult[];
|
|
22
|
-
static formAssociated: boolean;
|
|
23
|
-
readonly internals: ElementInternals;
|
|
24
|
-
type: ButtonType;
|
|
25
|
-
variant: ButtonVariant;
|
|
26
|
-
size: ButtonSize;
|
|
27
|
-
disabled: boolean;
|
|
28
|
-
name?: string;
|
|
29
|
-
value: string;
|
|
30
|
-
form?: string;
|
|
31
|
-
href?: string;
|
|
32
|
-
target?: TargetTypes;
|
|
33
|
-
constructor();
|
|
34
|
-
private readonly _handleClick;
|
|
35
|
-
focus(): void;
|
|
36
|
-
blur(): void;
|
|
37
|
-
click(): void;
|
|
38
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
1
|
+
import { SDSButtonComponent } from './sds-button.component';
|
|
2
|
+
export declare class SDSButton extends SDSButtonComponent {
|
|
39
3
|
}
|
|
40
4
|
declare global {
|
|
41
5
|
interface HTMLElementTagNameMap {
|
|
42
6
|
'sds-button': SDSButton;
|
|
43
7
|
}
|
|
44
8
|
}
|
|
45
|
-
export {};
|
|
46
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,155 +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
|
-
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.type = 'button';
|
|
17
|
-
this.variant = 'primary';
|
|
18
|
-
this.size = 'large';
|
|
19
|
-
this.disabled = false;
|
|
20
|
-
this.value = '';
|
|
21
|
-
this._handleClick = (event) => {
|
|
22
|
-
event.preventDefault();
|
|
23
|
-
event.stopImmediatePropagation();
|
|
24
|
-
if (!this.disabled) {
|
|
25
|
-
switch (this.type) {
|
|
26
|
-
case 'submit': {
|
|
27
|
-
const submitEvent = new CustomEvent('submit', {
|
|
28
|
-
bubbles: true,
|
|
29
|
-
composed: true,
|
|
30
|
-
cancelable: true,
|
|
31
|
-
});
|
|
32
|
-
const shouldSubmit = this.dispatchEvent(submitEvent);
|
|
33
|
-
if (shouldSubmit) {
|
|
34
|
-
if (this.form) {
|
|
35
|
-
const root = this.getRootNode();
|
|
36
|
-
const formElement = root.querySelector(`form#${this.form}`);
|
|
37
|
-
formElement?.requestSubmit();
|
|
38
|
-
}
|
|
39
|
-
else if (this.internals.form) {
|
|
40
|
-
this.internals.form.requestSubmit();
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
break;
|
|
44
|
-
}
|
|
45
|
-
case 'reset': {
|
|
46
|
-
const resetEvent = new CustomEvent('reset', {
|
|
47
|
-
bubbles: true,
|
|
48
|
-
composed: true,
|
|
49
|
-
cancelable: true,
|
|
50
|
-
});
|
|
51
|
-
const shouldReset = this.dispatchEvent(resetEvent);
|
|
52
|
-
if (shouldReset) {
|
|
53
|
-
if (this.form) {
|
|
54
|
-
const root = this.getRootNode();
|
|
55
|
-
const formElement = root.querySelector(`form#${this.form}`);
|
|
56
|
-
formElement?.reset();
|
|
57
|
-
}
|
|
58
|
-
else if (this.internals.form) {
|
|
59
|
-
this.internals.form.reset();
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
break;
|
|
63
|
-
}
|
|
64
|
-
default:
|
|
65
|
-
this.dispatchEvent(new CustomEvent('click', {
|
|
66
|
-
bubbles: true,
|
|
67
|
-
composed: true,
|
|
68
|
-
}));
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
this.internals = this.attachInternals();
|
|
73
|
-
this.attachShadow({ mode: 'open', delegatesFocus: true });
|
|
74
|
-
}
|
|
75
|
-
focus() {
|
|
76
|
-
if (!this.disabled)
|
|
77
|
-
this.shadowRoot?.querySelector('button')?.focus();
|
|
78
|
-
}
|
|
79
|
-
blur() {
|
|
80
|
-
if (!this.disabled)
|
|
81
|
-
this.shadowRoot?.querySelector('button')?.blur();
|
|
82
|
-
}
|
|
83
|
-
click() {
|
|
84
|
-
if (!this.disabled)
|
|
85
|
-
this.shadowRoot?.querySelector('button')?.click();
|
|
86
|
-
}
|
|
87
|
-
render() {
|
|
88
|
-
const buttonClasses = {
|
|
89
|
-
'sds-button': true,
|
|
90
|
-
'sds-button--secondary': this.variant === 'secondary',
|
|
91
|
-
'sds-button--tertiary': this.variant === 'tertiary',
|
|
92
|
-
'sds-button--critical': this.variant === 'critical',
|
|
93
|
-
'sds-button--medium': this.size === 'medium',
|
|
94
|
-
'sds-button--small': this.size === 'small',
|
|
95
|
-
'sds-button--as-link': !!this.href,
|
|
96
|
-
};
|
|
97
|
-
if (this.href) {
|
|
98
|
-
return html ` <a
|
|
99
|
-
id="link"
|
|
100
|
-
class="${classMap(buttonClasses)}"
|
|
101
|
-
href="${this.href}"
|
|
102
|
-
target="${ifDefined(this.target)}"
|
|
103
|
-
>
|
|
104
|
-
<slot name="before"></slot>
|
|
105
|
-
<slot></slot>
|
|
106
|
-
<slot name="after"></slot>
|
|
107
|
-
</a>`;
|
|
108
|
-
}
|
|
109
|
-
return html `
|
|
110
|
-
<button
|
|
111
|
-
id="control"
|
|
112
|
-
form="${ifDefined(this.form)}"
|
|
113
|
-
class="${classMap(buttonClasses)}"
|
|
114
|
-
type="${this.type}"
|
|
115
|
-
name="${ifDefined(this.name)}"
|
|
116
|
-
value="${ifDefined(this.value)}"
|
|
117
|
-
?disabled="${this.disabled}"
|
|
118
|
-
@click="${this._handleClick}"
|
|
119
|
-
>
|
|
120
|
-
<slot name="before"></slot>
|
|
121
|
-
<slot></slot>
|
|
122
|
-
<slot name="after"></slot>
|
|
123
|
-
</button>
|
|
124
|
-
`;
|
|
125
|
-
}
|
|
8
|
+
import { SDSButtonComponent } from './sds-button.component';
|
|
9
|
+
let SDSButton = class SDSButton extends SDSButtonComponent {
|
|
126
10
|
};
|
|
127
|
-
SDSButton.styles = [styles];
|
|
128
|
-
SDSButton.formAssociated = true;
|
|
129
|
-
__decorate([
|
|
130
|
-
property({ type: String, reflect: true })
|
|
131
|
-
], SDSButton.prototype, "type", void 0);
|
|
132
|
-
__decorate([
|
|
133
|
-
property({ type: String, reflect: true })
|
|
134
|
-
], SDSButton.prototype, "variant", void 0);
|
|
135
|
-
__decorate([
|
|
136
|
-
property({ type: String, reflect: true })
|
|
137
|
-
], SDSButton.prototype, "size", void 0);
|
|
138
|
-
__decorate([
|
|
139
|
-
property({ type: Boolean, reflect: true })
|
|
140
|
-
], SDSButton.prototype, "disabled", void 0);
|
|
141
|
-
__decorate([
|
|
142
|
-
property({ type: String, reflect: true })
|
|
143
|
-
], SDSButton.prototype, "name", void 0);
|
|
144
|
-
__decorate([
|
|
145
|
-
property({ type: String, reflect: true })
|
|
146
|
-
], SDSButton.prototype, "value", void 0);
|
|
147
|
-
__decorate([
|
|
148
|
-
property({ type: String, reflect: true })
|
|
149
|
-
], SDSButton.prototype, "form", void 0);
|
|
150
|
-
__decorate([
|
|
151
|
-
property({ type: String, reflect: true })
|
|
152
|
-
], SDSButton.prototype, "href", void 0);
|
|
153
|
-
__decorate([
|
|
154
|
-
property({ type: String, reflect: true })
|
|
155
|
-
], SDSButton.prototype, "target", void 0);
|
|
156
11
|
SDSButton = __decorate([
|
|
157
12
|
guardedCustomElement('sds-button')
|
|
158
13
|
], SDSButton);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,
|
|
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,15 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
3
|
+
type DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
4
|
+
export interface SDSHeadingProps {
|
|
5
|
+
level?: Level;
|
|
6
|
+
as?: DisplaySize;
|
|
7
|
+
}
|
|
8
|
+
export declare class SDSHeadingComponent extends LitElement {
|
|
9
|
+
static styles: import("lit").CSSResult[];
|
|
10
|
+
level: Level;
|
|
11
|
+
as?: DisplaySize;
|
|
12
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
15
|
+
//# 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;AAKvC,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,KAAK,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CACjB;AAED,qBAAa,mBAAoB,SAAQ,UAAU;IAElD,OAAgB,MAAM,4BAAY;IAGN,KAAK,EAAE,KAAK,CAAQ;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IAEpC,MAAM;CA6Bf"}
|
|
@@ -0,0 +1,53 @@
|
|
|
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
|
+
// Reactive Props
|
|
15
|
+
this.level = 'h1';
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
const headingClasses = {
|
|
19
|
+
'sds-heading': true,
|
|
20
|
+
'sds-heading--xl': this.as === 'xl',
|
|
21
|
+
'sds-heading--l': this.as === 'l',
|
|
22
|
+
'sds-heading--m': this.as === 'm',
|
|
23
|
+
'sds-heading--s': this.as === 's',
|
|
24
|
+
'sds-heading--xs': this.as === 'xs',
|
|
25
|
+
};
|
|
26
|
+
const classes = classMap(headingClasses);
|
|
27
|
+
switch (this.level.toLowerCase()) {
|
|
28
|
+
case 'h1':
|
|
29
|
+
return html `<h1 class=${classes}><slot></slot></h1>`;
|
|
30
|
+
case 'h2':
|
|
31
|
+
return html `<h2 class=${classes}><slot></slot></h2>`;
|
|
32
|
+
case 'h3':
|
|
33
|
+
return html `<h3 class=${classes}><slot></slot></h3>`;
|
|
34
|
+
case 'h4':
|
|
35
|
+
return html `<h4 class=${classes}><slot></slot></h4>`;
|
|
36
|
+
case 'h5':
|
|
37
|
+
return html `<h5 class=${classes}><slot></slot></h5>`;
|
|
38
|
+
case 'h6':
|
|
39
|
+
return html `<h6 class=${classes}><slot></slot></h6>`;
|
|
40
|
+
default:
|
|
41
|
+
return html `<h1 class=${classes}><slot></slot></h1>`;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
// Styling
|
|
46
|
+
SDSHeadingComponent.styles = [styles];
|
|
47
|
+
__decorate([
|
|
48
|
+
property({ type: String })
|
|
49
|
+
], SDSHeadingComponent.prototype, "level", void 0);
|
|
50
|
+
__decorate([
|
|
51
|
+
property({ type: String })
|
|
52
|
+
], SDSHeadingComponent.prototype, "as", void 0);
|
|
53
|
+
//# 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;AAU9C,MAAM,OAAO,mBAAoB,SAAQ,UAAU;IAAnD;;QAIC,iBAAiB;QACW,UAAK,GAAU,IAAI,CAAC;IAgCjD,CAAC;IA7BS,MAAM;QACd,MAAM,cAAc,GAAG;YACtB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;YACnC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;SACnC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;QAEzC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YAClC,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD;gBACC,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;QACvD,CAAC;IACF,CAAC;;AAnCD,UAAU;AACM,0BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkB","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';\n\ntype Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';\n\nexport interface SDSHeadingProps {\n\tlevel?: Level;\n\tas?: DisplaySize;\n}\n\nexport class SDSHeadingComponent extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String }) level: Level = 'h1';\n\t@property({ type: String }) as?: DisplaySize;\n\n\toverride render() {\n\t\tconst headingClasses = {\n\t\t\t'sds-heading': true,\n\t\t\t'sds-heading--xl': this.as === 'xl',\n\t\t\t'sds-heading--l': this.as === 'l',\n\t\t\t'sds-heading--m': this.as === 'm',\n\t\t\t'sds-heading--s': this.as === 's',\n\t\t\t'sds-heading--xs': this.as === 'xs',\n\t\t};\n\n\t\tconst classes = classMap(headingClasses);\n\n\t\tswitch (this.level.toLowerCase()) {\n\t\t\tcase 'h1':\n\t\t\t\treturn html`<h1 class=${classes}><slot></slot></h1>`;\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=${classes}><slot></slot></h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=${classes}><slot></slot></h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=${classes}><slot></slot></h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=${classes}><slot></slot></h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=${classes}><slot></slot></h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h1 class=${classes}><slot></slot></h1>`;\n\t\t}\n\t}\n}\n"]}
|
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
type DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
4
|
-
export interface SDSHeadingProps {
|
|
5
|
-
level?: Level;
|
|
6
|
-
as?: DisplaySize;
|
|
7
|
-
}
|
|
8
|
-
export declare class SDSHeading extends LitElement {
|
|
9
|
-
static styles: import("lit").CSSResult[];
|
|
10
|
-
level: Level;
|
|
11
|
-
as?: DisplaySize;
|
|
12
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
1
|
+
import { SDSHeadingComponent } from './sds-heading.component';
|
|
2
|
+
export declare class SDSHeading extends SDSHeadingComponent {
|
|
13
3
|
}
|
|
14
4
|
declare global {
|
|
15
5
|
interface HTMLElementTagNameMap {
|
|
16
6
|
'sds-heading': SDSHeading;
|
|
17
7
|
}
|
|
18
8
|
}
|
|
19
|
-
export {};
|
|
20
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,53 +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
|
-
// Reactive Props
|
|
16
|
-
this.level = 'h1';
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
const headingClasses = {
|
|
20
|
-
'sds-heading': true,
|
|
21
|
-
'sds-heading--xl': this.as === 'xl',
|
|
22
|
-
'sds-heading--l': this.as === 'l',
|
|
23
|
-
'sds-heading--m': this.as === 'm',
|
|
24
|
-
'sds-heading--s': this.as === 's',
|
|
25
|
-
'sds-heading--xs': this.as === 'xs',
|
|
26
|
-
};
|
|
27
|
-
const classes = classMap(headingClasses);
|
|
28
|
-
switch (this.level.toLowerCase()) {
|
|
29
|
-
case 'h1':
|
|
30
|
-
return html `<h1 class=${classes}><slot></slot></h1>`;
|
|
31
|
-
case 'h2':
|
|
32
|
-
return html `<h2 class=${classes}><slot></slot></h2>`;
|
|
33
|
-
case 'h3':
|
|
34
|
-
return html `<h3 class=${classes}><slot></slot></h3>`;
|
|
35
|
-
case 'h4':
|
|
36
|
-
return html `<h4 class=${classes}><slot></slot></h4>`;
|
|
37
|
-
case 'h5':
|
|
38
|
-
return html `<h5 class=${classes}><slot></slot></h5>`;
|
|
39
|
-
case 'h6':
|
|
40
|
-
return html `<h6 class=${classes}><slot></slot></h6>`;
|
|
41
|
-
default:
|
|
42
|
-
return html `<h1 class=${classes}><slot></slot></h1>`;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
8
|
+
import { SDSHeadingComponent } from './sds-heading.component';
|
|
9
|
+
let SDSHeading = class SDSHeading extends SDSHeadingComponent {
|
|
45
10
|
};
|
|
46
|
-
// Styling
|
|
47
|
-
SDSHeading.styles = [styles];
|
|
48
|
-
__decorate([
|
|
49
|
-
property({ type: String })
|
|
50
|
-
], SDSHeading.prototype, "level", void 0);
|
|
51
|
-
__decorate([
|
|
52
|
-
property({ type: String })
|
|
53
|
-
], SDSHeading.prototype, "as", void 0);
|
|
54
11
|
SDSHeading = __decorate([
|
|
55
12
|
guardedCustomElement('sds-heading')
|
|
56
13
|
], SDSHeading);
|