@scouterna/ui-webc 2.2.2 → 2.2.4
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/cjs/scout-app-bar.cjs.entry.js +1 -1
- package/dist/cjs/scout-app-bar.entry.cjs.js.map +1 -1
- package/dist/cjs/scout-button.cjs.entry.js +3 -3
- package/dist/cjs/scout-button.entry.cjs.js.map +1 -1
- package/dist/cjs/scout-checkbox.scout-radio-button.entry.cjs.js.map +1 -1
- package/dist/cjs/scout-checkbox_2.cjs.entry.js +2 -2
- package/dist/cjs/scout-field.cjs.entry.js +1 -1
- package/dist/cjs/scout-field.entry.cjs.js.map +1 -1
- package/dist/cjs/scout-input.cjs.entry.js +1 -1
- package/dist/cjs/scout-input.entry.cjs.js.map +1 -1
- package/dist/cjs/scout-select.cjs.entry.js +1 -1
- package/dist/cjs/scout-select.entry.cjs.js.map +1 -1
- package/dist/cjs/scout-switch.cjs.entry.js +1 -1
- package/dist/cjs/scout-switch.entry.cjs.js.map +1 -1
- package/dist/collection/components/app-bar/app-bar.js +6 -1
- package/dist/collection/components/app-bar/app-bar.js.map +1 -1
- package/dist/collection/components/button/button.css +4 -0
- package/dist/collection/components/button/button.js +5 -3
- package/dist/collection/components/button/button.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.js +7 -1
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/field/field.js +6 -1
- package/dist/collection/components/field/field.js.map +1 -1
- package/dist/collection/components/input/input.js +7 -1
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.js +6 -1
- package/dist/collection/components/radio-button/radio-button.js.map +1 -1
- package/dist/collection/components/select/select.js +6 -1
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/switch/switch.js +6 -1
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/components/{p-BkrRT31y.js → p-B_lll43e.js} +3 -3
- package/dist/components/{p-BkrRT31y.js.map → p-B_lll43e.js.map} +1 -1
- package/dist/components/{p-C2_wl40t.js → p-CwrP_ZZM.js} +3 -3
- package/dist/components/{p-C2_wl40t.js.map → p-CwrP_ZZM.js.map} +1 -1
- package/dist/components/scout-app-bar.js +1 -1
- package/dist/components/scout-app-bar.js.map +1 -1
- package/dist/components/scout-button.js +3 -3
- package/dist/components/scout-button.js.map +1 -1
- package/dist/components/scout-checkbox.js +1 -1
- package/dist/components/scout-field.js +1 -1
- package/dist/components/scout-field.js.map +1 -1
- package/dist/components/scout-input.js +1 -1
- package/dist/components/scout-input.js.map +1 -1
- package/dist/components/scout-list-view-item.js +2 -2
- package/dist/components/scout-radio-button.js +1 -1
- package/dist/components/scout-select.js +1 -1
- package/dist/components/scout-select.js.map +1 -1
- package/dist/components/scout-switch.js +1 -1
- package/dist/components/scout-switch.js.map +1 -1
- package/dist/custom-elements.json +9 -9
- package/dist/esm/scout-app-bar.entry.js +1 -1
- package/dist/esm/scout-app-bar.entry.js.map +1 -1
- package/dist/esm/scout-button.entry.js +3 -3
- package/dist/esm/scout-button.entry.js.map +1 -1
- package/dist/esm/scout-checkbox.scout-radio-button.entry.js.map +1 -1
- package/dist/esm/scout-checkbox_2.entry.js +2 -2
- package/dist/esm/scout-field.entry.js +1 -1
- package/dist/esm/scout-field.entry.js.map +1 -1
- package/dist/esm/scout-input.entry.js +1 -1
- package/dist/esm/scout-input.entry.js.map +1 -1
- package/dist/esm/scout-select.entry.js +1 -1
- package/dist/esm/scout-select.entry.js.map +1 -1
- package/dist/esm/scout-switch.entry.js +1 -1
- package/dist/esm/scout-switch.entry.js.map +1 -1
- package/dist/types/components/app-bar/app-bar.d.ts +5 -0
- package/dist/types/components/button/button.d.ts +3 -1
- package/dist/types/components/field/field.d.ts +5 -0
- package/dist/types/components.d.ts +160 -4
- package/dist/ui-webc/{p-1a701759.entry.js → p-45b65a28.entry.js} +2 -2
- package/dist/ui-webc/{p-e4f5dad7.entry.js → p-531dc32a.entry.js} +2 -2
- package/dist/ui-webc/{p-479ae616.entry.js → p-78b6c86b.entry.js} +2 -2
- package/dist/ui-webc/{p-4616484e.entry.js → p-e4ba9bd7.entry.js} +2 -2
- package/dist/ui-webc/{p-d8084e5c.entry.js → p-ee497882.entry.js} +2 -2
- package/dist/ui-webc/p-f01605ca.entry.js +2 -0
- package/dist/ui-webc/{p-3e750355.entry.js.map → p-f01605ca.entry.js.map} +1 -1
- package/dist/ui-webc/p-faaf9da5.entry.js +2 -0
- package/dist/ui-webc/scout-app-bar.entry.esm.js.map +1 -1
- package/dist/ui-webc/scout-button.entry.esm.js.map +1 -1
- package/dist/ui-webc/scout-checkbox.scout-radio-button.entry.esm.js.map +1 -1
- package/dist/ui-webc/scout-field.entry.esm.js.map +1 -1
- package/dist/ui-webc/scout-input.entry.esm.js.map +1 -1
- package/dist/ui-webc/scout-select.entry.esm.js.map +1 -1
- package/dist/ui-webc/scout-switch.entry.esm.js.map +1 -1
- package/dist/ui-webc/ui-webc.esm.js +1 -1
- package/package.json +4 -3
- package/dist/ui-webc/p-3e750355.entry.js +0 -2
- package/dist/ui-webc/p-d999b8d6.entry.js +0 -2
- /package/dist/ui-webc/{p-1a701759.entry.js.map → p-45b65a28.entry.js.map} +0 -0
- /package/dist/ui-webc/{p-e4f5dad7.entry.js.map → p-531dc32a.entry.js.map} +0 -0
- /package/dist/ui-webc/{p-479ae616.entry.js.map → p-78b6c86b.entry.js.map} +0 -0
- /package/dist/ui-webc/{p-4616484e.entry.js.map → p-e4ba9bd7.entry.js.map} +0 -0
- /package/dist/ui-webc/{p-d8084e5c.entry.js.map → p-ee497882.entry.js.map} +0 -0
- /package/dist/ui-webc/{p-d999b8d6.entry.js.map → p-faaf9da5.entry.js.map} +0 -0
|
@@ -10,7 +10,7 @@ const ScoutAppBar = class {
|
|
|
10
10
|
}
|
|
11
11
|
titleText;
|
|
12
12
|
render() {
|
|
13
|
-
return (index.h("header", { key: '
|
|
13
|
+
return (index.h("header", { key: '32779c0aa2d189ea43d2ad14dd920e6b7c4b3e17', class: "container" }, index.h("slot", { key: '0e6b6e66c1f129cb9833335e87298b7c99a6f35c', name: "prefix" }), index.h("div", { key: '9f1e2ac9696717a2defe268dd85eb35b641918f9', class: "title" }, this.titleText), index.h("slot", { key: 'b6b0405705921bfd0bdd17ca76bfee97f9bc6105', name: "suffix" })));
|
|
14
14
|
}
|
|
15
15
|
static get delegatesFocus() { return true; }
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-app-bar.entry.cjs.js","sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n::slotted(scout-button) {\n height: 100%;\n}\n\n.container {\n display: flex;\n flex: 1;\n height: var(--spacing-14);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-100);\n color: var(--color-text-brand-base);\n padding: var(--spacing-1);\n}\n\n.title {\n flex: 1;\n display: flex;\n align-items: center;\n font: var(--type-body-lg);\n font-weight: 500;\n padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: \"scout-app-bar\",\n styleUrl: \"app-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutAppBar {\n @Prop() titleText?: string;\n\n render() {\n return (\n <header class=\"container\">\n <slot name=\"prefix\" />\n <div class=\"title\">{this.titleText}</div>\n <slot name=\"suffix\" />\n </header>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,+XAA+X;;
|
|
1
|
+
{"version":3,"file":"scout-app-bar.entry.cjs.js","sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n::slotted(scout-button) {\n height: 100%;\n}\n\n.container {\n display: flex;\n flex: 1;\n height: var(--spacing-14);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-100);\n color: var(--color-text-brand-base);\n padding: var(--spacing-1);\n}\n\n.title {\n flex: 1;\n display: flex;\n align-items: center;\n font: var(--type-body-lg);\n font-weight: 500;\n padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n/**\n * The App Bar component is used at the top of a page to display a title and\n * optional prefix and suffix actions. It's typically used to provide a\n * native-like navigation experience.\n */\n@Component({\n tag: \"scout-app-bar\",\n styleUrl: \"app-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutAppBar {\n @Prop() titleText?: string;\n\n render() {\n return (\n <header class=\"container\">\n <slot name=\"prefix\" />\n <div class=\"title\">{this.titleText}</div>\n <slot name=\"suffix\" />\n </header>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCcpY,WAAW,GAAA,MAAA;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-B3fXatmo.js');
|
|
4
4
|
|
|
5
|
-
const buttonCss = ".button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
5
|
+
const buttonCss = ".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
6
6
|
|
|
7
7
|
const ScoutButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -37,8 +37,8 @@ const ScoutButton = class {
|
|
|
37
37
|
: {
|
|
38
38
|
type: this.type,
|
|
39
39
|
};
|
|
40
|
-
const icon = this.icon && index.h("span", { key: '
|
|
41
|
-
return (index.h(Tag, { key: '
|
|
40
|
+
const icon = this.icon && index.h("span", { key: '8f27b9e6a50427afef8d323212742f031f70db94', class: "icon", innerHTML: this.icon });
|
|
41
|
+
return (index.h(Tag, { key: '8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, index.h("span", { key: 'c6a68e20086b2da562324d4a15a973ba24fca90d', class: "content" }, index.h("slot", { key: '4d52b30c5addf5389494c994d91ab7f35a51d734' })), this.iconPosition === "after" && icon));
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
ScoutButton.style = buttonCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[".button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\n padding: 0 var(--spacing-4);\n font: var(--type-body-base);\n border-radius: var(--spacing-2);\n border: 1px solid transparent;\n cursor: pointer;\n text-decoration: none;\n}\n\n.icon {\n width: var(--spacing-5);\n height: var(--spacing-5);\n margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n}\n\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.primary {\n background-color: var(--color-background-brand-base);\n color: var(--color-text-brand-inverse);\n\n &:hover {\n background-color: var(--color-background-brand-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.outlined {\n background-color: transparent;\n border-color: var(--color-background-brand-subtle-base);\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.text {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.caution {\n background-color: var(--color-background-caution-bold-base);\n color: var(--color-text-caution-bold-base);\n\n &:hover {\n background-color: var(--color-background-caution-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.danger {\n background-color: var(--color-background-danger-bold-base);\n color: var(--color-text-danger-bold-base);\n\n &:hover {\n background-color: var(--color-background-danger-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-danger-bold-pressed);\n }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A
|
|
1
|
+
{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\n padding: 0 var(--spacing-4);\n font: var(--type-body-base);\n border-radius: var(--spacing-2);\n border: 1px solid transparent;\n cursor: pointer;\n text-decoration: none;\n}\n\n.icon {\n width: var(--spacing-5);\n height: var(--spacing-5);\n margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n}\n\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.primary {\n background-color: var(--color-background-brand-base);\n color: var(--color-text-brand-inverse);\n\n &:hover {\n background-color: var(--color-background-brand-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.outlined {\n background-color: transparent;\n border-color: var(--color-background-brand-subtle-base);\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.text {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.caution {\n background-color: var(--color-background-caution-bold-base);\n color: var(--color-text-caution-bold-base);\n\n &:hover {\n background-color: var(--color-background-caution-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.danger {\n background-color: var(--color-background-danger-bold-base);\n color: var(--color-text-danger-bold-base);\n\n &:hover {\n background-color: var(--color-background-danger-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-danger-bold-pressed);\n }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n tag: \"scout-button\",\n styleUrl: \"button.css\",\n scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() scoutClick: EventEmitter<void>;\n\n render() {\n const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n const props =\n this.type === \"link\"\n ? {\n href: this.href,\n target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCcl8E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACEA,OAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-checkbox.scout-radio-button.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx","src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 3px;\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.checkbox:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.checkbox:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n background-color: var(--color-background-brand-hovered);\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.checkbox:checked {\n background-color: var(--color-background-brand-base);\n border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n content: \"\";\n background-color: var(--color-text-brand-inverse);\n width: var(--spacing-6);\n height: var(--spacing-6);\n position: absolute;\n /* Needed because of the border */\n top: 50%;\n left: 50%;\n right: 0;\n bottom: 0;\n transform: translate(-50%, -50%);\n mask-image: var(--icon-checkbox);\n mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-checkbox\",\n styleUrl: \"checkbox.css\",\n scoped: true,\n})\nexport class ScoutCheckbox\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n value={this.value}\n name={this.name}\n class=\"checkbox\"\n style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n",".radio {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 100%;\n background-color: var(--color-white);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.radio:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.radio:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.radio:checked:hover::before {\n background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n width: var(--spacing-4);\n height: var(--spacing-4);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n}\n\n.radio:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-radio-button\",\n styleUrl: \"radio-button.css\",\n scoped: true,\n})\nexport class ScoutRadioButton\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const radio = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: radio.checked,\n element: radio,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"radio\"\n value={this.value}\n name={this.name}\n class=\"radio\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n"],"names":["Mixin","inputMixin","h","checkIcon"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"scout-checkbox.scout-radio-button.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx","src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 3px;\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.checkbox:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.checkbox:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n background-color: var(--color-background-brand-hovered);\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.checkbox:checked {\n background-color: var(--color-background-brand-base);\n border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n content: \"\";\n background-color: var(--color-text-brand-inverse);\n width: var(--spacing-6);\n height: var(--spacing-6);\n position: absolute;\n /* Needed because of the border */\n top: 50%;\n left: 50%;\n right: 0;\n bottom: 0;\n transform: translate(-50%, -50%);\n mask-image: var(--icon-checkbox);\n mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The checkbox component is used to let users select one or more options from a\n * set. For toggling a single option, consider using the Switch component\n * instead. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-checkbox\",\n styleUrl: \"checkbox.css\",\n scoped: true,\n})\nexport class ScoutCheckbox\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n value={this.value}\n name={this.name}\n class=\"checkbox\"\n style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n",".radio {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 100%;\n background-color: var(--color-white);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.radio:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.radio:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.radio:checked:hover::before {\n background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n width: var(--spacing-4);\n height: var(--spacing-4);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n}\n\n.radio:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The radio button component is used to let users select one option from a set.\n * When used in a form, make sure to wrap it in a Field component to display a\n * label, help text, and error messages.\n */\n@Component({\n tag: \"scout-radio-button\",\n styleUrl: \"radio-button.css\",\n scoped: true,\n})\nexport class ScoutRadioButton\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const radio = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: radio.checked,\n element: radio,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"radio\"\n value={this.value}\n name={this.name}\n class=\"radio\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n"],"names":["Mixin","inputMixin","h","checkIcon"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -37,7 +37,7 @@ const ScoutCheckbox = class extends index.Mixin(inputMixin.inputMixin) {
|
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
39
|
const Tag = this.label?.length ? "label" : "div";
|
|
40
|
-
return (index.h(Tag, { key: '
|
|
40
|
+
return (index.h(Tag, { key: '156e87e7a0d74f3cbc84b9c14a4ecce5b97e2912' }, index.h("input", { key: '6c70374d9e1f2605d7a0ec3b2216f8b055175e41', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkSvg})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
|
|
41
41
|
this.onInput();
|
|
42
42
|
this.onChange(event);
|
|
43
43
|
}, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
|
|
@@ -77,7 +77,7 @@ const ScoutRadioButton = class extends index.Mixin(inputMixin.inputMixin) {
|
|
|
77
77
|
}
|
|
78
78
|
render() {
|
|
79
79
|
const Tag = this.label?.length ? "label" : "div";
|
|
80
|
-
return (index.h(Tag, { key: '
|
|
80
|
+
return (index.h(Tag, { key: '9d30a566a03bfa1b49411878fbaa6bc07d53d2f6' }, index.h("input", { key: 'e2f2c58a2ec00fce35d27860e6fa37e23d09d040', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
|
|
81
81
|
this.onInput();
|
|
82
82
|
this.onChange(event);
|
|
83
83
|
}, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
|
|
@@ -38,7 +38,7 @@ const ScoutField = class {
|
|
|
38
38
|
this.errorHidden = false;
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (index.h("div", { key: '
|
|
41
|
+
return (index.h("div", { key: '9205b4607dc3805cb2df4434abf6fa3adc5ce63a', class: "field" }, index.h("label", { key: 'ac4a5e25d0e7742244a2e50c9627b77cedaf456a', htmlFor: this.inputId, class: "label" }, this.label), index.h("slot", { key: 'f1ec47e560f3ed6e528cefef95a21d3ca28232bb' }), index.h("p", { key: '2b6de5c916264287019f1cbd5c73966eff4a9bbd', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && index.h("p", { key: '7cb1582085194921f8dde1ecc138fa048cc6fd75', class: "help-text" }, this.helpText)));
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
ScoutField.style = fieldCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-field.entry.cjs.js","sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n}\n\n.label {\n font: var(--type-label-sm);\n font-weight: 600;\n color: var(--color-text-base);\n}\n\n.error-text {\n font: var(--type-label-sm);\n color: var(--color-text-danger-base);\n margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n margin: 0;\n}\n\n.help-text {\n font: var(--type-label-sm);\n color: var(--color-gray-600);\n margin: var(--spacing-1) 0 0 0;\n}\n","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n@Component({\n tag: \"scout-field\",\n styleUrl: \"field.css\",\n scoped: true,\n})\nexport class ScoutField {\n /**\n * Label shown above the field.\n */\n @Prop() label!: string;\n\n /**\n * Help text shown below the field.\n */\n @Prop() helpText?: string;\n\n @State() inputId: string;\n @State() errorText: string | null = null;\n @State() errorHidden: boolean = false;\n\n @Element() hostElement!: HTMLElement;\n\n @Listen(\"_scoutFieldId\")\n catchFieldId(event: CustomEvent<string>) {\n event.stopPropagation();\n this.inputId = event.detail;\n }\n\n @Listen(\"_scoutValidate\")\n handleValidation(\n event: CustomEvent<{\n element:\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLOutputElement\n | HTMLSelectElement\n | HTMLTextAreaElement;\n }>,\n ) {\n const { element } = event.detail;\n\n this.errorHidden = true;\n if (element.validity.valid) {\n this.errorText = null;\n } else {\n this.errorText = element.validationMessage;\n }\n }\n\n @Listen(\"scoutBlur\")\n @Listen(\"_scoutInvalid\")\n showError() {\n this.errorHidden = false;\n }\n\n render() {\n return (\n <div class=\"field\">\n <label htmlFor={this.inputId} class=\"label\">\n {this.label}\n </label>\n <slot />\n <p class=\"error-text\" aria-live=\"polite\">\n {!this.errorHidden && this.errorText}\n </p>\n {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n </div>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,uaAAua;;
|
|
1
|
+
{"version":3,"file":"scout-field.entry.cjs.js","sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n}\n\n.label {\n font: var(--type-label-sm);\n font-weight: 600;\n color: var(--color-text-base);\n}\n\n.error-text {\n font: var(--type-label-sm);\n color: var(--color-text-danger-base);\n margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n margin: 0;\n}\n\n.help-text {\n font: var(--type-label-sm);\n color: var(--color-gray-600);\n margin: var(--spacing-1) 0 0 0;\n}\n","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n/**\n * The field component is used to wrap form fields with a label, help text, and\n * error messages. It automatically captures validation events from its child\n * input components and displays error messages accordingly.\n */\n@Component({\n tag: \"scout-field\",\n styleUrl: \"field.css\",\n scoped: true,\n})\nexport class ScoutField {\n /**\n * Label shown above the field.\n */\n @Prop() label!: string;\n\n /**\n * Help text shown below the field.\n */\n @Prop() helpText?: string;\n\n @State() inputId: string;\n @State() errorText: string | null = null;\n @State() errorHidden: boolean = false;\n\n @Element() hostElement!: HTMLElement;\n\n @Listen(\"_scoutFieldId\")\n catchFieldId(event: CustomEvent<string>) {\n event.stopPropagation();\n this.inputId = event.detail;\n }\n\n @Listen(\"_scoutValidate\")\n handleValidation(\n event: CustomEvent<{\n element:\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLOutputElement\n | HTMLSelectElement\n | HTMLTextAreaElement;\n }>,\n ) {\n const { element } = event.detail;\n\n this.errorHidden = true;\n if (element.validity.valid) {\n this.errorText = null;\n } else {\n this.errorText = element.validationMessage;\n }\n }\n\n @Listen(\"scoutBlur\")\n @Listen(\"_scoutInvalid\")\n showError() {\n this.errorHidden = false;\n }\n\n render() {\n return (\n <div class=\"field\">\n <label htmlFor={this.inputId} class=\"label\">\n {this.label}\n </label>\n <slot />\n <p class=\"error-text\" aria-live=\"polite\">\n {!this.errorHidden && this.errorText}\n </p>\n {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n </div>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCY3a,UAAU,GAAA,MAAA;;;;AACrB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEP,IAAA,OAAO;IACP,SAAS,GAAkB,IAAI;IAC/B,WAAW,GAAY,KAAK;;AAKrC,IAAA,YAAY,CAAC,KAA0B,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;;AAI7B,IAAA,gBAAgB,CACd,KAOE,EAAA;AAEF,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB;;;IAM9C,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAG1B,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,EACxC,IAAI,CAAC,KAAK,CACL,EACRA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACRA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,WAAA,EAAW,QAAQ,EACrC,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC,EACH,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,CACtD;;;;;;;"}
|
|
@@ -40,7 +40,7 @@ const ScoutInput = class extends index.Mixin(inputMixin.inputMixin) {
|
|
|
40
40
|
*/
|
|
41
41
|
disabled = false;
|
|
42
42
|
render() {
|
|
43
|
-
return (index.h("input", { key: '
|
|
43
|
+
return (index.h("input", { key: '91a90ed63063ef5533308ff1cb61840aec0bb1d3', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }));
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
ScoutInput.style = inputCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-input.entry.cjs.js","sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n height: var(--spacing-10);\n padding: var(--spacing-2);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n}\n\n.input:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n | \"text\"\n | \"password\"\n | \"email\"\n | \"number\"\n | \"tel\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\nexport type InputMode =\n | \"none\"\n | \"text\"\n | \"decimal\"\n | \"numeric\"\n | \"tel\"\n | \"search\"\n | \"email\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\n@Component({\n tag: \"scout-input\",\n styleUrl: \"input.css\",\n scoped: true,\n})\nexport class ScoutInput\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Type of input element. If you need a number input, read the accessibility\n * section of this MDN article first:\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n */\n @Prop() type: InputType = \"text\";\n\n /**\n * Input mode hints for devices with dynamic keyboards.\n */\n @Prop() inputmode?: InputMode;\n\n /**\n * Regex pattern for input validation.\n */\n @Prop() pattern?: string;\n\n /**\n * Value of the input element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n @Prop() name: string;\n\n /**\n * Whether the input is disabled. Disabled inputs are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type={this.type}\n name={this.name}\n inputMode={this.inputmode}\n pattern={this.pattern}\n class=\"input\"\n value={this.value}\n disabled={this.disabled}\n onInput={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n );\n }\n}\n"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;
|
|
1
|
+
{"version":3,"file":"scout-input.entry.cjs.js","sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n height: var(--spacing-10);\n padding: var(--spacing-2);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n}\n\n.input:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n | \"text\"\n | \"password\"\n | \"email\"\n | \"number\"\n | \"tel\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\nexport type InputMode =\n | \"none\"\n | \"text\"\n | \"decimal\"\n | \"numeric\"\n | \"tel\"\n | \"search\"\n | \"email\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\n/**\n * The input component is a basic text input field that can be used to capture\n * user input. It supports various types and input modes for different use\n * cases. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-input\",\n styleUrl: \"input.css\",\n scoped: true,\n})\nexport class ScoutInput\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Type of input element. If you need a number input, read the accessibility\n * section of this MDN article first:\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n */\n @Prop() type: InputType = \"text\";\n\n /**\n * Input mode hints for devices with dynamic keyboards.\n */\n @Prop() inputmode?: InputMode;\n\n /**\n * Regex pattern for input validation.\n */\n @Prop() pattern?: string;\n\n /**\n * Value of the input element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n @Prop() name: string;\n\n /**\n * Whether the input is disabled. Disabled inputs are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type={this.type}\n name={this.name}\n inputMode={this.inputmode}\n pattern={this.pattern}\n class=\"input\"\n value={this.value}\n disabled={this.disabled}\n onInput={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n );\n }\n}\n"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;AC0CrW,MAAA,UACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACEC,oEACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA;;;;;;;"}
|
|
@@ -28,7 +28,7 @@ const ScoutSelect = class extends index.Mixin(inputMixin.inputMixin) {
|
|
|
28
28
|
disabled = false;
|
|
29
29
|
name;
|
|
30
30
|
render() {
|
|
31
|
-
return (index.h("div", { key: '
|
|
31
|
+
return (index.h("div", { key: '15e5237281f534b083659425bb6a0944e9b296eb', class: "select-wrapper" }, index.h("select", { key: '5f8ba02781864c041bfeaffbcdcf6fc4185c45f5', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, index.h("slot", { key: '0f593e02a74e59aef1a2c2647df42712a7558d96' })), index.h("span", { key: '37b45aa85cf7cc9a3dbbcc5b575ff824942875da', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
ScoutSelect.style = selectCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-select.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n position: relative;\n display: inline-flex;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: var(--spacing-10);\n padding: var(--spacing-2);\n padding-right: var(--spacing-8);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n border-color: var(--color-gray-400);\n}\n\n.select:focus {\n outline: 2px solid var(--color-background-brand-base);\n outline-offset: 1px;\n}\n\n.select:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n\n.select-icon {\n position: absolute;\n right: var(--spacing-2);\n top: 50%;\n transform: translateY(-50%);\n width: var(--spacing-5);\n height: var(--spacing-5);\n background-color: var(--color-text-base);\n mask-image: var(--icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: contain;\n pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n background-color: var(--color-gray-500);\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-select\",\n styleUrl: \"select.css\",\n scoped: true,\n})\nexport class ScoutSelect\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Value of the select element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n /**\n * Whether the select is disabled. Disabled selects are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n @Prop() name: string;\n\n render() {\n return (\n <div class=\"select-wrapper\">\n <select\n id={this.ariaId}\n name={this.name}\n class=\"select\"\n disabled={this.disabled}\n onChange={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n >\n <slot />\n </select>\n <span\n class=\"select-icon\"\n style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n}\n"],"names":["Mixin","inputMixin","h","chevronIcon"],"mappings":";;;;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;
|
|
1
|
+
{"version":3,"file":"scout-select.entry.cjs.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n position: relative;\n display: inline-flex;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: var(--spacing-10);\n padding: var(--spacing-2);\n padding-right: var(--spacing-8);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n border-color: var(--color-gray-400);\n}\n\n.select:focus {\n outline: 2px solid var(--color-background-brand-base);\n outline-offset: 1px;\n}\n\n.select:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n\n.select-icon {\n position: absolute;\n right: var(--spacing-2);\n top: 50%;\n transform: translateY(-50%);\n width: var(--spacing-5);\n height: var(--spacing-5);\n background-color: var(--color-text-base);\n mask-image: var(--icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: contain;\n pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n background-color: var(--color-gray-500);\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The select component is a dropdown menu that allows users to select one\n * option from a list. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-select\",\n styleUrl: \"select.css\",\n scoped: true,\n})\nexport class ScoutSelect\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Value of the select element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n /**\n * Whether the select is disabled. Disabled selects are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n @Prop() name: string;\n\n render() {\n return (\n <div class=\"select-wrapper\">\n <select\n id={this.ariaId}\n name={this.name}\n class=\"select\"\n disabled={this.disabled}\n onChange={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n >\n <slot />\n </select>\n <span\n class=\"select-icon\"\n style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n}\n"],"names":["Mixin","inputMixin","h","chevronIcon"],"mappings":";;;;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACoBxvC,MAAA,WACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACTA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}
|
|
@@ -36,7 +36,7 @@ const ScoutSwitch = class extends index.Mixin(inputMixin.inputMixin) {
|
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
38
|
const Tag = this.label?.length ? "label" : "div";
|
|
39
|
-
return (index.h(Tag, { key: '
|
|
39
|
+
return (index.h(Tag, { key: '22aee29982e7bb00cf76c2a096c4cf40b53e51c4' }, this.label, index.h("span", { key: '5ce6c501344e3da675d371e4a62794104ec1e6f1', class: "inlineDivider" }), index.h("input", { key: '81c07b77cd2ccdc66b93067da4eb15b62c87d5fd', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", class: "switch", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled, onChange: (event) => {
|
|
40
40
|
this.onInput();
|
|
41
41
|
this.onChange(event);
|
|
42
42
|
}, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n width: var(--spacing-10);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--spacing-8);\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n transition-property: border-color;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n cursor: pointer;\n --switch-ball-padding: calc(var(--spacing-1) / 4);\n --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n transition-property: none;\n border-color: var(--color-gray-400);\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n background-color: var(--color-gray-400);\n}\n\n.switch::before {\n content: \"\";\n background-color: var(--color-gray-300);\n width: var(--switch-ball-size);\n height: var(--switch-ball-size);\n border-radius: 50%;\n position: absolute;\n top: var(--switch-ball-padding);\n left: var(--switch-ball-padding);\n transition-duration: 0.3s;\n transition-property: left, right;\n}\n.switch:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n background-color: var(--color-gray-300);\n}\n\nlabel {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n\n.inlineDivider {\n width: var(--spacing-2);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-switch\",\n styleUrl: \"switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutSwitch\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Indicates whether the switch is toggled on or off.\n */\n @Prop() toggled: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n {this.label}\n <span class=\"inlineDivider\"></span>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n class=\"switch\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.toggled}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n </Tag>\n );\n }\n}\n"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;
|
|
1
|
+
{"version":3,"file":"scout-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n width: var(--spacing-10);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--spacing-8);\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n transition-property: border-color;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n cursor: pointer;\n --switch-ball-padding: calc(var(--spacing-1) / 4);\n --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n transition-property: none;\n border-color: var(--color-gray-400);\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n background-color: var(--color-gray-400);\n}\n\n.switch::before {\n content: \"\";\n background-color: var(--color-gray-300);\n width: var(--switch-ball-size);\n height: var(--switch-ball-size);\n border-radius: 50%;\n position: absolute;\n top: var(--switch-ball-padding);\n left: var(--switch-ball-padding);\n transition-duration: 0.3s;\n transition-property: left, right;\n}\n.switch:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n background-color: var(--color-gray-300);\n}\n\nlabel {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n\n.inlineDivider {\n width: var(--spacing-2);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The switch component is used to toggle between two states, on and off.\n * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-switch\",\n styleUrl: \"switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutSwitch\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Indicates whether the switch is toggled on or off.\n */\n @Prop() toggled: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n {this.label}\n <span class=\"inlineDivider\"></span>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n class=\"switch\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.toggled}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n </Tag>\n );\n }\n}\n"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACuBvtD,MAAA,WACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,CAAC,CAAA;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACEC,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* The App Bar component is used at the top of a page to display a title and
|
|
4
|
+
* optional prefix and suffix actions. It's typically used to provide a
|
|
5
|
+
* native-like navigation experience.
|
|
6
|
+
*/
|
|
2
7
|
export class ScoutAppBar {
|
|
3
8
|
titleText;
|
|
4
9
|
render() {
|
|
5
|
-
return (h("header", { key: '
|
|
10
|
+
return (h("header", { key: '32779c0aa2d189ea43d2ad14dd920e6b7c4b3e17', class: "container" }, h("slot", { key: '0e6b6e66c1f129cb9833335e87298b7c99a6f35c', name: "prefix" }), h("div", { key: '9f1e2ac9696717a2defe268dd85eb35b641918f9', class: "title" }, this.titleText), h("slot", { key: 'b6b0405705921bfd0bdd17ca76bfee97f9bc6105', name: "suffix" })));
|
|
6
11
|
}
|
|
7
12
|
static get is() { return "scout-app-bar"; }
|
|
8
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../src/components/app-bar/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../src/components/app-bar/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAQH,MAAM,OAAO,WAAW;IACd,SAAS,CAAU;IAE3B,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,WAAW;YACvB,6DAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO;YACzC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\n\n/**\n * The App Bar component is used at the top of a page to display a title and\n * optional prefix and suffix actions. It's typically used to provide a\n * native-like navigation experience.\n */\n@Component({\n tag: \"scout-app-bar\",\n styleUrl: \"app-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutAppBar {\n @Prop() titleText?: string;\n\n render() {\n return (\n <header class=\"container\">\n <slot name=\"prefix\" />\n <div class=\"title\">{this.titleText}</div>\n <slot name=\"suffix\" />\n </header>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
/**
|
|
3
|
-
* A
|
|
3
|
+
* A button component that can be used either as a normal button or as a link.
|
|
4
|
+
* Will render a `<button>` element when the `type` is set to "button",
|
|
5
|
+
* "submit", or "reset", and an `<a>` element when the `type` is set to "link".
|
|
4
6
|
*/
|
|
5
7
|
export class ScoutButton {
|
|
6
8
|
type = "button";
|
|
@@ -31,8 +33,8 @@ export class ScoutButton {
|
|
|
31
33
|
: {
|
|
32
34
|
type: this.type,
|
|
33
35
|
};
|
|
34
|
-
const icon = this.icon && h("span", { key: '
|
|
35
|
-
return (h(Tag, { key: '
|
|
36
|
+
const icon = this.icon && h("span", { key: '8f27b9e6a50427afef8d323212742f031f70db94', class: "icon", innerHTML: this.icon });
|
|
37
|
+
return (h(Tag, { key: '8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'c6a68e20086b2da562324d4a15a973ba24fca90d', class: "content" }, h("slot", { key: '4d52b30c5addf5389494c994d91ab7f35a51d734' })), this.iconPosition === "after" && icon));
|
|
36
38
|
}
|
|
37
39
|
static get is() { return "scout-button"; }
|
|
38
40
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IACd,YAAY,GAAuB,OAAO,CAAC;IAC3C,QAAQ,GAAY,KAAK,CAAC;IAEzB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEtE,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI;YACvC,6DAAM,KAAK,EAAC,SAAS;gBACnB,8DAAQ,CACH;YACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n tag: \"scout-button\",\n styleUrl: \"button.css\",\n scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() scoutClick: EventEmitter<void>;\n\n render() {\n const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n const props =\n this.type === \"link\"\n ? {\n href: this.href,\n target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { h, Mixin, } from "@stencil/core";
|
|
2
2
|
import checkIcon from "@tabler/icons/outline/check.svg";
|
|
3
3
|
import { inputMixin } from "../../mixins/inputMixin";
|
|
4
|
+
/**
|
|
5
|
+
* The checkbox component is used to let users select one or more options from a
|
|
6
|
+
* set. For toggling a single option, consider using the Switch component
|
|
7
|
+
* instead. When used in a form, make sure to wrap it in a Field component to
|
|
8
|
+
* display a label, help text, and error messages.
|
|
9
|
+
*/
|
|
4
10
|
export class ScoutCheckbox extends Mixin(inputMixin) {
|
|
5
11
|
constructor() {
|
|
6
12
|
super();
|
|
@@ -24,7 +30,7 @@ export class ScoutCheckbox extends Mixin(inputMixin) {
|
|
|
24
30
|
}
|
|
25
31
|
render() {
|
|
26
32
|
const Tag = this.label?.length ? "label" : "div";
|
|
27
|
-
return (h(Tag, { key: '
|
|
33
|
+
return (h(Tag, { key: '156e87e7a0d74f3cbc84b9c14a4ecce5b97e2912' }, h("input", { key: '6c70374d9e1f2605d7a0ec3b2216f8b055175e41', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkIcon})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
|
|
28
34
|
this.onInput();
|
|
29
35
|
this.onChange(event);
|
|
30
36
|
}, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;;;;GAKG;AAMH,MAAM,OAAO,aACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAElD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The checkbox component is used to let users select one or more options from a\n * set. For toggling a single option, consider using the Switch component\n * instead. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-checkbox\",\n styleUrl: \"checkbox.css\",\n scoped: true,\n})\nexport class ScoutCheckbox\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n value={this.value}\n name={this.name}\n class=\"checkbox\"\n style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* The field component is used to wrap form fields with a label, help text, and
|
|
4
|
+
* error messages. It automatically captures validation events from its child
|
|
5
|
+
* input components and displays error messages accordingly.
|
|
6
|
+
*/
|
|
2
7
|
export class ScoutField {
|
|
3
8
|
/**
|
|
4
9
|
* Label shown above the field.
|
|
@@ -30,7 +35,7 @@ export class ScoutField {
|
|
|
30
35
|
this.errorHidden = false;
|
|
31
36
|
}
|
|
32
37
|
render() {
|
|
33
|
-
return (h("div", { key: '
|
|
38
|
+
return (h("div", { key: '9205b4607dc3805cb2df4434abf6fa3adc5ce63a', class: "field" }, h("label", { key: 'ac4a5e25d0e7742244a2e50c9627b77cedaf456a', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: 'f1ec47e560f3ed6e528cefef95a21d3ca28232bb' }), h("p", { key: '2b6de5c916264287019f1cbd5c73966eff4a9bbd', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '7cb1582085194921f8dde1ecc138fa048cc6fd75', class: "help-text" }, this.helpText)));
|
|
34
39
|
}
|
|
35
40
|
static get is() { return "scout-field"; }
|
|
36
41
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3E;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,QAAQ,CAAU;IAEjB,OAAO,CAAS;IAChB,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAAY,KAAK,CAAC;IAE3B,WAAW,CAAe;IAGrC,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,CAAC;IAGD,gBAAgB,CACd,KAOE;QAEF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QAC7C,CAAC;IACH,CAAC;IAID,SAAS;QACP,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,OAAO;YAChB,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,IACxC,IAAI,CAAC,KAAK,CACL;YACR,8DAAQ;YACR,0DAAG,KAAK,EAAC,YAAY,eAAW,QAAQ,IACrC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC;YACH,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n/**\n * The field component is used to wrap form fields with a label, help text, and\n * error messages. It automatically captures validation events from its child\n * input components and displays error messages accordingly.\n */\n@Component({\n tag: \"scout-field\",\n styleUrl: \"field.css\",\n scoped: true,\n})\nexport class ScoutField {\n /**\n * Label shown above the field.\n */\n @Prop() label!: string;\n\n /**\n * Help text shown below the field.\n */\n @Prop() helpText?: string;\n\n @State() inputId: string;\n @State() errorText: string | null = null;\n @State() errorHidden: boolean = false;\n\n @Element() hostElement!: HTMLElement;\n\n @Listen(\"_scoutFieldId\")\n catchFieldId(event: CustomEvent<string>) {\n event.stopPropagation();\n this.inputId = event.detail;\n }\n\n @Listen(\"_scoutValidate\")\n handleValidation(\n event: CustomEvent<{\n element:\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLOutputElement\n | HTMLSelectElement\n | HTMLTextAreaElement;\n }>,\n ) {\n const { element } = event.detail;\n\n this.errorHidden = true;\n if (element.validity.valid) {\n this.errorText = null;\n } else {\n this.errorText = element.validationMessage;\n }\n }\n\n @Listen(\"scoutBlur\")\n @Listen(\"_scoutInvalid\")\n showError() {\n this.errorHidden = false;\n }\n\n render() {\n return (\n <div class=\"field\">\n <label htmlFor={this.inputId} class=\"label\">\n {this.label}\n </label>\n <slot />\n <p class=\"error-text\" aria-live=\"polite\">\n {!this.errorHidden && this.errorText}\n </p>\n {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { h, Mixin, } from "@stencil/core";
|
|
2
2
|
import { inputMixin } from "../../mixins/inputMixin";
|
|
3
|
+
/**
|
|
4
|
+
* The input component is a basic text input field that can be used to capture
|
|
5
|
+
* user input. It supports various types and input modes for different use
|
|
6
|
+
* cases. When used in a form, make sure to wrap it in a Field component to
|
|
7
|
+
* display a label, help text, and error messages.
|
|
8
|
+
*/
|
|
3
9
|
export class ScoutInput extends Mixin(inputMixin) {
|
|
4
10
|
constructor() {
|
|
5
11
|
super();
|
|
@@ -29,7 +35,7 @@ export class ScoutInput extends Mixin(inputMixin) {
|
|
|
29
35
|
*/
|
|
30
36
|
disabled = false;
|
|
31
37
|
render() {
|
|
32
|
-
return (h("input", { key: '
|
|
38
|
+
return (h("input", { key: '91a90ed63063ef5533308ff1cb61840aec0bb1d3', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }));
|
|
33
39
|
}
|
|
34
40
|
static get is() { return "scout-input"; }
|
|
35
41
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAwBrD;;;;;GAKG;AAMH,MAAM,OAAO,UACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGzB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAEnB,IAAI,CAAS;IAErB;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC,MAAM;QACJ,OAAO,CACL,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n | \"text\"\n | \"password\"\n | \"email\"\n | \"number\"\n | \"tel\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\nexport type InputMode =\n | \"none\"\n | \"text\"\n | \"decimal\"\n | \"numeric\"\n | \"tel\"\n | \"search\"\n | \"email\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\n/**\n * The input component is a basic text input field that can be used to capture\n * user input. It supports various types and input modes for different use\n * cases. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-input\",\n styleUrl: \"input.css\",\n scoped: true,\n})\nexport class ScoutInput\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Type of input element. If you need a number input, read the accessibility\n * section of this MDN article first:\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n */\n @Prop() type: InputType = \"text\";\n\n /**\n * Input mode hints for devices with dynamic keyboards.\n */\n @Prop() inputmode?: InputMode;\n\n /**\n * Regex pattern for input validation.\n */\n @Prop() pattern?: string;\n\n /**\n * Value of the input element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n @Prop() name: string;\n\n /**\n * Whether the input is disabled. Disabled inputs are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type={this.type}\n name={this.name}\n inputMode={this.inputmode}\n pattern={this.pattern}\n class=\"input\"\n value={this.value}\n disabled={this.disabled}\n onInput={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n );\n }\n}\n"]}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { h, Mixin, } from "@stencil/core";
|
|
2
2
|
import { inputMixin } from "../../mixins/inputMixin";
|
|
3
|
+
/**
|
|
4
|
+
* The radio button component is used to let users select one option from a set.
|
|
5
|
+
* When used in a form, make sure to wrap it in a Field component to display a
|
|
6
|
+
* label, help text, and error messages.
|
|
7
|
+
*/
|
|
3
8
|
export class ScoutRadioButton extends Mixin(inputMixin) {
|
|
4
9
|
constructor() {
|
|
5
10
|
super();
|
|
@@ -23,7 +28,7 @@ export class ScoutRadioButton extends Mixin(inputMixin) {
|
|
|
23
28
|
}
|
|
24
29
|
render() {
|
|
25
30
|
const Tag = this.label?.length ? "label" : "div";
|
|
26
|
-
return (h(Tag, { key: '
|
|
31
|
+
return (h(Tag, { key: '9d30a566a03bfa1b49411878fbaa6bc07d53d2f6' }, h("input", { key: 'e2f2c58a2ec00fce35d27860e6fa37e23d09d040', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
|
|
27
32
|
this.onInput();
|
|
28
33
|
this.onChange(event);
|
|
29
34
|
}, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;;;GAIG;AAMH,MAAM,OAAO,gBACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,OAAO,qBACI,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The radio button component is used to let users select one option from a set.\n * When used in a form, make sure to wrap it in a Field component to display a\n * label, help text, and error messages.\n */\n@Component({\n tag: \"scout-radio-button\",\n styleUrl: \"radio-button.css\",\n scoped: true,\n})\nexport class ScoutRadioButton\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const radio = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: radio.checked,\n element: radio,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"radio\"\n value={this.value}\n name={this.name}\n class=\"radio\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { h, Mixin, } from "@stencil/core";
|
|
2
2
|
import chevronIcon from "@tabler/icons/outline/chevron-down.svg";
|
|
3
3
|
import { inputMixin } from "../../mixins/inputMixin";
|
|
4
|
+
/**
|
|
5
|
+
* The select component is a dropdown menu that allows users to select one
|
|
6
|
+
* option from a list. When used in a form, make sure to wrap it in a Field
|
|
7
|
+
* component to display a label, help text, and error messages.
|
|
8
|
+
*/
|
|
4
9
|
export class ScoutSelect extends Mixin(inputMixin) {
|
|
5
10
|
constructor() {
|
|
6
11
|
super();
|
|
@@ -16,7 +21,7 @@ export class ScoutSelect extends Mixin(inputMixin) {
|
|
|
16
21
|
disabled = false;
|
|
17
22
|
name;
|
|
18
23
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
24
|
+
return (h("div", { key: '15e5237281f534b083659425bb6a0944e9b296eb', class: "select-wrapper" }, h("select", { key: '5f8ba02781864c041bfeaffbcdcf6fc4185c45f5', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '0f593e02a74e59aef1a2c2647df42712a7558d96' })), h("span", { key: '37b45aa85cf7cc9a3dbbcc5b575ff824942875da', class: "select-icon", style: { "--icon-chevron": `url(${chevronIcon})` }, "aria-hidden": "true" })));
|
|
20
25
|
}
|
|
21
26
|
static get is() { return "scout-select"; }
|
|
22
27
|
static get encapsulation() { return "scoped"; }
|