@politiet/sheriff-web-components 1.0.0-beta.17 → 1.0.0-beta.19
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/react-wrappers/SDSCheckboxGroupWrapper.d.ts +1 -1
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.js +1 -1
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.js +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.d.ts +1 -0
- package/dist/react-wrappers/SDSTextFieldWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.js +2 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +1 -0
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts +6 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +34 -4
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +2 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +9 -7
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-chip/sds-chip.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.js +0 -1
- package/dist/sds-chip/sds-chip.js.map +1 -1
- package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon-loader.js +2 -2
- package/dist/sds-icon/sds-icon-loader.js.map +1 -1
- package/dist/sds-icon/sds-icon.d.ts +3 -2
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.js +16 -13
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +5 -3
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +41 -19
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts +2 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +7 -7
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-switch/sds-switch.d.ts +1 -2
- package/dist/sds-switch/sds-switch.d.ts.map +1 -1
- package/dist/sds-switch/sds-switch.js +8 -15
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts +28 -19
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +121 -85
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sheriff-web-components.js +278 -182
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';
|
|
2
2
|
export declare const SDSCheckboxGroupWrapper: import("@lit/react").ReactWebComponent<SDSCheckboxGroup, {
|
|
3
|
-
|
|
3
|
+
onUpdate: string;
|
|
4
4
|
}>;
|
|
5
5
|
//# sourceMappingURL=SDSCheckboxGroupWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSCheckboxGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;IACtD,OAAO,EAAE,oBAAoB;IAC7B,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"SDSCheckboxGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;IACtD,OAAO,EAAE,oBAAoB;IAC7B,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAY;KACtB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';\n\nexport const SDSCheckboxGroupWrapper = createComponent({\n\ttagName: 'sds-checkbox-group',\n\telementClass: SDSCheckboxGroup,\n\treact: React,\n\tevents: {\n\t\tonUpdate: 'sds-update',\n\t},\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSRadioGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IACnD,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"SDSRadioGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IACnD,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAY;KACtB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSRadioGroup } from '../sds-radio-group/sds-radio-group';\n\nexport const SDSRadioGroupWrapper = createComponent({\n\ttagName: 'sds-radio-group',\n\telementClass: SDSRadioGroup,\n\treact: React,\n\tevents: {\n\t\tonUpdate: 'sds-update',\n\t},\n});\n"]}
|
|
@@ -2,6 +2,7 @@ import { SDSTextField } from '../sds-textfield/sds-textfield';
|
|
|
2
2
|
export declare const SDSTextFieldWrapper: import("@lit/react").ReactWebComponent<SDSTextField, {
|
|
3
3
|
onInput: string;
|
|
4
4
|
onChange: string;
|
|
5
|
+
onNativeChange: string;
|
|
5
6
|
onSelect: string;
|
|
6
7
|
onFocus: string;
|
|
7
8
|
onBlur: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSTextFieldWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextFieldWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,eAAO,MAAM,mBAAmB
|
|
1
|
+
{"version":3,"file":"SDSTextFieldWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextFieldWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,eAAO,MAAM,mBAAmB;;;;;;;EAY9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSTextFieldWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextFieldWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IAClD,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"SDSTextFieldWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextFieldWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IAClD,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,OAAO;QACjB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;KACd;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSTextField } from '../sds-textfield/sds-textfield';\n\nexport const SDSTextFieldWrapper = createComponent({\n\ttagName: 'sds-textfield',\n\telementClass: SDSTextField,\n\treact: React,\n\tevents: {\n\t\tonInput: 'input',\n\t\tonChange: 'input',\n\t\tonNativeChange: 'change',\n\t\tonSelect: 'select',\n\t\tonFocus: 'focus',\n\t\tonBlur: 'blur',\n\t},\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiJlB,CAAC"}
|
|
@@ -12,6 +12,7 @@ export const styles = css `
|
|
|
12
12
|
gap: var(--sds-spacing-3, 8px);
|
|
13
13
|
justify-content: center;
|
|
14
14
|
padding: var(--sds-spacing-3) var(--sds-spacing-4);
|
|
15
|
+
inline-size: 100%;
|
|
15
16
|
|
|
16
17
|
background-color: var(--sds-color-semantic-surface-action-default);
|
|
17
18
|
border: 2px solid var(--sds-color-semantic-border-action);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\t\tinline-size: 100%;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button:focus,\n\t:host(:focus) .give-focus {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\toutline-offset: 1px;\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
export interface SDSCheckboxProps {
|
|
3
3
|
name?: string;
|
|
4
4
|
label?: string;
|
|
@@ -6,6 +6,7 @@ export interface SDSCheckboxProps {
|
|
|
6
6
|
checked?: boolean;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
error?: boolean;
|
|
9
|
+
required?: boolean;
|
|
9
10
|
onChange?: (event: CustomEvent<{
|
|
10
11
|
checked: boolean;
|
|
11
12
|
value: string;
|
|
@@ -27,17 +28,21 @@ export declare class SDSCheckbox extends LitElement {
|
|
|
27
28
|
checked: boolean;
|
|
28
29
|
disabled: boolean;
|
|
29
30
|
error: boolean;
|
|
31
|
+
required: boolean;
|
|
30
32
|
control: HTMLInputElement;
|
|
31
33
|
private _initialChecked;
|
|
32
34
|
constructor();
|
|
33
35
|
connectedCallback(): void;
|
|
36
|
+
firstUpdated(_changedProperties: PropertyValues): void;
|
|
34
37
|
formResetCallback(): void;
|
|
38
|
+
private _validate;
|
|
35
39
|
private readonly _handleChange;
|
|
36
40
|
private readonly _handleFocus;
|
|
37
41
|
private readonly _handleBlur;
|
|
38
42
|
focus(): void;
|
|
39
43
|
blur(): void;
|
|
40
44
|
click(): void;
|
|
45
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
41
46
|
render(): import("lit-html").TemplateResult<1>;
|
|
42
47
|
}
|
|
43
48
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAQ3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAQ1B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAUjE,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
|
|
@@ -15,6 +15,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
15
15
|
this.checked = false;
|
|
16
16
|
this.disabled = false;
|
|
17
17
|
this.error = false;
|
|
18
|
+
this.required = false;
|
|
18
19
|
this._initialChecked = false;
|
|
19
20
|
this._handleChange = (event) => {
|
|
20
21
|
event.stopImmediatePropagation();
|
|
@@ -22,8 +23,8 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
22
23
|
const elem = event.target;
|
|
23
24
|
this.checked = elem.checked;
|
|
24
25
|
this.internals.setFormValue(elem.checked ? elem.value : '');
|
|
26
|
+
this._validate();
|
|
25
27
|
this.dispatchEvent(new CustomEvent('change', {
|
|
26
|
-
detail: { checked: this.checked, value: elem.value },
|
|
27
28
|
bubbles: true,
|
|
28
29
|
composed: true,
|
|
29
30
|
}));
|
|
@@ -32,7 +33,6 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
32
33
|
this._handleFocus = (event) => {
|
|
33
34
|
event.stopImmediatePropagation();
|
|
34
35
|
this.dispatchEvent(new CustomEvent('focus', {
|
|
35
|
-
detail: { checked: this.checked },
|
|
36
36
|
bubbles: true,
|
|
37
37
|
composed: true,
|
|
38
38
|
}));
|
|
@@ -40,7 +40,6 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
40
40
|
this._handleBlur = (event) => {
|
|
41
41
|
event.stopImmediatePropagation();
|
|
42
42
|
this.dispatchEvent(new CustomEvent('blur', {
|
|
43
|
-
detail: { checked: this.checked },
|
|
44
43
|
bubbles: true,
|
|
45
44
|
composed: true,
|
|
46
45
|
}));
|
|
@@ -56,11 +55,29 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
56
55
|
this.internals.setFormValue(this.value ? this.value : '');
|
|
57
56
|
}
|
|
58
57
|
}
|
|
58
|
+
firstUpdated(_changedProperties) {
|
|
59
|
+
super.firstUpdated(_changedProperties);
|
|
60
|
+
if (this.control) {
|
|
61
|
+
this.control.required = this.required;
|
|
62
|
+
}
|
|
63
|
+
this._validate();
|
|
64
|
+
}
|
|
59
65
|
formResetCallback() {
|
|
60
66
|
this.checked = this._initialChecked;
|
|
61
|
-
this.control
|
|
67
|
+
if (this.control) {
|
|
68
|
+
this.control.checked = this._initialChecked;
|
|
69
|
+
}
|
|
62
70
|
const resetValue = this.checked && this.value ? this.value : '';
|
|
63
71
|
this.internals.setFormValue(resetValue);
|
|
72
|
+
this._validate();
|
|
73
|
+
}
|
|
74
|
+
_validate() {
|
|
75
|
+
if (this.required && !this.checked) {
|
|
76
|
+
this.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
this.internals.setValidity({});
|
|
80
|
+
}
|
|
64
81
|
}
|
|
65
82
|
focus() {
|
|
66
83
|
if (!this.disabled)
|
|
@@ -74,6 +91,15 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
74
91
|
if (!this.disabled)
|
|
75
92
|
this.shadowRoot?.querySelector('input')?.click();
|
|
76
93
|
}
|
|
94
|
+
updated(changedProperties) {
|
|
95
|
+
super.updated(changedProperties);
|
|
96
|
+
if (changedProperties.has('required') && this.control) {
|
|
97
|
+
this.control.required = this.required;
|
|
98
|
+
}
|
|
99
|
+
if (changedProperties.has('checked')) {
|
|
100
|
+
this._validate();
|
|
101
|
+
}
|
|
102
|
+
}
|
|
77
103
|
render() {
|
|
78
104
|
const checkboxClasses = {
|
|
79
105
|
'sds-checkbox': true,
|
|
@@ -93,6 +119,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
93
119
|
value="${ifDefined(this.value)}"
|
|
94
120
|
?checked="${this.checked}"
|
|
95
121
|
?disabled="${this.disabled}"
|
|
122
|
+
?required="${this.required}"
|
|
96
123
|
@change="${this._handleChange}"
|
|
97
124
|
@focus="${this._handleFocus}"
|
|
98
125
|
@blur="${this._handleBlur}"
|
|
@@ -125,6 +152,9 @@ __decorate([
|
|
|
125
152
|
__decorate([
|
|
126
153
|
property({ type: Boolean, reflect: true })
|
|
127
154
|
], SDSCheckbox.prototype, "error", void 0);
|
|
155
|
+
__decorate([
|
|
156
|
+
property({ type: Boolean, reflect: true })
|
|
157
|
+
], SDSCheckbox.prototype, "required", void 0);
|
|
128
158
|
__decorate([
|
|
129
159
|
query('#control')
|
|
130
160
|
], SDSCheckbox.prototype, "control", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox.styles';\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@customElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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 connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(elem.checked ? elem.value : '');\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { checked: this.checked, value: elem.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tdetail: { checked: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tdetail: { checked: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox.styles';\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@customElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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 connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(elem.checked ? elem.value : '');\n\t\t\tthis._validate();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
|
|
@@ -14,8 +14,9 @@ export declare class SDSCheckboxGroup extends LitElement {
|
|
|
14
14
|
legend?: string;
|
|
15
15
|
helpText?: string;
|
|
16
16
|
errorMessage?: string;
|
|
17
|
-
private
|
|
17
|
+
private _selectedValues;
|
|
18
18
|
private readonly _handleCheckboxChange;
|
|
19
|
+
get value(): {};
|
|
19
20
|
render(): import("lit-html").TemplateResult<1>;
|
|
20
21
|
}
|
|
21
22
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACtE;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAGS,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAG7F,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACtE;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAGS,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAG7F,OAAO,CAAC,eAAe,CAAgB;IAEvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAepC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CA0Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
|
|
@@ -13,21 +13,23 @@ import '../sds-icon/sds-icon';
|
|
|
13
13
|
let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
|
-
this.
|
|
16
|
+
this._selectedValues = [];
|
|
17
17
|
this._handleCheckboxChange = (event) => {
|
|
18
18
|
const checkbox = event.target;
|
|
19
19
|
const value = checkbox.value;
|
|
20
20
|
const isChecked = checkbox.checked;
|
|
21
|
-
this.
|
|
22
|
-
? [...this.
|
|
23
|
-
: this.
|
|
24
|
-
this.dispatchEvent(new CustomEvent('
|
|
25
|
-
detail: { selectedValues: this.selectedValues },
|
|
21
|
+
this._selectedValues = isChecked
|
|
22
|
+
? [...this._selectedValues, value]
|
|
23
|
+
: this._selectedValues.filter((v) => v !== value);
|
|
24
|
+
this.dispatchEvent(new CustomEvent('sds-update', {
|
|
26
25
|
bubbles: true,
|
|
27
26
|
composed: true,
|
|
28
27
|
}));
|
|
29
28
|
};
|
|
30
29
|
}
|
|
30
|
+
get value() {
|
|
31
|
+
return { selectedValues: this._selectedValues };
|
|
32
|
+
}
|
|
31
33
|
render() {
|
|
32
34
|
const groupClasses = {
|
|
33
35
|
'sds-checkbox-group': true,
|
|
@@ -67,7 +69,7 @@ __decorate([
|
|
|
67
69
|
], SDSCheckboxGroup.prototype, "errorMessage", void 0);
|
|
68
70
|
__decorate([
|
|
69
71
|
state()
|
|
70
|
-
], SDSCheckboxGroup.prototype, "
|
|
72
|
+
], SDSCheckboxGroup.prototype, "_selectedValues", void 0);
|
|
71
73
|
SDSCheckboxGroup = __decorate([
|
|
72
74
|
customElement('sds-checkbox-group')
|
|
73
75
|
], SDSCheckboxGroup);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAWvB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAUE,
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAWvB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAUE,oBAAe,GAAa,EAAE,CAAC;QAEtB,0BAAqB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACrE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;YAClD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEnC,IAAI,CAAC,eAAe,GAAG,SAAS;gBAC/B,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;gBAClC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAEnD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IAgCH,CAAC;IA9BA,IAAI,KAAK;QACR,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,oBAAoB,EAAE,IAAI;YAC1B,2BAA2B,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;SACvD,CAAC;QAEF,OAAO,IAAI,CAAA;sBACS,QAAQ,CAAC,YAAY,CAAC;MACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAChG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;qBAE9E,IAAI,CAAC,qBAAqB;;MAEzC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;SAMF,IAAI,CAAC,YAAY;WACf;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AAzDD,UAAU;AACM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAiB;AACQ;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AACd;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAuB;AAGrF;IADP,KAAK,EAAE;yDAC+B;AAV3B,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA2D5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\n\n// Props Interface\nexport interface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@customElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) legend?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\n\t@state()\n\tprivate _selectedValues: string[] = [];\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis._selectedValues = isChecked\n\t\t\t? [...this._selectedValues, value]\n\t\t\t: this._selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tget value(): {} {\n\t\treturn { selectedValues: this._selectedValues };\n\t}\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-checkbox-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\">\n\t\t\t\t\t<slot @change=${this._handleCheckboxChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-checkbox-group__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"var(--sds-color-semantic-icon-critical)\"\n\t\t\t\t\t\t\t></sds-icon>\n\t\t\t\t\t\t\t${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox-group': SDSCheckboxGroup;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,OAAO,EAAE,WAAW,CAAgB;IACpC,IAAI,EAAE,QAAQ,CAAW;IACxB,OAAO,UAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAS1B,iBAAiB;IAMR,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IA0Bf,OAAO,CAAC,QAAQ,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,OAAO,EAAE,WAAW,CAAgB;IACpC,IAAI,EAAE,QAAQ,CAAW;IACxB,OAAO,UAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAS1B,iBAAiB;IAMR,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IA0Bf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAYtB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -25,7 +25,6 @@ let SDSChip = class SDSChip extends LitElement {
|
|
|
25
25
|
this.checked = !this.checked;
|
|
26
26
|
this.internals.setFormValue(this.checked && this.value ? this.value : '');
|
|
27
27
|
this.dispatchEvent(new CustomEvent('change', {
|
|
28
|
-
detail: { value: this.value, isChecked: this.checked },
|
|
29
28
|
bubbles: true,
|
|
30
29
|
composed: true,
|
|
31
30
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,sBAAsB,CAAC;AAiBvB,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAmBtC;QACC,KAAK,EAAE,CAAC;QAbT,iBAAiB;QAC0B,YAAO,GAAgB,YAAY,CAAC;QACpC,SAAI,GAAa,OAAO,CAAC;QACxB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAIrD,oBAAe,GAAY,KAAK,CAAC;QA6DxB,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;YAChD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAC1E,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACzB,
|
|
1
|
+
{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './sds-chip.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'small';\n\nexport interface SDSChipProps {\n\tvariant?: ChipVariant;\n\tsize?: ChipSize;\n\tchecked?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tdisabled?: boolean;\n\tonChange?: (event: CustomEvent<{ value: string | undefined; isChecked: boolean }>) => void;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@customElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: ChipVariant = 'selectable';\n\t@property({ type: String, reflect: true }) size: ChipSize = 'large';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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 connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t};\n\n\t\tif (this.variant === 'removable') {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tthis.checked = !this.checked;\n\t\tthis.internals.setFormValue(this.checked && this.value ? this.value : '');\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAqBhE,qBAAa,aAAa;IACzB,OAAO,CAAC,KAAK,CAA+C;IAC5D,OAAO,CAAC,UAAU,CAAkB;IAEpC,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED,QAAQ,EAAE,WAAW,CAAmD;IAExE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;IAsB9D,KAAK,IAAI,IAAI;IAIb,IAAI,aAAa,IAAI,WAAW,CAE/B;CACD"}
|
|
@@ -5,7 +5,7 @@ const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${n
|
|
|
5
5
|
.catch((error) => {
|
|
6
6
|
console.log(error);
|
|
7
7
|
});
|
|
8
|
-
const loadCdnIcons = (name) => fetch(`https://
|
|
8
|
+
const loadCdnIcons = (name) => fetch(`https://cdn.jsdelivr.net/npm/@politiet/sheriff-icons@1.0.0-rc.5/dist/assets/${name}.svg`).then((response) => {
|
|
9
9
|
if (!response.ok) {
|
|
10
10
|
throw new TypeError(`Sheriff: unknown icon: '${name}'`);
|
|
11
11
|
}
|
|
@@ -32,7 +32,7 @@ export class SDSIconLoader {
|
|
|
32
32
|
}
|
|
33
33
|
if (!cached) {
|
|
34
34
|
cached = this.resolver(name)
|
|
35
|
-
.catch(() => '
|
|
35
|
+
.catch(() => '')
|
|
36
36
|
.then((svg) => {
|
|
37
37
|
this.cache.set(name, svg);
|
|
38
38
|
return svg;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAAgB,CAAC,IAAY,EAAE,EAAE,CACpD,MAAM,CAAC,uCAAuC,IAAI,KAAK,CAAC;KACtD,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAC;AACZ,CAAC,CAAC;KACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IAChB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACpB,CAAC,CAAC,CAAC;AAEL,MAAM,YAAY,GAAgB,CAAC,IAAY,EAAE,EAAE,CAClD,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAAgB,CAAC,IAAY,EAAE,EAAE,CACpD,MAAM,CAAC,uCAAuC,IAAI,KAAK,CAAC;KACtD,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAC;AACZ,CAAC,CAAC;KACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IAChB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACpB,CAAC,CAAC,CAAC;AAEL,MAAM,YAAY,GAAgB,CAAC,IAAY,EAAE,EAAE,CAClD,KAAK,CAAC,+EAA+E,IAAI,MAAM,CAAC,CAAC,IAAI,CACpG,CAAC,QAAQ,EAAE,EAAE;IACZ,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QAClB,MAAM,IAAI,SAAS,CAAC,2BAA2B,IAAI,GAAG,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;AACxB,CAAC,CACD,CAAC;AAEH,MAAM,OAAO,aAAa;IAA1B;QACS,UAAK,GAAG,IAAI,GAAG,EAAoC,CAAC;QACpD,eAAU,GAAY,KAAK,CAAC;QAWpC,aAAQ,GAAgB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IA+BzE,CAAC;IAxCA,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC;IACxB,CAAC;IAED,IAAI,SAAS,CAAC,KAAc;QAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IACvD,CAAC;IAID,OAAO,CAAC,IAAY,EAAE,UAAiC;QACtD,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;YAChC,UAAU,CAAC,MAAM,CAAC,CAAC;YACnB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAC;YACb,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;iBAC1B,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;iBACf,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;gBAC1B,OAAO,GAAG,CAAC;YACZ,CAAC,CAAC,CAAC;YAEJ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAC9B,CAAC;QAED,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzB,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACpB,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;CACD","sourcesContent":["export type IconPromise = (iconName: string) => Promise<string>;\n\nconst loadLocalIcons: IconPromise = (name: string) =>\n\timport(`@politiet/sheriff-icons/dist/assets/${name}.js`)\n\t\t.then(({ default: svg }) => {\n\t\t\treturn svg;\n\t\t})\n\t\t.catch((error) => {\n\t\t\tconsole.log(error);\n\t\t});\n\nconst loadCdnIcons: IconPromise = (name: string) =>\n\tfetch(`https://cdn.jsdelivr.net/npm/@politiet/sheriff-icons@1.0.0-rc.5/dist/assets/${name}.svg`).then(\n\t\t(response) => {\n\t\t\tif (!response.ok) {\n\t\t\t\tthrow new TypeError(`Sheriff: unknown icon: '${name}'`);\n\t\t\t}\n\t\t\treturn response.text();\n\t\t}\n\t);\n\nexport class SDSIconLoader {\n\tprivate cache = new Map<string, string | Promise<string>>();\n\tprivate _loadLocal: boolean = false;\n\n\tget loadLocal(): boolean {\n\t\treturn this._loadLocal;\n\t}\n\n\tset loadLocal(value: boolean) {\n\t\tthis._loadLocal = value;\n\t\tthis.resolver = value ? loadLocalIcons : loadCdnIcons;\n\t}\n\n\tresolver: IconPromise = this._loadLocal ? loadLocalIcons : loadCdnIcons;\n\n\tresolve(name: string, onResolved: (svg: string) => void): void {\n\t\tlet cached = this.cache.get(name);\n\n\t\tif (typeof cached === 'string') {\n\t\t\tonResolved(cached);\n\t\t\treturn;\n\t\t}\n\n\t\tif (!cached) {\n\t\t\tcached = this.resolver(name)\n\t\t\t\t.catch(() => '')\n\t\t\t\t.then((svg) => {\n\t\t\t\t\tthis.cache.set(name, svg);\n\t\t\t\t\treturn svg;\n\t\t\t\t});\n\n\t\t\tthis.cache.set(name, cached);\n\t\t}\n\n\t\tcached.then(onResolved);\n\t}\n\n\tclear(): void {\n\t\tthis.cache.clear();\n\t}\n\n\tget currentLoader(): IconPromise {\n\t\treturn this.resolver;\n\t}\n}\n"]}
|
|
@@ -12,8 +12,9 @@ export declare class SDSIcon extends LitElement {
|
|
|
12
12
|
private svg;
|
|
13
13
|
render(): import("lit-html").TemplateResult<1>;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
|
-
*
|
|
15
|
+
* Wraps the icon loader's callback in a promise. Even if the loader
|
|
16
|
+
* calls the callback synchronously, awaiting the promise defers the
|
|
17
|
+
* property update to the next microtask.
|
|
17
18
|
*/
|
|
18
19
|
private fetchIcon;
|
|
19
20
|
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGpE,qBACa,OAAQ,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGpE,qBACa,OAAQ,SAAQ,UAAU;IACtC,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,EAAE,GAAG,GAAG,GAAG,CAAO;IACtB,KAAK,EAAE,MAAM,CAAM;IACnB,KAAK,EAAE,MAAM,CAAM;IAErD,OAAO,CAAC,GAAG,CAAc;IAEzB,MAAM;IAef;;;;OAIG;YACW,SAAS;IAWd,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAMjF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -27,29 +27,33 @@ let SDSIcon = SDSIcon_1 = class SDSIcon extends LitElement {
|
|
|
27
27
|
this.iconLoader.resolver = resolver;
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
return html
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
return html `
|
|
31
|
+
<div
|
|
32
|
+
class="sds-icon"
|
|
33
|
+
role="${ifDefined(this.label ? 'img' : undefined)}"
|
|
34
|
+
style="${ifDefined(this.color ? `color:${this.color}` : undefined)}"
|
|
35
|
+
aria-label="${ifDefined(this.label)}"
|
|
36
|
+
>
|
|
37
|
+
${this.name
|
|
37
38
|
? html `<slot aria-hidden="true">${unsafeSVG(this.svg)}</slot>`
|
|
38
39
|
: html `<slot aria-hidden="true"></slot>`}
|
|
39
|
-
|
|
40
|
+
</div>
|
|
41
|
+
`;
|
|
40
42
|
}
|
|
41
43
|
/**
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
+
* Wraps the icon loader's callback in a promise. Even if the loader
|
|
45
|
+
* calls the callback synchronously, awaiting the promise defers the
|
|
46
|
+
* property update to the next microtask.
|
|
44
47
|
*/
|
|
45
48
|
async fetchIcon() {
|
|
46
49
|
if (!this.name) {
|
|
47
50
|
this.svg = '';
|
|
48
51
|
return;
|
|
49
52
|
}
|
|
50
|
-
|
|
51
|
-
this.
|
|
53
|
+
const svg = await new Promise((resolve) => {
|
|
54
|
+
SDSIcon_1.iconLoader.resolve(this.name, resolve);
|
|
52
55
|
});
|
|
56
|
+
this.svg = svg;
|
|
53
57
|
}
|
|
54
58
|
updated(changedProperties) {
|
|
55
59
|
super.updated(changedProperties);
|
|
@@ -58,7 +62,6 @@ let SDSIcon = SDSIcon_1 = class SDSIcon extends LitElement {
|
|
|
58
62
|
}
|
|
59
63
|
}
|
|
60
64
|
};
|
|
61
|
-
// Styling
|
|
62
65
|
SDSIcon.styles = [styles];
|
|
63
66
|
SDSIcon.iconLoader = new SDSIconLoader();
|
|
64
67
|
__decorate([
|