npm - @db-ux/wc-core-components - Versions diffs - 1.0.0 → 1.1.0 - Mend

@db-ux/wc-core-components 1.0.0 → 1.1.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.

Files changed (211) hide show

package/dist/collection/components/input/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/input/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAI,CAAC,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM;IACjF,mCAAmC;IACnC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IAChD,mCAAmC;IACnC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAW,CAAC","sourcesContent":["import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';\nexport const InputTypeList = (['color', 'date', 'datetime-local', 'email', 'file',\n// TODO: move this to own component\n'hidden', 'month', 'number', 'password', 'range',\n// TODO: move this to own component\n'search', 'tel', 'text', 'time', 'url', 'week'] as const);\nexport type InputTypeType = (typeof InputTypeList)[number];\nexport type DBInputDefaultProps = {\n /*\n Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.\n /\n dataList?: string[] \| ValueLabelType[];\n /\n Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.\n /\n dataListId?: string;\n /\n Maximum value\n /\n max?: number \| string;\n /\n Minimum value\n /\n min?: number \| string;\n\n /\n Pattern the value must match to be valid\n /\n pattern?: string;\n /\n \tType of form control\n /\n type?: InputTypeType \| string;\n /\n Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).\n */\n step?: number \| string;\n};\nexport type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps;\nexport type DBInputDefaultState = {\n _dataListId?: string;\n getDataList: (_list?: string[] \| ValueLabelType[]) => ValueLabelType[];\n};\nexport type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState"]}
1	+ {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/input/model.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAI,CAAC,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM;IACjF,mCAAmC;IACnC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IAChD,mCAAmC;IACnC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAW,CAAC","sourcesContent":["import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';\nexport const InputTypeList = (['color', 'date', 'datetime-local', 'email', 'file',\n// TODO: move this to own component\n'hidden', 'month', 'number', 'password', 'range',\n// TODO: move this to own component\n'search', 'tel', 'text', 'time', 'url', 'week'] as const);\nexport type InputTypeType = (typeof InputTypeList)[number];\nexport type DBInputDefaultProps = {\n /*\n Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.\n /\n dataList?: string[] \| ValueLabelType[];\n /\n Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.\n /\n dataListId?: string;\n /\n Maximum value\n /\n max?: number \| string;\n /\n Minimum value\n /\n min?: number \| string;\n\n /\n Pattern the value must match to be valid\n /\n pattern?: string;\n /\n \tType of form control\n /\n type?: InputTypeType \| string;\n /\n Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).\n */\n step?: number \| string;\n};\nexport type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps & FormSizeProps;\nexport type DBInputDefaultState = {\n _dataListId?: string;\n getDataList: (_list?: string[] \| ValueLabelType[]) => ValueLabelType[];\n};\nexport type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState"]}

package/dist/collection/components/radio/radio.js CHANGED Viewed

@@ -72,17 +72,12 @@ export class DBRadio {
         this._id = (_a = this.id) !== null && _a !== void 0 ? _a : `radio-${uuid()}`;
     }
     componentDidUpdate() {
-        if (this.checked && this.initialized && document && this._id) {
-            const radioElement = document === null || document === void 0 ? void 0 : document.getElementById(this._id);
-            if (radioElement) {
-                if (this.checked != undefined) {
-                    radioElement.checked = true;
-                }
-            }
+        if (this.checked && this.initialized && this._ref) {
+            this._ref.checked = true;
         }
     }
     render() {
-        return (h("label", { key: '05c0a0bb7843d804b0cc07da56c7d8101a9a0cb2', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), htmlFor: this._id }, h("input", { key: 'dd1b285bab651829e6b0dc7293d052b75f9c75fe', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("label", { key: 'cf284d1056ea238ee9172220c34bc818fa0f5216', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), htmlFor: this._id }, h("input", { key: '0c43cd33933fdfc52557a82c13e96f8c182183f6', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, id: this._id, name: this.name, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedbyid, value: this.value, required: this.required, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : h("slot", null)));
     }

package/dist/collection/components/radio/radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAOrD,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG3E;;;GAGG;AAIH,MAAM,OAAO,OAAO;IAHnB;QAwBU,gBAAW,GAAG,KAAK,CAAC;QACpB,QAAG,GAAG,SAAS,CAAC;~~KAoH1B~~;~~IAlHC~~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~~QAAQ,~~IAAI,~~IAAI,~~CAAC,~~GAAG,EAAE,CAAC;YAC7D,MAAM,YAAY,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,cAAc,CAC3C,~~IAAI,~~CAAC,GAAG,CACW,CAAC;YACtB,IAAI,YAAY,~~EAAE,CAAC;~~gBACjB~~,IAAI,~~IAAI,~~CAAC,~~OAAO,~~IAAI,~~SAAS,EAAE,~~CAAC~~;oBAC9B~~,~~YAAY,CAAC,~~OAAO,GAAG,IAAI,CAAC;~~gBAC9B~~,CAAC;~~YACH,CAAC;QACH,CAAC;~~IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACE,KAAK,EAAE,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,eAC3B,IAAI,CAAC,IAAI,qBACH,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAC5C,OAAO,EAAE,IAAI,CAAC,GAAG;YAEjB,8DACE,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,UAAU,KAAK,SAAS,0BACrB,IAAI,CAAC,UAAU,EACrC,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;oBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;gBACjB,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,IAAI,CAAC,aAAa,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAC3C;YACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAa,CAClC,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DBRadioProps, DBRadioState } from \"./model\";\nimport { cls, getHideProp, uuid } from \"../../utils\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-radio\",\n})\nexport class DBRadio {\n private _ref!: HTMLInputElement \| null;\n @Prop() id: DBRadioProps[\"id\"];\n @Prop() checked: DBRadioProps[\"checked\"];\n @Event() onChange: any;\n @Prop() change: DBRadioProps[\"change\"];\n @Event() onBlur: any;\n @Prop() blur: DBRadioProps[\"blur\"];\n @Event() onFocus: any;\n @Prop() focus: DBRadioProps[\"focus\"];\n @Prop() size: DBRadioProps[\"size\"];\n @Prop() showLabel: DBRadioProps[\"showLabel\"];\n @Prop({attribute: \"classname\"}) className: DBRadioProps[\"className\"];\n @Prop() validation: DBRadioProps[\"validation\"];\n @Prop() name: DBRadioProps[\"name\"];\n @Prop() disabled: DBRadioProps[\"disabled\"];\n @Prop() describedbyid: DBRadioProps[\"describedbyid\"];\n @Prop() value: DBRadioProps[\"value\"];\n @Prop() required: DBRadioProps[\"required\"];\n @Prop() label: DBRadioProps[\"label\"];\n\n @State() initialized = false;\n @State() _id = undefined;\n\n handleChange(event: ChangeEvent<HTMLInputElement>) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n }\n handleBlur(event: InteractionEvent<HTMLInputElement>) {\n if (this.onBlur) {\n this.onBlur.emit(event);\n }\n if (this.blur) {\n this.blur(event);\n }\n }\n handleFocus(event: InteractionEvent<HTMLInputElement>) {\n if (this.onFocus) {\n this.onFocus.emit(event);\n }\n if (this.focus) {\n this.focus(event);\n }\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLInputElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-radio\");\n this.initialized = true;\n this._id = this.id ?? `radio-${uuid()}`;\n }\n\n componentDidUpdate() {\n if (this.checked && this.initialized && ~~document &&~~ this.~~_id~~) {\n ~~const radioElement = document?.getElementById(\n~~ this.~~_id\n ) as HTMLInputElement;\n if (radioElement) {\n if (this~~.checked ~~!= undefined) {\n radioElement.checked~~ = true;\n ~~}\n }\n~~ }\n }\n\n render() {\n return (\n <label\n class={cls(\"db-radio\", this.className)}\n data-size={this.size}\n data-hide-label={getHideProp(this.showLabel)}\n htmlFor={this._id}\n >\n <input\n type=\"radio\"\n aria-invalid={this.validation === \"invalid\"}\n data-custom-validity={this.validation}\n ref={(el: any) => {\n this._ref = el;\n }}\n id={this._id}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n aria-describedby={this.describedbyid}\n value={this.value}\n required={this.required}\n onChange={(event) => this.handleChange(event)}\n onBlur={(event) => this.handleBlur(event)}\n onFocus={(event) => this.handleFocus(event)}\n />\n {this.label ? this.label : <slot></slot>}\n </label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBRadioProps, DBRadioState } from \"./model\";\nimport { cls, getHideProp, uuid } from \"../../utils\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-radio\",\n})\nexport class DBRadio {\n private _ref!: HTMLInputElement \| null;\n @Prop() id: DBRadioProps[\"id\"];\n @Prop() checked: DBRadioProps[\"checked\"];\n @Event() onChange: any;\n @Prop() change: DBRadioProps[\"change\"];\n @Event() onBlur: any;\n @Prop() blur: DBRadioProps[\"blur\"];\n @Event() onFocus: any;\n @Prop() focus: DBRadioProps[\"focus\"];\n @Prop() size: DBRadioProps[\"size\"];\n @Prop() showLabel: DBRadioProps[\"showLabel\"];\n @Prop({attribute: \"classname\"}) className: DBRadioProps[\"className\"];\n @Prop() validation: DBRadioProps[\"validation\"];\n @Prop() name: DBRadioProps[\"name\"];\n @Prop() disabled: DBRadioProps[\"disabled\"];\n @Prop() describedbyid: DBRadioProps[\"describedbyid\"];\n @Prop() value: DBRadioProps[\"value\"];\n @Prop() required: DBRadioProps[\"required\"];\n @Prop() label: DBRadioProps[\"label\"];\n\n @State() initialized = false;\n @State() _id = undefined;\n\n handleChange(event: ChangeEvent<HTMLInputElement>) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n }\n handleBlur(event: InteractionEvent<HTMLInputElement>) {\n if (this.onBlur) {\n this.onBlur.emit(event);\n }\n if (this.blur) {\n this.blur(event);\n }\n }\n handleFocus(event: InteractionEvent<HTMLInputElement>) {\n if (this.onFocus) {\n this.onFocus.emit(event);\n }\n if (this.focus) {\n this.focus(event);\n }\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLInputElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-radio\");\n this.initialized = true;\n this._id = this.id ?? `radio-${uuid()}`;\n }\n\n componentDidUpdate() {\n if (this.checked && this.initialized && this._ref) {\n this._ref.checked = true;\n }\n }\n\n render() {\n return (\n <label\n class={cls(\"db-radio\", this.className)}\n data-size={this.size}\n data-hide-label={getHideProp(this.showLabel)}\n htmlFor={this._id}\n >\n <input\n type=\"radio\"\n aria-invalid={this.validation === \"invalid\"}\n data-custom-validity={this.validation}\n ref={(el: any) => {\n this._ref = el;\n }}\n id={this._id}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n aria-describedby={this.describedbyid}\n value={this.value}\n required={this.required}\n onChange={(event) => this.handleChange(event)}\n onBlur={(event) => this.handleBlur(event)}\n onFocus={(event) => this.handleFocus(event)}\n />\n {this.label ? this.label : <slot></slot>}\n </label>\n );\n }\n}\n"]}

package/dist/collection/components/select/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/select/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';\nexport type DBSelectDefaultProps = {\n /*\n The description attribute will add a paragraph below the select.\n /\n description?: string;\n\n /\n If you don't/can't use children/slots you can pass in the options as an array.\n /\n options?: DBSelectOptionType[];\n};\nexport type DBSelectOptionType = {\n /\n Identifier for option\n /\n id?: string;\n\n /\n Disables this option\n /\n disabled?: boolean;\n\n /\n Selects this option\n /\n selected?: boolean;\n\n /\n If the value is different from the label you want to show to the user.\n /\n label?: string;\n\n /\n If you want to use optgroup you can nest options here.\n /\n options?: DBSelectOptionType[];\n\n /\n The main value you select, will be shown as default label if no label is set.\n */\n value: string \| string[] \| number;\n};\nexport type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps;\nexport type DBSelectDefaultState = {\n _placeholderId: string;\n getOptionLabel: (option: DBSelectOptionType) => string;\n};\nexport type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState"]}
1	+ {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/select/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';\nexport type DBSelectDefaultProps = {\n /*\n The description attribute will add a paragraph below the select.\n /\n description?: string;\n\n /\n If you don't/can't use children/slots you can pass in the options as an array.\n /\n options?: DBSelectOptionType[];\n};\nexport type DBSelectOptionType = {\n /\n Identifier for option\n /\n id?: string;\n\n /\n Disables this option\n /\n disabled?: boolean;\n\n /\n Selects this option\n /\n selected?: boolean;\n\n /\n If the value is different from the label you want to show to the user.\n /\n label?: string;\n\n /\n If you want to use optgroup you can nest options here.\n /\n options?: DBSelectOptionType[];\n\n /\n The main value you select, will be shown as default label if no label is set.\n */\n value: string \| string[] \| number;\n};\nexport type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps & FormSizeProps;\nexport type DBSelectDefaultState = {\n _placeholderId: string;\n getOptionLabel: (option: DBSelectOptionType) => string;\n};\nexport type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState"]}

package/dist/collection/components/select/select.js CHANGED Viewed

@@ -145,16 +145,16 @@ export class DBSelect {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h("div", { key: '06017b1d2eb4dc4ee34da5b5436a6a2a1543305e', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon) }, h("label", { key: '8009184d561a239b9c54afb410ca16187e37e147', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '8664cfb20dda0f75f51c079299cbf6bd4c35a90c', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '1c026d87264bbb7476188faed638bdff983b7257', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon) }, h("label", { key: '6e05a86b0f2c78603141e9de2573e2c494924301', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: 'd3c4e34efd818c04def64f755bb3958205e54250', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, required: this.required, disabled: this.disabled, id: this._id, name: this.name,
+            }, required: this.required, disabled: this.disabled, id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
-            value: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }, h("option", { key: '980b08554152ef897529193f8398387e666a206b', hidden: true }), this.options
+            value: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }, h("option", { key: 'c6244178d81b998d7e25322b2dfca86d384f7df7', hidden: true }), this.options
             ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => {
                 var _a;
                 return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled }, this.getOptionLabel(optgroupOption)))))) : null, !option.options ? (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, this.getOptionLabel(option))) : null));
             })
