@politiet/sheriff-web-components 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +3 -13
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +3 -13
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts +77 -0
- package/dist/sds-textarea/sds-textarea.d.ts.map +1 -0
- package/dist/sds-textarea/sds-textarea.js +240 -0
- package/dist/sds-textarea/sds-textarea.js.map +1 -0
- package/dist/sds-textarea/sds-textarea.spec.d.ts +2 -0
- package/dist/sds-textarea/sds-textarea.spec.d.ts.map +1 -0
- package/dist/sds-textarea/sds-textarea.spec.js +171 -0
- package/dist/sds-textarea/sds-textarea.spec.js.map +1 -0
- package/dist/sds-textarea/sds-textarea.styles.d.ts +2 -0
- package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -0
- package/dist/sds-textarea/sds-textarea.styles.js +118 -0
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -0
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +2 -12
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sheriff-web-components.js +560 -235
- package/dist/utils/renderErrorMessage.d.ts +3 -0
- package/dist/utils/renderErrorMessage.d.ts.map +1 -0
- package/dist/utils/renderErrorMessage.js +9 -0
- package/dist/utils/renderErrorMessage.js.map +1 -0
- package/dist/utils/types.d.ts +2 -0
- package/dist/utils/types.d.ts.map +1 -0
- package/dist/utils/types.js +2 -0
- package/dist/utils/types.js.map +1 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -15,5 +15,6 @@ export { SDSRadio } from './sds-radio/sds-radio';
|
|
|
15
15
|
export { SDSRadioGroup } from './sds-radio-group/sds-radio-group';
|
|
16
16
|
export { SDSSwitch } from './sds-switch/sds-switch';
|
|
17
17
|
export { SDSText } from './sds-text/sds-text';
|
|
18
|
+
export { SDSTextArea } from './sds-textarea/sds-textarea';
|
|
18
19
|
export { SDSTextField } from './sds-textfield/sds-textfield';
|
|
19
20
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -15,5 +15,6 @@ export { SDSRadio } from './sds-radio/sds-radio';
|
|
|
15
15
|
export { SDSRadioGroup } from './sds-radio-group/sds-radio-group';
|
|
16
16
|
export { SDSSwitch } from './sds-switch/sds-switch';
|
|
17
17
|
export { SDSText } from './sds-text/sds-text';
|
|
18
|
+
export { SDSTextArea } from './sds-textarea/sds-textarea';
|
|
18
19
|
export { SDSTextField } from './sds-textfield/sds-textfield';
|
|
19
20
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC","sourcesContent":["export { SDSButton } from './sds-button/sds-button';\nexport { SDSCheckbox } from './sds-checkbox/sds-checkbox';\nexport { SDSCheckboxGroup } from './sds-checkbox-group/sds-checkbox-group';\nexport { SDSChip } from './sds-chip/sds-chip';\nexport { SDSDetail } from './sds-detail/sds-detail';\nexport { SDSHeading } from './sds-heading/sds-heading';\nexport { SDSIcon } from './sds-icon/sds-icon';\nexport { SDSLabel } from './sds-label/sds-label';\nexport { SDSLink } from './sds-link/sds-link';\nexport { SDSLoader } from './sds-loader/sds-loader';\nexport { SDSNavCard } from './sds-nav-card/sds-nav-card';\nexport { SDSNotification } from './sds-notification/sds-notification';\nexport { SDSParagraph } from './sds-paragraph/sds-paragraph';\nexport { SDSRadio } from './sds-radio/sds-radio';\nexport { SDSRadioGroup } from './sds-radio-group/sds-radio-group';\nexport { SDSSwitch } from './sds-switch/sds-switch';\nexport { SDSText } from './sds-text/sds-text';\nexport { SDSTextField } from './sds-textfield/sds-textfield';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC","sourcesContent":["export { SDSButton } from './sds-button/sds-button';\nexport { SDSCheckbox } from './sds-checkbox/sds-checkbox';\nexport { SDSCheckboxGroup } from './sds-checkbox-group/sds-checkbox-group';\nexport { SDSChip } from './sds-chip/sds-chip';\nexport { SDSDetail } from './sds-detail/sds-detail';\nexport { SDSHeading } from './sds-heading/sds-heading';\nexport { SDSIcon } from './sds-icon/sds-icon';\nexport { SDSLabel } from './sds-label/sds-label';\nexport { SDSLink } from './sds-link/sds-link';\nexport { SDSLoader } from './sds-loader/sds-loader';\nexport { SDSNavCard } from './sds-nav-card/sds-nav-card';\nexport { SDSNotification } from './sds-notification/sds-notification';\nexport { SDSParagraph } from './sds-paragraph/sds-paragraph';\nexport { SDSRadio } from './sds-radio/sds-radio';\nexport { SDSRadioGroup } from './sds-radio-group/sds-radio-group';\nexport { SDSSwitch } from './sds-switch/sds-switch';\nexport { SDSText } from './sds-text/sds-text';\nexport { SDSTextArea } from './sds-textarea/sds-textarea';\nexport { SDSTextField } from './sds-textfield/sds-textfield';\n"]}
|
|
@@ -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;AAMhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,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;AAMhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAI9B,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,CAapC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
|
|
@@ -11,6 +11,7 @@ import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
|
11
11
|
import { styles } from './sds-checkbox-group.styles';
|
|
12
12
|
import '../sds-checkbox/sds-checkbox';
|
|
13
13
|
import '../sds-icon/sds-icon';
|
|
14
|
+
import { renderErrorMessage } from '../utils/renderErrorMessage';
|
|
14
15
|
let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
|
|
15
16
|
constructor() {
|
|
16
17
|
super(...arguments);
|
|
@@ -19,9 +20,7 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
|
|
|
19
20
|
const checkbox = event.target;
|
|
20
21
|
const value = checkbox.value;
|
|
21
22
|
const isChecked = checkbox.checked;
|
|
22
|
-
this._selectedValues = isChecked
|
|
23
|
-
? [...this._selectedValues, value]
|
|
24
|
-
: this._selectedValues.filter((v) => v !== value);
|
|
23
|
+
this._selectedValues = isChecked ? [...this._selectedValues, value] : this._selectedValues.filter((v) => v !== value);
|
|
25
24
|
this.dispatchEvent(new CustomEvent('sds-update', {
|
|
26
25
|
bubbles: true,
|
|
27
26
|
composed: true,
|
|
@@ -43,16 +42,7 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
|
|
|
43
42
|
<div class="sds-checkbox-group__checkboxes">
|
|
44
43
|
<slot @change=${this._handleCheckboxChange}></slot>
|
|
45
44
|
</div>
|
|
46
|
-
${this.errorMessage
|
|
47
|
-
? html `<p class="sds-checkbox-group__error-message">
|
|
48
|
-
<sds-icon
|
|
49
|
-
name="warning-material-filled"
|
|
50
|
-
size="m"
|
|
51
|
-
color="var(--sds-color-semantic-icon-critical)"
|
|
52
|
-
></sds-icon>
|
|
53
|
-
${this.errorMessage}
|
|
54
|
-
</p>`
|
|
55
|
-
: nothing}
|
|
45
|
+
${renderErrorMessage(this.errorMessage, 'sds-checkbox-group__error-message')}
|
|
56
46
|
</fieldset>
|
|
57
47
|
`;
|
|
58
48
|
}
|
|
@@ -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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;
|
|
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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAW1D,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,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAEtH,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IAuBH,CAAC;IArBA,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,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,mCAAmC,CAAC;;GAE7E,CAAC;IACH,CAAC;;AA9CD,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,oBAAoB,CAAC,oBAAoB,CAAC;GAC9B,gBAAgB,CAgD5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\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@guardedCustomElement('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 ? [...this._selectedValues, value] : 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${renderErrorMessage(this.errorMessage, 'sds-checkbox-group__error-message')}\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-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAG9B;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,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,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAErE,OAAO,CAAC,cAAc,CAAuB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAajC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
|
|
@@ -10,14 +10,13 @@ import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
|
10
10
|
import { styles } from './sds-radio-group.styles';
|
|
11
11
|
import '../sds-radio/sds-radio';
|
|
12
12
|
import '../sds-icon/sds-icon';
|
|
13
|
+
import { renderErrorMessage } from '../utils/renderErrorMessage';
|
|
13
14
|
let SDSRadioGroup = class SDSRadioGroup extends LitElement {
|
|
14
15
|
constructor() {
|
|
15
16
|
super(...arguments);
|
|
16
17
|
this._selectedValue = null;
|
|
17
18
|
this._handleRadioChange = (event) => {
|
|
18
|
-
const target = event
|
|
19
|
-
.composedPath()
|
|
20
|
-
.find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO');
|
|
19
|
+
const target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO');
|
|
21
20
|
if (target) {
|
|
22
21
|
this._selectedValue = target.getAttribute('value') || null;
|
|
23
22
|
this.dispatchEvent(new CustomEvent('sds-update', {
|
|
@@ -38,16 +37,7 @@ let SDSRadioGroup = class SDSRadioGroup extends LitElement {
|
|
|
38
37
|
<div class="sds-radio-group__radios" @change=${this._handleRadioChange}>
|
|
39
38
|
<slot></slot>
|
|
40
39
|
</div>
|
|
41
|
-
${this.errorMessage
|
|
42
|
-
? html `<p class="sds-radio-group__error-message">
|
|
43
|
-
<sds-icon
|
|
44
|
-
name="warning-material-filled"
|
|
45
|
-
size="m"
|
|
46
|
-
color="var(--sds-color-semantic-icon-critical)"
|
|
47
|
-
></sds-icon>
|
|
48
|
-
${this.errorMessage}
|
|
49
|
-
</p>`
|
|
50
|
-
: nothing}
|
|
40
|
+
${renderErrorMessage(this.errorMessage, 'sds-radio-group__error-message')}
|
|
51
41
|
</fieldset>
|
|
52
42
|
`;
|
|
53
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAe1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOW,mBAAc,GAAkB,IAAI,CAAC;QAErC,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,CAAoC,CAAC;YAE7I,IAAI,MAAM,EAAE,CAAC;gBACZ,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;gBAE3D,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IAkBH,CAAC;IAhBA,IAAI,KAAK;QACR,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC/C,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;MAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAC7F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;mDAC7C,IAAI,CAAC,kBAAkB;;;MAGpE,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,gCAAgC,CAAC;;GAE1E,CAAC;IACH,CAAC;;AAtCe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AACQ;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CAAmB;AACd;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDAAuB;AAE7D;IAAhB,KAAK,EAAE;qDAA8C;AAP1C,aAAa;IADzB,oBAAoB,CAAC,iBAAiB,CAAC;GAC3B,aAAa,CAwCzB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValue: string | null }>) => void;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: string;\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: string;\n\n\t@state() private _selectedValue: string | null = null;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('sds-update', {\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\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<fieldset class=\"sds-radio-group\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-radio-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-radio-group__radios\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-radio-group__error-message')}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '../sds-icon/sds-icon';
|
|
3
|
+
export interface SDSTextAreaProps {
|
|
4
|
+
value?: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
'help-text'?: string;
|
|
9
|
+
'error-message'?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
readonly?: boolean;
|
|
12
|
+
autocomplete?: HTMLTextAreaElement['autocomplete'];
|
|
13
|
+
required?: boolean;
|
|
14
|
+
rows?: number;
|
|
15
|
+
cols?: number;
|
|
16
|
+
wrap?: 'hard' | 'soft' | 'off';
|
|
17
|
+
minlength?: number;
|
|
18
|
+
maxlength?: number;
|
|
19
|
+
counter?: number;
|
|
20
|
+
onInput?: (event: Event) => void;
|
|
21
|
+
onChange?: (event: Event) => void;
|
|
22
|
+
onSelect?: (event: Event) => void;
|
|
23
|
+
onFocus?: (event: Event) => void;
|
|
24
|
+
onBlur?: (event: Event) => void;
|
|
25
|
+
}
|
|
26
|
+
export declare class SDSTextArea extends LitElement {
|
|
27
|
+
static styles: import("lit").CSSResult[];
|
|
28
|
+
value?: string;
|
|
29
|
+
name?: string;
|
|
30
|
+
label?: string;
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
helpText?: string;
|
|
33
|
+
errorMessage?: string;
|
|
34
|
+
disabled: boolean;
|
|
35
|
+
readOnly: boolean;
|
|
36
|
+
autocomplete?: HTMLTextAreaElement['autocomplete'];
|
|
37
|
+
required: boolean;
|
|
38
|
+
rows?: number;
|
|
39
|
+
cols?: number;
|
|
40
|
+
wrap?: 'hard' | 'soft';
|
|
41
|
+
minlength?: number;
|
|
42
|
+
maxlength?: number;
|
|
43
|
+
counter?: number;
|
|
44
|
+
control: HTMLTextAreaElement;
|
|
45
|
+
static formAssociated: boolean;
|
|
46
|
+
readonly internals: ElementInternals;
|
|
47
|
+
private _defaultValue;
|
|
48
|
+
constructor();
|
|
49
|
+
connectedCallback(): void;
|
|
50
|
+
private updateValidity;
|
|
51
|
+
private renderCharacterCounter;
|
|
52
|
+
private readonly _handleInputChange;
|
|
53
|
+
private readonly _handleSelect;
|
|
54
|
+
private readonly _handleFocus;
|
|
55
|
+
private readonly _handleBlur;
|
|
56
|
+
formResetCallback(): void;
|
|
57
|
+
select(): void;
|
|
58
|
+
type(): string;
|
|
59
|
+
focus(): void;
|
|
60
|
+
blur(): void;
|
|
61
|
+
click(): void;
|
|
62
|
+
get selectionStart(): number | null;
|
|
63
|
+
set selectionStart(value: number | null);
|
|
64
|
+
get selectionEnd(): number | null;
|
|
65
|
+
set selectionEnd(value: number | null);
|
|
66
|
+
setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
|
|
67
|
+
checkValidity(): boolean;
|
|
68
|
+
reportValidity(): boolean;
|
|
69
|
+
setCustomValidity(message: string): void;
|
|
70
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
71
|
+
}
|
|
72
|
+
declare global {
|
|
73
|
+
interface HTMLElementTagNameMap {
|
|
74
|
+
'sds-textarea': SDSTextArea;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
//# sourceMappingURL=sds-textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,240 @@
|
|
|
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, nothing } from 'lit';
|
|
8
|
+
import { property, query } from 'lit/decorators.js';
|
|
9
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
12
|
+
import { styles } from './sds-textarea.styles';
|
|
13
|
+
import '../sds-icon/sds-icon';
|
|
14
|
+
let SDSTextArea = class SDSTextArea extends LitElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
this.disabled = false;
|
|
18
|
+
this.readOnly = false;
|
|
19
|
+
this.required = false;
|
|
20
|
+
this._defaultValue = '';
|
|
21
|
+
this._handleInputChange = (event) => {
|
|
22
|
+
event.stopImmediatePropagation();
|
|
23
|
+
if (!this.disabled) {
|
|
24
|
+
const currentValue = event.target.value;
|
|
25
|
+
this.value = currentValue;
|
|
26
|
+
this.internals.setFormValue(currentValue === '' ? null : currentValue);
|
|
27
|
+
this.updateValidity();
|
|
28
|
+
this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
this._handleSelect = (event) => {
|
|
32
|
+
event.stopImmediatePropagation();
|
|
33
|
+
if (!this.disabled) {
|
|
34
|
+
this.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
this._handleFocus = (event) => {
|
|
38
|
+
event.stopImmediatePropagation();
|
|
39
|
+
this.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));
|
|
40
|
+
};
|
|
41
|
+
this._handleBlur = (event) => {
|
|
42
|
+
event.stopImmediatePropagation();
|
|
43
|
+
this.updateValidity();
|
|
44
|
+
this.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));
|
|
45
|
+
};
|
|
46
|
+
this.internals = this.attachInternals();
|
|
47
|
+
this.attachShadow({ mode: 'open', delegatesFocus: true });
|
|
48
|
+
}
|
|
49
|
+
connectedCallback() {
|
|
50
|
+
super.connectedCallback();
|
|
51
|
+
this._defaultValue = this.value ?? '';
|
|
52
|
+
}
|
|
53
|
+
updateValidity() {
|
|
54
|
+
if (this.control.checkValidity()) {
|
|
55
|
+
this.internals.setValidity({});
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
renderCharacterCounter() {
|
|
62
|
+
if (this.counter === undefined)
|
|
63
|
+
return nothing;
|
|
64
|
+
const currentLength = this.value?.length || 0;
|
|
65
|
+
const isOverCounter = currentLength > this.counter;
|
|
66
|
+
if (isOverCounter) {
|
|
67
|
+
return html `<p class="sds-textarea__character-counter sds-textarea__character-counter--error">
|
|
68
|
+
Du har ${currentLength - this.counter} tegn for mye
|
|
69
|
+
</p>`;
|
|
70
|
+
}
|
|
71
|
+
return html `<p class="sds-textarea__character-counter">Du har ${this.counter - currentLength} tegn igjen</p>`;
|
|
72
|
+
}
|
|
73
|
+
formResetCallback() {
|
|
74
|
+
this.control.value = this._defaultValue;
|
|
75
|
+
this.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);
|
|
76
|
+
this.value = this._defaultValue;
|
|
77
|
+
this.updateValidity();
|
|
78
|
+
}
|
|
79
|
+
select() {
|
|
80
|
+
if (!this.disabled)
|
|
81
|
+
this.control.select();
|
|
82
|
+
}
|
|
83
|
+
type() {
|
|
84
|
+
return 'textarea';
|
|
85
|
+
}
|
|
86
|
+
focus() {
|
|
87
|
+
if (!this.disabled)
|
|
88
|
+
this.control.focus();
|
|
89
|
+
}
|
|
90
|
+
blur() {
|
|
91
|
+
if (!this.disabled)
|
|
92
|
+
this.control.blur();
|
|
93
|
+
}
|
|
94
|
+
click() {
|
|
95
|
+
if (!this.disabled)
|
|
96
|
+
this.control.click();
|
|
97
|
+
}
|
|
98
|
+
get selectionStart() {
|
|
99
|
+
return this.control ? this.control.selectionStart : null;
|
|
100
|
+
}
|
|
101
|
+
set selectionStart(value) {
|
|
102
|
+
if (this.control && value !== null) {
|
|
103
|
+
this.control.selectionStart = value;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
get selectionEnd() {
|
|
107
|
+
return this.control ? this.control.selectionEnd : null;
|
|
108
|
+
}
|
|
109
|
+
set selectionEnd(value) {
|
|
110
|
+
if (this.control && value !== null) {
|
|
111
|
+
this.control.selectionEnd = value;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
setSelectionRange(start, end, direction) {
|
|
115
|
+
if (this.control) {
|
|
116
|
+
this.control.setSelectionRange(start, end, direction);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
checkValidity() {
|
|
120
|
+
return this.control.checkValidity();
|
|
121
|
+
}
|
|
122
|
+
reportValidity() {
|
|
123
|
+
return this.control.reportValidity();
|
|
124
|
+
}
|
|
125
|
+
setCustomValidity(message) {
|
|
126
|
+
this.control.setCustomValidity(message);
|
|
127
|
+
this.updateValidity();
|
|
128
|
+
}
|
|
129
|
+
render() {
|
|
130
|
+
const textareaClasses = {
|
|
131
|
+
'sds-textarea': true,
|
|
132
|
+
'sds-textarea--error': Boolean(this.errorMessage),
|
|
133
|
+
'sds-textarea--disabled': Boolean(this.disabled),
|
|
134
|
+
'sds-textarea--readonly': Boolean(this.readOnly),
|
|
135
|
+
};
|
|
136
|
+
return html `
|
|
137
|
+
<div class="${classMap(textareaClasses)}">
|
|
138
|
+
${this.label
|
|
139
|
+
? html `<label for="sds-textarea" class="sds-textarea__label">${this.label}</label>`
|
|
140
|
+
: nothing}
|
|
141
|
+
${this.helpText ? html `<p class="sds-textarea__help-text">${this.helpText}</p>` : nothing}
|
|
142
|
+
<div class="sds-textarea__input-container">
|
|
143
|
+
<textarea
|
|
144
|
+
class="sds-textarea__input"
|
|
145
|
+
id="sds-textarea"
|
|
146
|
+
?disabled="${this.disabled}"
|
|
147
|
+
?readonly="${this.readOnly}"
|
|
148
|
+
placeholder="${ifDefined(this.placeholder)}"
|
|
149
|
+
.value="${this.value ?? ''}"
|
|
150
|
+
.autocomplete="${this.autocomplete}"
|
|
151
|
+
name="${ifDefined(this.name)}"
|
|
152
|
+
?required="${this.required}"
|
|
153
|
+
rows="${ifDefined(this.rows)}"
|
|
154
|
+
cols="${ifDefined(this.cols)}"
|
|
155
|
+
wrap="${ifDefined(this.wrap)}"
|
|
156
|
+
minlength="${ifDefined(this.minlength)}"
|
|
157
|
+
maxlength="${ifDefined(this.maxlength)}"
|
|
158
|
+
@input="${this._handleInputChange}"
|
|
159
|
+
@change="${this._handleInputChange}"
|
|
160
|
+
@select="${this._handleSelect}"
|
|
161
|
+
@focus="${this._handleFocus}"
|
|
162
|
+
@blur="${this._handleBlur}"
|
|
163
|
+
></textarea>
|
|
164
|
+
</div>
|
|
165
|
+
${this.renderCharacterCounter()}
|
|
166
|
+
${this.errorMessage
|
|
167
|
+
? html `<p class="sds-textarea__error-message">
|
|
168
|
+
<sds-icon
|
|
169
|
+
name="warning-material-filled"
|
|
170
|
+
size="m"
|
|
171
|
+
color="${!this.disabled
|
|
172
|
+
? `var(--sds-color-semantic-icon-critical)`
|
|
173
|
+
: `var(--sds-color-semantic-icon-disabled)`}"
|
|
174
|
+
></sds-icon>
|
|
175
|
+
${this.errorMessage}
|
|
176
|
+
</p>`
|
|
177
|
+
: nothing}
|
|
178
|
+
</div>
|
|
179
|
+
`;
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
// Styling
|
|
183
|
+
SDSTextArea.styles = [styles];
|
|
184
|
+
SDSTextArea.formAssociated = true;
|
|
185
|
+
__decorate([
|
|
186
|
+
property({ type: String })
|
|
187
|
+
], SDSTextArea.prototype, "value", void 0);
|
|
188
|
+
__decorate([
|
|
189
|
+
property({ type: String, reflect: true })
|
|
190
|
+
], SDSTextArea.prototype, "name", void 0);
|
|
191
|
+
__decorate([
|
|
192
|
+
property({ type: String, reflect: true })
|
|
193
|
+
], SDSTextArea.prototype, "label", void 0);
|
|
194
|
+
__decorate([
|
|
195
|
+
property({ type: String, reflect: true })
|
|
196
|
+
], SDSTextArea.prototype, "placeholder", void 0);
|
|
197
|
+
__decorate([
|
|
198
|
+
property({ type: String, attribute: 'help-text', reflect: true })
|
|
199
|
+
], SDSTextArea.prototype, "helpText", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: String, attribute: 'error-message', reflect: true })
|
|
202
|
+
], SDSTextArea.prototype, "errorMessage", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: Boolean, reflect: true })
|
|
205
|
+
], SDSTextArea.prototype, "disabled", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: Boolean, attribute: 'readonly', reflect: true })
|
|
208
|
+
], SDSTextArea.prototype, "readOnly", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: String, reflect: true })
|
|
211
|
+
], SDSTextArea.prototype, "autocomplete", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property({ type: Boolean, reflect: true })
|
|
214
|
+
], SDSTextArea.prototype, "required", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
property({ type: Number, reflect: true })
|
|
217
|
+
], SDSTextArea.prototype, "rows", void 0);
|
|
218
|
+
__decorate([
|
|
219
|
+
property({ type: Number, reflect: true })
|
|
220
|
+
], SDSTextArea.prototype, "cols", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: String, reflect: true })
|
|
223
|
+
], SDSTextArea.prototype, "wrap", void 0);
|
|
224
|
+
__decorate([
|
|
225
|
+
property({ type: Number, reflect: true })
|
|
226
|
+
], SDSTextArea.prototype, "minlength", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
property({ type: Number, reflect: true })
|
|
229
|
+
], SDSTextArea.prototype, "maxlength", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ type: Number, reflect: true })
|
|
232
|
+
], SDSTextArea.prototype, "counter", void 0);
|
|
233
|
+
__decorate([
|
|
234
|
+
query('#sds-textarea')
|
|
235
|
+
], SDSTextArea.prototype, "control", void 0);
|
|
236
|
+
SDSTextArea = __decorate([
|
|
237
|
+
guardedCustomElement('sds-textarea')
|
|
238
|
+
], SDSTextArea);
|
|
239
|
+
export { SDSTextArea };
|
|
240
|
+
//# sourceMappingURL=sds-textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-textarea.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textarea.styles';\n\nimport '../sds-icon/sds-icon';\n\nexport interface SDSTextAreaProps {\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: HTMLTextAreaElement['autocomplete'];\n\trequired?: boolean;\n\trows?: number;\n\tcols?: number;\n\twrap?: 'hard' | 'soft' | 'off';\n\tminlength?: number;\n\tmaxlength?: number;\n\tcounter?: number;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textarea')\nexport class SDSTextArea extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: 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\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: HTMLTextAreaElement['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: Number, reflect: true }) rows?: number;\n\t@property({ type: Number, reflect: true }) cols?: number;\n\t@property({ type: String, reflect: true }) wrap?: 'hard' | 'soft';\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: Number, reflect: true }) counter?: number;\n\n\t@query('#sds-textarea') control!: HTMLTextAreaElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: 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\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate renderCharacterCounter() {\n\t\tif (this.counter === undefined) return nothing;\n\n\t\tconst currentLength = this.value?.length || 0;\n\t\tconst isOverCounter = currentLength > this.counter;\n\n\t\tif (isOverCounter) {\n\t\t\treturn html`<p class=\"sds-textarea__character-counter sds-textarea__character-counter--error\">\n\t\t\t\tDu har ${currentLength - this.counter} tegn for mye\n\t\t\t</p>`;\n\t\t}\n\n\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${this.counter - currentLength} tegn igjen</p>`;\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLTextAreaElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\ttype(): string {\n\t\treturn 'textarea';\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textareaClasses = {\n\t\t\t'sds-textarea': true,\n\t\t\t'sds-textarea--error': Boolean(this.errorMessage),\n\t\t\t'sds-textarea--disabled': Boolean(this.disabled),\n\t\t\t'sds-textarea--readonly': Boolean(this.readOnly),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textareaClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textarea\" class=\"sds-textarea__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textarea__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textarea__input-container\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tclass=\"sds-textarea__input\"\n\t\t\t\t\t\tid=\"sds-textarea\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\t.autocomplete=\"${this.autocomplete}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\trows=\"${ifDefined(this.rows)}\"\n\t\t\t\t\t\tcols=\"${ifDefined(this.cols)}\"\n\t\t\t\t\t\twrap=\"${ifDefined(this.wrap)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\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></textarea>\n\t\t\t\t</div>\n\t\t\t\t${this.renderCharacterCounter()}\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-textarea__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=\"${!this.disabled\n\t\t\t\t\t\t\t\t\t? `var(--sds-color-semantic-icon-critical)`\n\t\t\t\t\t\t\t\t\t: `var(--sds-color-semantic-icon-disabled)`}\"\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</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textarea': SDSTextArea;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-textarea.spec.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.spec.ts"],"names":[],"mappings":""}
|