@actabldesign/bellhop-core 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/bh-accordion-item.js +1 -1
- package/dist/components/bh-accordion.js +1 -1
- package/dist/components/bh-appbar.js +4 -4
- package/dist/components/bh-autocomplete-menu.js +1 -1
- package/dist/components/bh-avatar-add.js +1 -1
- package/dist/components/bh-avatar-stacked.js +4 -4
- package/dist/components/bh-avatar.js +1 -1
- package/dist/components/bh-badge-dot.js +1 -1
- package/dist/components/bh-badge.js +1 -1
- package/dist/components/bh-bar-chart.js +2 -2
- package/dist/components/bh-breadcrumbs.js +1 -1
- package/dist/components/bh-button-icon.js +1 -1
- package/dist/components/bh-button.js +1 -1
- package/dist/components/bh-card-footer.js +1 -1
- package/dist/components/bh-card-header.js +1 -1
- package/dist/components/bh-card.js +1 -1
- package/dist/components/bh-chart-tooltip.js +1 -1
- package/dist/components/bh-checkbox-group-item.js +1 -1
- package/dist/components/bh-checkbox-group.js +1 -1
- package/dist/components/bh-checkbox.js +1 -1
- package/dist/components/bh-container-footer.js +3 -3
- package/dist/components/bh-container.js +1 -1
- package/dist/components/bh-data-grid.js +1 -1
- package/dist/components/bh-date-picker-content.js +1 -1
- package/dist/components/bh-date-picker.js +10 -10
- package/dist/components/bh-date-range-picker-content.js +1 -1
- package/dist/components/bh-date-range-picker.js +11 -11
- package/dist/components/bh-dropdown-menu.js +1 -1
- package/dist/components/bh-dropdown.js +1 -1
- package/dist/components/bh-empty-state.js +1 -1
- package/dist/components/bh-featured-icon.js +1 -1
- package/dist/components/bh-illustrations.js +1 -1
- package/dist/components/bh-input-autocomplete.js +8 -8
- package/dist/components/bh-input-number.js +4 -4
- package/dist/components/bh-input-password.js +3 -3
- package/dist/components/bh-input-text.js +1 -1
- package/dist/components/bh-input-verification.js +3 -3
- package/dist/components/bh-label.js +1 -1
- package/dist/components/bh-loader-spinner.js +1 -1
- package/dist/components/bh-logo-box.js +1 -1
- package/dist/components/bh-modal-actions.js +3 -3
- package/dist/components/bh-modal-header.js +3 -3
- package/dist/components/bh-modal.js +1 -1
- package/dist/components/bh-month-picker-content.js +1 -1
- package/dist/components/bh-month-picker.js +8 -8
- package/dist/components/bh-nav-item.js +1 -1
- package/dist/components/bh-notification.js +4 -4
- package/dist/components/bh-page-navigation-child.js +1 -1
- package/dist/components/bh-page-navigation-multi-level.js +1 -1
- package/dist/components/bh-page-navigation-single-level.js +1 -1
- package/dist/components/bh-page-navigation.js +6 -6
- package/dist/components/bh-pagination.js +1 -1
- package/dist/components/bh-picker-menu.js +1 -1
- package/dist/components/bh-pie-chart.js +2 -2
- package/dist/components/bh-popover.js +1 -1
- package/dist/components/bh-product-switcher.js +1 -1
- package/dist/components/bh-property-switcher.js +1 -1
- package/dist/components/bh-radio-button.js +1 -1
- package/dist/components/bh-sidebar.js +10 -10
- package/dist/components/bh-skeleton-loader.js +1 -1
- package/dist/components/bh-tab-item.js +1 -1
- package/dist/components/bh-tabs.js +1 -1
- package/dist/components/bh-tag.js +1 -1
- package/dist/components/bh-textarea.js +3 -3
- package/dist/components/bh-toggle.js +1 -1
- package/dist/components/bh-tooltip.js +1 -1
- package/dist/components/bh-trend-chart.js +1 -1
- package/dist/components/index.js +14 -14
- package/dist/components/{p-CWGpUs1b.js → p-3wrr5uYj.js} +3 -3
- package/dist/components/{p-CWGpUs1b.js.map → p-3wrr5uYj.js.map} +1 -1
- package/dist/components/{p-DW54267I.js → p-B-oXID22.js} +6 -6
- package/dist/components/{p-DW54267I.js.map → p-B-oXID22.js.map} +1 -1
- package/dist/components/{p-BOk69MBi.js → p-B7e9Vn80.js} +3 -3
- package/dist/components/{p-BOk69MBi.js.map → p-B7e9Vn80.js.map} +1 -1
- package/dist/components/{p-BZELvMID.js → p-BAKX4y5m.js} +5 -5
- package/dist/components/{p-BZELvMID.js.map → p-BAKX4y5m.js.map} +1 -1
- package/dist/components/{p-Df5drD7C.js → p-BE4kximA.js} +3 -3
- package/dist/components/{p-Df5drD7C.js.map → p-BE4kximA.js.map} +1 -1
- package/dist/components/{p-Cu6Uuaq7.js → p-BM_aWCWB.js} +4 -4
- package/dist/components/{p-Cu6Uuaq7.js.map → p-BM_aWCWB.js.map} +1 -1
- package/dist/components/{p-B7eVYv2t.js → p-BsB67vNb.js} +3 -3
- package/dist/components/{p-B7eVYv2t.js.map → p-BsB67vNb.js.map} +1 -1
- package/dist/components/{p-C69LfZib.js → p-BsgViq32.js} +5 -5
- package/dist/components/{p-C69LfZib.js.map → p-BsgViq32.js.map} +1 -1
- package/dist/components/{p-SkkbcLa0.js → p-BuUjUqUh.js} +3 -3
- package/dist/components/{p-SkkbcLa0.js.map → p-BuUjUqUh.js.map} +1 -1
- package/dist/components/{p-B2edfvL2.js → p-C24VI6pZ.js} +3 -3
- package/dist/components/{p-B2edfvL2.js.map → p-C24VI6pZ.js.map} +1 -1
- package/dist/components/{p-DkGh2r0W.js → p-CA0LmFbe.js} +3 -3
- package/dist/components/{p-DkGh2r0W.js.map → p-CA0LmFbe.js.map} +1 -1
- package/dist/components/{p-DIeMf4U9.js → p-CECXxls6.js} +8 -8
- package/dist/components/{p-DIeMf4U9.js.map → p-CECXxls6.js.map} +1 -1
- package/dist/components/{p-BNeBcvHu.js → p-CGw-G2Wz.js} +6 -6
- package/dist/components/{p-BNeBcvHu.js.map → p-CGw-G2Wz.js.map} +1 -1
- package/dist/components/{p-DQUicoqi.js → p-CHuAmqhM.js} +3 -3
- package/dist/components/{p-DQUicoqi.js.map → p-CHuAmqhM.js.map} +1 -1
- package/dist/components/{p-BpXkE6y8.js → p-CKiB8Aa8.js} +3 -3
- package/dist/components/{p-BpXkE6y8.js.map → p-CKiB8Aa8.js.map} +1 -1
- package/dist/components/{p-B8MWhPHT.js → p-CNifJXgc.js} +6 -6
- package/dist/components/{p-B8MWhPHT.js.map → p-CNifJXgc.js.map} +1 -1
- package/dist/components/{p-DAp7fLS-.js → p-CcPNBnbg.js} +5 -5
- package/dist/components/{p-DAp7fLS-.js.map → p-CcPNBnbg.js.map} +1 -1
- package/dist/components/{p-DOaC_o63.js → p-CnQh9uSW.js} +7 -7
- package/dist/components/{p-DOaC_o63.js.map → p-CnQh9uSW.js.map} +1 -1
- package/dist/components/{p-CbeeTFys.js → p-CoJrxiH7.js} +3 -3
- package/dist/components/{p-CbeeTFys.js.map → p-CoJrxiH7.js.map} +1 -1
- package/dist/components/{p-Bs2Z3XIQ.js → p-CrB92GYh.js} +5 -5
- package/dist/components/{p-Bs2Z3XIQ.js.map → p-CrB92GYh.js.map} +1 -1
- package/dist/components/{p-DK92X9HV.js → p-CycIV1i_.js} +3 -3
- package/dist/components/{p-DK92X9HV.js.map → p-CycIV1i_.js.map} +1 -1
- package/dist/components/{p-DufL1yr4.js → p-CzM_4nyA.js} +4 -4
- package/dist/components/{p-DufL1yr4.js.map → p-CzM_4nyA.js.map} +1 -1
- package/dist/components/{p-CK89kJIU.js → p-DBL4ByGk.js} +3 -3
- package/dist/components/{p-CK89kJIU.js.map → p-DBL4ByGk.js.map} +1 -1
- package/dist/components/{p-DURWm67o.js → p-DErr7PhS.js} +3 -3
- package/dist/components/{p-DURWm67o.js.map → p-DErr7PhS.js.map} +1 -1
- package/dist/components/{p-dlKpBGSA.js → p-DK1vwbmm.js} +3 -3
- package/dist/components/{p-dlKpBGSA.js.map → p-DK1vwbmm.js.map} +1 -1
- package/dist/components/{p-ChfLhYiJ.js → p-DLHC5fHk.js} +4 -4
- package/dist/components/{p-ChfLhYiJ.js.map → p-DLHC5fHk.js.map} +1 -1
- package/dist/components/{p-DsCDXclM.js → p-DLql1qMx.js} +4 -4
- package/dist/components/{p-DsCDXclM.js.map → p-DLql1qMx.js.map} +1 -1
- package/dist/components/{p-kd43PSY6.js → p-DXXn0saP.js} +4 -4
- package/dist/components/{p-kd43PSY6.js.map → p-DXXn0saP.js.map} +1 -1
- package/dist/components/{p-CMomxDPL.js → p-D_matRYZ.js} +3 -3
- package/dist/components/{p-CMomxDPL.js.map → p-D_matRYZ.js.map} +1 -1
- package/dist/components/{p-Ccq-Rk5W.js → p-DcXhS_xz.js} +8 -8
- package/dist/components/{p-Ccq-Rk5W.js.map → p-DcXhS_xz.js.map} +1 -1
- package/dist/components/{p-BaLh9-zk.js → p-DgAfq9r9.js} +3 -3
- package/dist/components/{p-BaLh9-zk.js.map → p-DgAfq9r9.js.map} +1 -1
- package/dist/components/{p-DtbXB8r4.js → p-DjsErN85.js} +3 -3
- package/dist/components/{p-DtbXB8r4.js.map → p-DjsErN85.js.map} +1 -1
- package/dist/components/{p-CePuvH9t.js → p-Djti9xFF.js} +7 -7
- package/dist/components/{p-CePuvH9t.js.map → p-Djti9xFF.js.map} +1 -1
- package/dist/components/{p-D6w8lxZi.js → p-DoORMw6u.js} +3 -3
- package/dist/components/{p-D6w8lxZi.js.map → p-DoORMw6u.js.map} +1 -1
- package/dist/components/{p-D-RHfFhc.js → p-DpK6k515.js} +12 -12
- package/dist/components/{p-D-RHfFhc.js.map → p-DpK6k515.js.map} +1 -1
- package/dist/components/{p-C97e5uAI.js → p-FVbfBpwz.js} +4 -4
- package/dist/components/{p-C97e5uAI.js.map → p-FVbfBpwz.js.map} +1 -1
- package/dist/components/{p-DcoR-p0a.js → p-G4wC-s5k.js} +3 -3
- package/dist/components/{p-DcoR-p0a.js.map → p-G4wC-s5k.js.map} +1 -1
- package/dist/components/{p-BFhwq3_y.js → p-QjxdVLPX.js} +4 -4
- package/dist/components/{p-BFhwq3_y.js.map → p-QjxdVLPX.js.map} +1 -1
- package/dist/components/{p-5LJWVh2v.js → p-UG_h-ztP.js} +3 -3
- package/dist/components/{p-5LJWVh2v.js.map → p-UG_h-ztP.js.map} +1 -1
- package/dist/components/{p-uG5vRdFz.js → p-l5G-q5dj.js} +4 -4
- package/dist/components/{p-uG5vRdFz.js.map → p-l5G-q5dj.js.map} +1 -1
- package/dist/components/{p-Dm3E-tB8.js → p-qS3vvZaC.js} +3 -3
- package/dist/components/{p-Dm3E-tB8.js.map → p-qS3vvZaC.js.map} +1 -1
- package/llms.txt +41649 -0
- package/package.json +14 -4
- package/react.d.ts +253 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-
|
|
2
|
-
import { d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
|
|
2
|
+
import { d as defineCustomElement$1 } from './p-UG_h-ztP.js';
|
|
3
3
|
|
|
4
4
|
const bhAvatarAddCss = ":host{display:inline-block;font-family:var(\n --font-inter,\n 'Inter',\n -apple-system,\n BlinkMacSystemFont,\n sans-serif\n )}.avatar-add-container{position:relative;display:inline-flex}.avatar-add{position:relative;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-white, #ffffff);border:1px dashed var(--color-neutral-300, #d0d5dd);border-radius:50%;cursor:pointer;transition:all 0.2s ease-in-out;padding:0;outline:none}.avatar-add-xs{width:24px;height:24px}.avatar-add-xs .avatar-add-icon{font-size:14px}.avatar-add-sm{width:32px;height:32px}.avatar-add-sm .avatar-add-icon{font-size:16px}.avatar-add-md{width:40px;height:40px}.avatar-add-md .avatar-add-icon{font-size:20px}.avatar-add-lg{width:48px;height:48px}.avatar-add-lg .avatar-add-icon{font-size:24px}.avatar-add-xl{width:56px;height:56px}.avatar-add-xl .avatar-add-icon{font-size:28px}.avatar-add-2xl{width:64px;height:64px}.avatar-add-2xl .avatar-add-icon{font-size:32px}.avatar-add-hover{background-color:var(--color-neutral-50, #f9fafb);border-color:var(--color-brand-500, #7f56d9)}.avatar-add-hover .avatar-add-icon{color:var(--color-brand-500, #7f56d9)}.avatar-add-focus{background-color:var(--color-white, #ffffff);box-shadow:0 0 0 2px var(--color-white, #ffffff),\n 0 0 0 4px var(--color-brand-500, #7f56d9)}.avatar-add-disabled{background-color:var(--color-neutral-50, #f9fafb);cursor:not-allowed;pointer-events:none}.avatar-add-disabled .avatar-add-icon{color:var(--color-neutral-300, #d0d5dd)}.avatar-add-content{display:flex;align-items:center;justify-content:center}.avatar-add-icon{color:var(--color-neutral-500, #667085);line-height:1;transition:color 0.2s ease-in-out}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
|
|
5
5
|
|
|
@@ -101,6 +101,6 @@ function defineCustomElement() {
|
|
|
101
101
|
defineCustomElement();
|
|
102
102
|
|
|
103
103
|
export { BhAvatarAdd as B, defineCustomElement as d };
|
|
104
|
-
//# sourceMappingURL=p-
|
|
104
|
+
//# sourceMappingURL=p-DLql1qMx.js.map
|
|
105
105
|
|
|
106
|
-
//# sourceMappingURL=p-
|
|
106
|
+
//# sourceMappingURL=p-DLql1qMx.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DLql1qMx.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-avatar-add/bh-avatar-add.css?tag=bh-avatar-add&encapsulation=shadow","src/components/bh-avatar-add/bh-avatar-add.tsx"],"sourcesContent":[":host {\n display: inline-block;\n font-family: var(\n --font-inter,\n 'Inter',\n -apple-system,\n BlinkMacSystemFont,\n sans-serif\n );\n}\n\n/* Container */\n.avatar-add-container {\n position: relative;\n display: inline-flex;\n}\n\n/* Base Button */\n.avatar-add {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-white, #ffffff);\n border: 1px dashed var(--color-neutral-300, #d0d5dd);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n padding: 0;\n outline: none;\n}\n\n/* Button Sizes */\n.avatar-add-xs {\n width: 24px;\n height: 24px;\n}\n\n.avatar-add-xs .avatar-add-icon {\n font-size: 14px;\n}\n\n.avatar-add-sm {\n width: 32px;\n height: 32px;\n}\n\n.avatar-add-sm .avatar-add-icon {\n font-size: 16px;\n}\n\n.avatar-add-md {\n width: 40px;\n height: 40px;\n}\n\n.avatar-add-md .avatar-add-icon {\n font-size: 20px;\n}\n\n.avatar-add-lg {\n width: 48px;\n height: 48px;\n}\n\n.avatar-add-lg .avatar-add-icon {\n font-size: 24px;\n}\n\n.avatar-add-xl {\n width: 56px;\n height: 56px;\n}\n\n.avatar-add-xl .avatar-add-icon {\n font-size: 28px;\n}\n\n.avatar-add-2xl {\n width: 64px;\n height: 64px;\n}\n\n.avatar-add-2xl .avatar-add-icon {\n font-size: 32px;\n}\n\n/* Hover State */\n.avatar-add-hover {\n background-color: var(--color-neutral-50, #f9fafb);\n border-color: var(--color-brand-500, #7f56d9);\n}\n\n.avatar-add-hover .avatar-add-icon {\n color: var(--color-brand-500, #7f56d9);\n}\n\n/* Focus State */\n.avatar-add-focus {\n background-color: var(--color-white, #ffffff);\n box-shadow: 0 0 0 2px var(--color-white, #ffffff),\n 0 0 0 4px var(--color-brand-500, #7f56d9);\n}\n\n/* Disabled State */\n.avatar-add-disabled {\n background-color: var(--color-neutral-50, #f9fafb);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.avatar-add-disabled .avatar-add-icon {\n color: var(--color-neutral-300, #d0d5dd);\n}\n\n/* Content Container */\n.avatar-add-content {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Icon */\n.avatar-add-icon {\n color: var(--color-neutral-500, #667085);\n line-height: 1;\n transition: color 0.2s ease-in-out;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n font-family: 'Material Symbols Outlined';\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarAddSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n@Component({\n tag: 'bh-avatar-add',\n styleUrl: 'bh-avatar-add.css',\n shadow: true,\n})\nexport class BhAvatarAdd {\n /**\n * Size of the avatar add button\n */\n @Prop() size: AvatarAddSize = 'md';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether to show tooltip on hover\n */\n @Prop() showTooltip: boolean = false;\n\n /**\n * Tooltip text\n */\n @Prop() tooltipText: string = 'Add user';\n\n /**\n * Track hover state\n */\n @State() isHovered: boolean = false;\n\n /**\n * Track focus state\n */\n @State() isFocused: boolean = false;\n\n /**\n * Emitted when the button is clicked\n */\n @Event() bhClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent): void => {\n if (!this.disabled) {\n this.bhClick.emit(event);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n event.preventDefault();\n this.bhClick.emit(event as unknown as MouseEvent);\n }\n };\n\n render() {\n const buttonClasses = {\n 'avatar-add': true,\n [`avatar-add-${this.size}`]: true,\n 'avatar-add-hover': this.isHovered && !this.disabled,\n 'avatar-add-focus': this.isFocused && !this.disabled,\n 'avatar-add-disabled': this.disabled,\n };\n\n return (\n <div class=\"avatar-add-container\">\n <button\n type=\"button\"\n class={buttonClasses}\n disabled={this.disabled}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={() => {\n if (!this.disabled) this.isHovered = true;\n }}\n onMouseLeave={() => {\n this.isHovered = false;\n }}\n onFocus={() => {\n if (!this.disabled) this.isFocused = true;\n }}\n onBlur={() => {\n this.isFocused = false;\n }}\n aria-label={this.tooltipText}\n part=\"button\"\n >\n <span class=\"avatar-add-content\">\n <span class=\"material-symbols-outlined avatar-add-icon\">add</span>\n </span>\n </button>\n\n {this.showTooltip && (\n <bh-tooltip\n text={this.tooltipText}\n visible={this.isHovered && !this.disabled}\n position=\"bottom\"\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-
|
|
2
|
-
import { d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
|
|
2
|
+
import { d as defineCustomElement$1 } from './p-D_matRYZ.js';
|
|
3
3
|
|
|
4
4
|
const bhDropdownMenuCss = ":host{display:block}.dropdown-menu{width:240px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n 0px 0px 1px 1px rgba(64, 73, 104, 0.1);overflow:hidden;flex-shrink:0;position:relative;box-sizing:border-box}.animate-dropdown-enter{animation:dropdownEnter 0.15s ease-out forwards}.animate-dropdown-exit{animation:dropdownExit 0.15s ease-in forwards}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.dropdown-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-neutral-200)}.dropdown-header-avatar{padding:var(--spacing-lg) var(--spacing-xl)}.avatar-group{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.avatar-text{display:flex;flex-direction:column;flex:1;min-width:0}.avatar-name{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);text-align:left;line-height:1.43;color:var(--color-neutral-800);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-email{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-title{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-800);margin:0}.menu-items{padding:var(--spacing-xs) 0}.dropdown-item{padding:var(--spacing-none) var(--spacing-sm);cursor:pointer}.dropdown-item-disabled{opacity:0.5;cursor:not-allowed}.item-content{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color 0.15s ease}.dropdown-item:hover:not(.dropdown-item-disabled) .item-content{background:var(--color-neutral-100)}.item-main{display:flex;align-items:center;gap:var(--spacing-md);flex:1;min-width:0}.item-icon{font-size:var(--icon-size-md, 20px);color:var(--color-neutral-600);flex-shrink:0;display:flex;align-items:center;justify-content:center}.item-text{font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.item-shortcut{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-xs-size);line-height:1.5;color:var(--color-neutral-500);flex-shrink:0}.menu-divider{height:1px;background:var(--color-neutral-200);margin:var(--spacing-xs) 0}.dropdown-menu-scrollable .menu-items{max-height:280px;overflow-y:auto;overflow-x:hidden}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar{width:6px}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track{background:var(--color-neutral-50);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.dropdown-menu-scrollable .menu-items{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) var(--color-neutral-50)}";
|
|
5
5
|
|
|
@@ -143,6 +143,6 @@ function defineCustomElement() {
|
|
|
143
143
|
defineCustomElement();
|
|
144
144
|
|
|
145
145
|
export { BhDropdownMenu as B, defineCustomElement as d };
|
|
146
|
-
//# sourceMappingURL=p-
|
|
146
|
+
//# sourceMappingURL=p-DXXn0saP.js.map
|
|
147
147
|
|
|
148
|
-
//# sourceMappingURL=p-
|
|
148
|
+
//# sourceMappingURL=p-DXXn0saP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-kd43PSY6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-dropdown-menu/bh-dropdown-menu.css?tag=bh-dropdown-menu&encapsulation=shadow","src/components/bh-dropdown-menu/bh-dropdown-menu.tsx"],"sourcesContent":["/* ==========================================================================\n BH-DROPDOWN-MENU COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: block;\n}\n\n/* Base dropdown menu styles */\n.dropdown-menu {\n width: 240px;\n background: var(--color-white);\n border-radius: var(--radius-md);\n box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n 0px 0px 1px 1px rgba(64, 73, 104, 0.1);\n overflow: hidden;\n flex-shrink: 0;\n position: relative;\n box-sizing: border-box;\n}\n\n/* Animation classes */\n.animate-dropdown-enter {\n animation: dropdownEnter 0.15s ease-out forwards;\n}\n\n.animate-dropdown-exit {\n animation: dropdownExit 0.15s ease-in forwards;\n}\n\n@keyframes dropdownEnter {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes dropdownExit {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(-8px);\n }\n}\n\n/* ==========================================================================\n HEADER SECTION\n ========================================================================== */\n\n.dropdown-header {\n padding: var(--spacing-lg) var(--spacing-xl);\n border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.dropdown-header-avatar {\n padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n.avatar-group {\n display: flex;\n align-items: center;\n gap: var(--spacing-lg);\n width: 100%;\n}\n\n.avatar-text {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n.avatar-name {\n font-family: var(--font-inter);\n font-weight: var(--weight-semibold);\n font-size: var(--text-sm-size);\n text-align: left;\n line-height: 1.43;\n color: var(--color-neutral-800);\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.avatar-email {\n font-family: var(--font-inter);\n font-weight: var(--weight-regular);\n font-size: var(--text-sm-size);\n line-height: 1.43;\n color: var(--color-neutral-600);\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.header-title {\n font-family: var(--font-inter);\n font-weight: var(--weight-semibold);\n font-size: var(--text-sm-size);\n line-height: 1.43;\n color: var(--color-neutral-800);\n margin: 0;\n}\n\n/* ==========================================================================\n MENU ITEMS SECTION\n ========================================================================== */\n\n.menu-items {\n padding: var(--spacing-xs) 0;\n}\n\n.dropdown-item {\n padding: var(--spacing-none) var(--spacing-sm);\n cursor: pointer;\n}\n\n.dropdown-item-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.item-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-lg);\n padding: var(--spacing-md) var(--spacing-md);\n border-radius: var(--radius-sm);\n transition: background-color 0.15s ease;\n}\n\n.dropdown-item:hover:not(.dropdown-item-disabled) .item-content {\n background: var(--color-neutral-100);\n}\n\n.item-main {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n flex: 1;\n min-width: 0;\n}\n\n.item-icon {\n font-size: var(--icon-size-md, 20px);\n color: var(--color-neutral-600);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.item-text {\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-700);\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.item-shortcut {\n font-family: var(--font-inter);\n font-weight: var(--weight-regular);\n font-size: var(--text-xs-size);\n line-height: 1.5;\n color: var(--color-neutral-500);\n flex-shrink: 0;\n}\n\n/* ==========================================================================\n DIVIDER\n ========================================================================== */\n\n.menu-divider {\n height: 1px;\n background: var(--color-neutral-200);\n margin: var(--spacing-xs) 0;\n}\n\n/* ==========================================================================\n SCROLLABLE VARIANT\n ========================================================================== */\n\n.dropdown-menu-scrollable .menu-items {\n max-height: 280px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Custom scrollbar styling */\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar {\n width: 6px;\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track {\n background: var(--color-neutral-50);\n border-radius: var(--radius-xs);\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n border-radius: var(--radius-xs);\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.dropdown-menu-scrollable .menu-items {\n scrollbar-width: thin;\n scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownMenuItem {\n id: string;\n label?: string;\n icon?: string;\n shortcut?: string;\n disabled?: boolean;\n divider?: boolean;\n}\n\nexport interface DropdownMenuHeader {\n title?: string;\n avatarGroup?: boolean;\n avatarSrc?: string;\n name?: string;\n email?: string;\n}\n\n@Component({\n tag: 'bh-dropdown-menu',\n styleUrl: 'bh-dropdown-menu.css',\n shadow: true,\n})\nexport class BhDropdownMenu {\n /**\n * Header configuration (JSON string or object)\n */\n @Prop() header?: DropdownMenuHeader | string;\n\n /**\n * Menu items array (JSON string or array)\n */\n @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n /**\n * Whether the menu is visible\n */\n @Prop() visible: boolean = true;\n\n /**\n * Whether to show icons in menu items\n */\n @Prop() showIcons: boolean = true;\n\n /**\n * Whether the menu should be scrollable\n */\n @Prop() scrollable: boolean = false;\n\n @State() isClosing: boolean = false;\n @State() shouldRender: boolean = true;\n\n /**\n * Event emitted when a menu item is clicked\n */\n @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n private get parsedHeader(): DropdownMenuHeader | undefined {\n if (!this.header) return undefined;\n if (typeof this.header === 'string') {\n try {\n return JSON.parse(this.header);\n } catch {\n return undefined;\n }\n }\n return this.header;\n }\n\n private get parsedMenuItems(): DropdownMenuItem[] {\n if (typeof this.menuItems === 'string') {\n try {\n return JSON.parse(this.menuItems);\n } catch {\n return [];\n }\n }\n return this.menuItems || [];\n }\n\n @Watch('visible')\n watchVisible(newValue: boolean) {\n if (newValue) {\n this.shouldRender = true;\n this.isClosing = false;\n } else {\n this.isClosing = true;\n setTimeout(() => {\n this.shouldRender = false;\n this.isClosing = false;\n }, 150);\n }\n }\n\n componentWillLoad() {\n this.shouldRender = this.visible;\n }\n\n private handleItemClick(item: DropdownMenuItem) {\n if (!item.disabled && !item.divider) {\n this.bhItemClick.emit(item);\n }\n }\n\n private getMenuItemClasses(item: DropdownMenuItem) {\n return {\n 'dropdown-item': true,\n 'dropdown-item-disabled': !!item.disabled,\n };\n }\n\n render() {\n if (!this.visible) {\n return null;\n }\n\n const header = this.parsedHeader;\n const items = this.parsedMenuItems;\n\n const dropdownClasses = {\n 'dropdown-menu': true,\n 'dropdown-menu-scrollable': this.scrollable,\n 'animate-dropdown-enter': true,\n 'animate-dropdown-exit': false,\n };\n\n const headerClasses = {\n 'dropdown-header': true,\n 'dropdown-header-avatar': !!header?.avatarGroup,\n };\n\n return (\n <div class={dropdownClasses}>\n {/* Header Section */}\n {header && (\n <div class={headerClasses}>\n {/* Avatar Group Header */}\n {header.avatarGroup && (\n <div class=\"avatar-group\">\n <bh-avatar\n size=\"md\"\n type=\"image\"\n status=\"online\"\n imageSrc={header.avatarSrc || ''}\n alt={header.name || 'Avatar'}\n />\n <div class=\"avatar-text\">\n <div class=\"avatar-name\">{header.name}</div>\n <div class=\"avatar-email\">{header.email}</div>\n </div>\n </div>\n )}\n {/* Simple Text Header */}\n {!header.avatarGroup && header.title && (\n <div class=\"header-title\">{header.title}</div>\n )}\n </div>\n )}\n\n {/* Menu Items Section */}\n <div class=\"menu-items\">\n {items.map((item) => (\n <div key={item.id}>\n {/* Divider */}\n {item.divider && <div class=\"menu-divider\" />}\n\n {/* Menu Item */}\n {!item.divider && (\n <div\n class={this.getMenuItemClasses(item)}\n onClick={() => this.handleItemClick(item)}\n >\n <div class=\"item-content\">\n <div class=\"item-main\">\n {item.icon && this.showIcons && (\n <span class=\"material-symbols-outlined item-icon\">\n {item.icon}\n </span>\n )}\n <span class=\"item-text\" title={item.label}>\n {item.label}\n </span>\n </div>\n {item.shortcut && (\n <span class=\"item-shortcut\">{item.shortcut}</span>\n )}\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-DXXn0saP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-dropdown-menu/bh-dropdown-menu.css?tag=bh-dropdown-menu&encapsulation=shadow","src/components/bh-dropdown-menu/bh-dropdown-menu.tsx"],"sourcesContent":["/* ==========================================================================\n BH-DROPDOWN-MENU COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: block;\n}\n\n/* Base dropdown menu styles */\n.dropdown-menu {\n width: 240px;\n background: var(--color-white);\n border-radius: var(--radius-md);\n box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n 0px 0px 1px 1px rgba(64, 73, 104, 0.1);\n overflow: hidden;\n flex-shrink: 0;\n position: relative;\n box-sizing: border-box;\n}\n\n/* Animation classes */\n.animate-dropdown-enter {\n animation: dropdownEnter 0.15s ease-out forwards;\n}\n\n.animate-dropdown-exit {\n animation: dropdownExit 0.15s ease-in forwards;\n}\n\n@keyframes dropdownEnter {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes dropdownExit {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(-8px);\n }\n}\n\n/* ==========================================================================\n HEADER SECTION\n ========================================================================== */\n\n.dropdown-header {\n padding: var(--spacing-lg) var(--spacing-xl);\n border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.dropdown-header-avatar {\n padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n.avatar-group {\n display: flex;\n align-items: center;\n gap: var(--spacing-lg);\n width: 100%;\n}\n\n.avatar-text {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n.avatar-name {\n font-family: var(--font-inter);\n font-weight: var(--weight-semibold);\n font-size: var(--text-sm-size);\n text-align: left;\n line-height: 1.43;\n color: var(--color-neutral-800);\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.avatar-email {\n font-family: var(--font-inter);\n font-weight: var(--weight-regular);\n font-size: var(--text-sm-size);\n line-height: 1.43;\n color: var(--color-neutral-600);\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.header-title {\n font-family: var(--font-inter);\n font-weight: var(--weight-semibold);\n font-size: var(--text-sm-size);\n line-height: 1.43;\n color: var(--color-neutral-800);\n margin: 0;\n}\n\n/* ==========================================================================\n MENU ITEMS SECTION\n ========================================================================== */\n\n.menu-items {\n padding: var(--spacing-xs) 0;\n}\n\n.dropdown-item {\n padding: var(--spacing-none) var(--spacing-sm);\n cursor: pointer;\n}\n\n.dropdown-item-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.item-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-lg);\n padding: var(--spacing-md) var(--spacing-md);\n border-radius: var(--radius-sm);\n transition: background-color 0.15s ease;\n}\n\n.dropdown-item:hover:not(.dropdown-item-disabled) .item-content {\n background: var(--color-neutral-100);\n}\n\n.item-main {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n flex: 1;\n min-width: 0;\n}\n\n.item-icon {\n font-size: var(--icon-size-md, 20px);\n color: var(--color-neutral-600);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.item-text {\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-700);\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.item-shortcut {\n font-family: var(--font-inter);\n font-weight: var(--weight-regular);\n font-size: var(--text-xs-size);\n line-height: 1.5;\n color: var(--color-neutral-500);\n flex-shrink: 0;\n}\n\n/* ==========================================================================\n DIVIDER\n ========================================================================== */\n\n.menu-divider {\n height: 1px;\n background: var(--color-neutral-200);\n margin: var(--spacing-xs) 0;\n}\n\n/* ==========================================================================\n SCROLLABLE VARIANT\n ========================================================================== */\n\n.dropdown-menu-scrollable .menu-items {\n max-height: 280px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Custom scrollbar styling */\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar {\n width: 6px;\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track {\n background: var(--color-neutral-50);\n border-radius: var(--radius-xs);\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n border-radius: var(--radius-xs);\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.dropdown-menu-scrollable .menu-items {\n scrollbar-width: thin;\n scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownMenuItem {\n id: string;\n label?: string;\n icon?: string;\n shortcut?: string;\n disabled?: boolean;\n divider?: boolean;\n}\n\nexport interface DropdownMenuHeader {\n title?: string;\n avatarGroup?: boolean;\n avatarSrc?: string;\n name?: string;\n email?: string;\n}\n\n@Component({\n tag: 'bh-dropdown-menu',\n styleUrl: 'bh-dropdown-menu.css',\n shadow: true,\n})\nexport class BhDropdownMenu {\n /**\n * Header configuration (JSON string or object)\n */\n @Prop() header?: DropdownMenuHeader | string;\n\n /**\n * Menu items array (JSON string or array)\n */\n @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n /**\n * Whether the menu is visible\n */\n @Prop() visible: boolean = true;\n\n /**\n * Whether to show icons in menu items\n */\n @Prop() showIcons: boolean = true;\n\n /**\n * Whether the menu should be scrollable\n */\n @Prop() scrollable: boolean = false;\n\n @State() isClosing: boolean = false;\n @State() shouldRender: boolean = true;\n\n /**\n * Event emitted when a menu item is clicked\n */\n @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n private get parsedHeader(): DropdownMenuHeader | undefined {\n if (!this.header) return undefined;\n if (typeof this.header === 'string') {\n try {\n return JSON.parse(this.header);\n } catch {\n return undefined;\n }\n }\n return this.header;\n }\n\n private get parsedMenuItems(): DropdownMenuItem[] {\n if (typeof this.menuItems === 'string') {\n try {\n return JSON.parse(this.menuItems);\n } catch {\n return [];\n }\n }\n return this.menuItems || [];\n }\n\n @Watch('visible')\n watchVisible(newValue: boolean) {\n if (newValue) {\n this.shouldRender = true;\n this.isClosing = false;\n } else {\n this.isClosing = true;\n setTimeout(() => {\n this.shouldRender = false;\n this.isClosing = false;\n }, 150);\n }\n }\n\n componentWillLoad() {\n this.shouldRender = this.visible;\n }\n\n private handleItemClick(item: DropdownMenuItem) {\n if (!item.disabled && !item.divider) {\n this.bhItemClick.emit(item);\n }\n }\n\n private getMenuItemClasses(item: DropdownMenuItem) {\n return {\n 'dropdown-item': true,\n 'dropdown-item-disabled': !!item.disabled,\n };\n }\n\n render() {\n if (!this.visible) {\n return null;\n }\n\n const header = this.parsedHeader;\n const items = this.parsedMenuItems;\n\n const dropdownClasses = {\n 'dropdown-menu': true,\n 'dropdown-menu-scrollable': this.scrollable,\n 'animate-dropdown-enter': true,\n 'animate-dropdown-exit': false,\n };\n\n const headerClasses = {\n 'dropdown-header': true,\n 'dropdown-header-avatar': !!header?.avatarGroup,\n };\n\n return (\n <div class={dropdownClasses}>\n {/* Header Section */}\n {header && (\n <div class={headerClasses}>\n {/* Avatar Group Header */}\n {header.avatarGroup && (\n <div class=\"avatar-group\">\n <bh-avatar\n size=\"md\"\n type=\"image\"\n status=\"online\"\n imageSrc={header.avatarSrc || ''}\n alt={header.name || 'Avatar'}\n />\n <div class=\"avatar-text\">\n <div class=\"avatar-name\">{header.name}</div>\n <div class=\"avatar-email\">{header.email}</div>\n </div>\n </div>\n )}\n {/* Simple Text Header */}\n {!header.avatarGroup && header.title && (\n <div class=\"header-title\">{header.title}</div>\n )}\n </div>\n )}\n\n {/* Menu Items Section */}\n <div class=\"menu-items\">\n {items.map((item) => (\n <div key={item.id}>\n {/* Divider */}\n {item.divider && <div class=\"menu-divider\" />}\n\n {/* Menu Item */}\n {!item.divider && (\n <div\n class={this.getMenuItemClasses(item)}\n onClick={() => this.handleItemClick(item)}\n >\n <div class=\"item-content\">\n <div class=\"item-main\">\n {item.icon && this.showIcons && (\n <span class=\"material-symbols-outlined item-icon\">\n {item.icon}\n </span>\n )}\n <span class=\"item-text\" title={item.label}>\n {item.label}\n </span>\n </div>\n {item.shortcut && (\n <span class=\"item-shortcut\">{item.shortcut}</span>\n )}\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
|
|
2
2
|
|
|
3
3
|
const bhAvatarCss = ":host{display:inline-block}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-neutral-100);flex-shrink:0}.avatar-xxs{width:16px;height:16px}.avatar-xs{width:24px;height:24px}.avatar-sm{width:32px;height:32px}.avatar-md{width:40px;height:40px}.avatar-lg{width:48px;height:48px}.avatar-xl{width:56px;height:56px}.avatar-2xl{width:64px;height:64px}.avatar-border{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;pointer-events:none;z-index:1}.avatar-xs .avatar-border,.avatar-sm .avatar-border{border:0.5px solid var(--color-neutral-400)}.avatar-md .avatar-border,.avatar-lg .avatar-border,.avatar-xl .avatar-border,.avatar-2xl .avatar-border{border:0.75px solid var(--color-neutral-400)}.avatar-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;z-index:0}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:50%;aspect-ratio:1 / 1}.avatar-placeholder-icon{color:var(--color-neutral-500);line-height:1;display:flex;align-items:center;justify-content:center}.avatar-text{color:var(--color-neutral-500);font-family:var(--font-inter);font-weight:var(--weight-semibold);text-align:center;line-height:1}.text-xxs{font-size:10px;line-height:1.6em}.text-xs{font-size:12px;line-height:1.5em}.text-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.text-md{font-size:var(--text-md-size);line-height:var(--text-md-line)}.text-lg{font-size:18px;line-height:1.56em}.text-xl{font-size:20px;line-height:1.5em}.text-2xl{font-size:24px;line-height:1.33em}.icon-sm{font-size:16px}.icon-md{font-size:20px}.icon-lg{font-size:24px}.icon-xl{font-size:28px}.icon-2xl{font-size:32px}.icon-3xl{font-size:36px}.icon-4xl{font-size:40px}.avatar-status{position:absolute;border-radius:50%;background-color:var(--color-success-500);border:1.5px solid var(--color-white);z-index:2}.avatar-status-online{background-color:var(--color-success-500)}.avatar-status-offline{background-color:var(--color-neutral-400)}.avatar-status-xxs{width:4px;height:4px;bottom:0;right:0}.avatar-status-xs{width:6px;height:6px;bottom:0;right:0}.avatar-status-sm{width:8px;height:8px;bottom:0;right:0}.avatar-status-md{width:10px;height:10px;bottom:0;right:0}.avatar-status-lg{width:12px;height:12px;bottom:0;right:0}.avatar-status-xl{width:14px;height:14px;bottom:0;right:0}.avatar-status-2xl{width:16px;height:16px;bottom:0;right:0}";
|
|
4
4
|
|
|
@@ -113,6 +113,6 @@ function defineCustomElement() {
|
|
|
113
113
|
defineCustomElement();
|
|
114
114
|
|
|
115
115
|
export { BhAvatar as B, defineCustomElement as d };
|
|
116
|
-
//# sourceMappingURL=p-
|
|
116
|
+
//# sourceMappingURL=p-D_matRYZ.js.map
|
|
117
117
|
|
|
118
|
-
//# sourceMappingURL=p-
|
|
118
|
+
//# sourceMappingURL=p-D_matRYZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-CMomxDPL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-avatar/bh-avatar.css?tag=bh-avatar&encapsulation=shadow","src/components/bh-avatar/bh-avatar.tsx"],"sourcesContent":["/* ==========================================================================\n BH-AVATAR COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n/* Base Avatar */\n.avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--color-neutral-100);\n flex-shrink: 0;\n}\n\n/* Avatar Sizes */\n.avatar-xxs {\n width: 16px;\n height: 16px;\n}\n\n.avatar-xs {\n width: 24px;\n height: 24px;\n}\n\n.avatar-sm {\n width: 32px;\n height: 32px;\n}\n\n.avatar-md {\n width: 40px;\n height: 40px;\n}\n\n.avatar-lg {\n width: 48px;\n height: 48px;\n}\n\n.avatar-xl {\n width: 56px;\n height: 56px;\n}\n\n.avatar-2xl {\n width: 64px;\n height: 64px;\n}\n\n/* ==========================================================================\n AVATAR CONTENT ELEMENTS\n ========================================================================== */\n\n/* Avatar Border */\n.avatar-border {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n pointer-events: none;\n z-index: 1;\n}\n\n.avatar-xs .avatar-border,\n.avatar-sm .avatar-border {\n border: 0.5px solid var(--color-neutral-400);\n}\n\n.avatar-md .avatar-border,\n.avatar-lg .avatar-border,\n.avatar-xl .avatar-border,\n.avatar-2xl .avatar-border {\n border: 0.75px solid var(--color-neutral-400);\n}\n\n/* Avatar Content Container */\n.avatar-content {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n overflow: hidden;\n z-index: 0;\n}\n\n/* Avatar Image */\n.avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n}\n\n/* Avatar Placeholder Icon */\n.avatar-placeholder-icon {\n color: var(--color-neutral-500);\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Avatar Text (for text-type avatars) */\n.avatar-text {\n color: var(--color-neutral-500);\n font-family: var(--font-inter);\n font-weight: var(--weight-semibold);\n text-align: center;\n line-height: 1;\n}\n\n/* Text Size Classes */\n.text-xxs {\n font-size: 10px;\n line-height: 1.6em;\n}\n\n.text-xs {\n font-size: 12px;\n line-height: 1.5em;\n}\n\n.text-sm {\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n}\n\n.text-md {\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n.text-lg {\n font-size: 18px;\n line-height: 1.56em;\n}\n\n.text-xl {\n font-size: 20px;\n line-height: 1.5em;\n}\n\n.text-2xl {\n font-size: 24px;\n line-height: 1.33em;\n}\n\n/* Icon Size Classes */\n.icon-sm {\n font-size: 16px;\n}\n\n.icon-md {\n font-size: 20px;\n}\n\n.icon-lg {\n font-size: 24px;\n}\n\n.icon-xl {\n font-size: 28px;\n}\n\n.icon-2xl {\n font-size: 32px;\n}\n\n.icon-3xl {\n font-size: 36px;\n}\n\n.icon-4xl {\n font-size: 40px;\n}\n\n/* ==========================================================================\n STATUS INDICATOR\n ========================================================================== */\n\n.avatar-status {\n position: absolute;\n border-radius: 50%;\n background-color: var(--color-success-500);\n border: 1.5px solid var(--color-white);\n z-index: 2;\n}\n\n.avatar-status-online {\n background-color: var(--color-success-500);\n}\n\n.avatar-status-offline {\n background-color: var(--color-neutral-400);\n}\n\n/* Status Indicator Sizes */\n.avatar-status-xxs {\n width: 4px;\n height: 4px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-xs {\n width: 6px;\n height: 6px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-sm {\n width: 8px;\n height: 8px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-md {\n width: 10px;\n height: 10px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-lg {\n width: 12px;\n height: 12px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-xl {\n width: 14px;\n height: 14px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-2xl {\n width: 16px;\n height: 16px;\n bottom: 0;\n right: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type AvatarType = 'image' | 'placeholder' | 'text';\nexport type AvatarStatus = 'online' | 'offline' | 'none';\n\n@Component({\n tag: 'bh-avatar',\n styleUrl: 'bh-avatar.css',\n shadow: true,\n})\nexport class BhAvatar {\n /**\n * The size of the avatar\n */\n @Prop() size: AvatarSize = 'md';\n\n /**\n * The type of avatar content\n */\n @Prop() type: AvatarType = 'image';\n\n /**\n * The status indicator (online, offline, or none)\n */\n @Prop() status: AvatarStatus = 'none';\n\n /**\n * Text to display for text-type avatars (initials)\n */\n @Prop() text: string = 'RD';\n\n /**\n * Image source URL for image-type avatars\n */\n @Prop() imageSrc?: string;\n\n /**\n * Alt text for the avatar image\n */\n @Prop() alt: string = 'Avatar';\n\n /**\n * Emitted when the avatar is hovered\n */\n @Event() bhMouseEnter!: EventEmitter<void>;\n\n /**\n * Emitted when the mouse leaves the avatar\n */\n @Event() bhMouseLeave!: EventEmitter<void>;\n\n private handleMouseEnter = (): void => {\n this.bhMouseEnter.emit();\n };\n\n private handleMouseLeave = (): void => {\n this.bhMouseLeave.emit();\n };\n\n private getTextSizeClass(): string {\n const sizeMap: Record<AvatarSize, string> = {\n 'xxs': 'text-xxs',\n 'xs': 'text-xs',\n 'sm': 'text-sm',\n 'md': 'text-md',\n 'lg': 'text-lg',\n 'xl': 'text-xl',\n '2xl': 'text-2xl',\n };\n return sizeMap[this.size] || 'text-md';\n }\n\n private getIconSizeClass(): string {\n const sizeMap: Record<AvatarSize, string> = {\n 'xxs': 'icon-sm',\n 'xs': 'icon-md',\n 'sm': 'icon-lg',\n 'md': 'icon-xl',\n 'lg': 'icon-2xl',\n 'xl': 'icon-3xl',\n '2xl': 'icon-4xl',\n };\n return sizeMap[this.size] || 'icon-xl';\n }\n\n render() {\n const avatarClasses = {\n 'avatar': true,\n [`avatar-${this.size}`]: true,\n 'avatar-with-status': this.status !== 'none',\n };\n\n const statusClasses = {\n 'avatar-status': true,\n [`avatar-status-${this.size}`]: true,\n 'avatar-status-online': this.status === 'online',\n 'avatar-status-offline': this.status === 'offline',\n };\n\n return (\n <div\n class={avatarClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n part=\"avatar\"\n >\n <div class=\"avatar-border\"></div>\n\n <div class=\"avatar-content\">\n {this.type === 'image' && (\n <img\n src={this.imageSrc}\n alt={this.alt}\n class=\"avatar-image\"\n />\n )}\n\n {this.type === 'placeholder' && (\n <span class={`material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`}>\n person\n </span>\n )}\n\n {this.type === 'text' && (\n <span class={`avatar-text ${this.getTextSizeClass()}`}>\n {this.text}\n </span>\n )}\n </div>\n\n {this.status !== 'none' && (\n <div class={statusClasses}></div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-D_matRYZ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-avatar/bh-avatar.css?tag=bh-avatar&encapsulation=shadow","src/components/bh-avatar/bh-avatar.tsx"],"sourcesContent":["/* ==========================================================================\n BH-AVATAR COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n/* Base Avatar */\n.avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--color-neutral-100);\n flex-shrink: 0;\n}\n\n/* Avatar Sizes */\n.avatar-xxs {\n width: 16px;\n height: 16px;\n}\n\n.avatar-xs {\n width: 24px;\n height: 24px;\n}\n\n.avatar-sm {\n width: 32px;\n height: 32px;\n}\n\n.avatar-md {\n width: 40px;\n height: 40px;\n}\n\n.avatar-lg {\n width: 48px;\n height: 48px;\n}\n\n.avatar-xl {\n width: 56px;\n height: 56px;\n}\n\n.avatar-2xl {\n width: 64px;\n height: 64px;\n}\n\n/* ==========================================================================\n AVATAR CONTENT ELEMENTS\n ========================================================================== */\n\n/* Avatar Border */\n.avatar-border {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n pointer-events: none;\n z-index: 1;\n}\n\n.avatar-xs .avatar-border,\n.avatar-sm .avatar-border {\n border: 0.5px solid var(--color-neutral-400);\n}\n\n.avatar-md .avatar-border,\n.avatar-lg .avatar-border,\n.avatar-xl .avatar-border,\n.avatar-2xl .avatar-border {\n border: 0.75px solid var(--color-neutral-400);\n}\n\n/* Avatar Content Container */\n.avatar-content {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n overflow: hidden;\n z-index: 0;\n}\n\n/* Avatar Image */\n.avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n}\n\n/* Avatar Placeholder Icon */\n.avatar-placeholder-icon {\n color: var(--color-neutral-500);\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Avatar Text (for text-type avatars) */\n.avatar-text {\n color: var(--color-neutral-500);\n font-family: var(--font-inter);\n font-weight: var(--weight-semibold);\n text-align: center;\n line-height: 1;\n}\n\n/* Text Size Classes */\n.text-xxs {\n font-size: 10px;\n line-height: 1.6em;\n}\n\n.text-xs {\n font-size: 12px;\n line-height: 1.5em;\n}\n\n.text-sm {\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n}\n\n.text-md {\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n.text-lg {\n font-size: 18px;\n line-height: 1.56em;\n}\n\n.text-xl {\n font-size: 20px;\n line-height: 1.5em;\n}\n\n.text-2xl {\n font-size: 24px;\n line-height: 1.33em;\n}\n\n/* Icon Size Classes */\n.icon-sm {\n font-size: 16px;\n}\n\n.icon-md {\n font-size: 20px;\n}\n\n.icon-lg {\n font-size: 24px;\n}\n\n.icon-xl {\n font-size: 28px;\n}\n\n.icon-2xl {\n font-size: 32px;\n}\n\n.icon-3xl {\n font-size: 36px;\n}\n\n.icon-4xl {\n font-size: 40px;\n}\n\n/* ==========================================================================\n STATUS INDICATOR\n ========================================================================== */\n\n.avatar-status {\n position: absolute;\n border-radius: 50%;\n background-color: var(--color-success-500);\n border: 1.5px solid var(--color-white);\n z-index: 2;\n}\n\n.avatar-status-online {\n background-color: var(--color-success-500);\n}\n\n.avatar-status-offline {\n background-color: var(--color-neutral-400);\n}\n\n/* Status Indicator Sizes */\n.avatar-status-xxs {\n width: 4px;\n height: 4px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-xs {\n width: 6px;\n height: 6px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-sm {\n width: 8px;\n height: 8px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-md {\n width: 10px;\n height: 10px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-lg {\n width: 12px;\n height: 12px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-xl {\n width: 14px;\n height: 14px;\n bottom: 0;\n right: 0;\n}\n\n.avatar-status-2xl {\n width: 16px;\n height: 16px;\n bottom: 0;\n right: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type AvatarType = 'image' | 'placeholder' | 'text';\nexport type AvatarStatus = 'online' | 'offline' | 'none';\n\n@Component({\n tag: 'bh-avatar',\n styleUrl: 'bh-avatar.css',\n shadow: true,\n})\nexport class BhAvatar {\n /**\n * The size of the avatar\n */\n @Prop() size: AvatarSize = 'md';\n\n /**\n * The type of avatar content\n */\n @Prop() type: AvatarType = 'image';\n\n /**\n * The status indicator (online, offline, or none)\n */\n @Prop() status: AvatarStatus = 'none';\n\n /**\n * Text to display for text-type avatars (initials)\n */\n @Prop() text: string = 'RD';\n\n /**\n * Image source URL for image-type avatars\n */\n @Prop() imageSrc?: string;\n\n /**\n * Alt text for the avatar image\n */\n @Prop() alt: string = 'Avatar';\n\n /**\n * Emitted when the avatar is hovered\n */\n @Event() bhMouseEnter!: EventEmitter<void>;\n\n /**\n * Emitted when the mouse leaves the avatar\n */\n @Event() bhMouseLeave!: EventEmitter<void>;\n\n private handleMouseEnter = (): void => {\n this.bhMouseEnter.emit();\n };\n\n private handleMouseLeave = (): void => {\n this.bhMouseLeave.emit();\n };\n\n private getTextSizeClass(): string {\n const sizeMap: Record<AvatarSize, string> = {\n 'xxs': 'text-xxs',\n 'xs': 'text-xs',\n 'sm': 'text-sm',\n 'md': 'text-md',\n 'lg': 'text-lg',\n 'xl': 'text-xl',\n '2xl': 'text-2xl',\n };\n return sizeMap[this.size] || 'text-md';\n }\n\n private getIconSizeClass(): string {\n const sizeMap: Record<AvatarSize, string> = {\n 'xxs': 'icon-sm',\n 'xs': 'icon-md',\n 'sm': 'icon-lg',\n 'md': 'icon-xl',\n 'lg': 'icon-2xl',\n 'xl': 'icon-3xl',\n '2xl': 'icon-4xl',\n };\n return sizeMap[this.size] || 'icon-xl';\n }\n\n render() {\n const avatarClasses = {\n 'avatar': true,\n [`avatar-${this.size}`]: true,\n 'avatar-with-status': this.status !== 'none',\n };\n\n const statusClasses = {\n 'avatar-status': true,\n [`avatar-status-${this.size}`]: true,\n 'avatar-status-online': this.status === 'online',\n 'avatar-status-offline': this.status === 'offline',\n };\n\n return (\n <div\n class={avatarClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n part=\"avatar\"\n >\n <div class=\"avatar-border\"></div>\n\n <div class=\"avatar-content\">\n {this.type === 'image' && (\n <img\n src={this.imageSrc}\n alt={this.alt}\n class=\"avatar-image\"\n />\n )}\n\n {this.type === 'placeholder' && (\n <span class={`material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`}>\n person\n </span>\n )}\n\n {this.type === 'text' && (\n <span class={`avatar-text ${this.getTextSizeClass()}`}>\n {this.text}\n </span>\n )}\n </div>\n\n {this.status !== 'none' && (\n <div class={statusClasses}></div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
2
|
-
import { d as defineCustomElement$5 } from './p-
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
4
|
-
import { d as defineCustomElement$3 } from './p-
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
6
|
-
import { d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
|
|
2
|
+
import { d as defineCustomElement$5 } from './p-BsgViq32.js';
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-CHuAmqhM.js';
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-CzM_4nyA.js';
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-BAKX4y5m.js';
|
|
6
|
+
import { d as defineCustomElement$1 } from './p-UG_h-ztP.js';
|
|
7
7
|
|
|
8
8
|
const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n 0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";
|
|
9
9
|
|
|
@@ -199,6 +199,6 @@ function defineCustomElement() {
|
|
|
199
199
|
defineCustomElement();
|
|
200
200
|
|
|
201
201
|
export { BhCheckboxGroupItem as B, defineCustomElement as d };
|
|
202
|
-
//# sourceMappingURL=p-
|
|
202
|
+
//# sourceMappingURL=p-DcXhS_xz.js.map
|
|
203
203
|
|
|
204
|
-
//# sourceMappingURL=p-
|
|
204
|
+
//# sourceMappingURL=p-DcXhS_xz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Ccq-Rk5W.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,4mEAA4mE;;MCU9nE,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAC9B;;AAEG;IACK,IAAI,GAA0B,UAAU;AAEhD;;AAEG;IACK,IAAI,GAA0B,IAAI;AAE1C;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;AAEG;IACsB,OAAO,GAAY,KAAK;AAEjD;;AAEG;IACsB,QAAQ,GAAY,KAAK;AAElD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,IAAI,GAAW,EAAE;AAGzB;;AAEG;IACK,SAAS,GAAW,EAAE;AAE9B;;AAEG;IACK,QAAQ,GAAW,EAAE;AAE7B;;AAEG;IACK,WAAW,GAAW,EAAE;AAEhC;;AAEG;IACK,IAAI,GAAW,EAAE;IAEhB,SAAS,GAAY,KAAK;IAC1B,SAAS,GAAY,KAAK;AAEnC;;AAEG;AACM,IAAA,YAAY;IAEb,WAAW,GAAG,MAAK;QACzB,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;AACxD,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;;aAEzD;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;AAExE,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,WAAW,EAAE;;AAEtB,KAAC;IAEO,gBAAgB,GAAG,MAAK;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AAC3C,KAAC;IAEO,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,KAAC;IAEO,WAAW,GAAG,MAAK;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AAC3C,KAAC;IAEO,UAAU,GAAG,MAAK;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,KAAC;AAEO,IAAA,oBAAoB,GAAG,CAAC,KAA2B,KAAI;QAC7D,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACtE,KAAC;AAEO,IAAA,iBAAiB,GAAG,CAAC,KAA0B,KAAI;QACzD,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC9D,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO;AAEtG,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,uBAAuB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1C,YAAA,CAAC,uBAAuB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1C,YAAA,4BAA4B,EAAE,QAAQ;YACtC,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;SAC9C;QAED,MAAM,WAAW,GAAG,MAAK;AACvB,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,QACE,CACE,CAAA,iBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAAA,CAClC;;;AAIN,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO;AAC5E,YAAA,QACE,CACE,CAAA,aAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,oBAAoB,EACrC,CAAA;AAEN,SAAC;QAED,MAAM,UAAU,GAAG,MAAK;YACtB,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC5C,QACE,wBACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,UAAU,EACpB,CAAA;;AAGN,YAAA,OAAO,IAAI;AACb,SAAC;AAED,QAAA,MAAM,aAAa,GAAG,OACpB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,SAAS,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,EAClE,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CAChE,EACL,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CACnE,CACP;QAED,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,OAAO,GAAG,UAAU,EACpC,cAAA,EAAA,MAAM,CAAC,QAAQ,CAAC,mBACf,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE3C,IAAI,CAAC,IAAI,KAAK,aAAa;;AAE1B,QAAA,CAAC,UAAU,EAAE,EAAE,aAAa,EAAE,EAAE,WAAW,EAAE,CAAC;;QAG9C,CAAC,WAAW,EAAE,EAAE,aAAa,EAAE,CAAC,CACjC,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox-group-item/bh-checkbox-group-item.css?tag=bh-checkbox-group-item&encapsulation=shadow","src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.checkbox-group-item {\n display: flex;\n align-items: flex-start;\n background: var(--color-white);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-xl);\n cursor: pointer;\n transition: all 0.2s ease;\n box-sizing: border-box;\n font-family: var(--font-inter);\n outline: none;\n}\n\n/* Size variants */\n.checkbox-group-item-sm {\n padding: var(--spacing-xl);\n gap: var(--spacing-md);\n}\n\n.checkbox-group-item-md {\n padding: var(--spacing-xl) var(--spacing-2xl);\n gap: var(--spacing-lg);\n}\n\n/* Icon simple type has more gap */\n.checkbox-group-item-icon-simple {\n gap: var(--spacing-lg);\n}\n\n/* Active/Selected state */\n.checkbox-group-item-active {\n border-color: var(--color-brand-600);\n box-shadow: inset 0 0 0 1px var(--color-brand-600);\n background: var(--color-brand-50);\n}\n\n/* Hover state */\n.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n}\n\n/* Focus state */\n.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n box-shadow: 0px 0px 0px 4px var(--color-brand-100);\n}\n\n.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled) {\n box-shadow: inset 0 0 0 1px var(--color-brand-600),\n 0px 0px 0px 4px var(--color-brand-100);\n}\n\n/* Disabled state */\n.checkbox-group-item-disabled {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-200);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Content container */\n.item-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: var(--spacing-xs);\n min-width: 0;\n}\n\n/* Title row with title and subtitle */\n.item-text-row {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n flex-wrap: wrap;\n}\n\n/* Title */\n.item-title {\n font-size: var(--text-sm-size);\n font-weight: var(--weight-semibold);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-900);\n}\n\n/* Subtitle (inline with title) */\n.item-subtitle {\n font-size: var(--text-sm-size);\n font-weight: var(--weight-regular);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-600);\n}\n\n/* Description */\n.item-description {\n font-size: var(--text-sm-size);\n font-weight: var(--weight-regular);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-600);\n margin: 0;\n}\n\n/* Disabled text styles */\n.checkbox-group-item-disabled .item-title,\n.checkbox-group-item-disabled .item-subtitle,\n.checkbox-group-item-disabled .item-description {\n color: var(--color-neutral-400);\n}\n\n/* Prevent inner checkbox/radio from capturing clicks - let the card handle it */\n.checkbox-group-item bh-checkbox,\n.checkbox-group-item bh-radio-button {\n pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox-group-item',\n styleUrl: 'bh-checkbox-group-item.css',\n shadow: true,\n})\nexport class BhCheckboxGroupItem {\n /**\n * The type of input control\n */\n @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n /**\n * The size variant\n */\n @Prop() size: CheckboxGroupItemSize = 'sm';\n\n /**\n * Unique value identifier for this item\n */\n @Prop() value: string = '';\n\n /**\n * Whether the item is checked (for checkbox type)\n */\n @Prop({ mutable: true }) checked: boolean = false;\n\n /**\n * Whether the item is selected (for radio type)\n */\n @Prop({ mutable: true }) selected: boolean = false;\n\n /**\n * Whether the item is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Material Symbol icon name (for icon-simple type)\n */\n @Prop() icon: string = '';\n\n\n /**\n * Title text\n */\n @Prop() itemTitle: string = '';\n\n /**\n * Subtitle text (inline with title)\n */\n @Prop() subtitle: string = '';\n\n /**\n * Description text\n */\n @Prop() description: string = '';\n\n /**\n * Radio group name (for radio type)\n */\n @Prop() name: string = '';\n\n @State() isHovered: boolean = false;\n @State() isFocused: boolean = false;\n\n /**\n * Emitted when the item state changes\n */\n @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n private handleClick = () => {\n if (this.disabled) return;\n\n if (this.type === 'radio' || this.type === 'icon-simple') {\n if (!this.selected) {\n this.selected = true;\n this.bhItemChange.emit({ value: this.value, checked: true });\n }\n } else {\n this.checked = !this.checked;\n this.bhItemChange.emit({ value: this.value, checked: this.checked });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.handleClick();\n }\n };\n\n private handleMouseEnter = () => {\n if (!this.disabled) this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n if (!this.disabled) this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n event.stopPropagation();\n this.checked = event.detail;\n this.bhItemChange.emit({ value: this.value, checked: this.checked });\n };\n\n private handleRadioChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.selected = true;\n this.bhItemChange.emit({ value: this.value, checked: true });\n };\n\n render() {\n const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n const containerClasses = {\n 'checkbox-group-item': true,\n [`checkbox-group-item-${this.size}`]: true,\n [`checkbox-group-item-${this.type}`]: true,\n 'checkbox-group-item-active': isActive,\n 'checkbox-group-item-disabled': this.disabled,\n 'checkbox-group-item-hovered': this.isHovered,\n 'checkbox-group-item-focused': this.isFocused,\n };\n\n const renderInput = () => {\n if (this.type === 'radio') {\n return (\n <bh-radio-button\n size={this.size}\n selected={this.selected}\n disabled={this.disabled}\n value={this.value}\n name={this.name}\n onBhChange={this.handleRadioChange}\n />\n );\n }\n // For icon-simple, use `selected` state; for checkbox, use `checked` state\n const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n return (\n <bh-checkbox\n size={this.size}\n checked={isChecked}\n disabled={this.disabled}\n onBhChange={this.handleCheckboxChange}\n />\n );\n };\n\n const renderIcon = () => {\n if (this.type === 'icon-simple' && this.icon) {\n return (\n <bh-featured-icon\n size=\"sm\"\n icon={this.icon}\n color=\"gray\"\n iconStyle=\"outlined\"\n />\n );\n }\n return null;\n };\n\n const renderContent = () => (\n <div class=\"item-content\">\n <div class=\"item-text-row\">\n {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n </div>\n {this.description && <p class=\"item-description\">{this.description}</p>}\n </div>\n );\n\n return (\n <Host>\n <div\n class={containerClasses}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n tabIndex={this.disabled ? -1 : 0}\n role={this.type === 'radio' ? 'radio' : 'checkbox'}\n aria-checked={String(isActive)}\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.type === 'icon-simple' ? (\n // Icon Simple: icon + content | input\n [renderIcon(), renderContent(), renderInput()]\n ) : (\n // Checkbox/Radio: input | content\n [renderInput(), renderContent()]\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-DcXhS_xz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox-group-item/bh-checkbox-group-item.css?tag=bh-checkbox-group-item&encapsulation=shadow","src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.checkbox-group-item {\n display: flex;\n align-items: flex-start;\n background: var(--color-white);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-xl);\n cursor: pointer;\n transition: all 0.2s ease;\n box-sizing: border-box;\n font-family: var(--font-inter);\n outline: none;\n}\n\n/* Size variants */\n.checkbox-group-item-sm {\n padding: var(--spacing-xl);\n gap: var(--spacing-md);\n}\n\n.checkbox-group-item-md {\n padding: var(--spacing-xl) var(--spacing-2xl);\n gap: var(--spacing-lg);\n}\n\n/* Icon simple type has more gap */\n.checkbox-group-item-icon-simple {\n gap: var(--spacing-lg);\n}\n\n/* Active/Selected state */\n.checkbox-group-item-active {\n border-color: var(--color-brand-600);\n box-shadow: inset 0 0 0 1px var(--color-brand-600);\n background: var(--color-brand-50);\n}\n\n/* Hover state */\n.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n}\n\n/* Focus state */\n.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n box-shadow: 0px 0px 0px 4px var(--color-brand-100);\n}\n\n.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled) {\n box-shadow: inset 0 0 0 1px var(--color-brand-600),\n 0px 0px 0px 4px var(--color-brand-100);\n}\n\n/* Disabled state */\n.checkbox-group-item-disabled {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-200);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Content container */\n.item-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: var(--spacing-xs);\n min-width: 0;\n}\n\n/* Title row with title and subtitle */\n.item-text-row {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n flex-wrap: wrap;\n}\n\n/* Title */\n.item-title {\n font-size: var(--text-sm-size);\n font-weight: var(--weight-semibold);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-900);\n}\n\n/* Subtitle (inline with title) */\n.item-subtitle {\n font-size: var(--text-sm-size);\n font-weight: var(--weight-regular);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-600);\n}\n\n/* Description */\n.item-description {\n font-size: var(--text-sm-size);\n font-weight: var(--weight-regular);\n line-height: var(--text-sm-line);\n color: var(--color-neutral-600);\n margin: 0;\n}\n\n/* Disabled text styles */\n.checkbox-group-item-disabled .item-title,\n.checkbox-group-item-disabled .item-subtitle,\n.checkbox-group-item-disabled .item-description {\n color: var(--color-neutral-400);\n}\n\n/* Prevent inner checkbox/radio from capturing clicks - let the card handle it */\n.checkbox-group-item bh-checkbox,\n.checkbox-group-item bh-radio-button {\n pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox-group-item',\n styleUrl: 'bh-checkbox-group-item.css',\n shadow: true,\n})\nexport class BhCheckboxGroupItem {\n /**\n * The type of input control\n */\n @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n /**\n * The size variant\n */\n @Prop() size: CheckboxGroupItemSize = 'sm';\n\n /**\n * Unique value identifier for this item\n */\n @Prop() value: string = '';\n\n /**\n * Whether the item is checked (for checkbox type)\n */\n @Prop({ mutable: true }) checked: boolean = false;\n\n /**\n * Whether the item is selected (for radio type)\n */\n @Prop({ mutable: true }) selected: boolean = false;\n\n /**\n * Whether the item is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Material Symbol icon name (for icon-simple type)\n */\n @Prop() icon: string = '';\n\n\n /**\n * Title text\n */\n @Prop() itemTitle: string = '';\n\n /**\n * Subtitle text (inline with title)\n */\n @Prop() subtitle: string = '';\n\n /**\n * Description text\n */\n @Prop() description: string = '';\n\n /**\n * Radio group name (for radio type)\n */\n @Prop() name: string = '';\n\n @State() isHovered: boolean = false;\n @State() isFocused: boolean = false;\n\n /**\n * Emitted when the item state changes\n */\n @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n private handleClick = () => {\n if (this.disabled) return;\n\n if (this.type === 'radio' || this.type === 'icon-simple') {\n if (!this.selected) {\n this.selected = true;\n this.bhItemChange.emit({ value: this.value, checked: true });\n }\n } else {\n this.checked = !this.checked;\n this.bhItemChange.emit({ value: this.value, checked: this.checked });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.handleClick();\n }\n };\n\n private handleMouseEnter = () => {\n if (!this.disabled) this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n if (!this.disabled) this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n event.stopPropagation();\n this.checked = event.detail;\n this.bhItemChange.emit({ value: this.value, checked: this.checked });\n };\n\n private handleRadioChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.selected = true;\n this.bhItemChange.emit({ value: this.value, checked: true });\n };\n\n render() {\n const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n const containerClasses = {\n 'checkbox-group-item': true,\n [`checkbox-group-item-${this.size}`]: true,\n [`checkbox-group-item-${this.type}`]: true,\n 'checkbox-group-item-active': isActive,\n 'checkbox-group-item-disabled': this.disabled,\n 'checkbox-group-item-hovered': this.isHovered,\n 'checkbox-group-item-focused': this.isFocused,\n };\n\n const renderInput = () => {\n if (this.type === 'radio') {\n return (\n <bh-radio-button\n size={this.size}\n selected={this.selected}\n disabled={this.disabled}\n value={this.value}\n name={this.name}\n onBhChange={this.handleRadioChange}\n />\n );\n }\n // For icon-simple, use `selected` state; for checkbox, use `checked` state\n const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n return (\n <bh-checkbox\n size={this.size}\n checked={isChecked}\n disabled={this.disabled}\n onBhChange={this.handleCheckboxChange}\n />\n );\n };\n\n const renderIcon = () => {\n if (this.type === 'icon-simple' && this.icon) {\n return (\n <bh-featured-icon\n size=\"sm\"\n icon={this.icon}\n color=\"gray\"\n iconStyle=\"outlined\"\n />\n );\n }\n return null;\n };\n\n const renderContent = () => (\n <div class=\"item-content\">\n <div class=\"item-text-row\">\n {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n </div>\n {this.description && <p class=\"item-description\">{this.description}</p>}\n </div>\n );\n\n return (\n <Host>\n <div\n class={containerClasses}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n tabIndex={this.disabled ? -1 : 0}\n role={this.type === 'radio' ? 'radio' : 'checkbox'}\n aria-checked={String(isActive)}\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.type === 'icon-simple' ? (\n // Icon Simple: icon + content | input\n [renderIcon(), renderContent(), renderInput()]\n ) : (\n // Checkbox/Radio: input | content\n [renderInput(), renderContent()]\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './p-DLHC5fHk.js';
|
|
2
2
|
|
|
3
3
|
const bhSkeletonLoaderCss = ":host{display:inline-block}.skeleton{display:inline-block;background:linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.06) 25%,\n rgba(0, 0, 0, 0.03) 50%,\n rgba(0, 0, 0, 0.06) 75%\n );background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm);line-height:1}.skeleton-circle{border-radius:50%}.skeleton::before{content:'\\00a0'}@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
|
|
4
4
|
|
|
@@ -51,6 +51,6 @@ function defineCustomElement() {
|
|
|
51
51
|
defineCustomElement();
|
|
52
52
|
|
|
53
53
|
export { BhSkeletonLoader as B, defineCustomElement as d };
|
|
54
|
-
//# sourceMappingURL=p-
|
|
54
|
+
//# sourceMappingURL=p-DgAfq9r9.js.map
|
|
55
55
|
|
|
56
|
-
//# sourceMappingURL=p-
|
|
56
|
+
//# sourceMappingURL=p-DgAfq9r9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DgAfq9r9.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8lBAA8lB;;MCO7mB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC3B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,MAAM,GAAW,KAAK;AAE9B;;AAEG;IACK,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACR,WAAA,EAAA,MAAM,EAChB,IAAI,EAAC,UAAU,EAAA,EAEf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAkB,EAAA,YAAA,CAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-skeleton-loader/bh-skeleton-loader.css?tag=bh-skeleton-loader&encapsulation=shadow","src/components/bh-skeleton-loader/bh-skeleton-loader.tsx"],"sourcesContent":["/* ==========================================================================\n BH-SKELETON-LOADER COMPONENT STYLES\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n.skeleton {\n display: inline-block;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.06) 25%,\n rgba(0, 0, 0, 0.03) 50%,\n rgba(0, 0, 0, 0.06) 75%\n );\n background-size: 400% 100%;\n animation: shimmer 1.5s ease-in-out infinite;\n border-radius: var(--radius-sm);\n line-height: 1;\n}\n\n.skeleton-circle {\n border-radius: 50%;\n}\n\n.skeleton::before {\n content: '\\00a0';\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0 50%;\n }\n}\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'bh-skeleton-loader',\n styleUrl: 'bh-skeleton-loader.css',\n shadow: true,\n})\nexport class BhSkeletonLoader {\n /**\n * Width of the skeleton (CSS value)\n */\n @Prop() width: string = '100%';\n\n /**\n * Height of the skeleton (CSS value)\n */\n @Prop() height: string = '1em';\n\n /**\n * Whether the skeleton should be circular\n */\n @Prop() circle: boolean = false;\n\n render() {\n const skeletonClasses = {\n 'skeleton': true,\n 'skeleton-circle': this.circle,\n };\n\n return (\n <span\n class={skeletonClasses}\n style={{ width: this.width, height: this.height }}\n role=\"status\"\n aria-live=\"polite\"\n aria-busy=\"true\"\n part=\"skeleton\"\n >\n <span class=\"visually-hidden\">Loading...</span>\n </span>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, d as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, d as Host } from './p-DLHC5fHk.js';
|
|
2
2
|
|
|
3
3
|
const bhCardCss = ":host{display:block}.card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);overflow:hidden;font-family:var(--font-inter)}.card-header-slot{display:contents}.card-content{display:flex;flex-direction:column;flex:1 0 auto;padding:var(--spacing-lg) var(--spacing-xl);gap:var(--spacing-none)}.card-footer-slot{display:contents}.card-content-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--spacing-md);padding:var(--spacing-xl);background:var(--color-purple-50, #f5f3ff);border:1px dashed var(--color-purple-500, #7c3aed);border-radius:var(--radius-xl);min-height:100%}.card-placeholder-icon{font-size:32px;color:var(--color-purple-500, #7c3aed)}.card-placeholder-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-purple-700, #6d28d9);text-decoration:underline;text-align:center}";
|
|
4
4
|
|
|
@@ -67,6 +67,6 @@ function defineCustomElement() {
|
|
|
67
67
|
defineCustomElement();
|
|
68
68
|
|
|
69
69
|
export { BhCard as B, defineCustomElement as d };
|
|
70
|
-
//# sourceMappingURL=p-
|
|
70
|
+
//# sourceMappingURL=p-DjsErN85.js.map
|
|
71
71
|
|
|
72
|
-
//# sourceMappingURL=p-
|
|
72
|
+
//# sourceMappingURL=p-DjsErN85.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DjsErN85.js","mappings":";;AAAA,MAAM,SAAS,GAAG,m8BAAm8B;;MCOx8B,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGjB;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,gBAAgB,GAAW,GAAG;AAEtC;;AAEG;IACK,eAAe,GAAW,mBAAmB;IAE5C,UAAU,GAAY,KAAK;IAEpC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGhB,eAAe,GAAA;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,MAAM,CACpD,CAAC,IAAI,KACH,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AAClC,YAAA,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AACzC,aAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CACjE;QACD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;;IAGvC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAI,EAAA,CAAA;SACxC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,YAAY,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,UAAU,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,eAAe,CAAQ,CAC7D,CACP,CACG,EACL,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-card/bh-card.css?tag=bh-card&encapsulation=shadow","src/components/bh-card/bh-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.card {\n display: flex;\n flex-direction: column;\n background: var(--color-white);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-xl);\n overflow: hidden;\n font-family: var(--font-inter);\n}\n\n.card-header-slot {\n display: contents;\n}\n\n.card-content {\n display: flex;\n flex-direction: column;\n flex: 1 0 auto;\n padding: var(--spacing-lg) var(--spacing-xl);\n gap: var(--spacing-none);\n}\n\n.card-footer-slot {\n display: contents;\n}\n\n/* Placeholder styles */\n.card-content-placeholder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n gap: var(--spacing-md);\n padding: var(--spacing-xl);\n background: var(--color-purple-50, #f5f3ff);\n border: 1px dashed var(--color-purple-500, #7c3aed);\n border-radius: var(--radius-xl);\n min-height: 100%;\n}\n\n.card-placeholder-icon {\n font-size: 32px;\n color: var(--color-purple-500, #7c3aed);\n}\n\n.card-placeholder-text {\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n color: var(--color-purple-700, #6d28d9);\n text-decoration: underline;\n text-align: center;\n}\n","import { Component, Prop, State, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'bh-card',\n styleUrl: 'bh-card.css',\n shadow: true,\n})\nexport class BhCard {\n @Element() el!: HTMLElement;\n\n /**\n * Whether to show the header section\n */\n @Prop() showHeader: boolean = true;\n\n /**\n * Whether to show the footer section\n */\n @Prop() showFooter: boolean = true;\n\n /**\n * Minimum height of the content area in pixels\n */\n @Prop() contentMinHeight: number = 200;\n\n /**\n * Placeholder text shown when no content is provided\n */\n @Prop() placeholderText: string = 'Card content slot';\n\n @State() hasContent: boolean = false;\n\n componentWillLoad() {\n this.checkForContent();\n }\n\n private checkForContent() {\n const children = Array.from(this.el.childNodes).filter(\n (node) =>\n (node.nodeType === Node.ELEMENT_NODE &&\n !(node as Element).hasAttribute('slot')) ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n );\n this.hasContent = children.length > 0;\n }\n\n render() {\n const contentStyle = {\n minHeight: `${this.contentMinHeight}px`,\n };\n\n return (\n <Host>\n <div class=\"card\">\n {this.showHeader && (\n <div class=\"card-header-slot\">\n <slot name=\"header\" />\n </div>\n )}\n <div class=\"card-content\" style={contentStyle}>\n <slot />\n {!this.hasContent && (\n <div class=\"card-content-placeholder\">\n <span class=\"card-placeholder-text\">{this.placeholderText}</span>\n </div>\n )}\n </div>\n {this.showFooter && (\n <div class=\"card-footer-slot\">\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-
|
|
2
|
-
import { d as defineCustomElement$4 } from './p-
|
|
3
|
-
import { d as defineCustomElement$3 } from './p-
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
|
|
2
|
+
import { d as defineCustomElement$4 } from './p-D_matRYZ.js';
|
|
3
|
+
import { d as defineCustomElement$3 } from './p-QjxdVLPX.js';
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-DXXn0saP.js';
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-CA0LmFbe.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Custom positioning reference element.
|
|
@@ -1792,6 +1792,6 @@ function defineCustomElement() {
|
|
|
1792
1792
|
defineCustomElement();
|
|
1793
1793
|
|
|
1794
1794
|
export { BhDropdown as B, defineCustomElement as d };
|
|
1795
|
-
//# sourceMappingURL=p-
|
|
1795
|
+
//# sourceMappingURL=p-Djti9xFF.js.map
|
|
1796
1796
|
|
|
1797
|
-
//# sourceMappingURL=p-
|
|
1797
|
+
//# sourceMappingURL=p-Djti9xFF.js.map
|