From 7b4a8bc19208227f10bdfbd9d553a69a55af188d Mon Sep 17 00:00:00 2001 From: angsherpa456 Date: Fri, 8 Mar 2024 13:10:31 +0100 Subject: [PATCH] fix(ui): camelCase to kebab-case (#970) --- .../src/components/button-group/index.ts | 3 +- .../src/components/button-icon/index.ts | 3 +- .../src/components/button-text/index.ts | 3 +- .../src/components/checkbox/index.ts | 6 ++-- .../src/components/counter/index.ts | 3 +- .../src/components/divider/index.ts | 3 +- .../components/form-caption-group/index.ts | 3 +- .../src/components/form-caption/index.ts | 3 +- .../src/components/form-label/index.ts | 3 +- .../ui-library/src/components/icon/index.ts | 3 +- .../components/input-field-number/index.ts | 3 +- .../src/components/input-field-text/index.ts | 5 +-- .../ui-library/src/components/loader/index.ts | 3 +- .../src/components/radio-group/index.ts | 3 +- .../ui-library/src/components/radio/index.ts | 3 +- .../ui-library/src/components/select/index.ts | 4 ++- .../range-legend-slider/index.ts | 3 +- .../slider-single-value/range-slider/index.ts | 3 +- .../range-legend-min-max-slider/index.ts | 3 +- .../range-min-max-slider/index.ts | 3 +- .../src/components/tab-bar/index.ts | 3 +- .../src/components/textarea/index.ts | 3 +- .../src/components/toggle-switch/index.ts | 3 +- .../src/components/tooltip-bubble/index.ts | 3 +- .../src/components/tooltip/index.ts | 3 +- .../src/utils/boiler-lit-element.ts | 31 +++++++++++++++++++ .../typesafe-generic-component-renderer.ts | 5 +-- 27 files changed, 88 insertions(+), 29 deletions(-) create mode 100644 packages/ui-library/src/utils/boiler-lit-element.ts diff --git a/packages/ui-library/src/components/button-group/index.ts b/packages/ui-library/src/components/button-group/index.ts index 13a5f0012..b4e60fd40 100644 --- a/packages/ui-library/src/components/button-group/index.ts +++ b/packages/ui-library/src/components/button-group/index.ts @@ -5,8 +5,9 @@ import { styleCustom } from './index.css'; import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types'; import { TAG_NAME } from './renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrButtonGroup extends LitElement { +export class BlrButtonGroup extends BoilerLitElement { static styles = [styleCustom]; @property() sizeVariant: ButtonGroupSizesType = 'md'; diff --git a/packages/ui-library/src/components/button-icon/index.ts b/packages/ui-library/src/components/button-icon/index.ts index 2d0ffd6cc..d72d7af2f 100644 --- a/packages/ui-library/src/components/button-icon/index.ts +++ b/packages/ui-library/src/components/button-icon/index.ts @@ -21,6 +21,7 @@ import { createBlrClickEvent, createBlrFocusEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrButtonIconEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; @@ -33,7 +34,7 @@ export type BlrButtonIconEventHandlers = { * @fires blrBlur Button lost focus * @fires blrClick Button was clicked */ -export class BlrButtonIcon extends LitElement { +export class BlrButtonIcon extends BoilerLitElement { static styles = [styleCustom]; @property() arialabel!: string; diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts index 6b5d59f55..458390f78 100644 --- a/packages/ui-library/src/components/button-text/index.ts +++ b/packages/ui-library/src/components/button-text/index.ts @@ -27,6 +27,7 @@ import { createBlrClickEvent, createBlrFocusEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrButtonTextEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; @@ -39,7 +40,7 @@ export type BlrButtonTextEventHandlers = { * @fires blrBlur Button lost focus * @fires blrClick Button was clicked */ -export class BlrButtonText extends LitElement { +export class BlrButtonText extends BoilerLitElement { static styles = [styleCustom]; @property() label = 'Button Label'; diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index 5551e92c7..003d2315a 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -21,6 +21,7 @@ import { createBlrBlurEvent, createBlrFocusEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrCheckboxEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; @@ -33,7 +34,7 @@ export type BlrCheckboxEventHandlers = { * @fires blrBlur Checkbox lost focus * @fires blrCheckedChange Checkbox state changed (event.checkState) */ -export class BlrCheckbox extends LitElement { +export class BlrCheckbox extends BoilerLitElement { static styles = []; @query('input') @@ -265,7 +266,8 @@ export class BlrCheckbox extends LitElement { ?checked=${this.currentCheckedState} ?indeterminate=${this.currentIndeterminateState} ?readonly=${this.readonly} - ?hasError=${this.hasError} + ?has-Error=${this.hasError} + ?has-Label=${this.hasLabel} @change=${this.handleChange} aria-hidden="true" /> diff --git a/packages/ui-library/src/components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts index c791a25a4..2aae3f524 100644 --- a/packages/ui-library/src/components/counter/index.ts +++ b/packages/ui-library/src/components/counter/index.ts @@ -5,8 +5,9 @@ import { CounterVariantType, FormSizesType } from '../../globals/types'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { counterLight, counterDark } from './index.css'; import { TAG_NAME } from './renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrCounter extends LitElement { +export class BlrCounter extends BoilerLitElement { static styles = []; @property() variant: CounterVariantType = 'neutral'; diff --git a/packages/ui-library/src/components/divider/index.ts b/packages/ui-library/src/components/divider/index.ts index 1f33d41b8..ac8b79f0e 100644 --- a/packages/ui-library/src/components/divider/index.ts +++ b/packages/ui-library/src/components/divider/index.ts @@ -5,8 +5,9 @@ import { dividerDark, dividerLight } from './index.css'; import { TAG_NAME } from './renderFunction'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { DividerVariationTypes } from '../../globals/types'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrDivider extends LitElement { +export class BlrDivider extends BoilerLitElement { @property() direction: DividerVariationTypes = 'vertical'; @property() theme: ThemeType = 'Light'; diff --git a/packages/ui-library/src/components/form-caption-group/index.ts b/packages/ui-library/src/components/form-caption-group/index.ts index 02fac6e78..7f098d002 100644 --- a/packages/ui-library/src/components/form-caption-group/index.ts +++ b/packages/ui-library/src/components/form-caption-group/index.ts @@ -6,8 +6,9 @@ import { classMap } from 'lit/directives/class-map.js'; import { formCaptionGroupStyle } from './index.css'; import { TAG_NAME } from './renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrFormCaptionGroup extends LitElement { +export class BlrFormCaptionGroup extends BoilerLitElement { static styles = [formCaptionGroupStyle]; @property() sizeVariant: FormSizesType = 'md'; diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts index 389cf79b6..afc7d5509 100644 --- a/packages/ui-library/src/components/form-caption/index.ts +++ b/packages/ui-library/src/components/form-caption/index.ts @@ -9,8 +9,9 @@ import { CaptionVariantType, FormSizesType, SizesType } from '../../globals/type import { calculateIconName } from '../../utils/calculate-icon-name'; import { getComponentConfigToken } from '../../utils/get-component-config-token'; import { BlrIconRenderFunction } from '../icon/renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrFormCaption extends LitElement { +export class BlrFormCaption extends BoilerLitElement { static styles = []; @property() message?: string; diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts index 2da49f01c..c009fbe1e 100644 --- a/packages/ui-library/src/components/form-label/index.ts +++ b/packages/ui-library/src/components/form-label/index.ts @@ -5,8 +5,9 @@ import { property } from 'lit/decorators.js'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { formLight, formDark } from '../../foundation/semantic-tokens/form.css'; import { InputSizesType } from '../../globals/types'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrFormLabel extends LitElement { +export class BlrFormLabel extends BoilerLitElement { static styles = []; @property() label = ''; diff --git a/packages/ui-library/src/components/icon/index.ts b/packages/ui-library/src/components/icon/index.ts index 801bf2702..373efa995 100644 --- a/packages/ui-library/src/components/icon/index.ts +++ b/packages/ui-library/src/components/icon/index.ts @@ -10,6 +10,7 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'; import { TAG_NAME } from './renderFunction'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { BlrClickEvent, createBlrClickEvent } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrIconEventHandlers = { blrClick?: (event: BlrClickEvent) => void; @@ -18,7 +19,7 @@ export type BlrIconEventHandlers = { /** * @fires blrClick Icon was clicked */ -export class BlrIcon extends LitElement { +export class BlrIcon extends BoilerLitElement { static styles = [styleCustom]; @property() icon: IconType = 'blr360Xs'; diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts index ad9490e5e..b86e0a5c4 100644 --- a/packages/ui-library/src/components/input-field-number/index.ts +++ b/packages/ui-library/src/components/input-field-number/index.ts @@ -26,6 +26,7 @@ import { createBlrNumberValueChangeEvent, createBlrSelectEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrNumberInputEventListeners = { blrFocus?: (event: BlrFocusEvent) => void; @@ -42,7 +43,7 @@ export type BlrNumberInputEventListeners = { * @fires blrSelect Text in NumberInput was selected * @fires blrNumberStepperClick Step button was clicked */ -export class BlrInputFieldNumber extends LitElement { +export class BlrInputFieldNumber extends BoilerLitElement { static styles = [baseStyle]; @query('input') diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts index 4f27b40c4..c90463098 100644 --- a/packages/ui-library/src/components/input-field-text/index.ts +++ b/packages/ui-library/src/components/input-field-text/index.ts @@ -24,6 +24,7 @@ import { createBlrSelectEvent, createBlrTextValueChangeEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrInputFieldTextEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; @@ -38,7 +39,7 @@ export type BlrInputFieldTextEventHandlers = { * @fires blrTextValueChange InputFieldText value changed * @fires blrSelect Text in InputFieldText got selected */ -export class BlrInputFieldText extends LitElement { +export class BlrInputFieldText extends BoilerLitElement { static styles = [styleCustom]; @property() inputFieldTextId!: string; @@ -197,7 +198,7 @@ export class BlrInputFieldText extends LitElement { @focus=${this.handleFocus} maxlength="${this.maxLength}" pattern="${this.pattern}" - hasError="${this.hasError}" + has-Error="${this.hasError}" @select=${this.handleSelect} /> diff --git a/packages/ui-library/src/components/loader/index.ts b/packages/ui-library/src/components/loader/index.ts index 904b01fd0..7a6d012fd 100644 --- a/packages/ui-library/src/components/loader/index.ts +++ b/packages/ui-library/src/components/loader/index.ts @@ -6,8 +6,9 @@ import { styleCustomLight, styleCustomDark } from './index.css'; import { TAG_NAME } from './renderFunction'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { ActionSizesType, FeedbackVariantType } from '../../globals/types'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrLoader extends LitElement { +export class BlrLoader extends BoilerLitElement { static styles = []; @property() sizeVariant?: ActionSizesType = 'md'; diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts index 841c4b22d..88da70e2f 100644 --- a/packages/ui-library/src/components/radio-group/index.ts +++ b/packages/ui-library/src/components/radio-group/index.ts @@ -11,8 +11,9 @@ import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderF import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction'; import { TAG_NAME } from './renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrRadioGroup extends LitElement { +export class BlrRadioGroup extends BoilerLitElement { static styles = [styleCustom]; @property() disabled?: boolean; diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index 7f96699ed..d6e5fd652 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -11,8 +11,9 @@ import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction'; import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrRadio extends LitElement { +export class BlrRadio extends BoilerLitElement { static styles = [styleCustom]; @property() optionId!: string; diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index da3645b03..d7ec9e56a 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/packages/ui-library/src/components/select/index.ts @@ -24,6 +24,8 @@ import { createBlrSelectedValueChangeEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; + export type BlrSelectEventHandlers = { blrSelectedValueChange?: (event: BlrSelectedValueChangeEvent) => void; blrFocus?: (event: BlrFocusEvent) => void; @@ -35,7 +37,7 @@ export type BlrSelectEventHandlers = { * @fires blrFocus Select received focus * @fires blrBlur Select lost focus */ -export class BlrSelect extends LitElement { +export class BlrSelect extends BoilerLitElement { static styles = [styleCustom]; @property() arialabel?: string; diff --git a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts index 3096965a5..e219044bc 100644 --- a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts +++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts @@ -12,8 +12,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types'; import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils'; import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction'; +import { BoilerLitElement } from '../../../utils/boiler-lit-element'; -export class BlrRangeLegendSlider extends LitElement { +export class BlrRangeLegendSlider extends BoilerLitElement { static styles = [styleCustom]; @property() onClickMinMax?: (param: number) => void; diff --git a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts index 18bb6bee1..176f91527 100644 --- a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts +++ b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts @@ -10,8 +10,9 @@ import { SizelessIconType } from '@boiler/icons'; import { ThemeType } from '../../../foundation/_tokens-generated/index.themes'; import { findPercentage, generateRangeBar, setOnclickValue, findNearestValue } from '../../../utils/range-slider-utils'; import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction'; +import { BoilerLitElement } from '../../../utils/boiler-lit-element'; -export class BlrRangeSlider extends LitElement { +export class BlrRangeSlider extends BoilerLitElement { static styles = [styleCustom]; @property() onClickMinMax?: (param: number) => void; diff --git a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts index 7191e093d..41942fee6 100644 --- a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts +++ b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts @@ -11,8 +11,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types'; import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils'; import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction'; +import { BoilerLitElement } from '../../../utils/boiler-lit-element'; -export class BlrRangeLegendMinMaxSlider extends LitElement { +export class BlrRangeLegendMinMaxSlider extends BoilerLitElement { static styles = [styleCustom]; @property() onBtnClick?: (min: number, max: number) => void; diff --git a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts index c5e5508a5..5ee1ec82c 100644 --- a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts +++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts @@ -9,8 +9,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types'; import { findPercentage, generateRangeBar, findNearestValue, setOnclickValue } from '../../../utils/range-slider-utils'; import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction'; +import { BoilerLitElement } from '../../../utils/boiler-lit-element'; -export class BlrRangeMinMaxSlider extends LitElement { +export class BlrRangeMinMaxSlider extends BoilerLitElement { static styles = [styleCustom]; @property() onBtnClick?: (min: number, max: number) => void; diff --git a/packages/ui-library/src/components/tab-bar/index.ts b/packages/ui-library/src/components/tab-bar/index.ts index 230527b09..62611b846 100644 --- a/packages/ui-library/src/components/tab-bar/index.ts +++ b/packages/ui-library/src/components/tab-bar/index.ts @@ -22,8 +22,9 @@ import { getComponentConfigToken } from '../../utils/get-component-config-token' import { BlrDividerRenderFunction } from '../divider/renderFunction'; import { BlrIconRenderFunction } from '../icon/renderFunction'; import { formLight, formDark } from '../../foundation/semantic-tokens/form.css'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrTabBar extends LitElement { +export class BlrTabBar extends BoilerLitElement { static styles = [styleCustom]; @query('.blr-tab-bar') diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 707f99bc7..5ab9b7f35 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/packages/ui-library/src/components/textarea/index.ts @@ -22,6 +22,7 @@ import { createBlrSelectEvent, createBlrTextValueChangeEvent, } from '../../globals/events'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; export type BlrTextareaEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; @@ -36,7 +37,7 @@ export type BlrTextareaEventHandlers = { * @fires blrTextValueChange Textarea value changed * @fires blrSelect Text in Textarea got selected */ -export class BlrTextarea extends LitElement { +export class BlrTextarea extends BoilerLitElement { static styles = [styleCustom]; @property() textAreaId!: string; diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts index 7052e26fe..2c508a0dc 100644 --- a/packages/ui-library/src/components/toggle-switch/index.ts +++ b/packages/ui-library/src/components/toggle-switch/index.ts @@ -12,8 +12,9 @@ import { FormSizesType, IconPositionVariant } from '../../globals/types'; import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction'; import { styleCustom, toggleSwitchLight, toggleSwitchDark } from './index.css'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrToggleSwitch extends LitElement { +export class BlrToggleSwitch extends BoilerLitElement { static styles = [styleCustom]; @query('input') diff --git a/packages/ui-library/src/components/tooltip-bubble/index.ts b/packages/ui-library/src/components/tooltip-bubble/index.ts index 6578b9446..91ce4c2d5 100644 --- a/packages/ui-library/src/components/tooltip-bubble/index.ts +++ b/packages/ui-library/src/components/tooltip-bubble/index.ts @@ -4,8 +4,9 @@ import { light, dark } from './index.css'; import { classMap } from 'lit/directives/class-map.js'; import { TAG_NAME } from './renderFunction'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; -export class BlrTooltipBubble extends LitElement { +export class BlrTooltipBubble extends BoilerLitElement { static styles = [ css` :host([visible]) { diff --git a/packages/ui-library/src/components/tooltip/index.ts b/packages/ui-library/src/components/tooltip/index.ts index 23334549f..f36d69f34 100644 --- a/packages/ui-library/src/components/tooltip/index.ts +++ b/packages/ui-library/src/components/tooltip/index.ts @@ -7,11 +7,12 @@ import { TAG_NAME } from './renderFunction'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { BlrTooltipBubbleRenderFunction } from '../tooltip-bubble/renderFunction'; +import { BoilerLitElement } from '../../utils/boiler-lit-element'; const enterEvents = ['pointerenter', 'focus']; const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click']; -export class BlrTooltip extends LitElement { +export class BlrTooltip extends BoilerLitElement { static styles = [styleCustom]; @property() theme?: ThemeType = 'Light'; diff --git a/packages/ui-library/src/utils/boiler-lit-element.ts b/packages/ui-library/src/utils/boiler-lit-element.ts new file mode 100644 index 000000000..8172e3ef6 --- /dev/null +++ b/packages/ui-library/src/utils/boiler-lit-element.ts @@ -0,0 +1,31 @@ +import { LitElement, PropertyDeclaration } from 'lit'; + +export const camelCaseToKebabCase = (str: string) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(); + +export class BoilerLitElement extends LitElement { + /** + * Sets the attribute name in kebab-case + * + * This function overwrites the lit elements createProperty method, + * here it converts the provided attribute name to kebab-case instead of lowercase, + * which is the convention for HTML attributes. + * + * For more information on observed attributes in web components, + * refer to the official Lit documentation: + * https://lit.dev/docs/components/properties/#observed-attributes + * + * @param {string} name - The attribute name to convert. + * @returns {string} The attribute name in kebab-case. + */ + static createProperty(name: PropertyKey, options: PropertyDeclaration) { + let customOptions = options; + + // generate the attribute name if it hasn't been defined or if it's disabled. + if (typeof options?.attribute === 'undefined' || options?.attribute === true) { + const attributeName = camelCaseToKebabCase(name.toString()); + customOptions = { ...options, attribute: attributeName }; + } + + return super.createProperty(name, customOptions); + } +} diff --git a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts index b6d96bdb4..361118796 100644 --- a/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts +++ b/packages/ui-library/src/utils/typesafe-generic-component-renderer.ts @@ -1,4 +1,5 @@ import { TemplateResult, html } from 'lit'; +import { camelCaseToKebabCase } from '../utils/boiler-lit-element'; export const genericBlrComponentRenderer = >( tagName: string, @@ -25,14 +26,14 @@ export const genericBlrComponentRenderer =