bromcom-ui-next 0.1.21 → 0.1.22

package/dist/collection/components/button-group/button-group.component.js

@@ -95,6 +95,7 @@ export class BcmButtonGroup {
         return {
             "kind": {
                 "type": "string",
+                "attribute": "kind",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonKind",
@@ -115,11 +116,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "kind",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonSize",
@@ -140,11 +141,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "status": {
                 "type": "string",
+                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonStatus",
@@ -165,11 +166,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "status",
                 "reflect": false
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -184,11 +185,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": true
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -203,11 +204,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -222,11 +223,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "orientation": {
                 "type": "string",
+                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -241,7 +242,6 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "orientation",
                 "reflect": true,
                 "defaultValue": "'horizontal'"
             }

package/dist/collection/components/checkbox/checkbox.component.js

@@ -222,6 +222,7 @@ export class Checkbox {
         return {
             "_id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -236,12 +237,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": true,
                 "defaultValue": "generateId('bcm-checkbox')"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -256,11 +257,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -275,11 +276,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "indeterminate": {
                 "type": "boolean",
+                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -294,12 +295,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -314,12 +315,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -334,12 +335,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -354,12 +355,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -374,12 +375,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -394,7 +395,6 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "'right'"
             }

package/dist/collection/components/chip/chip.component.js

@@ -149,6 +149,7 @@ export class BcmChip {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "ChipSize",
@@ -169,12 +170,12 @@ export class BcmChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "kind": {
                 "type": "string",
+                "attribute": "kind",
                 "mutable": false,
                 "complexType": {
                     "original": "ChipKind",
@@ -195,12 +196,12 @@ export class BcmChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "kind",
                 "reflect": false,
                 "defaultValue": "'filled'"
             },
             "status": {
                 "type": "string",
+                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "ChipStatus",
@@ -221,12 +222,12 @@ export class BcmChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "status",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "dismissible": {
                 "type": "boolean",
+                "attribute": "dismissible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -241,12 +242,12 @@ export class BcmChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dismissible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -261,12 +262,12 @@ export class BcmChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -281,7 +282,6 @@ export class BcmChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false
             }
         };

package/dist/collection/components/divider/divider.component.js

@@ -87,6 +87,7 @@ export class Divider {
         return {
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -113,12 +114,12 @@ export class Divider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "'horizontal'"
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'solid' | 'dashed' | 'dotted'",
@@ -145,12 +146,12 @@ export class Divider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'solid'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -180,7 +181,6 @@ export class Divider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             }

package/dist/collection/components/drawer/drawer.component.js

@@ -199,6 +199,7 @@ export class BcmDrawer {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -213,12 +214,12 @@ export class BcmDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DrawerSize",
@@ -239,12 +240,12 @@ export class BcmDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "DrawerPosition",
@@ -265,12 +266,12 @@ export class BcmDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'right'"
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -285,12 +286,12 @@ export class BcmDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "headerText": {
                 "type": "string",
+                "attribute": "header-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -305,11 +306,11 @@ export class BcmDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "header-text",
                 "reflect": false
             },
             "noHeader": {
                 "type": "boolean",
+                "attribute": "no-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -324,7 +325,6 @@ export class BcmDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-header",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/dropdown/dropdown.component.js

@@ -53,6 +53,7 @@ export class Dropdown {
         return {
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -67,7 +68,6 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             }
         };

package/dist/collection/components/dropdown-item/dropdown-item.component.js

@@ -60,6 +60,7 @@ export class DropdownItem {
         return {
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -74,11 +75,11 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -93,11 +94,11 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "rightIcons": {
                 "type": "unknown",
+                "attribute": "right-icons",
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
@@ -115,6 +116,7 @@ export class DropdownItem {
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,12 +131,12 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -149,12 +151,12 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -169,7 +171,6 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/dropdown-item/dropdown-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,YAAY;IALzB;QAU2B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAkB3C,sBAAiB,GAAG,EAAE,CAC5B;YACE,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAC9D;gBACD,KAAK,EAAE;oBACL,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACV;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE,EAAE,iCAAiC;oBAC3C,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAwBH;IA1DS,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IA8BD,MAAM;;QACJ,OAAO,CACL,4EACgB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBAC3C,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB;YACN,6DAAM,IAAI,EAAC,eAAe,IACvB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,6BAAqB,IAAI,GAAa,CACvC,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,YAAY;IALzB;QAU2B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAkB3C,sBAAiB,GAAG,EAAE,CAC5B;YACE,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAC9D;gBACD,KAAK,EAAE;oBACL,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACV;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE,EAAE,iCAAiC;oBAC3C,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAwBH;IA1DS,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IA8BD,MAAM;;QACJ,OAAO,CACL,4EACgB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBAC3C,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB;YACN,6DAAM,IAAI,EAAC,eAAe,IACvB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,6BAAqB,IAAI,GAAa,CACvC,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"]}