@haiilo/catalyst 0.10.8 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/{p-e5c5e21d.entry.js → p-aa382647.entry.js} +4 -4
- package/dist/catalyst/p-aa382647.entry.js.map +1 -0
- package/dist/catalyst/scss/index.scss +1 -1
- package/dist/cjs/cat-alert_21.cjs.entry.js +74 -92
- package/dist/cjs/cat-alert_21.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/cat-badge/cat-badge.css +15 -15
- package/dist/collection/components/cat-input/cat-input.js +1 -1
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.css +1 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +5 -4
- package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.js +84 -205
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/scss/index.scss +1 -1
- package/dist/components/cat-badge.js +1 -1
- package/dist/components/cat-badge.js.map +1 -1
- package/dist/components/cat-input.js.map +1 -1
- package/dist/components/cat-radio-group.js +0 -2
- package/dist/components/cat-radio-group.js.map +1 -1
- package/dist/components/cat-radio.js +1 -1
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-select.js +77 -97
- package/dist/components/cat-select.js.map +1 -1
- package/dist/esm/cat-alert_21.entry.js +74 -92
- package/dist/esm/cat-alert_21.entry.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-input/cat-input.d.ts +1 -1
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +9 -0
- package/dist/types/components/cat-select/cat-select.d.ts +13 -28
- package/dist/types/components.d.ts +30 -37
- package/package.json +2 -2
- package/dist/catalyst/p-e5c5e21d.entry.js.map +0 -1
package/dist/cjs/catalyst.cjs.js
CHANGED
|
@@ -15,7 +15,7 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["cat-textarea.cjs",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_21.cjs",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"
|
|
18
|
+
return index.bootstrapLazy([["cat-textarea.cjs",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_21.cjs",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"items":[16],"value":[1032],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"search":[4],"hint":[1],"hasSlottedLabel":[32]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"]]],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-tab",{"label":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
//# sourceMappingURL=catalyst.cjs.js.map
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["cat-textarea.cjs",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_21.cjs",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"
|
|
17
|
+
return index.bootstrapLazy([["cat-textarea.cjs",[[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}]]],["cat-alert_21.cjs",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"maxLength":[2,"max-length"],"min":[2],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"items":[16],"value":[1032],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"search":[4],"hint":[1],"hasSlottedLabel":[32]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"]]],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-tab",{"label":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
|
+
"./components/cat-select/cat-select.js",
|
|
3
4
|
"./components/cat-alert/cat-alert.js",
|
|
4
5
|
"./components/cat-avatar/cat-avatar.js",
|
|
5
6
|
"./components/cat-badge/cat-badge.js",
|
|
@@ -13,7 +14,6 @@
|
|
|
13
14
|
"./components/cat-radio/cat-radio.js",
|
|
14
15
|
"./components/cat-radio-group/cat-radio-group.js",
|
|
15
16
|
"./components/cat-scrollable/cat-scrollable.js",
|
|
16
|
-
"./components/cat-select/cat-select.js",
|
|
17
17
|
"./components/cat-skeleton/cat-skeleton.js",
|
|
18
18
|
"./components/cat-spinner/cat-spinner.js",
|
|
19
19
|
"./components/cat-tab/cat-tab.js",
|
|
@@ -89,38 +89,38 @@
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.badge-xs {
|
|
92
|
-
height:
|
|
92
|
+
height: 1rem;
|
|
93
93
|
min-width: 0.75rem;
|
|
94
|
-
font-size:
|
|
95
|
-
padding:
|
|
94
|
+
font-size: 12px;
|
|
95
|
+
padding: 0 0.25rem;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
.badge-s {
|
|
99
|
-
height:
|
|
99
|
+
height: 1.5rem;
|
|
100
100
|
min-width: 1rem;
|
|
101
|
-
font-size:
|
|
102
|
-
padding: 0
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
padding: 0 0.5rem;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.badge-m {
|
|
106
|
-
height:
|
|
106
|
+
height: 2rem;
|
|
107
107
|
min-width: 1.25rem;
|
|
108
|
-
font-size:
|
|
109
|
-
padding: 0
|
|
108
|
+
font-size: 13px;
|
|
109
|
+
padding: 0 0.75rem;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
.badge-l {
|
|
113
|
-
height:
|
|
113
|
+
height: 2.5rem;
|
|
114
114
|
min-width: 1.5rem;
|
|
115
|
-
font-size:
|
|
116
|
-
padding: 0
|
|
115
|
+
font-size: 15px;
|
|
116
|
+
padding: 0 1rem;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.badge-xl {
|
|
120
|
-
height:
|
|
120
|
+
height: 3rem;
|
|
121
121
|
min-width: 1.75rem;
|
|
122
|
-
font-size:
|
|
123
|
-
padding: 1rem
|
|
122
|
+
font-size: 18px;
|
|
123
|
+
padding: 0 1rem;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.badge-pulse.badge-filled {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly i18n = CatI18nRegistry.getInstance();\n private readonly id = `cat-input-${nextUniqueId++}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete?: string;\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * The label for the input.\n */\n @Prop() label = '';\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @Prop() labelHidden = false;\n\n /**\n * A maximum value for numeric values.\n */\n @Prop() max?: number;\n\n /**\n * A maximum length (number of characters) for textual values.\n */\n @Prop() maxLength?: number;\n\n /**\n * A minimum value for numeric values.\n */\n @Prop() min?: number;\n\n /**\n * A minimum length (number of characters) for textual values.\n */\n @Prop() minLength?: number;\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name = '';\n\n /**\n * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * Use round input edges.\n */\n @Prop() round = false;\n\n /**\n * Type of form control.\n */\n @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n /**\n * The initial value of the control.\n */\n @Prop({ mutable: true }) value?: string | number;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.error('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /**\n * Sets focus on the input. Use this method instead of `input.focus()`.\n *\n * @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async setFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /**\n * Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n {!this.required && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({this.i18n.t('input.optional')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.max}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={this.i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint || hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly i18n = CatI18nRegistry.getInstance();\n private readonly id = `cat-input-${nextUniqueId++}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete?: string;\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * The label for the input.\n */\n @Prop() label = '';\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @Prop() labelHidden = false;\n\n /**\n * A maximum value for numeric values.\n */\n @Prop() max?: number;\n\n /**\n * A maximum length (number of characters) for textual values.\n */\n @Prop() maxLength?: number;\n\n /**\n * A minimum value for numeric values.\n */\n @Prop() min?: number;\n\n /**\n * A minimum length (number of characters) for textual values.\n */\n @Prop() minLength?: number;\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name = '';\n\n /**\n * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * Use round input edges.\n */\n @Prop() round = false;\n\n /**\n * Type of form control.\n */\n @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n /**\n * The value of the control.\n */\n @Prop({ mutable: true }) value?: string | number;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.error('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /**\n * Sets focus on the input. Use this method instead of `input.focus()`.\n *\n * @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async setFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /**\n * Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel || this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n {!this.required && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({this.i18n.t('input.optional')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.max}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={this.i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint || hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';
|
|
2
|
+
/**
|
|
3
|
+
* A group of radio buttons.
|
|
4
|
+
*/
|
|
2
5
|
export class CatRadioGroup {
|
|
3
6
|
constructor() {
|
|
4
7
|
this.catRadioGroup = [];
|
|
@@ -42,7 +45,6 @@ export class CatRadioGroup {
|
|
|
42
45
|
this.onValueChanged(this.value);
|
|
43
46
|
this.onDisabledChanged(this.disabled);
|
|
44
47
|
this.onLabelLeftChanged(this.labelLeft);
|
|
45
|
-
//this.updateTabIndex();
|
|
46
48
|
}
|
|
47
49
|
onKeydown(event) {
|
|
48
50
|
var _a, _b;
|
|
@@ -61,7 +63,6 @@ export class CatRadioGroup {
|
|
|
61
63
|
onInput(event) {
|
|
62
64
|
const catRadioElement = this.catRadioGroup.find(value => value === event.target);
|
|
63
65
|
this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
|
|
64
|
-
//this.updateTabIndex();
|
|
65
66
|
this.catChange.emit();
|
|
66
67
|
}
|
|
67
68
|
render() {
|
|
@@ -114,7 +115,7 @@ export class CatRadioGroup {
|
|
|
114
115
|
"optional": true,
|
|
115
116
|
"docs": {
|
|
116
117
|
"tags": [],
|
|
117
|
-
"text": ""
|
|
118
|
+
"text": "The value of the radio group."
|
|
118
119
|
},
|
|
119
120
|
"attribute": "value",
|
|
120
121
|
"reflect": false
|
|
@@ -181,7 +182,7 @@ export class CatRadioGroup {
|
|
|
181
182
|
"composed": true,
|
|
182
183
|
"docs": {
|
|
183
184
|
"tags": [],
|
|
184
|
-
"text": ""
|
|
185
|
+
"text": "Emitted when the value is changed."
|
|
185
186
|
},
|
|
186
187
|
"complexType": {
|
|
187
188
|
"original": "any",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The name of the radio group component.\n */\n @Prop() name?: string;\n\n /**\n * The value of the radio group.\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * Whether this radio group is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /**\n * Whether the label of the radios should appear to the left of them.\n */\n @Prop() labelLeft = false;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => {\n catRadio.name = newName;\n });\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => {\n catRadio.checked = catRadio.value === newValue;\n });\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => {\n if (disabled) {\n catRadio.disabled = disabled;\n }\n });\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => {\n if (labelLeft) {\n catRadio.labelLeft = labelLeft;\n }\n });\n }\n\n componentDidLoad(): void {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].setFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n this.value = catRadioElement?.value;\n this.catChange.emit();\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"]}
|