@felleslosninger/minid-elements 0.0.126 → 0.0.128
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/README.md +37 -22
- package/dist/components/button.component.d.ts +7 -2
- package/dist/components/button.component.d.ts.map +1 -1
- package/dist/components/button.js +4 -8
- package/dist/components/button.js.map +1 -1
- package/dist/components/checkbox.component.d.ts +6 -0
- package/dist/components/checkbox.component.d.ts.map +1 -1
- package/dist/components/checkbox.js +31 -0
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/radio-button.component.d.ts +1 -1
- package/dist/components/radio-button.component.d.ts.map +1 -1
- package/dist/components/radio-button.js +3 -3
- package/dist/components/radio-button.js.map +1 -1
- package/dist/components/radio-group.component.d.ts +13 -5
- package/dist/components/radio-group.component.d.ts.map +1 -1
- package/dist/components/radio-group.js +75 -59
- package/dist/components/radio-group.js.map +1 -1
- package/dist/components/radio.component.d.ts +9 -7
- package/dist/components/radio.component.d.ts.map +1 -1
- package/dist/components/radio.js +45 -80
- package/dist/components/radio.js.map +1 -1
- package/dist/designsystemet-tailwind.css +9 -1
- package/dist/icons/arrow-right-left.svg +1 -1
- package/dist/icons/cpu-fill.svg +3 -0
- package/dist/icons/cpu.svg +3 -0
- package/dist/icons/expand-vertical.svg +3 -0
- package/dist/icons/expand.svg +1 -1
- package/dist/icons/file-jpeg-fill.svg +5 -0
- package/dist/icons/file-jpeg.svg +4 -0
- package/dist/icons/file-png-fill.svg +6 -0
- package/dist/icons/file-png.svg +4 -0
- package/dist/icons/line-height.svg +3 -0
- package/dist/icons/medical-thermometer-fill.svg +3 -0
- package/dist/icons/medical-thermometer.svg +3 -0
- package/dist/icons/questionmark-circle-fill.svg +3 -0
- package/dist/icons/questionmark-circle.svg +3 -0
- package/dist/icons/seal-xmark.svg +1 -1
- package/dist/icons/shield-checkmark-fill.svg +3 -0
- package/dist/icons/shield-checkmark.svg +3 -0
- package/dist/icons/shrink.svg +1 -1
- package/dist/icons/sort-down.svg +3 -0
- package/dist/icons/sort-up.svg +3 -0
- package/dist/icons/space-horizontal.svg +3 -0
- package/dist/icons/space-vertical.svg +3 -0
- package/dist/icons/square-grid-fill.svg +3 -0
- package/dist/icons/square-grid.svg +3 -0
- package/dist/icons/thumb-down-fill.svg +1 -1
- package/dist/icons/thumb-down.svg +1 -1
- package/dist/icons/truck-percent-fill.svg +3 -0
- package/dist/icons/truck-percent.svg +3 -0
- package/dist/mixins/tailwind.mixin.js +1 -1
- package/dist/mixins/tailwind.mixin.js.map +1 -1
- package/dist/types/icon-name.d.ts +1 -1
- package/dist/types/icon-name.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,49 +6,63 @@ This repository contains a collection of web components built with Lit. The web
|
|
|
6
6
|
|
|
7
7
|
**Install the package:**
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install @felleslosninger/minid-elements
|
|
11
|
+
```
|
|
12
|
+
|
|
12
13
|
or
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add @felleslosninger/minid-elements
|
|
17
|
+
```
|
|
16
18
|
|
|
17
19
|
## Usage
|
|
20
|
+
|
|
18
21
|
Import the desired components into your project:
|
|
19
22
|
|
|
20
|
-
```
|
|
23
|
+
```html
|
|
21
24
|
import '@felleslosninger/minid-elements/button';
|
|
22
25
|
<mid-button variant="primary">Click me</mid-button>
|
|
23
26
|
```
|
|
24
27
|
|
|
25
28
|
## CDN Usage
|
|
29
|
+
|
|
26
30
|
Alternatively, you can use MinId Elements directly from our CDN. Here's an example of how to include the components in your HTML file:
|
|
27
31
|
|
|
28
32
|
```html
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
33
|
+
<!DOCTYPE html>
|
|
34
|
+
<html lang="en">
|
|
35
|
+
<head>
|
|
36
|
+
<meta charset="UTF-8" />
|
|
37
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
38
|
+
<title>MinID CDN Example</title>
|
|
39
|
+
<link
|
|
40
|
+
rel="stylesheet"
|
|
41
|
+
href="https://cdn.minid.no/minid-elements/latest/index.css"
|
|
42
|
+
data-mid-tailwind
|
|
43
|
+
crossorigin="anonymous"
|
|
44
|
+
/>
|
|
45
|
+
<script
|
|
46
|
+
type="module"
|
|
47
|
+
src="https://cdn.minid.no/minid-elements/latest/index.js"
|
|
48
|
+
></script>
|
|
49
|
+
</head>
|
|
50
|
+
<body>
|
|
51
|
+
<mid-button>Click me</mid-button>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
42
54
|
```
|
|
43
|
-
This example demonstrates how to include the mid-button component. You can replace this with any other component from the MinId Elements library.
|
|
44
55
|
|
|
56
|
+
This example demonstrates how to include the mid-button component. You can replace this with any other component from the MinId Elements library.
|
|
45
57
|
|
|
46
58
|
## Documentation
|
|
59
|
+
|
|
47
60
|
View the complete component documentation and examples in our Storybook:
|
|
48
61
|
|
|
49
62
|
[https://elements.minid.no/](https://elements.minid.no/)
|
|
50
63
|
|
|
51
64
|
## Development
|
|
65
|
+
|
|
52
66
|
If you're contributing to this project, follow these steps:
|
|
53
67
|
|
|
54
68
|
1. Clone the repository.
|
|
@@ -57,8 +71,9 @@ If you're contributing to this project, follow these steps:
|
|
|
57
71
|
4. Build the project: `npm run build` or `yarn build`.
|
|
58
72
|
|
|
59
73
|
## Contributing
|
|
74
|
+
|
|
60
75
|
We welcome contributions! Please feel free to open issues and pull requests.
|
|
61
76
|
|
|
62
77
|
## License
|
|
78
|
+
|
|
63
79
|
MIT License - See [LICENSE](LICENSE) for more information.
|
|
64
|
-
```
|
|
@@ -6,7 +6,9 @@ declare global {
|
|
|
6
6
|
}
|
|
7
7
|
declare const MinidButton_base: import('../types/mixin-constructor.ts').Constructor<import('../types/form-control.ts').FormControlInterface> & typeof LitElement;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* @slot -- The default slot for the button's text content
|
|
10
|
+
* @csspart base - Select the button or anchor element
|
|
11
|
+
* @csspart spinner - Select the spinner element
|
|
10
12
|
*/
|
|
11
13
|
export declare class MinidButton extends MinidButton_base {
|
|
12
14
|
button: HTMLButtonElement | HTMLLinkElement;
|
|
@@ -35,9 +37,12 @@ export declare class MinidButton extends MinidButton_base {
|
|
|
35
37
|
*/
|
|
36
38
|
disabled: boolean;
|
|
37
39
|
/**
|
|
38
|
-
*
|
|
40
|
+
* Toggle loading state
|
|
39
41
|
*/
|
|
40
42
|
loading: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Text to show when button is in loading state
|
|
45
|
+
*/
|
|
41
46
|
loadingtext: string;
|
|
42
47
|
/**
|
|
43
48
|
* Toggle icon only styling
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAMtC,OAAO,wBAAwB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD
|
|
1
|
+
{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAMtC,OAAO,wBAAwB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;;;GAIG;AACH,qBACa,WAAY,SAAQ,gBAA4C;IAE3E,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB,WAAW;IASX,OAAO,KAAK,MAAM,GAEjB;IAED,KAAK;IAIL,IAAI;IAIJ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAiEhB"}
|
|
@@ -60,14 +60,10 @@ let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
|
|
|
60
60
|
const primary = this.variant === "primary";
|
|
61
61
|
const secondary = this.variant === "secondary";
|
|
62
62
|
const tertiary = this.variant === "tertiary";
|
|
63
|
-
const sm = this.size === "sm";
|
|
64
|
-
const md = this.size === "md";
|
|
65
|
-
const lg = this.size === "lg";
|
|
66
63
|
const spinnerOnly = this.loading && !this.loadingtext;
|
|
67
64
|
return html`<${tag}
|
|
68
65
|
part="base"
|
|
69
66
|
class="${classMap({
|
|
70
|
-
button: true,
|
|
71
67
|
"w-12": this.iconstyled,
|
|
72
68
|
"h-12": this.iconstyled,
|
|
73
69
|
"py-2": !this.iconstyled,
|
|
@@ -83,9 +79,9 @@ let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
|
|
|
83
79
|
"text-accent-subtle": secondary || tertiary,
|
|
84
80
|
"hover:text-accent": secondary || tertiary,
|
|
85
81
|
"border-accent-strong": secondary,
|
|
86
|
-
"text-body-sm": sm,
|
|
87
|
-
"text-body-md": md,
|
|
88
|
-
"text-body-lg": lg,
|
|
82
|
+
"text-body-sm": this.size === "sm",
|
|
83
|
+
"text-body-md": this.size === "md",
|
|
84
|
+
"text-body-lg": this.size === "lg",
|
|
89
85
|
"cursor-wait": this.loading && !this.disabled,
|
|
90
86
|
"cursor-pointer": !this.loading && !this.disabled,
|
|
91
87
|
"cursor-not-allowed": this.disabled,
|
|
@@ -121,7 +117,7 @@ let MinidButton = class extends FormControlMixin(styled(LitElement, styles)) {
|
|
|
121
117
|
}
|
|
122
118
|
};
|
|
123
119
|
__decorateClass([
|
|
124
|
-
query("
|
|
120
|
+
query('[part="base"]')
|
|
125
121
|
], MinidButton.prototype, "button", 2);
|
|
126
122
|
__decorateClass([
|
|
127
123
|
property({ type: String })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } 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 { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './spinner.component.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-button': MinidButton;\n }\n}\n\nconst styles = [\n css`\n :host {\n display: inline-flex;\n }\n `,\n];\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } 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 { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport './spinner.component.ts';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-button': MinidButton;\n }\n}\n\nconst styles = [\n css`\n :host {\n display: inline-flex;\n }\n `,\n];\n\n/**\n * @slot -- The default slot for the button's text content\n * @csspart base - Select the button or anchor element\n * @csspart spinner - Select the spinner element\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControlMixin(styled(LitElement, styles)) {\n @query('[part=\"base\"]')\n button!: HTMLButtonElement | HTMLLinkElement;\n\n /**\n * The value of the button (optional)\n */\n @property({ type: String })\n value = '';\n\n /**\n * The variant of the button\n */\n @property({ type: String })\n variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n /**\n * The size of the button. Defaults to 'md'\n */\n @property({ type: String })\n size: 'md' | 'lg' | 'sm' = 'md';\n\n /**\n * The type of the button. Defaults to normal 'button'\n */\n @property({ type: String })\n type: 'submit' | 'button' | 'reset' = 'button';\n\n /**\n * The href of the button. If set, the button will be rendered as an anchor tag\n */\n @property({ type: String })\n href: string | undefined;\n\n /**\n * Whether the button is disabled\n */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n * Toggle loading state\n */\n @property({ type: Boolean })\n loading = false;\n\n /**\n * Text to show when button is in loading state\n */\n @property()\n loadingtext = '';\n\n /**\n * Toggle icon only styling\n */\n @property({ type: Boolean })\n iconstyled = false;\n\n handleClick() {\n if (this.type === 'submit') {\n this.value && this.setValue(this.value);\n this.internals.form?.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form?.reset();\n }\n }\n\n private get isLink() {\n return !!this.href;\n }\n\n click() {\n this.button.click();\n }\n\n blur() {\n this.button.blur();\n }\n\n focus(options?: FocusOptions) {\n this.button.focus(options);\n }\n\n override render() {\n const tag = this.isLink ? literal`a` : literal`button`;\n const primary = this.variant === 'primary';\n const secondary = this.variant === 'secondary';\n const tertiary = this.variant === 'tertiary';\n const spinnerOnly = this.loading && !this.loadingtext;\n\n return html`<${tag}\n part=\"base\"\n class=\"${classMap({\n 'w-12': this.iconstyled,\n 'h-12': this.iconstyled,\n 'py-2': !this.iconstyled,\n 'px-4': !this.iconstyled,\n 'bg-accent-base': primary,\n 'text-accent-base-contrast': primary,\n 'border-transparent': primary || tertiary,\n 'hover:bg-accent-base-hover': primary,\n 'active:bg-accent-base-active': primary,\n 'bg-transparent': secondary || tertiary,\n 'active:bg-accent-surface-active': secondary || tertiary,\n 'hover:bg-accent-surface-hover': secondary || tertiary,\n 'text-accent-subtle': secondary || tertiary,\n 'hover:text-accent': secondary || tertiary,\n 'border-accent-strong': secondary,\n 'text-body-sm': this.size === 'sm',\n 'text-body-md': this.size === 'md',\n 'text-body-lg': this.size === 'lg',\n 'cursor-wait': this.loading && !this.disabled,\n 'cursor-pointer': !this.loading && !this.disabled,\n 'cursor-not-allowed': this.disabled,\n relative: spinnerOnly,\n 'gap-0': spinnerOnly,\n 'opacity-disabled': this.disabled && !this.loading,\n })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n type=${this.type}\n aria-busy=${this.loading}\n ?disabled=${this.disabled || this.loading}\n href=\"${ifDefined(this.href)}\"\n @click=\"${this.handleClick}\"\n >\n <slot\n class=\"${classMap({\n invisible: spinnerOnly,\n })}\"\n ?hidden=${this.loading && !!this.loadingtext}\n ></slot>\n <span ?hidden=${!this.loading || !this.loadingtext}>\n ${this.loadingtext}\n </span>\n ${\n this.loading\n ? html`<mid-spinner\n class=\"${classMap({\n 'text-[1.4rem]': true,\n absolute: spinnerOnly,\n 'top-[calc(50%_-_0.5em)]': spinnerOnly,\n 'left-[calc(50%_-_0.5em)]': spinnerOnly,\n })}\"\n part=\"spinner\"\n ></mid-spinner>`\n : ''\n }\n </${tag}>`;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAQO,IAAM,cAAN,cAA0B,iBAAiB,OAAO,YAAY,MAAM,CAAC,EAAE;AAAA,EAAvE,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAMR,SAAA,UAAgD;AAMhD,SAAA,OAA2B;AAM3B,SAAA,OAAsC;AAYtC,SAAA,WAAW;AAMX,SAAA,UAAU;AAMV,SAAA,cAAc;AAMd,SAAA,aAAa;AAAA,EAAA;AAAA,EAEb,cAAc;AACZ,QAAI,KAAK,SAAS,UAAU;AAC1B,WAAK,SAAS,KAAK,SAAS,KAAK,KAAK;AACtC,WAAK,UAAU,MAAM,cAAA;AAAA,IACvB,WAAW,KAAK,SAAS,SAAS;AAChC,WAAK,UAAU,MAAM,MAAA;AAAA,IACvB;AAAA,EACF;AAAA,EAEA,IAAY,SAAS;AACnB,WAAO,CAAC,CAAC,KAAK;AAAA,EAChB;AAAA,EAEA,QAAQ;AACN,SAAK,OAAO,MAAA;AAAA,EACd;AAAA,EAEA,OAAO;AACL,SAAK,OAAO,KAAA;AAAA,EACd;AAAA,EAEA,MAAM,SAAwB;AAC5B,SAAK,OAAO,MAAM,OAAO;AAAA,EAC3B;AAAA,EAES,SAAS;AAChB,UAAM,MAAM,KAAK,SAAS,aAAa;AACvC,UAAM,UAAU,KAAK,YAAY;AACjC,UAAM,YAAY,KAAK,YAAY;AACnC,UAAM,WAAW,KAAK,YAAY;AAClC,UAAM,cAAc,KAAK,WAAW,CAAC,KAAK;AAE1C,WAAO,QAAQ,GAAG;AAAA;AAAA,eAEP,SAAS;AAAA,MAChB,QAAQ,KAAK;AAAA,MACb,QAAQ,KAAK;AAAA,MACb,QAAQ,CAAC,KAAK;AAAA,MACd,QAAQ,CAAC,KAAK;AAAA,MACd,kBAAkB;AAAA,MAClB,6BAA6B;AAAA,MAC7B,sBAAsB,WAAW;AAAA,MACjC,8BAA8B;AAAA,MAC9B,gCAAgC;AAAA,MAChC,kBAAkB,aAAa;AAAA,MAC/B,mCAAmC,aAAa;AAAA,MAChD,iCAAiC,aAAa;AAAA,MAC9C,sBAAsB,aAAa;AAAA,MACnC,qBAAqB,aAAa;AAAA,MAClC,wBAAwB;AAAA,MACxB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,gBAAgB,KAAK,SAAS;AAAA,MAC9B,eAAe,KAAK,WAAW,CAAC,KAAK;AAAA,MACrC,kBAAkB,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MACzC,sBAAsB,KAAK;AAAA,MAC3B,UAAU;AAAA,MACV,SAAS;AAAA,MACT,oBAAoB,KAAK,YAAY,CAAC,KAAK;AAAA,IAAA,CAC5C,CAAC;AAAA,aACK,KAAK,IAAI;AAAA,kBACJ,KAAK,OAAO;AAAA,kBACZ,KAAK,YAAY,KAAK,OAAO;AAAA,cACjC,UAAU,KAAK,IAAI,CAAC;AAAA,gBAClB,KAAK,WAAW;AAAA;AAAA;AAAA,iBAGf,SAAS;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,kBACQ,KAAK,WAAW,CAAC,CAAC,KAAK,WAAW;AAAA;AAAA,sBAE9B,CAAC,KAAK,WAAW,CAAC,KAAK,WAAW;AAAA,UAC9C,KAAK,WAAW;AAAA;AAAA,QAGlB,KAAK,UACD;AAAA,uBACW,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,2BAA2B;AAAA,MAC3B,4BAA4B;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA,+BAGJ,EACN;AAAA,QACE,GAAG;AAAA,EACT;AACF;AAlJE,gBAAA;AAAA,EADC,MAAM,eAAe;AAAA,GADX,YAEX,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,YAQX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbf,YAcX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,YAoBX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBf,YA0BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Bf,YAgCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GArChB,YAsCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3ChB,YA4CX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAjDC,YAkDX,WAAA,eAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAvDhB,YAwDX,WAAA,cAAA,CAAA;AAxDW,cAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,WAAA;"}
|
|
@@ -6,9 +6,13 @@ declare global {
|
|
|
6
6
|
}
|
|
7
7
|
declare const MinidCheckbox_base: import('../types/mixin-constructor.ts').Constructor<import('../types/form-control.ts').FormControlInterface> & typeof LitElement;
|
|
8
8
|
/**
|
|
9
|
+
* @slot -- The default slot for the label text of the checkbox
|
|
10
|
+
* @slot description - The slot for the description text of the checkbox
|
|
9
11
|
*
|
|
12
|
+
* @event mid-change - Emitted when the checked state changes
|
|
10
13
|
*/
|
|
11
14
|
export declare class MinidCheckbox extends MinidCheckbox_base {
|
|
15
|
+
private readonly hasSlotController;
|
|
12
16
|
private input;
|
|
13
17
|
/**
|
|
14
18
|
* The name of the checkbox, submitted as a name/value pair with form data.
|
|
@@ -19,6 +23,7 @@ export declare class MinidCheckbox extends MinidCheckbox_base {
|
|
|
19
23
|
*/
|
|
20
24
|
value: string;
|
|
21
25
|
checked: boolean;
|
|
26
|
+
description?: string;
|
|
22
27
|
disabled: boolean;
|
|
23
28
|
readonly: boolean;
|
|
24
29
|
invalid: boolean;
|
|
@@ -26,6 +31,7 @@ export declare class MinidCheckbox extends MinidCheckbox_base {
|
|
|
26
31
|
static get formControlValidators(): import('../types/validator.type.ts').Validator[];
|
|
27
32
|
shouldFormValueUpdate(): boolean;
|
|
28
33
|
get validationTarget(): HTMLInputElement;
|
|
34
|
+
private handleKeydown;
|
|
29
35
|
private handleClick;
|
|
30
36
|
/**
|
|
31
37
|
* Simulates a click on the checkbox.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,0BAA0B,CAAC;AAOlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;;;;GAKG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IACrE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAGF,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CA4DhB"}
|
|
@@ -8,6 +8,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
|
|
|
8
8
|
import { FormControlMixin } from "../mixins/form-control.mixin.js";
|
|
9
9
|
import { watch } from "../internal/watch.js";
|
|
10
10
|
import { requiredValidator } from "../mixins/validators.js";
|
|
11
|
+
import { HasSlotController } from "../internal/slot.js";
|
|
11
12
|
var __defProp = Object.defineProperty;
|
|
12
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
13
14
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -21,6 +22,10 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
21
22
|
let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
|
|
22
23
|
constructor() {
|
|
23
24
|
super(...arguments);
|
|
25
|
+
this.hasSlotController = new HasSlotController(
|
|
26
|
+
this,
|
|
27
|
+
"description"
|
|
28
|
+
);
|
|
24
29
|
this.name = "";
|
|
25
30
|
this.value = "on";
|
|
26
31
|
this.checked = false;
|
|
@@ -38,6 +43,16 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
|
|
|
38
43
|
get validationTarget() {
|
|
39
44
|
return this.input;
|
|
40
45
|
}
|
|
46
|
+
handleKeydown(event) {
|
|
47
|
+
const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
|
|
48
|
+
if (event.key === "Enter" && !hasModifier) {
|
|
49
|
+
setTimeout(() => {
|
|
50
|
+
if (!event.defaultPrevented && !event.isComposing) {
|
|
51
|
+
this.form.requestSubmit();
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
41
56
|
handleClick() {
|
|
42
57
|
this.checked = !this.checked;
|
|
43
58
|
this.dispatchEvent(new Event("mid-change"));
|
|
@@ -64,6 +79,8 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
|
|
|
64
79
|
this.setValue(this.value);
|
|
65
80
|
}
|
|
66
81
|
render() {
|
|
82
|
+
const hasDescriptionSlot = this.hasSlotController.test("description");
|
|
83
|
+
const hasDescription = this.description ? true : !!hasDescriptionSlot;
|
|
67
84
|
return html`
|
|
68
85
|
<label
|
|
69
86
|
class="${classMap({
|
|
@@ -75,6 +92,7 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
|
|
|
75
92
|
class="${classMap({
|
|
76
93
|
"bg-accent-base": !this.readonly && this.checked && !this.invalid,
|
|
77
94
|
"bg-danger-base": !this.readonly && this.checked && this.invalid,
|
|
95
|
+
"bg-neutral-surface": !this.readonly && !this.checked,
|
|
78
96
|
"border-accent-base": !this.readonly && this.checked && !this.invalid,
|
|
79
97
|
"border-neutral": !this.readonly && !this.checked && !this.invalid,
|
|
80
98
|
"border-danger-base": !this.readonly && this.invalid,
|
|
@@ -92,6 +110,7 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
|
|
|
92
110
|
?readonly=${this.readonly}
|
|
93
111
|
?required=${this.required}
|
|
94
112
|
@click=${this.handleClick}
|
|
113
|
+
@keydown=${this.handleKeydown}
|
|
95
114
|
/>
|
|
96
115
|
${this.checked ? html`<mid-icon
|
|
97
116
|
class="${classMap({
|
|
@@ -104,6 +123,15 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
|
|
|
104
123
|
<slot></slot>
|
|
105
124
|
</div>
|
|
106
125
|
</label>
|
|
126
|
+
<slot
|
|
127
|
+
name="description"
|
|
128
|
+
part="description"
|
|
129
|
+
name="description"
|
|
130
|
+
class="text-neutral-subtle mt-2 block"
|
|
131
|
+
aria-hidden=${hasDescription ? "false" : "true"}
|
|
132
|
+
>
|
|
133
|
+
${this.description}
|
|
134
|
+
</slot>
|
|
107
135
|
`;
|
|
108
136
|
}
|
|
109
137
|
};
|
|
@@ -119,6 +147,9 @@ __decorateClass([
|
|
|
119
147
|
__decorateClass([
|
|
120
148
|
property({ type: Boolean })
|
|
121
149
|
], MinidCheckbox.prototype, "checked", 2);
|
|
150
|
+
__decorateClass([
|
|
151
|
+
property()
|
|
152
|
+
], MinidCheckbox.prototype, "description", 2);
|
|
122
153
|
__decorateClass([
|
|
123
154
|
property({ type: Boolean })
|
|
124
155
|
], MinidCheckbox.prototype, "disabled", 2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-checkbox': MinidCheckbox;\n }\n}\n\n/**\n *\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n @query('input[type=\"checkbox\"]')\n private input!: HTMLInputElement;\n\n /**\n * The name of the checkbox, submitted as a name/value pair with form data.\n */\n @property()\n name = '';\n\n /**\n * The current value of the checkbox, submitted as a name/value pair with form data.\n */\n @property()\n value = 'on';\n\n @property({ type: Boolean })\n checked = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n readonly = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n static get formControlValidators() {\n return [requiredValidator];\n }\n\n shouldFormValueUpdate(): boolean {\n return this.checked;\n }\n\n get validationTarget() {\n return this.input;\n }\n\n private handleClick() {\n this.checked = !this.checked;\n // this.indeterminate = false;\n this.dispatchEvent(new Event('mid-change'));\n }\n\n /**\n * Simulates a click on the checkbox.\n */\n click() {\n this.input.click();\n }\n\n /**\n * Sets focus on the checkbox.\n */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /**\n * Removes focus from the checkbox.\n */\n blur() {\n this.input.blur();\n }\n\n @watch(['checked', 'value'])\n handleStateChange() {\n // this.input.indeterminate = this.indeterminate; // force a sync update\n this.setValue(this.value);\n }\n\n override render() {\n return html`\n <label\n class=\"${classMap({\n 'opacity-disabled': this.disabled,\n 'cursor-not-allowed': this.disabled,\n })} grid grid-cols-[auto_1fr] gap-2\"\n >\n <span\n class=\"${classMap({\n 'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n 'bg-danger-base': !this.readonly && this.checked && this.invalid,\n 'border-accent-base':\n !this.readonly && this.checked && !this.invalid,\n 'border-neutral': !this.readonly && !this.checked && !this.invalid,\n 'border-danger-base': !this.readonly && this.invalid,\n 'border-neutral-subtle': this.readonly,\n 'bg-neutral-surface-tinted': this.readonly,\n })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n >\n <input\n class=\"pointer-events-none appearance-none\"\n type=\"checkbox\"\n value=${ifDefined(this.value)}\n .checked=${live(this.checked)}\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @click=${this.handleClick}\n />\n ${this.checked\n ? html`<mid-icon\n class=\"${classMap({\n 'text-accent-base-contrast': this.checked && !this.readonly,\n })} size-6 shrink-0 scale-125\"\n name=\"checkmark\"\n ></mid-icon>`\n : ''}\n </span>\n <div part=\"label\">\n <slot></slot>\n </div>\n </label>\n `;\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\nimport { HasSlotController } from '../internal/slot.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-checkbox': MinidCheckbox;\n }\n}\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n private readonly hasSlotController = new HasSlotController(\n this,\n 'description'\n );\n\n @query('input[type=\"checkbox\"]')\n private input!: HTMLInputElement;\n\n /**\n * The name of the checkbox, submitted as a name/value pair with form data.\n */\n @property()\n name = '';\n\n /**\n * The current value of the checkbox, submitted as a name/value pair with form data.\n */\n @property()\n value = 'on';\n\n @property({ type: Boolean })\n checked = false;\n\n @property()\n description?: string;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n readonly = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n static get formControlValidators() {\n return [requiredValidator];\n }\n\n shouldFormValueUpdate(): boolean {\n return this.checked;\n }\n\n get validationTarget() {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent) {\n const hasModifier =\n event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n // submitting to allow users to cancel the keydown event if they need to\n if (event.key === 'Enter' && !hasModifier) {\n setTimeout(() => {\n //\n // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n // to check for this is to look at event.isComposing, which will be true when the IME is open.\n if (!event.defaultPrevented && !event.isComposing) {\n this.form.requestSubmit();\n }\n });\n }\n }\n\n private handleClick() {\n this.checked = !this.checked;\n // this.indeterminate = false;\n this.dispatchEvent(new Event('mid-change'));\n }\n\n /**\n * Simulates a click on the checkbox.\n */\n click() {\n this.input.click();\n }\n\n /**\n * Sets focus on the checkbox.\n */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /**\n * Removes focus from the checkbox.\n */\n blur() {\n this.input.blur();\n }\n\n @watch(['checked', 'value'])\n handleStateChange() {\n // this.input.indeterminate = this.indeterminate; // force a sync update\n this.setValue(this.value);\n }\n\n override render() {\n const hasDescriptionSlot = this.hasSlotController.test('description');\n const hasDescription = this.description ? true : !!hasDescriptionSlot;\n\n return html`\n <label\n class=\"${classMap({\n 'opacity-disabled': this.disabled,\n 'cursor-not-allowed': this.disabled,\n })} grid grid-cols-[auto_1fr] gap-2\"\n >\n <span\n class=\"${classMap({\n 'bg-accent-base': !this.readonly && this.checked && !this.invalid,\n 'bg-danger-base': !this.readonly && this.checked && this.invalid,\n 'bg-neutral-surface': !this.readonly && !this.checked,\n 'border-accent-base':\n !this.readonly && this.checked && !this.invalid,\n 'border-neutral': !this.readonly && !this.checked && !this.invalid,\n 'border-danger-base': !this.readonly && this.invalid,\n 'border-neutral-subtle': this.readonly,\n 'bg-neutral-surface-tinted': this.readonly,\n })} focus-within:focus-ring inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-2\"\n >\n <input\n class=\"pointer-events-none appearance-none\"\n type=\"checkbox\"\n value=${ifDefined(this.value)}\n .checked=${live(this.checked)}\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @click=${this.handleClick}\n @keydown=${this.handleKeydown}\n />\n ${this.checked\n ? html`<mid-icon\n class=\"${classMap({\n 'text-accent-base-contrast': this.checked && !this.readonly,\n })} size-6 shrink-0 scale-125\"\n name=\"checkmark\"\n ></mid-icon>`\n : ''}\n </span>\n <div part=\"label\">\n <slot></slot>\n </div>\n </label>\n <slot\n name=\"description\"\n part=\"description\"\n name=\"description\"\n class=\"text-neutral-subtle mt-2 block\"\n aria-hidden=${hasDescription ? 'false' : 'true'}\n >\n ${this.description}\n </slot>\n `;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BO,IAAM,gBAAN,cAA4B,iBAAiB,OAAO,UAAU,CAAC,EAAE;AAAA,EAAjE,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAiB,oBAAoB,IAAI;AAAA,MACvC;AAAA,MACA;AAAA,IAAA;AAUF,SAAA,OAAO;AAMP,SAAA,QAAQ;AAGR,SAAA,UAAU;AAMV,SAAA,WAAW;AAGX,SAAA,WAAW;AAGX,SAAA,UAAU;AAGV,SAAA,WAAW;AAAA,EAAA;AAAA,EAEX,WAAW,wBAAwB;AACjC,WAAO,CAAC,iBAAiB;AAAA,EAC3B;AAAA,EAEA,wBAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,mBAAmB;AACrB,WAAO,KAAK;AAAA,EACd;AAAA,EAEQ,cAAc,OAAsB;AAC1C,UAAM,cACJ,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;AAI5D,QAAI,MAAM,QAAQ,WAAW,CAAC,aAAa;AACzC,iBAAW,MAAM;AAIf,YAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,aAAa;AACjD,eAAK,KAAK,cAAA;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,cAAc;AACpB,SAAK,UAAU,CAAC,KAAK;AAErB,SAAK,cAAc,IAAI,MAAM,YAAY,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,SAAK,MAAM,MAAA;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,MAAM,KAAA;AAAA,EACb;AAAA,EAGA,oBAAoB;AAElB,SAAK,SAAS,KAAK,KAAK;AAAA,EAC1B;AAAA,EAES,SAAS;AAChB,UAAM,qBAAqB,KAAK,kBAAkB,KAAK,aAAa;AACpE,UAAM,iBAAiB,KAAK,cAAc,OAAO,CAAC,CAAC;AAEnD,WAAO;AAAA;AAAA,iBAEM,SAAS;AAAA,MAChB,oBAAoB,KAAK;AAAA,MACzB,sBAAsB,KAAK;AAAA,IAAA,CAC5B,CAAC;AAAA;AAAA;AAAA,mBAGS,SAAS;AAAA,MAChB,kBAAkB,CAAC,KAAK,YAAY,KAAK,WAAW,CAAC,KAAK;AAAA,MAC1D,kBAAkB,CAAC,KAAK,YAAY,KAAK,WAAW,KAAK;AAAA,MACzD,sBAAsB,CAAC,KAAK,YAAY,CAAC,KAAK;AAAA,MAC9C,sBACE,CAAC,KAAK,YAAY,KAAK,WAAW,CAAC,KAAK;AAAA,MAC1C,kBAAkB,CAAC,KAAK,YAAY,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MAC3D,sBAAsB,CAAC,KAAK,YAAY,KAAK;AAAA,MAC7C,yBAAyB,KAAK;AAAA,MAC9B,6BAA6B,KAAK;AAAA,IAAA,CACnC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKQ,UAAU,KAAK,KAAK,CAAC;AAAA,uBAClB,KAAK,KAAK,OAAO,CAAC;AAAA,wBACjB,KAAK,QAAQ;AAAA,uBACd,KAAK,OAAO;AAAA,wBACX,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,qBAChB,KAAK,WAAW;AAAA,uBACd,KAAK,aAAa;AAAA;AAAA,YAE7B,KAAK,UACH;AAAA,yBACW,SAAS;AAAA,MAChB,6BAA6B,KAAK,WAAW,CAAC,KAAK;AAAA,IAAA,CACpD,CAAC;AAAA;AAAA,8BAGJ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWM,iBAAiB,UAAU,MAAM;AAAA;AAAA,UAE7C,KAAK,WAAW;AAAA;AAAA;AAAA,EAGxB;AACF;AA3JU,gBAAA;AAAA,EADP,MAAM,wBAAwB;AAAA,GANpB,cAOH,WAAA,SAAA,CAAA;AAMR,gBAAA;AAAA,EADC,SAAA;AAAS,GAZC,cAaX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAlBC,cAmBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GArBhB,cAsBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAxBC,cAyBX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3BhB,cA4BX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA9BhB,cA+BX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjChB,cAkCX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,cAqCX,WAAA,YAAA,CAAA;AA4DA,gBAAA;AAAA,EADC,MAAM,CAAC,WAAW,OAAO,CAAC;AAAA,GAhGhB,cAiGX,WAAA,qBAAA,CAAA;AAjGW,gBAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,aAAA;"}
|
|
@@ -15,7 +15,7 @@ declare const MinidRadioButton_base: typeof LitElement;
|
|
|
15
15
|
* @csspart button - Select the internal button element
|
|
16
16
|
*/
|
|
17
17
|
export declare class MinidRadioButton extends MinidRadioButton_base {
|
|
18
|
-
|
|
18
|
+
input: HTMLButtonElement;
|
|
19
19
|
name: string;
|
|
20
20
|
/**
|
|
21
21
|
* The radio button's checked state.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.component.d.ts","sourceRoot":"","sources":["../../src/components/radio-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,gBAAgB,CAAC;KACtC;CACF;;AAED;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,qBAAkB;IAEtD,
|
|
1
|
+
{"version":3,"file":"radio-button.component.d.ts","sourceRoot":"","sources":["../../src/components/radio-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,gBAAgB,CAAC;KACtC;CACF;;AAED;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,qBAAkB;IAEtD,KAAK,EAAG,iBAAiB,CAAC;IAG1B,IAAI,SAAY;IAEhB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,WAAW;IAWnB,oBAAoB;IAIpB;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAIK,MAAM;CA8BhB"}
|
|
@@ -48,13 +48,13 @@ let MinidRadioButton = class extends styled(LitElement) {
|
|
|
48
48
|
* Sets focus on the radio button.
|
|
49
49
|
*/
|
|
50
50
|
focus(options) {
|
|
51
|
-
this.
|
|
51
|
+
this.input.focus(options);
|
|
52
52
|
}
|
|
53
53
|
/**
|
|
54
54
|
* Removes focus from the radio button.
|
|
55
55
|
*/
|
|
56
56
|
blur() {
|
|
57
|
-
this.
|
|
57
|
+
this.input.blur();
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
60
|
return html`<button
|
|
@@ -89,7 +89,7 @@ let MinidRadioButton = class extends styled(LitElement) {
|
|
|
89
89
|
};
|
|
90
90
|
__decorateClass([
|
|
91
91
|
query(".radio")
|
|
92
|
-
], MinidRadioButton.prototype, "
|
|
92
|
+
], MinidRadioButton.prototype, "input", 2);
|
|
93
93
|
__decorateClass([
|
|
94
94
|
property()
|
|
95
95
|
], MinidRadioButton.prototype, "name", 2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sources":["../../src/components/radio-button.component.ts"],"sourcesContent":["import { html, LitElement } 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 { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-radio-button': MinidRadioButton;\n }\n}\n\n/**\n *\n * @slot -- The radio button's label.\n *\n * @event mid-blur - Emitted when the button loses focus.\n * @event mid-focus - Emitted when the button gains focus.\n *\n * @csspart button - Select the internal button element\n */\n@customElement('mid-radio-button')\nexport class MinidRadioButton extends styled(LitElement) {\n @query('.radio')\n
|
|
1
|
+
{"version":3,"file":"radio-button.js","sources":["../../src/components/radio-button.component.ts"],"sourcesContent":["import { html, LitElement } 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 { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-radio-button': MinidRadioButton;\n }\n}\n\n/**\n *\n * @slot -- The radio button's label.\n *\n * @event mid-blur - Emitted when the button loses focus.\n * @event mid-focus - Emitted when the button gains focus.\n *\n * @csspart button - Select the internal button element\n */\n@customElement('mid-radio-button')\nexport class MinidRadioButton extends styled(LitElement) {\n @query('.radio')\n input!: HTMLButtonElement;\n\n @property()\n name = 'option';\n\n /**\n * The radio button's checked state.\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * The radio's value. When selected, the radio group will receive this value.\n */\n @property()\n value: string | null = null;\n\n /**\n * Disables the radio button.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n * this attribute can typically be omitted.\n */\n @property({ reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n private handleBlur() {\n this.dispatchEvent(\n new Event('mid-blur', { composed: true, bubbles: true })\n );\n }\n\n private handleFocus() {\n this.dispatchEvent(\n new Event('mid-focus', { composed: true, bubbles: true })\n );\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.checked = true;\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n /**\n * Sets focus on the radio button.\n */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /**\n * Removes focus from the radio button.\n */\n blur() {\n this.input.blur();\n }\n\n override render() {\n return html`<button\n role=\"radio\"\n type=\"button\"\n part=\"button\"\n name=${this.name}\n value=${ifDefined(this.value ?? undefined)}\n class=\"${classMap({\n radio: true,\n 'whitespace-nowrap': true,\n 'fds-togglegroup__item': true,\n 'fds-btn': true,\n 'fds-focus': true,\n 'fds-btn--first': true,\n 'fds-btn--full-width': true,\n 'fds-btn--primary': this.checked,\n 'fds-btn--tertiary': !this.checked,\n 'fds-btn--sm': this.size === 'sm',\n 'fds-btn--md': this.size === 'md',\n 'fds-btn--lg': this.size === 'lg',\n })}\"\n aria-checked=${this.checked}\n ?disabled=${this.disabled}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n >\n <slot></slot>\n </button> `;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBO,IAAM,mBAAN,cAA+B,OAAO,UAAU,EAAE;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,OAAO;AAMP,SAAA,UAAU;AAMV,SAAA,QAAuB;AAMvB,SAAA,WAAW;AAOX,SAAA,OAA2B;AAAA,EAAA;AAAA,EAEnB,aAAa;AACnB,SAAK;AAAA,MACH,IAAI,MAAM,YAAY,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE3D;AAAA,EAEQ,cAAc;AACpB,SAAK;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAE5D;AAAA,EAEQ,YAAY,OAAmB;AACrC,QAAI,KAAK,UAAU;AACjB,YAAM,eAAA;AACN,YAAM,gBAAA;AACN;AAAA,IACF;AAEA,SAAK,UAAU;AAAA,EACjB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,MAAM,KAAA;AAAA,EACb;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA,aAIE,KAAK,IAAI;AAAA,cACR,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA,eACjC,SAAS;AAAA,MAChB,OAAO;AAAA,MACP,qBAAqB;AAAA,MACrB,yBAAyB;AAAA,MACzB,WAAW;AAAA,MACX,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,MACvB,oBAAoB,KAAK;AAAA,MACzB,qBAAqB,CAAC,KAAK;AAAA,MAC3B,eAAe,KAAK,SAAS;AAAA,MAC7B,eAAe,KAAK,SAAS;AAAA,MAC7B,eAAe,KAAK,SAAS;AAAA,IAAA,CAC9B,CAAC;AAAA,qBACa,KAAK,OAAO;AAAA,kBACf,KAAK,QAAQ;AAAA,cACjB,KAAK,UAAU;AAAA,eACd,KAAK,WAAW;AAAA,eAChB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAI7B;AACF;AArGE,gBAAA;AAAA,EADC,MAAM,QAAQ;AAAA,GADJ,iBAEX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAA;AAAS,GAJC,iBAKX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,iBAWX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAA;AAAS,GAhBC,iBAiBX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtB/B,iBAuBX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA7BhB,iBA8BX,WAAA,QAAA,CAAA;AAyBA,gBAAA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,MAAM;AAAA,GAtDtC,iBAuDX,WAAA,wBAAA,CAAA;AAvDW,mBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,gBAAA;"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import { MinidRadio } from '../components/radio.component';
|
|
2
3
|
declare global {
|
|
3
4
|
interface HTMLElementTagNameMap {
|
|
4
5
|
'mid-radio-group': MinidRadioGroup;
|
|
5
6
|
}
|
|
6
7
|
}
|
|
7
|
-
declare const MinidRadioGroup_base:
|
|
8
|
+
declare const MinidRadioGroup_base: import('../types/mixin-constructor').Constructor<import('../types/form-control').FormControlInterface> & typeof LitElement;
|
|
8
9
|
/**
|
|
9
10
|
*
|
|
10
11
|
* @slot -- The default slot where `<mid-radio>` or `<mid-radio-button>` elements are placed.
|
|
@@ -17,22 +18,28 @@ declare const MinidRadioGroup_base: typeof LitElement & import('../types/mixin-c
|
|
|
17
18
|
* @csspart base - Select the container around the radios
|
|
18
19
|
*/
|
|
19
20
|
export declare class MinidRadioGroup extends MinidRadioGroup_base {
|
|
21
|
+
private readonly hasSlotController;
|
|
22
|
+
private readonly validationId;
|
|
23
|
+
private static _uniqueId;
|
|
20
24
|
/**
|
|
21
|
-
* The name of the radio group.
|
|
25
|
+
* The name of the radio group, submitted as a name/value pair with form data.
|
|
22
26
|
*/
|
|
23
|
-
name: string;
|
|
27
|
+
name: string | null;
|
|
24
28
|
/**
|
|
25
29
|
* The current value of the radio group.
|
|
26
30
|
*/
|
|
27
31
|
value: string | null;
|
|
28
32
|
label: string;
|
|
29
|
-
size: 'sm' | 'md' | 'lg';
|
|
30
33
|
labelhidden: boolean;
|
|
31
34
|
disabled: boolean;
|
|
35
|
+
required: boolean;
|
|
36
|
+
invalidmessage: string;
|
|
32
37
|
private hasButtonRadios;
|
|
33
38
|
defaultValue: string | null;
|
|
39
|
+
get validationTarget(): MinidRadio | undefined;
|
|
40
|
+
static get formcontrolValidators(): import('../types/validator.type').Validator[];
|
|
34
41
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
35
|
-
|
|
42
|
+
resetFormControl(): void;
|
|
36
43
|
private syncRadioElements;
|
|
37
44
|
private syncRadios;
|
|
38
45
|
private handleKeyDown;
|
|
@@ -43,6 +50,7 @@ export declare class MinidRadioGroup extends MinidRadioGroup_base {
|
|
|
43
50
|
handleSizeChange(): void;
|
|
44
51
|
handleValueChange(): void;
|
|
45
52
|
handleDisabledChange(): void;
|
|
53
|
+
handleInvalidChange(): void;
|
|
46
54
|
/**
|
|
47
55
|
* Sets focus on the radio-group.
|
|
48
56
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.component.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-group.component.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,mBAAmB,CAAC;AAI3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAK3D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAUD;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;IACC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwC;IAC1E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgD;IAC7E,OAAO,CAAC,MAAM,CAAC,SAAS,CAAK;IAC7B;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3B;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5B,KAAK,SAAM;IAGX,WAAW,UAAS;IAGpB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,cAAc,SAAM;IAGpB,OAAO,CAAC,eAAe,CAAS;IAGhC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEnC,IAAI,gBAAgB,2BAKnB;IAED,MAAM,KAAK,qBAAqB,kDAE/B;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAMhE,gBAAgB;YAMF,iBAAiB;IA0B/B,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,aAAa;IA2DrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,gBAAgB;IA4BxB,gBAAgB;IAKhB,iBAAiB;IAOjB,oBAAoB;IAcpB,mBAAmB;IAMnB;;OAEG;IACI,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAc1B,MAAM;CA4ChB"}
|