@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: cat-size('m');\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.inputDisabled');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled) {\n &:hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n}\n\nlabel {\n align-self: flex-start;\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.input');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.input');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: calc(cat-size('s') - 0.5rem);\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - cat-size('s') / 2);\n right: -0.5rem;\n}\n","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"],"version":3}
|
|
1
|
+
{"file":"cat-input.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,49DAA49D;;ACKh/D,IAAI,YAAY,GAAG,CAAC,CAAC;MAkBRA,UAAQ;EALrB;;;;;;;IAMmB,SAAI,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;IACrC,OAAE,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC;IAK3C,oBAAe,GAAG,KAAK,CAAC;;;;IAUzB,cAAS,GAAG,KAAK,CAAC;;;;IAKlB,aAAQ,GAAG,KAAK,CAAC;;;;IAejB,cAAS,GAAG,KAAK,CAAC;;;;IAKlB,UAAK,GAAG,EAAE,CAAC;;;;IAKX,gBAAW,GAAG,KAAK,CAAC;;;;IAyBpB,SAAI,GAAG,EAAE,CAAC;;;;IAoBV,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,UAAK,GAAG,KAAK,CAAC;;;;IAKd,SAAI,GAAwE,MAAM,CAAC;GAiJ5F;EA3HC,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxCC,QAAG,CAAC,KAAK,CAAC,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;;;;;;;EASD,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC3B;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;GACjB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,MAClC,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,IAC1D,YAAM,IAAI,EAAC,OAAO,IACf,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,KAAK,IAAI,CAAC,KAAK,EAClE,CAAC,IAAI,CAAC,QAAQ,KACb,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAC1B,CACR,CACI,CACD,CACT,EACD,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;OAChC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAEhC,IAAI,CAAC,UAAU,KACd,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,EACA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,EACpG,WAAK,KAAK,EAAC,qBAAqB,IAC9B,aACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;QACL,eAAe,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;OAClD,EACD,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GACvB,EACR,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAC7C,kBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,uBAAuB,eAClB,MAAM,EAChB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,gBACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,EACtC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAClB,CACf,CACG,EACL,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,EAClG,IAAI,CAAC,UAAU,KACd,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,CACG,EACL,IAAI,CAAC,WAAW,CACZ,EACP;GACH;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,QACE,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,MAC1B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,EACD;GACH;EAEO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: cat-size('m');\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.inputDisabled');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled) {\n &:hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n}\n\nlabel {\n align-self: flex-start;\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.input');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.input');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: calc(cat-size('s') - 0.5rem);\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - cat-size('s') / 2);\n right: -0.5rem;\n}\n","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"],"version":3}
|
|
@@ -49,7 +49,6 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
|
|
|
49
49
|
this.onValueChanged(this.value);
|
|
50
50
|
this.onDisabledChanged(this.disabled);
|
|
51
51
|
this.onLabelLeftChanged(this.labelLeft);
|
|
52
|
-
//this.updateTabIndex();
|
|
53
52
|
}
|
|
54
53
|
onKeydown(event) {
|
|
55
54
|
var _a, _b;
|
|
@@ -68,7 +67,6 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
|
|
|
68
67
|
onInput(event) {
|
|
69
68
|
const catRadioElement = this.catRadioGroup.find(value => value === event.target);
|
|
70
69
|
this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
|
|
71
|
-
//this.updateTabIndex();
|
|
72
70
|
this.catChange.emit();
|
|
73
71
|
}
|
|
74
72
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-radio-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mDAAmD;;
|
|
1
|
+
{"file":"cat-radio-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mDAAmD;;MCU/DA,eAAa;EAL1B;;;;;IAMU,kBAAa,GAA0B,EAAE,CAAC;;;;IAiB1C,aAAQ,GAAG,KAAK,CAAC;;;;IAWjB,cAAS,GAAG,KAAK,CAAC;GAuF3B;EA/EC,aAAa,CAAC,OAAgB;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;KACzB,CAAC,CAAC;GACJ;EAGD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,KAAK,QAAQ,CAAC;KAChD,CAAC,CAAC;IACH,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC;OAC9B;KACF,CAAC,CAAC;GACJ;EAGD,kBAAkB,CAAC,SAAkB;IACnC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,IAAI,SAAS,EAAE;QACb,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;OAChC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IAChF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GACzC;EAGD,SAAS,CAAC,KAAoB;;IAC5B,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MACxG,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;MACjF,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAoC,CAAC;MACpE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,CAAC;MACvF,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;MAC3E,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,CAAC;MAC9G,cAAc,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC;MACrC,MAAA,MAAA,cAAc,CAAC,SAAS,CAAC,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;MACtE,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;GACF;EAGD,OAAO,CAAC,KAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;IACjF,IAAI,CAAC,KAAK,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,CAAC;IACpC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,SAAS,IAC/C,eAAa,CACT,EACN;GACH;EAEO,cAAc;;IACpB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,kBAAI,OAAA,MAAA,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC,CAAC;MAC9G,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;MAC/E,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,iBAAiB,IAAI,CAAC,GAAG,iBAAiB,GAAG,CAAC,CAAC,CAAC,UAAU,0CACzE,aAAa,CAAC,OAAO,CAAC,0CACtB,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;KACnC;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatRadioGroup"],"sources":["./src/components/cat-radio-group/cat-radio-group.scss?tag=cat-radio-group&encapsulation=shadow","./src/components/cat-radio-group/cat-radio-group.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","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"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
|
|
|
2
2
|
import { l as loglevel } from './loglevel.js';
|
|
3
3
|
import { C as CatFormHint } from './cat-form-hint.js';
|
|
4
4
|
|
|
5
|
-
const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
|
|
5
|
+
const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
|
|
6
6
|
|
|
7
7
|
let nextUniqueId = 0;
|
|
8
8
|
const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-radio.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,
|
|
1
|
+
{"file":"cat-radio.js","mappings":"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","names":["CatRadio","log"],"sources":["./src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","./src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n cursor: pointer;\n}\n\n.label-left {\n flex-direction: row-reverse;\n}\n\n.radio {\n display: flex;\n position: relative;\n align-self: flex-start;\n}\n\n.circle {\n position: absolute;\n width: calc(cat-size('xs') / 2);\n height: calc(cat-size('xs') / 2);\n background-color: cat-token('color.theme.primary.bg');\n border-radius: 10rem;\n top: calc(50% - cat-size('xs') / 4);\n left: calc(50% - cat-size('xs') / 4);\n visibility: hidden;\n}\n\ninput {\n margin: 0;\n width: calc(cat-size('m') / 2);\n height: calc(cat-size('m') / 2);\n appearance: none;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.input');\n border-radius: 10rem;\n cursor: inherit;\n\n &:checked {\n border-color: cat-token('color.theme.primary.bg');\n\n + .circle {\n visibility: visible;\n }\n }\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n.label {\n flex: 1 1 auto;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n\n input {\n background-color: cat-token('color.ui.background.inputDisabled');\n\n &:checked {\n border-color: cat-token('color.ui.border.input');\n }\n }\n\n .circle {\n background-color: cat-token('color.ui.border.input');\n }\n}\n","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';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\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 */\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly id = `cat-radio-${++nextUniqueId}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /**\n * Whether this radio is checked.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * Whether this radio is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The label of the radio that is visible.\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 * The name of the radio component.\n */\n @Prop() name?: string;\n\n /**\n * Whether the radio is required.\n */\n @Prop() required = false;\n\n /**\n * The value of the radio component.\n */\n @Prop() value?: string;\n\n /**\n * Optional hint text(s) to be displayed with the radio.\n */\n @Prop() hint?: string | string[];\n\n /**\n * Whether the label should appear to the left of the radio component.\n */\n @Prop() labelLeft = false;\n\n /**\n * Emitted when the radio is changed.\n */\n @Event() catChange!: EventEmitter;\n\n /**\n * Emitted when the radio received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the radio 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 radio', this);\n }\n }\n\n /**\n * Sets focus on the radio. Use this method instead of `radio.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 render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onChange.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n </span>\n </label>\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 onChange(event: Event) {\n this.checked = true;\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"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as createCommonjsModule, g as getDefaultExportFromCjs, l as loglevel } from './loglevel.js';
|
|
3
|
-
import { C as CatI18nRegistry } from './cat-i18n-registry.js';
|
|
4
3
|
import { C as CatFormHint } from './cat-form-hint.js';
|
|
4
|
+
import { C as CatI18nRegistry } from './cat-i18n-registry.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './cat-button2.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './cat-icon2.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './cat-spinner2.js';
|
|
@@ -7513,6 +7513,7 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7513
7513
|
this.catScrolledBottom = createEvent(this, "catScrolledBottom", 7);
|
|
7514
7514
|
this.i18n = CatI18nRegistry.getInstance();
|
|
7515
7515
|
this.id = `cat-select-${nextUniqueId++}`;
|
|
7516
|
+
this.resetItemsOnNextValueChange = true;
|
|
7516
7517
|
this.hasSlottedLabel = false;
|
|
7517
7518
|
/**
|
|
7518
7519
|
* The label for the select.
|
|
@@ -7529,7 +7530,7 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7529
7530
|
/**
|
|
7530
7531
|
* The available options for the input.
|
|
7531
7532
|
*/
|
|
7532
|
-
this.
|
|
7533
|
+
this.items = [];
|
|
7533
7534
|
/**
|
|
7534
7535
|
* Disable the select.
|
|
7535
7536
|
*/
|
|
@@ -7551,17 +7552,39 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7551
7552
|
/**
|
|
7552
7553
|
* Enable search for the select.
|
|
7553
7554
|
*/
|
|
7554
|
-
this.
|
|
7555
|
-
}
|
|
7556
|
-
setChoicesHandler(
|
|
7557
|
-
|
|
7558
|
-
|
|
7559
|
-
|
|
7555
|
+
this.search = false;
|
|
7556
|
+
}
|
|
7557
|
+
setChoicesHandler(items) {
|
|
7558
|
+
var _a, _b, _c, _d;
|
|
7559
|
+
const isSelected = (item) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item.value); };
|
|
7560
|
+
const choices = items.map(item => (Object.assign(Object.assign({}, item), { selected: isSelected(item) })));
|
|
7561
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
|
|
7562
|
+
const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
|
|
7563
|
+
const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
|
|
7564
|
+
const vItemValues = [...this.value];
|
|
7565
|
+
// remove duplicate items
|
|
7566
|
+
(_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
|
|
7567
|
+
vItemsArray.forEach(vItem => {
|
|
7568
|
+
var _a;
|
|
7569
|
+
const index = vItemValues.indexOf(vItem.value);
|
|
7570
|
+
if (index > -1) {
|
|
7571
|
+
vItemValues.splice(index, 1);
|
|
7572
|
+
}
|
|
7573
|
+
else {
|
|
7574
|
+
vItem.choiceId = -1; // disconnect item from choice
|
|
7575
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.highlightItem(vItem, false);
|
|
7576
|
+
}
|
|
7577
|
+
});
|
|
7578
|
+
(_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
|
|
7560
7579
|
}
|
|
7561
7580
|
setValueHandler(value) {
|
|
7562
|
-
|
|
7563
|
-
|
|
7564
|
-
|
|
7581
|
+
var _a, _b;
|
|
7582
|
+
if (this.resetItemsOnNextValueChange) {
|
|
7583
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
|
|
7584
|
+
}
|
|
7585
|
+
this.resetItemsOnNextValueChange = true;
|
|
7586
|
+
(_b = this.choice) === null || _b === void 0 ? void 0 : _b.setChoiceByValue(value);
|
|
7587
|
+
this.multiple && this.updateRemoveItemButtonVisibility();
|
|
7565
7588
|
}
|
|
7566
7589
|
componentWillRender() {
|
|
7567
7590
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
@@ -7570,88 +7593,48 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7570
7593
|
}
|
|
7571
7594
|
}
|
|
7572
7595
|
componentDidLoad() {
|
|
7573
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
|
7596
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7574
7597
|
this.init();
|
|
7575
7598
|
const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
7576
7599
|
if (attachedInternals) {
|
|
7577
|
-
|
|
7578
|
-
this.
|
|
7579
|
-
|
|
7580
|
-
}
|
|
7581
|
-
(
|
|
7582
|
-
(
|
|
7583
|
-
(
|
|
7584
|
-
(
|
|
7585
|
-
(_k = this.choiceDropdown) === null || _k === void 0 ? void 0 : _k.addEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
7600
|
+
const root = attachedInternals.shadowRoot;
|
|
7601
|
+
this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
|
|
7602
|
+
this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
|
|
7603
|
+
}
|
|
7604
|
+
(_d = this.choiceInner) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.showDropdownHandler.bind(this));
|
|
7605
|
+
(_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.addEventListener('change', this.onChange.bind(this));
|
|
7606
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('search', this.onSearch.bind(this));
|
|
7607
|
+
(_g = this.choiceDropdown) === null || _g === void 0 ? void 0 : _g.addEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
7586
7608
|
if (this.multiple) {
|
|
7587
|
-
(
|
|
7609
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('choice', this.onChoice.bind(this));
|
|
7588
7610
|
this.createRemoveItemButton();
|
|
7589
7611
|
}
|
|
7590
7612
|
}
|
|
7591
7613
|
disconnectedCallback() {
|
|
7592
|
-
var _a, _b, _c, _d, _e, _f
|
|
7614
|
+
var _a, _b, _c, _d, _e, _f;
|
|
7593
7615
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
7594
7616
|
this.choice = undefined;
|
|
7595
7617
|
(_b = this.choiceInner) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.showDropdownHandler.bind(this));
|
|
7596
|
-
(_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('
|
|
7597
|
-
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('
|
|
7598
|
-
(_e = this.
|
|
7599
|
-
(_f = this.choiceDropdown) === null || _f === void 0 ? void 0 : _f.removeEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
7618
|
+
(_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.onChange.bind(this));
|
|
7619
|
+
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('search', this.onSearch.bind(this));
|
|
7620
|
+
(_e = this.choiceDropdown) === null || _e === void 0 ? void 0 : _e.removeEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
7600
7621
|
if (this.multiple) {
|
|
7601
|
-
(
|
|
7602
|
-
(_h = this.removeElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
|
|
7622
|
+
(_f = this.removeElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('choice', this.onChoice.bind(this));
|
|
7603
7623
|
}
|
|
7604
7624
|
}
|
|
7605
|
-
/**
|
|
7606
|
-
* Set value of input based on an array of objects or strings. This behaves
|
|
7607
|
-
* exactly the same as passing items via the items option but can be called
|
|
7608
|
-
* after initialisation.
|
|
7609
|
-
*/
|
|
7610
|
-
async setValue(args) {
|
|
7611
|
-
var _a;
|
|
7612
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setValue(args);
|
|
7613
|
-
return this;
|
|
7614
|
-
}
|
|
7615
|
-
/**
|
|
7616
|
-
* Set choices of select input via an array of objects (or function that
|
|
7617
|
-
* returns array of object or promise of it), a value field name and a label
|
|
7618
|
-
* field name.
|
|
7619
|
-
*/
|
|
7620
|
-
async setChoices(choices, value, label, replaceChoices) {
|
|
7621
|
-
var _a;
|
|
7622
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, value, label, replaceChoices);
|
|
7623
|
-
return this;
|
|
7624
|
-
}
|
|
7625
|
-
/**
|
|
7626
|
-
* Clear all choices from select.
|
|
7627
|
-
*/
|
|
7628
|
-
async clearChoices() {
|
|
7629
|
-
var _a;
|
|
7630
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.clearChoices();
|
|
7631
|
-
return this;
|
|
7632
|
-
}
|
|
7633
|
-
/**
|
|
7634
|
-
* Clear input of any user inputted text.
|
|
7635
|
-
*/
|
|
7636
|
-
async clearInput() {
|
|
7637
|
-
var _a;
|
|
7638
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.clearInput();
|
|
7639
|
-
return this;
|
|
7640
|
-
}
|
|
7641
7625
|
render() {
|
|
7642
7626
|
return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), h("select", { id: this.id, ref: el => (this.selectElement = el), multiple: this.multiple, disabled: this.disabled }), this.hintSection));
|
|
7643
7627
|
}
|
|
7644
7628
|
init() {
|
|
7645
|
-
const
|
|
7629
|
+
const component = this; // eslint-disable-line @typescript-eslint/no-this-alias
|
|
7646
7630
|
const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
|
|
7647
7631
|
const config = {
|
|
7648
7632
|
allowHTML: true,
|
|
7649
|
-
items: Array.isArray(value) ? value : [value],
|
|
7650
7633
|
removeItemButton: true,
|
|
7651
7634
|
duplicateItemsAllowed: false,
|
|
7652
7635
|
delimiter: '',
|
|
7653
7636
|
paste: false,
|
|
7654
|
-
searchEnabled:
|
|
7637
|
+
searchEnabled: this.search,
|
|
7655
7638
|
searchChoices: false,
|
|
7656
7639
|
position: this.position,
|
|
7657
7640
|
resetScrollPosition: false,
|
|
@@ -7666,7 +7649,12 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7666
7649
|
addItemText: (value) => this.i18n.t('select.addItem', { value }),
|
|
7667
7650
|
maxItemText: (maxItemCount) => this.i18n.t('select.maxItem', { maxItemCount }),
|
|
7668
7651
|
uniqueItemText: this.i18n.t('select.uniqueItem'),
|
|
7669
|
-
customAddItemText: this.i18n.t('select.customAddItem')
|
|
7652
|
+
customAddItemText: this.i18n.t('select.customAddItem'),
|
|
7653
|
+
callbackOnInit: function () {
|
|
7654
|
+
const choice = this;
|
|
7655
|
+
choice.setChoices(component.items, 'value', 'label', true);
|
|
7656
|
+
choice.setChoiceByValue(component.value);
|
|
7657
|
+
}
|
|
7670
7658
|
};
|
|
7671
7659
|
const configSingle = {
|
|
7672
7660
|
callbackOnCreateTemplates: (strToEl) => {
|
|
@@ -7732,18 +7720,24 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7732
7720
|
const settings = this.multiple
|
|
7733
7721
|
? Object.assign(Object.assign({}, config), configMultiple) : Object.assign(Object.assign({}, config), configSingle);
|
|
7734
7722
|
this.choice = new Choices(this.selectElement, settings);
|
|
7735
|
-
this.choice.setChoices(this.choices);
|
|
7736
7723
|
}
|
|
7737
7724
|
get hintSection() {
|
|
7738
7725
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
7739
7726
|
return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
|
|
7740
7727
|
}
|
|
7741
7728
|
onChange() {
|
|
7742
|
-
var _a
|
|
7743
|
-
this.
|
|
7744
|
-
this.
|
|
7745
|
-
|
|
7746
|
-
|
|
7729
|
+
var _a;
|
|
7730
|
+
this.resetItemsOnNextValueChange = false;
|
|
7731
|
+
this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
|
|
7732
|
+
this.catChange.emit(this.value);
|
|
7733
|
+
}
|
|
7734
|
+
onChoice(event) {
|
|
7735
|
+
var _a;
|
|
7736
|
+
const customEvent = event;
|
|
7737
|
+
const coice = customEvent.detail.choice;
|
|
7738
|
+
if (coice.selected) {
|
|
7739
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(coice.value);
|
|
7740
|
+
this.onChange();
|
|
7747
7741
|
}
|
|
7748
7742
|
}
|
|
7749
7743
|
onSearch(event) {
|
|
@@ -7758,20 +7752,9 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7758
7752
|
this.catScrolledBottom.emit();
|
|
7759
7753
|
}
|
|
7760
7754
|
}
|
|
7761
|
-
onChoice(event) {
|
|
7762
|
-
var _a, _b;
|
|
7763
|
-
const customEvent = event;
|
|
7764
|
-
const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
|
|
7765
|
-
const item = items.find(value => value.choiceId === customEvent.detail.choice.id);
|
|
7766
|
-
if (item) {
|
|
7767
|
-
(_b = this.choice) === null || _b === void 0 ? void 0 : _b._removeItem(item);
|
|
7768
|
-
}
|
|
7769
|
-
}
|
|
7770
7755
|
showDropdownHandler() {
|
|
7771
7756
|
var _a;
|
|
7772
|
-
|
|
7773
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown();
|
|
7774
|
-
}
|
|
7757
|
+
!this.disabled && ((_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown());
|
|
7775
7758
|
}
|
|
7776
7759
|
createRemoveItemButton() {
|
|
7777
7760
|
var _a;
|
|
@@ -7789,7 +7772,7 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7789
7772
|
if (items.length) {
|
|
7790
7773
|
(_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
|
|
7791
7774
|
}
|
|
7792
|
-
else
|
|
7775
|
+
else {
|
|
7793
7776
|
(_c = this.removeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('hidden', 'true');
|
|
7794
7777
|
}
|
|
7795
7778
|
}
|
|
@@ -7797,10 +7780,11 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7797
7780
|
var _a;
|
|
7798
7781
|
event.stopPropagation();
|
|
7799
7782
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
|
|
7783
|
+
this.updateRemoveItemButtonVisibility();
|
|
7800
7784
|
}
|
|
7801
7785
|
get hostElement() { return this; }
|
|
7802
7786
|
static get watchers() { return {
|
|
7803
|
-
"
|
|
7787
|
+
"items": ["setChoicesHandler"],
|
|
7804
7788
|
"value": ["setValueHandler"]
|
|
7805
7789
|
}; }
|
|
7806
7790
|
static get style() { return catSelectCss; }
|
|
@@ -7808,19 +7792,15 @@ const CatSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
|
|
|
7808
7792
|
"label": [1],
|
|
7809
7793
|
"labelHidden": [4, "label-hidden"],
|
|
7810
7794
|
"required": [4],
|
|
7811
|
-
"
|
|
7812
|
-
"value": [
|
|
7795
|
+
"items": [16],
|
|
7796
|
+
"value": [1032],
|
|
7813
7797
|
"disabled": [4],
|
|
7814
7798
|
"multiple": [4],
|
|
7815
7799
|
"placeholder": [1],
|
|
7816
7800
|
"position": [1],
|
|
7817
|
-
"
|
|
7801
|
+
"search": [4],
|
|
7818
7802
|
"hint": [1],
|
|
7819
|
-
"hasSlottedLabel": [32]
|
|
7820
|
-
"setValue": [64],
|
|
7821
|
-
"setChoices": [64],
|
|
7822
|
-
"clearChoices": [64],
|
|
7823
|
-
"clearInput": [64]
|
|
7803
|
+
"hasSlottedLabel": [32]
|
|
7824
7804
|
}]);
|
|
7825
7805
|
function defineCustomElement$1() {
|
|
7826
7806
|
if (typeof customElements === "undefined") {
|