-            : null, h("slot", { key: 'a6c2d85972b745880eff26b5bf35dcaeda05a071' })), h("span", { key: '060c35ad975fc394ff9ec66f1eb89b9e38adccdb', id: this._placeholderId }, (_d = this.placeholder) !== null && _d !== void 0 ? _d : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: '732e12ecf2306aed43f2bd252b086334c5edef41', size: "small", semantic: "successful", id: this._validMessageId }, (_e = this.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: '6d45eed0cfe4d82b3a5fadc8aaa652d149530dce', size: "small", semantic: "critical", id: this._invalidMessageId }, (_h = (_f = this.invalidMessage) !== null && _f !== void 0 ? _f : (_g = this._ref) === null || _g === void 0 ? void 0 : _g.validationMessage) !== null && _h !== void 0 ? _h : DEFAULT_INVALID_MESSAGE), h("span", { key: 'c8a6a7684b1421f60708acaacb2b8be9f2bc59b2', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null, h("slot", { key: '62937996853419228ae5738e077d4598b8691b0e' })), h("span", { key: '928d88490be50b727a7c47c54ad5fcc94b01f081', id: this._placeholderId }, (_d = this.placeholder) !== null && _d !== void 0 ? _d : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: 'a4a0dbbc17cca2f44ac5800de5180a7c14638c5a', size: "small", semantic: "successful", id: this._validMessageId }, (_e = this.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: '2ba1ac947180675feddc7a1567aa9c68cf5ca319', size: "small", semantic: "critical", id: this._invalidMessageId }, (_h = (_f = this.invalidMessage) !== null && _f !== void 0 ? _f : (_g = this._ref) === null || _g === void 0 ? void 0 : _g.validationMessage) !== null && _h !== void 0 ? _h : DEFAULT_INVALID_MESSAGE), h("span", { key: '2fc22ca7ad620da602ea173665e7fee349bd6f98', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-select"; }
     static get properties() {
@@ -651,6 +651,31 @@ export class DBSelect {
                 "attribute": "name",
                 "reflect": false
             },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSelectProps[\"size\"]",
+                    "resolved": "number",
+                    "references": {
+                        "DBSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/select/model.ts::DBSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBSelectOptionType, DBSelectProps, DBSelectState } from \"./model\";\nimport {\n cls,\n delay,\n getHideProp,\n hasVoiceOver,\n stringPropVisible,\n uuid,\n} from \"../../utils\";\nimport {\n DEFAULT_INVALID_MESSAGE,\n DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n DEFAULT_LABEL,\n DEFAULT_MESSAGE_ID_SUFFIX,\n DEFAULT_PLACEHOLDER_ID_SUFFIX,\n DEFAULT_VALID_MESSAGE,\n DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport {\n ChangeEvent,\n ClickEvent,\n InputEvent,\n InteractionEvent,\n} from \"../../shared/model\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-select\",\n})\nexport class DBSelect {\n private _ref!: HTMLSelectElement \| null;\n @Prop() id: DBSelectProps[\"id\"];\n @Prop() message: DBSelectProps[\"message\"];\n @Prop() showMessage: DBSelectProps[\"showMessage\"];\n @Prop() value: DBSelectProps[\"value\"];\n @Event() onClick: any;\n @Event() onInput: any;\n @Prop() input: DBSelectProps[\"input\"];\n @Event() onChange: any;\n @Prop() change: DBSelectProps[\"change\"];\n @Prop() validation: DBSelectProps[\"validation\"];\n @Prop() invalidMessage: DBSelectProps[\"invalidMessage\"];\n @Prop() required: DBSelectProps[\"required\"];\n @Prop() validMessage: DBSelectProps[\"validMessage\"];\n @Event() onBlur: any;\n @Prop() blur: DBSelectProps[\"blur\"];\n @Event() onFocus: any;\n @Prop() focus: DBSelectProps[\"focus\"];\n @Prop({attribute: \"classname\"}) className: DBSelectProps[\"className\"];\n @Prop() variant: DBSelectProps[\"variant\"];\n @Prop() showLabel: DBSelectProps[\"showLabel\"];\n @Prop() icon: DBSelectProps[\"icon\"];\n @Prop() showIcon: DBSelectProps[\"showIcon\"];\n @Prop() label: DBSelectProps[\"label\"];\n @Prop() disabled: DBSelectProps[\"disabled\"];\n @Prop() name: DBSelectProps[\"name\"];\n @Prop() autocomplete: DBSelectProps[\"autocomplete\"];\n @Prop() options: DBSelectProps[\"options\"];\n\n @Prop() placeholder: DBSelectProps[\"placeholder\"];\n @Prop() messageIcon: DBSelectProps[\"messageIcon\"];\n @State() _id = undefined;\n @State() _messageId = undefined;\n @State() _validMessageId = undefined;\n @State() _invalidMessageId = undefined;\n @State() _placeholderId = \"\";\n @State() _descByIds = \"\";\n @State() _value = \"\";\n @State() initialized = false;\n @State() _voiceOverFallback = \"\";\n\n handleClick(event: ClickEvent<HTMLSelectElement>) {\n if (this.onClick) {\n this.onClick.emit(event);\n }\n }\n handleInput(event: InputEvent<HTMLSelectElement>) {\n if (this.onInput) {\n this.onInput.emit(event);\n }\n if (this.input) {\n this.input(event);\n }\n }\n handleChange(event: ChangeEvent<HTMLSelectElement>) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n / For a11y reasons we need to map the correct message with the select /\n if (!this._ref?.validity.valid \|\| this.validation === \"invalid\") {\n this._descByIds = this._invalidMessageId;\n if (hasVoiceOver()) {\n this._voiceOverFallback =\n this.invalidMessage ??\n this._ref?.validationMessage ??\n DEFAULT_INVALID_MESSAGE;\n delay(() => (this._voiceOverFallback = \"\"), 1000);\n }\n } else if (\n this.validation === \"valid\" \|\|\n (this._ref?.validity.valid && this.required)\n ) {\n this._descByIds = this._validMessageId;\n if (hasVoiceOver()) {\n this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n delay(() => (this._voiceOverFallback = \"\"), 1000);\n }\n } else if (stringPropVisible(this.message, this.showMessage)) {\n this._descByIds = this._messageId;\n } else {\n this._descByIds = this._placeholderId;\n }\n }\n handleBlur(event: InteractionEvent<HTMLSelectElement>) {\n if (this.onBlur) {\n this.onBlur.emit(event);\n }\n if (this.blur) {\n this.blur(event);\n }\n }\n handleFocus(event: InteractionEvent<HTMLSelectElement>) {\n if (this.onFocus) {\n this.onFocus.emit(event);\n }\n if (this.focus) {\n this.focus(event);\n }\n }\n getOptionLabel(option: DBSelectOptionType) {\n return option.label ?? option.value.toString();\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n /\n private enableAttributePassing(\n element: HTMLSelectElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-select\");\n this.initialized = true;\n const mId = this.id ?? `select-${uuid()}`;\n this._id = mId;\n this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;\n }\n\n componentDidUpdate() {\n if (this._id && this.initialized) {\n const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n const placeholderId = this._id + DEFAULT_PLACEHOLDER_ID_SUFFIX;\n this._messageId = messageId;\n this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n this._placeholderId = placeholderId;\n if (stringPropVisible(this.message, this.showMessage)) {\n this._descByIds = messageId;\n } else {\n this._descByIds = placeholderId;\n }\n this.initialized = false;\n }\n this._value = this.value;\n }\n\n render() {\n return (\n <div\n class={cls(\"db-select\", this.className)}\n data-variant={this.variant}\n data-hide-label={getHideProp(this.showLabel)}\n data-icon={this.icon}\n data-hide-icon={getHideProp(this.showIcon)}\n >\n <label htmlFor={this._id}>{this.label ?? DEFAULT_LABEL}</label>\n <select\n aria-invalid={this.validation === \"invalid\"}\n data-custom-validity={this.validation}\n ref={(el: any) => {\n this._ref = el;\n }}\n required={this.required}\n disabled={this.disabled}\n id={this._id}\n name={this.name}\n / @ts-ignore */\nvalue={this.value ?? this._value}\n autocomplete={this.autocomplete}\n onInput={(event) => this.handleInput(event)}\n onClick={(event) => this.handleClick(event)}\n onChange={(event) => this.handleChange(event)}\n onBlur={(event) => this.handleBlur(event)}\n onFocus={(event) => this.handleFocus(event)}\n aria-describedby={this._descByIds}\n >\n <option hidden={true}></option>\n {this.options\n ? this.options?.map((option) => (\n <Fragment>\n {option.options ? (\n <optgroup label={this.getOptionLabel(option)}>\n {option.options?.map((optgroupOption) => (\n <option\n key={optgroupOption.value.toString()}\n value={optgroupOption.value}\n selected={optgroupOption.selected}\n disabled={optgroupOption.disabled}\n >\n {this.getOptionLabel(optgroupOption)}\n </option>\n ))}\n </optgroup>\n ) : null}\n {!option.options ? (\n <option\n value={option.value}\n disabled={option.disabled}\n selected={option.selected}\n >\n {this.getOptionLabel(option)}\n </option>\n ) : null}\n </Fragment>\n ))\n : null}\n <slot></slot>\n </select>\n <span id={this._placeholderId}>{this.placeholder ?? this.label}</span>\n {stringPropVisible(this.message, this.showMessage) ? (\n <db-infotext\n size=\"small\"\n icon={this.messageIcon}\n id={this._messageId}\n >\n {this.message}\n </db-infotext>\n ) : null}\n <db-infotext\n size=\"small\"\n semantic=\"successful\"\n id={this._validMessageId}\n >\n {this.validMessage ?? DEFAULT_VALID_MESSAGE}\n </db-infotext>\n <db-infotext\n size=\"small\"\n semantic=\"critical\"\n id={this._invalidMessageId}\n >\n {this.invalidMessage ??\n this._ref?.validationMessage ??\n DEFAULT_INVALID_MESSAGE}\n </db-infotext>\n <span data-visually-hidden=\"true\" role=\"status\">\n {this._voiceOverFallback}\n </span>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBSelectOptionType, DBSelectProps, DBSelectState } from \"./model\";\nimport {\n cls,\n delay,\n getHideProp,\n hasVoiceOver,\n stringPropVisible,\n uuid,\n} from \"../../utils\";\nimport {\n DEFAULT_INVALID_MESSAGE,\n DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n DEFAULT_LABEL,\n DEFAULT_MESSAGE_ID_SUFFIX,\n DEFAULT_PLACEHOLDER_ID_SUFFIX,\n DEFAULT_VALID_MESSAGE,\n DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport {\n ChangeEvent,\n ClickEvent,\n InputEvent,\n InteractionEvent,\n} from \"../../shared/model\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-select\",\n})\nexport class DBSelect {\n private _ref!: HTMLSelectElement \| null;\n @Prop() id: DBSelectProps[\"id\"];\n @Prop() message: DBSelectProps[\"message\"];\n @Prop() showMessage: DBSelectProps[\"showMessage\"];\n @Prop() value: DBSelectProps[\"value\"];\n @Event() onClick: any;\n @Event() onInput: any;\n @Prop() input: DBSelectProps[\"input\"];\n @Event() onChange: any;\n @Prop() change: DBSelectProps[\"change\"];\n @Prop() validation: DBSelectProps[\"validation\"];\n @Prop() invalidMessage: DBSelectProps[\"invalidMessage\"];\n @Prop() required: DBSelectProps[\"required\"];\n @Prop() validMessage: DBSelectProps[\"validMessage\"];\n @Event() onBlur: any;\n @Prop() blur: DBSelectProps[\"blur\"];\n @Event() onFocus: any;\n @Prop() focus: DBSelectProps[\"focus\"];\n @Prop({attribute: \"classname\"}) className: DBSelectProps[\"className\"];\n @Prop() variant: DBSelectProps[\"variant\"];\n @Prop() showLabel: DBSelectProps[\"showLabel\"];\n @Prop() icon: DBSelectProps[\"icon\"];\n @Prop() showIcon: DBSelectProps[\"showIcon\"];\n @Prop() label: DBSelectProps[\"label\"];\n @Prop() disabled: DBSelectProps[\"disabled\"];\n @Prop() name: DBSelectProps[\"name\"];\n @Prop() size: DBSelectProps[\"size\"];\n @Prop() autocomplete: DBSelectProps[\"autocomplete\"];\n @Prop() options: DBSelectProps[\"options\"];\n\n @Prop() placeholder: DBSelectProps[\"placeholder\"];\n @Prop() messageIcon: DBSelectProps[\"messageIcon\"];\n @State() _id = undefined;\n @State() _messageId = undefined;\n @State() _validMessageId = undefined;\n @State() _invalidMessageId = undefined;\n @State() _placeholderId = \"\";\n @State() _descByIds = \"\";\n @State() _value = \"\";\n @State() initialized = false;\n @State() _voiceOverFallback = \"\";\n\n handleClick(event: ClickEvent<HTMLSelectElement>) {\n if (this.onClick) {\n this.onClick.emit(event);\n }\n }\n handleInput(event: InputEvent<HTMLSelectElement>) {\n if (this.onInput) {\n this.onInput.emit(event);\n }\n if (this.input) {\n this.input(event);\n }\n }\n handleChange(event: ChangeEvent<HTMLSelectElement>) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n / For a11y reasons we need to map the correct message with the select /\n if (!this._ref?.validity.valid \|\| this.validation === \"invalid\") {\n this._descByIds = this._invalidMessageId;\n if (hasVoiceOver()) {\n this._voiceOverFallback =\n this.invalidMessage ??\n this._ref?.validationMessage ??\n DEFAULT_INVALID_MESSAGE;\n delay(() => (this._voiceOverFallback = \"\"), 1000);\n }\n } else if (\n this.validation === \"valid\" \|\|\n (this._ref?.validity.valid && this.required)\n ) {\n this._descByIds = this._validMessageId;\n if (hasVoiceOver()) {\n this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n delay(() => (this._voiceOverFallback = \"\"), 1000);\n }\n } else if (stringPropVisible(this.message, this.showMessage)) {\n this._descByIds = this._messageId;\n } else {\n this._descByIds = this._placeholderId;\n }\n }\n handleBlur(event: InteractionEvent<HTMLSelectElement>) {\n if (this.onBlur) {\n this.onBlur.emit(event);\n }\n if (this.blur) {\n this.blur(event);\n }\n }\n handleFocus(event: InteractionEvent<HTMLSelectElement>) {\n if (this.onFocus) {\n this.onFocus.emit(event);\n }\n if (this.focus) {\n this.focus(event);\n }\n }\n getOptionLabel(option: DBSelectOptionType) {\n return option.label ?? option.value.toString();\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n /\n private enableAttributePassing(\n element: HTMLSelectElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-select\");\n this.initialized = true;\n const mId = this.id ?? `select-${uuid()}`;\n this._id = mId;\n this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;\n }\n\n componentDidUpdate() {\n if (this._id && this.initialized) {\n const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n const placeholderId = this._id + DEFAULT_PLACEHOLDER_ID_SUFFIX;\n this._messageId = messageId;\n this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n this._placeholderId = placeholderId;\n if (stringPropVisible(this.message, this.showMessage)) {\n this._descByIds = messageId;\n } else {\n this._descByIds = placeholderId;\n }\n this.initialized = false;\n }\n this._value = this.value;\n }\n\n render() {\n return (\n <div\n class={cls(\"db-select\", this.className)}\n data-variant={this.variant}\n data-hide-label={getHideProp(this.showLabel)}\n data-icon={this.icon}\n data-hide-icon={getHideProp(this.showIcon)}\n >\n <label htmlFor={this._id}>{this.label ?? DEFAULT_LABEL}</label>\n <select\n aria-invalid={this.validation === \"invalid\"}\n data-custom-validity={this.validation}\n ref={(el: any) => {\n this._ref = el;\n }}\n required={this.required}\n disabled={this.disabled}\n id={this._id}\n name={this.name}\n size={this.size}\n / @ts-ignore */\nvalue={this.value ?? this._value}\n autocomplete={this.autocomplete}\n onInput={(event) => this.handleInput(event)}\n onClick={(event) => this.handleClick(event)}\n onChange={(event) => this.handleChange(event)}\n onBlur={(event) => this.handleBlur(event)}\n onFocus={(event) => this.handleFocus(event)}\n aria-describedby={this._descByIds}\n >\n <option hidden={true}></option>\n {this.options\n ? this.options?.map((option) => (\n <Fragment>\n {option.options ? (\n <optgroup label={this.getOptionLabel(option)}>\n {option.options?.map((optgroupOption) => (\n <option\n key={optgroupOption.value.toString()}\n value={optgroupOption.value}\n selected={optgroupOption.selected}\n disabled={optgroupOption.disabled}\n >\n {this.getOptionLabel(optgroupOption)}\n </option>\n ))}\n </optgroup>\n ) : null}\n {!option.options ? (\n <option\n value={option.value}\n disabled={option.disabled}\n selected={option.selected}\n >\n {this.getOptionLabel(option)}\n </option>\n ) : null}\n </Fragment>\n ))\n : null}\n <slot></slot>\n </select>\n <span id={this._placeholderId}>{this.placeholder ?? this.label}</span>\n {stringPropVisible(this.message, this.showMessage) ? (\n <db-infotext\n size=\"small\"\n icon={this.messageIcon}\n id={this._messageId}\n >\n {this.message}\n </db-infotext>\n ) : null}\n <db-infotext\n size=\"small\"\n semantic=\"successful\"\n id={this._validMessageId}\n >\n {this.validMessage ?? DEFAULT_VALID_MESSAGE}\n </db-infotext>\n <db-infotext\n size=\"small\"\n semantic=\"critical\"\n id={this._invalidMessageId}\n >\n {this.invalidMessage ??\n this._ref?.validationMessage ??\n DEFAULT_INVALID_MESSAGE}\n </db-infotext>\n <span data-visually-hidden=\"true\" role=\"status\">\n {this._voiceOverFallback}\n </span>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/switch/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/switch/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, ~~InitializedState,~~ SizeProps } from '../../shared/model';\nexport type DBSwitchDefaultProps = {\n /*\n Add additional icons to indicate active/inactive state.\n */\n visualAid?: boolean;\n};\nexport type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & EmphasisProps & SizeProps & IconProps & IconAfterProps;\nexport type DBSwitchDefaultState = {\n _checked: boolean;\n};\nexport type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState ~~& InitializedState~~"]}
1	+ {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/switch/model.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, SizeProps } from '../../shared/model';\nexport type DBSwitchDefaultProps = {\n /*\n Add additional icons to indicate active/inactive state.\n */\n visualAid?: boolean;\n};\nexport type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & EmphasisProps & SizeProps & IconProps & IconAfterProps;\nexport type DBSwitchDefaultState = {\n _checked: boolean;\n};\nexport type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState"]}

package/dist/collection/components/switch/switch.js CHANGED Viewed

@@ -8,7 +8,6 @@ export class DBSwitch {
     constructor() {
         this._id = undefined;
         this._checked = false;
-        this.initialized = false;
     }
     handleChange(event) {
         var _a;
@@ -74,10 +73,15 @@ export class DBSwitch {
         this.enableAttributePassing(this._ref, "db-switch");
         this._id = (_a = this.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`;
     }
+    componentDidUpdate() {
+        if (this.checked !== undefined && this.checked !== null) {
+            this._checked = !!this.checked;
+        }
+    }
     render() {
-        return (h("label", { key: 'eed236170700dfab522d745d812721705e427451', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-emphasis": this.emphasis, htmlFor: this._id }, h("input", { key: '10e378dc22bc93e4b9d028a8ffa411b3fbb856e0', type: "checkbox", role: "switch", id: this._id, "aria-checked": this._checked, ref: (el) => {
+        return (h("label", { key: '1c301648d509c8d67d02cb96e89b4aed178a648a', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-emphasis": this.emphasis, htmlFor: this._id }, h("input", { key: '5d5fc24b58aa99e4aaeb83cabe533381c5477528', type: "checkbox", role: "switch", id: this._id, "aria-checked": getBooleanAsString(this._checked), ref: (el) => {
                 this._ref = el;
-            }, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedbyid, "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, name: this.name, required: this.required, "data-aid-icon": this.icon, "data-aid-icon-after": this.iconAfter, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : h("slot", null)));
+            }, checked: this.checked, value: this.value, disabled: this.disabled, "aria-describedby": this.describedbyid, "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, name: this.name, required: this.required, "data-aid-icon": this.icon, "data-aid-icon-after": this.iconAfter, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : h("slot", null)));
     }
     static get is() { return "db-switch"; }
     static get properties() {
@@ -107,6 +111,31 @@ export class DBSwitch {
                 "attribute": "id",
                 "reflect": false
             },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"checked\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false
+            },
             "change": {
                 "type": "unknown",
                 "mutable": false,
@@ -301,12 +330,12 @@ export class DBSwitch {
                 "attribute": "classname",
                 "reflect": false
             },
-            "checked": {
-                "type": "boolean",
+            "value": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSwitchProps[\"checked\"]",
-                    "resolved": "boolean",
+                    "original": "DBSwitchProps[\"value\"]",
+                    "resolved": "any",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -323,7 +352,7 @@ export class DBSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
+                "attribute": "value",
                 "reflect": false
             },
             "disabled": {
@@ -531,8 +560,7 @@ export class DBSwitch {
     static get states() {
         return {
             "_id": {},
-            "_checked": {},
-            "initialized": {}
+            "_checked": {}
         };
     }
     static get events() {

package/dist/collection/components/switch/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,kBAAkB,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAOzE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG3E;;;GAGG;AAIH,MAAM,OAAO,QAAQ;IAHpB;~~QA2BU~~,QAAG,GAAG,SAAS,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;~~QACjB,gBAAW,GAAG,KAAK,CAAC~~;~~KA8G9B;IA5GC~~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~~EAC3B~~,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;oBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;gBACjB,CAAC,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,IAAI,CAAC,aAAa,kBACtB,IAAI,CAAC,UAAU,KAAK,SAAS,0BACrB,IAAI,CAAC,UAAU,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,IAAI,yBACH,IAAI,CAAC,SAAS,EACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAC3C;YACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAa,CAClC,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DBSwitchProps, DBSwitchState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp, uuid } from \"../../utils\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-switch\",\n})\nexport class DBSwitch {\n private _ref!: HTMLInputElement \| null;\n @Prop() id: DBSwitchProps[\"id\"];\n @Event() onChange: any;\n @Prop() change: DBSwitchProps[\"change\"];\n @Event() onBlur: any;\n @Prop() blur: DBSwitchProps[\"blur\"];\n @Event() onFocus: any;\n @Prop() focus: DBSwitchProps[\"focus\"];\n @Prop() visualAid: DBSwitchProps[\"visualAid\"];\n @Prop() size: DBSwitchProps[\"size\"];\n @Prop() showLabel: DBSwitchProps[\"showLabel\"];\n @Prop() emphasis: DBSwitchProps[\"emphasis\"];\n @Prop({attribute: \"classname\"}) className: DBSwitchProps[\"className\"];\n @Prop() ~~checked~~: DBSwitchProps[\"~~checked~~\"];\n @Prop() disabled: DBSwitchProps[\"disabled\"];\n @Prop() describedbyid: DBSwitchProps[\"describedbyid\"];\n @Prop() validation: DBSwitchProps[\"validation\"];\n @Prop() name: DBSwitchProps[\"name\"];\n @Prop() required: DBSwitchProps[\"required\"];\n @Prop() icon: DBSwitchProps[\"icon\"];\n @Prop() iconAfter: DBSwitchProps[\"iconAfter\"];\n @Prop() label: DBSwitchProps[\"label\"];\n\n @State() _id = undefined;\n @State() _checked = false;\n ~~@State() initialized = false;\n~~\n handleChange(event: ChangeEvent<HTMLInputElement>) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n\n // We have different ts types in different frameworks, so we need to use any here\n this._checked = (event.target as any)?.[\"checked\"];\n }\n handleBlur(event: InteractionEvent<HTMLInputElement>) {\n if (this.onBlur) {\n this.onBlur.emit(event);\n }\n if (this.blur) {\n this.blur(event);\n }\n }\n handleFocus(event: InteractionEvent<HTMLInputElement>) {\n if (this.onFocus) {\n this.onFocus.emit(event);\n }\n if (this.focus) {\n this.focus(event);\n }\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLInputElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-switch\");\n this._id = this.id ?? `switch-${uuid()}`;\n }\n\n render() {\n return (\n <label\n class={cls(\"db-switch\", this.className)}\n data-visual-aid={getBooleanAsString(this.visualAid)}\n data-size={this.size}\n data-hide-label={getHideProp(this.showLabel)}\n data-emphasis={this.emphasis}\n htmlFor={this._id}\n >\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={this._id}\n aria-checked={this._checked}\n ref={(el: any) => {\n this._ref = el;\n }}\n checked={this.checked}\n disabled={this.disabled}\n aria-describedby={this.describedbyid}\n aria-invalid={this.validation === \"invalid\"}\n data-custom-validity={this.validation}\n name={this.name}\n required={this.required}\n data-aid-icon={this.icon}\n data-aid-icon-after={this.iconAfter}\n onChange={(event) => this.handleChange(event)}\n onBlur={(event) => this.handleBlur(event)}\n onFocus={(event) => this.handleFocus(event)}\n />\n {this.label ? this.label : <slot></slot>}\n </label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,kBAAkB,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAOzE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG3E;;;GAGG;AAIH,MAAM,OAAO,QAAQ;IAHpB;QA4BU,QAAG,GAAG,SAAS,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;KAqH3B;IAnHC,YAAY,CAAC,KAAoC;;QAC/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;QAED,iFAAiF;QACjF,IAAI,CAAC,QAAQ,GAAG,MAAC,KAAK,CAAC,MAAc,0CAAG,SAAS,CAAC,CAAC;IACrD,CAAC;IACD,UAAU,CAAC,KAAyC;QAClD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IACD,WAAW,CAAC,KAAyC;QACnD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,sBAAsB,CAC5B,OAAgC,EAChC,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;oBACJ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE,CAAC;oBACD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAClC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE,CAAC;wBACnB,yDAAyD;wBACzD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;oBAC3C,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,GAAG,GAAG,MAAA,IAAI,CAAC,EAAE,mCAAI,UAAU,IAAI,EAAE,EAAE,CAAC;IAC3C,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACxD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACjC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACE,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,qBACtB,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,eACxC,IAAI,CAAC,IAAI,qBACH,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,mBAC7B,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,GAAG;YAEjB,8DACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,GAAG,kBACE,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC/C,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;oBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;gBACjB,CAAC,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,IAAI,CAAC,aAAa,kBACtB,IAAI,CAAC,UAAU,KAAK,SAAS,0BACrB,IAAI,CAAC,UAAU,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,IAAI,yBACH,IAAI,CAAC,SAAS,EACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAC3C;YACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAa,CAClC,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { DBSwitchProps, DBSwitchState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp, uuid } from \"../../utils\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-switch\",\n})\nexport class DBSwitch {\n private _ref!: HTMLInputElement \| null;\n @Prop() id: DBSwitchProps[\"id\"];\n @Prop() checked: DBSwitchProps[\"checked\"];\n @Event() onChange: any;\n @Prop() change: DBSwitchProps[\"change\"];\n @Event() onBlur: any;\n @Prop() blur: DBSwitchProps[\"blur\"];\n @Event() onFocus: any;\n @Prop() focus: DBSwitchProps[\"focus\"];\n @Prop() visualAid: DBSwitchProps[\"visualAid\"];\n @Prop() size: DBSwitchProps[\"size\"];\n @Prop() showLabel: DBSwitchProps[\"showLabel\"];\n @Prop() emphasis: DBSwitchProps[\"emphasis\"];\n @Prop({attribute: \"classname\"}) className: DBSwitchProps[\"className\"];\n @Prop() value: DBSwitchProps[\"value\"];\n @Prop() disabled: DBSwitchProps[\"disabled\"];\n @Prop() describedbyid: DBSwitchProps[\"describedbyid\"];\n @Prop() validation: DBSwitchProps[\"validation\"];\n @Prop() name: DBSwitchProps[\"name\"];\n @Prop() required: DBSwitchProps[\"required\"];\n @Prop() icon: DBSwitchProps[\"icon\"];\n @Prop() iconAfter: DBSwitchProps[\"iconAfter\"];\n @Prop() label: DBSwitchProps[\"label\"];\n\n @State() _id = undefined;\n @State() _checked = false;\n\n handleChange(event: ChangeEvent<HTMLInputElement>) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n\n // We have different ts types in different frameworks, so we need to use any here\n this._checked = (event.target as any)?.[\"checked\"];\n }\n handleBlur(event: InteractionEvent<HTMLInputElement>) {\n if (this.onBlur) {\n this.onBlur.emit(event);\n }\n if (this.blur) {\n this.blur(event);\n }\n }\n handleFocus(event: InteractionEvent<HTMLInputElement>) {\n if (this.onFocus) {\n this.onFocus.emit(event);\n }\n if (this.focus) {\n this.focus(event);\n }\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLInputElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-switch\");\n this._id = this.id ?? `switch-${uuid()}`;\n }\n\n componentDidUpdate() {\n if (this.checked !== undefined && this.checked !== null) {\n this._checked = !!this.checked;\n }\n }\n\n render() {\n return (\n <label\n class={cls(\"db-switch\", this.className)}\n data-visual-aid={getBooleanAsString(this.visualAid)}\n data-size={this.size}\n data-hide-label={getHideProp(this.showLabel)}\n data-emphasis={this.emphasis}\n htmlFor={this._id}\n >\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={this._id}\n aria-checked={getBooleanAsString(this._checked)}\n ref={(el: any) => {\n this._ref = el;\n }}\n checked={this.checked}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={this.describedbyid}\n aria-invalid={this.validation === \"invalid\"}\n data-custom-validity={this.validation}\n name={this.name}\n required={this.required}\n data-aid-icon={this.icon}\n data-aid-icon-after={this.iconAfter}\n onChange={(event) => this.handleChange(event)}\n onBlur={(event) => this.handleBlur(event)}\n onFocus={(event) => this.handleFocus(event)}\n />\n {this.label ? this.label : <slot></slot>}\n </label>\n );\n }\n}\n"]}

package/dist/collection/components/tab-item/tab-item.js CHANGED Viewed

@@ -64,9 +64,9 @@ export class DBTabItem {
         }
     }
     render() {
-        return (h("li", { key: '9b06c4a5236dd94278169644ef1ada748fb19f86', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '2189b9ec92e56a9502279091e25b7f91536b6435', htmlFor: this.id, "data-icon": this.icon, "data-icon-after": this.iconAfter, "data-hide-icon": getHideProp(this.showIcon), "data-hide-icon-after": getHideProp(this.showIcon), "data-no-text": this.noText }, h("input", { key: '7464ece5d41bdfc2166548efd1888e835874400d', type: "radio", role: "tab", disabled: this.disabled, "aria-selected": this._selected, "aria-controls": this.controls, checked: this.checked, ref: (el) => {
+        return (h("li", { key: 'b74836903d6f4fb378dfefe400c4ee90e87e81b6', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'd54e0cdf202b70a2184ad29adac3a5b7aac1cce0', htmlFor: this.id, "data-icon": this.icon, "data-icon-after": this.iconAfter, "data-hide-icon": getHideProp(this.showIcon), "data-hide-icon-after": getHideProp(this.showIcon), "data-no-text": this.noText }, h("input", { key: '40dc63d4f0c756b8900917f0d216d005874303a2', type: "radio", role: "tab", disabled: this.disabled, "aria-selected": this._selected, "aria-controls": this.controls, checked: this.checked, ref: (el) => {
                 this._ref = el;
-            }, id: this.id, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: 'f5fd6eacea787f4814f749203e52ecf5d633b884' }))));
+            }, id: this.id, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '3ef8b94926e52b17980f663487887b41f03f6b10' }))));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {

package/dist/collection/components/tab-item/tab-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;~~AAOnE~~,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG3E;;;GAGG;AAIH,MAAM,OAAO,SAAS;IAHrB;QAmBU,gBAAW,GAAG,KAAK,CAAC;QACpB,cAAS,GAAG,KAAK,CAAC;KAkG5B;IAhGC,YAAY,CAAC,~~KAAoC~~;;~~QAC/C~~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","sourcesContent":["import type { DBTabItemProps, DBTabItemState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp } from \"../../utils\";\nimport { ~~ChangeEvent } from~~ \~~"../../shared/model\";\nimport {\~~n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-tab-item\",\n})\nexport class DBTabItem {\n private _ref!: HTMLInputElement \| null;\n @Prop() active: DBTabItemProps[\"active\"];\n @Event() onChange: any;\n @Prop() change: DBTabItemProps[\"change\"];\n @Prop({attribute: \"classname\"}) className: DBTabItemProps[\"className\"];\n @Prop() id: DBTabItemProps[\"id\"];\n @Prop() icon: DBTabItemProps[\"icon\"];\n @Prop() iconAfter: DBTabItemProps[\"iconAfter\"];\n @Prop() showIcon: DBTabItemProps[\"showIcon\"];\n @Prop() noText: DBTabItemProps[\"noText\"];\n @Prop() disabled: DBTabItemProps[\"disabled\"];\n @Prop() controls: DBTabItemProps[\"controls\"];\n @Prop() checked: DBTabItemProps[\"checked\"];\n @Prop() label: DBTabItemProps[\"label\"];\n\n @State() initialized = false;\n @State() _selected = false;\n\n handleChange(event: ~~ChangeEvent<HTMLInputElement>~~) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n\n // We have different ts types in different frameworks, so we need to use any here\n\n const selected = (event.target as any)?.[\"checked\"];\n this._selected = getBooleanAsString(selected);\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-tab-item\");\n this.initialized = true;\n }\n\n componentDidUpdate() {\n if (this.active && this.initialized && this._ref) {\n this._ref.click();\n this.initialized = false;\n }\n }\n\n render() {\n return (\n <li class={cls(\"db-tab-item\", this.className)} role=\"none\">\n <label\n htmlFor={this.id}\n data-icon={this.icon}\n data-icon-after={this.iconAfter}\n data-hide-icon={getHideProp(this.showIcon)}\n data-hide-icon-after={getHideProp(this.showIcon)}\n data-no-text={this.noText}\n >\n <input\n type=\"radio\"\n role=\"tab\"\n disabled={this.disabled}\n aria-selected={this._selected}\n aria-controls={this.controls}\n checked={this.checked}\n ref={(el: any) => {\n this._ref = el;\n }}\n id={this.id}\n onChange={(event) => this.handleChange(event)}\n />\n {this.label ? this.label : null}\n <slot></slot>\n </label>\n </li>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { DBTabItemProps, DBTabItemState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp } from \"../../utils\";\nimport {\n handleFrameworkEventAngular,\n handleFrameworkEventVue,\n} from \"../../utils/form-components\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/*\n @slot children - This is a default/unnamed slot\n\n /\n @Component({\n tag: \"db-tab-item\",\n})\nexport class DBTabItem {\n private _ref!: HTMLInputElement \| null;\n @Prop() active: DBTabItemProps[\"active\"];\n @Event() onChange: any;\n @Prop() change: DBTabItemProps[\"change\"];\n @Prop({attribute: \"classname\"}) className: DBTabItemProps[\"className\"];\n @Prop() id: DBTabItemProps[\"id\"];\n @Prop() icon: DBTabItemProps[\"icon\"];\n @Prop() iconAfter: DBTabItemProps[\"iconAfter\"];\n @Prop() showIcon: DBTabItemProps[\"showIcon\"];\n @Prop() noText: DBTabItemProps[\"noText\"];\n @Prop() disabled: DBTabItemProps[\"disabled\"];\n @Prop() controls: DBTabItemProps[\"controls\"];\n @Prop() checked: DBTabItemProps[\"checked\"];\n @Prop() label: DBTabItemProps[\"label\"];\n\n @State() initialized = false;\n @State() _selected = false;\n\n handleChange(event: any) {\n if (this.onChange) {\n this.onChange.emit(event);\n }\n if (this.change) {\n this.change(event);\n }\n\n // We have different ts types in different frameworks, so we need to use any here\n\n const selected = (event.target as any)?.[\"checked\"];\n this._selected = getBooleanAsString(selected);\n }\n\n /\n Passes `aria-`, `data-` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement \| null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr &&\n (attr.name.startsWith(\"data-\") \|\| attr.name.startsWith(\"aria-\"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n if (attr && attr.name === \"class\") {\n const isWebComponent = attr.value.includes(\"hydrated\");\n const value = attr.value.replace(\"hydrated\", \"\").trim();\n const currentClass = element.getAttribute(\"class\");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : \"\"}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute(\"class\", \"hydrated\");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, \"db-tab-item\");\n this.initialized = true;\n }\n\n componentDidUpdate() {\n if (this.active && this.initialized && this._ref) {\n this._ref.click();\n this.initialized = false;\n }\n }\n\n render() {\n return (\n <li class={cls(\"db-tab-item\", this.className)} role=\"none\">\n <label\n htmlFor={this.id}\n data-icon={this.icon}\n data-icon-after={this.iconAfter}\n data-hide-icon={getHideProp(this.showIcon)}\n data-hide-icon-after={getHideProp(this.showIcon)}\n data-no-text={this.noText}\n >\n <input\n type=\"radio\"\n role=\"tab\"\n disabled={this.disabled}\n aria-selected={this._selected}\n aria-controls={this.controls}\n checked={this.checked}\n ref={(el: any) => {\n this._ref = el;\n }}\n id={this.id}\n onChange={(event) => this.handleChange(event)}\n />\n {this.label ? this.label : null}\n <slot></slot>\n </label>\n </li>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/tabs/model.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAI,CAAC,WAAW,EAAE,QAAQ,CAAW,CAAC;AAEnE,MAAM,CAAC,MAAM,2BAA2B,GAAI,CAAC,MAAM,EAAE,UAAU,CAAW,CAAC","sourcesContent":["import { AlignmentProps, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';\nimport { DBTabItemProps } from '../tab-item/model';\nimport { DBTabPanelProps } from '../tab-panel/model';\nexport const TabsBehaviorList = (['scrollbar', 'arrows'] as const);\nexport type TabsBehaviorType = (typeof TabsBehaviorList)[number];\nexport const TabsInitialSelectedModeList = (['auto', 'manually'] as const);\nexport type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];\nexport type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;\nexport type DBTabsDefaultProps = {\n /*\n Change amount of distance if you click on an arrow, only available with behavior=\"arrows\"\n /\n arrowScrollDistance?: number;\n\n /\n Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible\n /\n behavior?: TabsBehaviorType;\n\n /\n Default behavior is auto selecting the first tab, change selected tab by index\n /\n initialSelectedIndex?: number;\n\n /\n Default behavior is auto selecting the first tab, disable it with 'manually'\n /\n initialSelectedMode?: TabsInitialSelectedModeType;\n\n /\n The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.\n /\n name?: string;\n\n /\n Provide simple tabs with label + text as content\n */\n tabs?: DBSimpleTabProps[] \| string;\n};\nexport type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps;\nexport type DBTabsDefaultState = {\n _name: string;\n scrollContainer?: Element \| null;\n scroll: (left?: boolean) => void;\n showScrollLeft?: boolean;\n showScrollRight?: boolean;\n evaluateScrollButtons: (tabList: Element) => void;\n convertTabs: (tabs?: unknown[] \| string \| undefined) => DBSimpleTabProps[];\n initTabList: () => void;\n initTabs: (init?: boolean) => void;\n};\nexport type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState"]}
1	+ {"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/tabs/model.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAI,CAAC,WAAW,EAAE,QAAQ,CAAW,CAAC;AAEnE,MAAM,CAAC,MAAM,2BAA2B,GAAI,CAAC,MAAM,EAAE,UAAU,CAAW,CAAC","sourcesContent":["import { AlignmentProps, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';\nimport { DBTabItemProps } from '../tab-item/model';\nimport { DBTabPanelProps } from '../tab-panel/model';\nexport const TabsBehaviorList = (['scrollbar', 'arrows'] as const);\nexport type TabsBehaviorType = (typeof TabsBehaviorList)[number];\nexport const TabsInitialSelectedModeList = (['auto', 'manually'] as const);\nexport type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];\nexport type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;\nexport type DBTabsDefaultProps = {\n /*\n Change amount of distance if you click on an arrow, only available with behavior=\"arrows\"\n /\n arrowScrollDistance?: number;\n /\n Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible\n /\n behavior?: TabsBehaviorType;\n\n /\n Default behavior is auto selecting the first tab, change selected tab by index\n /\n initialSelectedIndex?: number;\n\n /\n Default behavior is auto selecting the first tab, disable it with 'manually'\n /\n initialSelectedMode?: TabsInitialSelectedModeType;\n\n /\n The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.\n /\n name?: string;\n\n /\n Informs the user if the current tab index has changed.\n /\n onIndexChange?: (index?: number) => void;\n\n /\n Informs the user if another tab has been selected.\n /\n onTabSelect?: (event?: Event) => void;\n\n /\n Provide simple tabs with label + text as content\n */\n tabs?: DBSimpleTabProps[] \| string;\n};\nexport type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps;\nexport type DBTabsDefaultState = {\n _name: string;\n scrollContainer?: Element \| null;\n scroll: (left?: boolean) => void;\n showScrollLeft?: boolean;\n showScrollRight?: boolean;\n evaluateScrollButtons: (tabList: Element) => void;\n convertTabs: (tabs?: unknown[] \| string \| undefined) => DBSimpleTabProps[];\n initTabList: () => void;\n initTabs: (init?: boolean) => void;\n handleChange: (event: any) => void;\n};\nexport type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState"]}

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -97,6 +97,21 @@ export class DBTabs {
             }
         }
     }
+    handleChange(event) {
+        var _a;
+        if (this.onIndexChange && event.target) {
+            const list = event.target.closest("ul");
+            const listItem =
+            // db-tab-item for angular and stencil wrapping elements
+            (_a = event.target.closest("db-tab-item")) !== null && _a !== void 0 ? _a : event.target.closest("li");
+            if (list !== null && listItem !== null) {
+                this.onIndexChange.emit(Array.from(list.childNodes).indexOf(listItem));
+            }
+        }
+        if (this.onTabSelect) {
+            this.onTabSelect.emit(event);
+        }
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -159,10 +174,10 @@ export class DBTabs {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '21022d470b48c2c96722eba446dee5b0a2dac8bf', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: 'a71824622643b3846d57370613e090805c4d6951', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "auto" }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_c = this.convertTabs(this.tabs)) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = this.convertTabs(this.tabs)) === null || _d === void 0 ? void 0 :
-            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '79d11e4acb87af7cd40fb54ffae5c1affb28f3ba' })));
+            }, id: this._id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "auto", onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_c = this.convertTabs(this.tabs)) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = this.convertTabs(this.tabs)) === null || _d === void 0 ? void 0 :
+            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '46e9b1aa01ebfd0dfd8c1f10783347ae9745ecd6' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
@@ -454,5 +469,38 @@ export class DBTabs {
             "scrollContainer": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "onIndexChange",
+                "name": "onIndexChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "onTabSelect",
+                "name": "onTabSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=tabs.js.map