@politiet/sheriff-web-components 1.0.0-beta.2 → 1.0.0-beta.3
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.
|
@@ -1,7 +1,33 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Specifies the valid types for the button.
|
|
4
|
+
* @typedef {'button' | 'submit' | 'reset'} ButtonType
|
|
5
|
+
*/
|
|
2
6
|
type ButtonType = 'button' | 'submit' | 'reset';
|
|
7
|
+
/**
|
|
8
|
+
* Visual style variants for the button.
|
|
9
|
+
* @typedef {'primary' | 'secondary' | 'tertiary' | 'critical'} ButtonVariant
|
|
10
|
+
*/
|
|
3
11
|
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';
|
|
12
|
+
/**
|
|
13
|
+
* Available size options for the button.
|
|
14
|
+
* @typedef {'large' | 'medium' | 'small'} ButtonSize
|
|
15
|
+
*/
|
|
4
16
|
type ButtonSize = 'large' | 'medium' | 'small';
|
|
17
|
+
/**
|
|
18
|
+
* Properties for the `<sds-button>` web component.
|
|
19
|
+
*
|
|
20
|
+
* @prop {ButtonType} [type='button'] - Specifies the button behavior: normal, submit, or reset.
|
|
21
|
+
* @prop {ButtonVariant} [variant='primary'] - Sets the visual style of the button.
|
|
22
|
+
* @prop {ButtonSize} [size='large'] - Defines the button's size.
|
|
23
|
+
* @prop {boolean} [disabled=false] - Disables the button if true.
|
|
24
|
+
* @prop {string} [name] - The name attribute for form submission.
|
|
25
|
+
* @prop {string} [value] - The value attribute for form submission.
|
|
26
|
+
* @prop {string} [form] - Associates the button with a form by its ID.
|
|
27
|
+
* @prop {(event: CustomEvent) => void} [onClick] - Callback fired on click events.
|
|
28
|
+
* @prop {(event: CustomEvent) => void} [onSubmit] - Callback fired on submit events.
|
|
29
|
+
* @prop {(event: CustomEvent) => void} [onReset] - Callback fired on reset events.
|
|
30
|
+
*/
|
|
5
31
|
export interface SDSButtonProps {
|
|
6
32
|
type?: ButtonType;
|
|
7
33
|
variant?: ButtonVariant;
|
|
@@ -14,22 +40,69 @@ export interface SDSButtonProps {
|
|
|
14
40
|
onSubmit?: (event: CustomEvent) => void;
|
|
15
41
|
onReset?: (event: CustomEvent) => void;
|
|
16
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* Custom element `<sds-button>` for rendering a styled button.
|
|
45
|
+
*
|
|
46
|
+
* @element sds-button
|
|
47
|
+
*/
|
|
17
48
|
export declare class SDSButton extends LitElement {
|
|
18
49
|
static styles: import("lit").CSSResult[];
|
|
19
50
|
static formAssociated: boolean;
|
|
20
51
|
readonly internals: ElementInternals;
|
|
52
|
+
/**
|
|
53
|
+
* The button type attribute.
|
|
54
|
+
* @default "button"
|
|
55
|
+
*/
|
|
21
56
|
type: ButtonType;
|
|
57
|
+
/**
|
|
58
|
+
* Visual variant of the button.
|
|
59
|
+
* @default "primary"
|
|
60
|
+
*/
|
|
22
61
|
variant: ButtonVariant;
|
|
62
|
+
/**
|
|
63
|
+
* The size of the button.
|
|
64
|
+
* @default "large"
|
|
65
|
+
*/
|
|
23
66
|
size: ButtonSize;
|
|
67
|
+
/**
|
|
68
|
+
* Indicates if the button is disabled.
|
|
69
|
+
* @default false
|
|
70
|
+
*/
|
|
24
71
|
disabled: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Name attribute of the button.
|
|
74
|
+
*/
|
|
25
75
|
name?: string;
|
|
76
|
+
/**
|
|
77
|
+
* Value attribute of the button.
|
|
78
|
+
*/
|
|
26
79
|
value: string;
|
|
80
|
+
/**
|
|
81
|
+
* The ID of the form associated with the button.
|
|
82
|
+
*/
|
|
27
83
|
form?: string;
|
|
28
84
|
constructor();
|
|
85
|
+
/**
|
|
86
|
+
* Internal click handler managing submit, reset, or regular clicks.
|
|
87
|
+
* @param event - The mouse click event.
|
|
88
|
+
*/
|
|
29
89
|
private readonly _handleClick;
|
|
90
|
+
/**
|
|
91
|
+
* Focuses the underlying button element.
|
|
92
|
+
*/
|
|
30
93
|
focus(): void;
|
|
94
|
+
/**
|
|
95
|
+
* Blurs the underlying button element.
|
|
96
|
+
*/
|
|
31
97
|
blur(): void;
|
|
98
|
+
/**
|
|
99
|
+
* Triggers a click on the underlying button element.
|
|
100
|
+
*/
|
|
32
101
|
click(): void;
|
|
102
|
+
/**
|
|
103
|
+
* Renders the button template.
|
|
104
|
+
* @returns The template for the button.
|
|
105
|
+
*/
|
|
33
106
|
render(): import("lit-html").TemplateResult<1>;
|
|
34
107
|
}
|
|
35
108
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;GAGG;AACH,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhD;;;GAGG;AACH,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AAEvE;;;GAGG;AACH,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,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,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;;;;GAIG;AACH,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAGlC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C;;;OAGG;IAEH,IAAI,EAAE,UAAU,CAAY;IAE5B;;;OAGG;IAEH,OAAO,EAAE,aAAa,CAAa;IAEnC;;;OAGG;IAEH,IAAI,EAAE,UAAU,CAAW;IAE3B;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAM;IAEnB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;;IAQd;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEF;;OAEG;IACM,KAAK,IAAI,IAAI;IAItB;;OAEG;IACM,IAAI,IAAI,IAAI;IAIrB;;OAEG;IACM,KAAK,IAAI,IAAI;IAItB;;;OAGG;IACM,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -9,14 +9,42 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
11
|
import { styles } from './sds-button.styles';
|
|
12
|
+
/**
|
|
13
|
+
* Custom element `<sds-button>` for rendering a styled button.
|
|
14
|
+
*
|
|
15
|
+
* @element sds-button
|
|
16
|
+
*/
|
|
12
17
|
let SDSButton = class SDSButton extends LitElement {
|
|
13
18
|
constructor() {
|
|
14
19
|
super();
|
|
20
|
+
/**
|
|
21
|
+
* The button type attribute.
|
|
22
|
+
* @default "button"
|
|
23
|
+
*/
|
|
15
24
|
this.type = 'button';
|
|
25
|
+
/**
|
|
26
|
+
* Visual variant of the button.
|
|
27
|
+
* @default "primary"
|
|
28
|
+
*/
|
|
16
29
|
this.variant = 'primary';
|
|
30
|
+
/**
|
|
31
|
+
* The size of the button.
|
|
32
|
+
* @default "large"
|
|
33
|
+
*/
|
|
17
34
|
this.size = 'large';
|
|
35
|
+
/**
|
|
36
|
+
* Indicates if the button is disabled.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
18
39
|
this.disabled = false;
|
|
40
|
+
/**
|
|
41
|
+
* Value attribute of the button.
|
|
42
|
+
*/
|
|
19
43
|
this.value = '';
|
|
44
|
+
/**
|
|
45
|
+
* Internal click handler managing submit, reset, or regular clicks.
|
|
46
|
+
* @param event - The mouse click event.
|
|
47
|
+
*/
|
|
20
48
|
this._handleClick = (event) => {
|
|
21
49
|
event.preventDefault();
|
|
22
50
|
event.stopImmediatePropagation();
|
|
@@ -71,18 +99,31 @@ let SDSButton = class SDSButton extends LitElement {
|
|
|
71
99
|
this.internals = this.attachInternals();
|
|
72
100
|
this.attachShadow({ mode: 'open', delegatesFocus: true });
|
|
73
101
|
}
|
|
102
|
+
/**
|
|
103
|
+
* Focuses the underlying button element.
|
|
104
|
+
*/
|
|
74
105
|
focus() {
|
|
75
106
|
if (!this.disabled)
|
|
76
107
|
this.shadowRoot?.querySelector('button')?.focus();
|
|
77
108
|
}
|
|
109
|
+
/**
|
|
110
|
+
* Blurs the underlying button element.
|
|
111
|
+
*/
|
|
78
112
|
blur() {
|
|
79
113
|
if (!this.disabled)
|
|
80
114
|
this.shadowRoot?.querySelector('button')?.blur();
|
|
81
115
|
}
|
|
116
|
+
/**
|
|
117
|
+
* Triggers a click on the underlying button element.
|
|
118
|
+
*/
|
|
82
119
|
click() {
|
|
83
120
|
if (!this.disabled)
|
|
84
121
|
this.shadowRoot?.querySelector('button')?.click();
|
|
85
122
|
}
|
|
123
|
+
/**
|
|
124
|
+
* Renders the button template.
|
|
125
|
+
* @returns The template for the button.
|
|
126
|
+
*/
|
|
86
127
|
render() {
|
|
87
128
|
const buttonClasses = {
|
|
88
129
|
'sds-button': true,
|
|
@@ -111,6 +152,7 @@ let SDSButton = class SDSButton extends LitElement {
|
|
|
111
152
|
}
|
|
112
153
|
};
|
|
113
154
|
SDSButton.styles = [styles];
|
|
155
|
+
// Enables form association for this component.
|
|
114
156
|
SDSButton.formAssociated = true;
|
|
115
157
|
__decorate([
|
|
116
158
|
property({ type: String, reflect: true })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAoBtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAoBxC;QACC,KAAK,EAAE,CAAC;QAdT,SAAI,GAAe,QAAQ,CAAC;QAG5B,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAe,OAAO,CAAC;QAEiB,aAAQ,GAAY,KAAK,CAAC;QAE3B,UAAK,GAAW,EAAE,CAAC;QAS7C,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;oBACnB,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACf,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;4BAC7C,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,UAAU,EAAE,IAAI;yBAChB,CAAC,CAAC;wBACH,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;wBAErD,IAAI,YAAY,EAAE,CAAC;4BAClB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gCACf,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;gCACzD,MAAM,WAAW,GAA2B,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gCACpF,WAAW,EAAE,MAAM,EAAE,CAAC;4BACvB,CAAC;iCAAM,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gCAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;4BAC9B,CAAC;wBACF,CAAC;wBACD,MAAM;oBACP,CAAC;oBAED,KAAK,OAAO,CAAC,CAAC,CAAC;wBACd,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE;4BAC3C,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,UAAU,EAAE,IAAI;yBAChB,CAAC,CAAC;wBACH,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;wBAEnD,IAAI,WAAW,EAAE,CAAC;4BACjB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gCACf,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;gCACzD,MAAM,WAAW,GAA2B,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gCACpF,WAAW,EAAE,KAAK,EAAE,CAAC;4BACtB,CAAC;iCAAM,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gCAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;4BAC7B,CAAC;wBACF,CAAC;wBACD,MAAM;oBACP,CAAC;oBAED;wBACC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;4BACxB,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;yBACd,CAAC,CACF,CAAC;gBACJ,CAAC;YACF,CAAC;QACF,CAAC,CAAC;QA3DD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IA2DQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACvE,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC;IACtE,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACvE,CAAC;IAEQ,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACrD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA;;;YAGD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;aACnB,QAAQ,CAAC,aAAa,CAAC;YACxB,IAAI,CAAC,IAAI;YACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;aACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;iBACjB,IAAI,CAAC,QAAQ;cAChB,IAAI,CAAC,YAAY;;;;;;GAM5B,CAAC;IACH,CAAC;;AAxHe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAE3B,wBAAc,GAAG,IAAI,AAAP,CAAQ;AAI7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACd;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACP;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACf;AAEiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA2B;AAC3B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAoB;AACnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAlB7C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA0HrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, 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';\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\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\n@customElement('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: 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\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?.submit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.submit();\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};\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\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":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, 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\n/**\n * Specifies the valid types for the button.\n * @typedef {'button' | 'submit' | 'reset'} ButtonType\n */\ntype ButtonType = 'button' | 'submit' | 'reset';\n\n/**\n * Visual style variants for the button.\n * @typedef {'primary' | 'secondary' | 'tertiary' | 'critical'} ButtonVariant\n */\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\n\n/**\n * Available size options for the button.\n * @typedef {'large' | 'medium' | 'small'} ButtonSize\n */\ntype ButtonSize = 'large' | 'medium' | 'small';\n\n/**\n * Properties for the `<sds-button>` web component.\n *\n * @prop {ButtonType} [type='button'] - Specifies the button behavior: normal, submit, or reset.\n * @prop {ButtonVariant} [variant='primary'] - Sets the visual style of the button.\n * @prop {ButtonSize} [size='large'] - Defines the button's size.\n * @prop {boolean} [disabled=false] - Disables the button if true.\n * @prop {string} [name] - The name attribute for form submission.\n * @prop {string} [value] - The value attribute for form submission.\n * @prop {string} [form] - Associates the button with a form by its ID.\n * @prop {(event: CustomEvent) => void} [onClick] - Callback fired on click events.\n * @prop {(event: CustomEvent) => void} [onSubmit] - Callback fired on submit events.\n * @prop {(event: CustomEvent) => void} [onReset] - Callback fired on reset events.\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\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\n/**\n * Custom element `<sds-button>` for rendering a styled button.\n *\n * @element sds-button\n */\n@customElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\t// Enables form association for this component.\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t/**\n\t * The button type attribute.\n\t * @default \"button\"\n\t */\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t/**\n\t * Visual variant of the button.\n\t * @default \"primary\"\n\t */\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t/**\n\t * The size of the button.\n\t * @default \"large\"\n\t */\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t/**\n\t * Indicates if the button is disabled.\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false;\n\n\t/**\n\t * Name attribute of the button.\n\t */\n\t@property({ type: String, reflect: true })\n\tname?: string;\n\n\t/**\n\t * Value attribute of the button.\n\t */\n\t@property({ type: String, reflect: true })\n\tvalue: string = '';\n\n\t/**\n\t * The ID of the form associated with the button.\n\t */\n\t@property({ type: String, reflect: true })\n\tform?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\t/**\n\t * Internal click handler managing submit, reset, or regular clicks.\n\t * @param event - The mouse click event.\n\t */\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?.submit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.submit();\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\t/**\n\t * Focuses the underlying button element.\n\t */\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\t/**\n\t * Blurs the underlying button element.\n\t */\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\t/**\n\t * Triggers a click on the underlying button element.\n\t */\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\t/**\n\t * Renders the button template.\n\t * @returns The template for the button.\n\t */\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};\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\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
|
|
@@ -854,15 +854,28 @@ let SDSButton = class extends r$2 {
|
|
|
854
854
|
this.internals = this.attachInternals();
|
|
855
855
|
this.attachShadow({ mode: "open", delegatesFocus: true });
|
|
856
856
|
}
|
|
857
|
+
/**
|
|
858
|
+
* Focuses the underlying button element.
|
|
859
|
+
*/
|
|
857
860
|
focus() {
|
|
858
861
|
if (!this.disabled) this.shadowRoot?.querySelector("button")?.focus();
|
|
859
862
|
}
|
|
863
|
+
/**
|
|
864
|
+
* Blurs the underlying button element.
|
|
865
|
+
*/
|
|
860
866
|
blur() {
|
|
861
867
|
if (!this.disabled) this.shadowRoot?.querySelector("button")?.blur();
|
|
862
868
|
}
|
|
869
|
+
/**
|
|
870
|
+
* Triggers a click on the underlying button element.
|
|
871
|
+
*/
|
|
863
872
|
click() {
|
|
864
873
|
if (!this.disabled) this.shadowRoot?.querySelector("button")?.click();
|
|
865
874
|
}
|
|
875
|
+
/**
|
|
876
|
+
* Renders the button template.
|
|
877
|
+
* @returns The template for the button.
|
|
878
|
+
*/
|
|
866
879
|
render() {
|
|
867
880
|
const buttonClasses = {
|
|
868
881
|
"sds-button": true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@politiet/sheriff-web-components",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.3",
|
|
4
4
|
"description": "Sheriff Design System Web Components Library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
"lit": "^3.2.0"
|
|
142
142
|
},
|
|
143
143
|
"peerDependencies": {
|
|
144
|
-
"@politiet/sheriff-css-framework": "^1.0.0
|
|
144
|
+
"@politiet/sheriff-css-framework": "^1.0.0"
|
|
145
145
|
},
|
|
146
146
|
"author": "Politiets IT-enhet",
|
|
147
147
|
"license": "ISC"
|