@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 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BE4kximA.js","mappings":";;AAAA,MAAM,YAAY,GAAG,w3DAAw3D;;MCOh4D,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB;;AAEG;IACK,IAAI,GAAW,MAAM;AAE7B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,OAAO;IAER,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;AAEvB,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClE,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;AAEvB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iBAAiB,gBACX,IAAI,CAAC,KAAK,EACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACxD,EACT,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CACtC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-sidebar/bh-nav-item.css?tag=bh-nav-item&encapsulation=shadow","src/components/bh-sidebar/bh-nav-item.tsx"],"sourcesContent":["/* ==========================================================================\n BH-NAV-ITEM COMPONENT STYLES\n Navigation item for sidebar navigation\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n.nav-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n max-width: 52px;\n height: fit-content;\n}\n\n.nav-item-button {\n background-color: var(--color-white);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n padding: var(--spacing-md);\n position: relative;\n border-radius: var(--radius-sm);\n flex-shrink: 0;\n transition: background-color 0.2s ease;\n cursor: pointer;\n border: none;\n outline: none;\n}\n\n.nav-item-button:hover {\n background-color: var(--color-neutral-50);\n}\n\n.nav-item-button:focus-visible {\n box-shadow: 0 0 0 2px var(--color-brand-100);\n}\n\n.nav-item.active .nav-item-button {\n background-color: var(--color-brand-50);\n}\n\n.nav-item-button .icon {\n width: 20px;\n height: 20px;\n display: block;\n flex-shrink: 0;\n color: var(--color-neutral-500);\n transition: color 0.2s ease;\n font-size: 20px;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-button:hover .icon {\n color: var(--color-neutral-700);\n}\n\n.nav-item.active .nav-item-button .icon {\n color: var(--color-brand-600);\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-label {\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n height: 18px;\n line-height: 18px;\n font-style: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n position: relative;\n flex-shrink: 0;\n color: var(--color-neutral-700);\n font-size: 10px;\n text-align: center;\n white-space: nowrap;\n width: 100%;\n max-width: 100%;\n margin: var(--spacing-none);\n margin-top: var(--spacing-xxs);\n box-sizing: border-box;\n direction: ltr;\n}\n\n.nav-item.active .nav-item-label {\n color: var(--color-neutral-700);\n font-weight: var(--weight-semibold);\n}\n\n/* Disabled state */\n.nav-item.disabled .nav-item-button {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.nav-item.disabled .nav-item-button:hover {\n background-color: var(--color-white);\n}\n\n.nav-item.disabled .nav-item-button .icon {\n color: var(--color-neutral-400);\n}\n\n.nav-item.disabled .nav-item-label {\n color: var(--color-neutral-400);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n tag: 'bh-nav-item',\n styleUrl: 'bh-nav-item.css',\n shadow: true,\n})\nexport class BhNavItem {\n /**\n * Material Symbols icon name\n */\n @Prop() icon: string = 'home';\n\n /**\n * Label text displayed below the icon\n */\n @Prop() label: string = 'Home';\n\n /**\n * Whether the nav item is active/selected\n */\n @Prop() isActive: boolean = false;\n\n /**\n * Whether the nav item is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Event emitted when the nav item is clicked\n */\n @Event() bhClick!: EventEmitter<void>;\n\n private handleClick = () => {\n if (!this.disabled) {\n this.bhClick.emit();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n event.preventDefault();\n this.bhClick.emit();\n }\n };\n\n render() {\n const navItemClasses = {\n 'nav-item': true,\n 'active': this.isActive,\n 'disabled': this.disabled,\n };\n\n return (\n <div class={navItemClasses}>\n <button\n class=\"nav-item-button\"\n aria-label={this.label}\n type=\"button\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n disabled={this.disabled}\n tabIndex={this.disabled ? -1 : 0}\n >\n <span class=\"material-symbols-outlined icon\">{this.icon}</span>\n </button>\n <p class=\"nav-item-label\">{this.label}</p>\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 bhTagCss = ":host{display:inline-block}.tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm);white-space:nowrap;cursor:default;user-select:none}.tag-dismissible{cursor:pointer}.tag-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.tag-sm.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-md{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-md.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-lg{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-lg.tag-dismissible{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg)}.tag-content{display:flex;align-items:center;gap:var(--spacing-xs)}.tag-avatar .tag-content{gap:var(--spacing-sm)}.tag-sm.tag-avatar{padding-left:var(--spacing-xs)}.tag-sm.tag-avatar.tag-dismissible{padding-left:var(--spacing-xs)}.tag-md.tag-avatar{padding-left:var(--spacing-sm)}.tag-md.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-label-wrapper{position:relative;display:inline-flex;align-items:center;max-width:100%}.tag-label{color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--spacing-xxs);border-radius:var(--radius-xs);transition:background-color 0.2s ease;width:var(--spacing-xl);height:var(--spacing-xl);flex-shrink:0}.tag-lg .tag-dismiss{padding:var(--spacing-xs);width:var(--spacing-2xl);height:var(--spacing-2xl)}.tag-dismiss:hover{background-color:var(--color-neutral-100)}.tag-dismiss:disabled{cursor:not-allowed;opacity:0.5}.tag-dismiss-icon{font-size:var(--text-sm-size);color:var(--color-neutral-500);line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.tag-lg .tag-dismiss-icon{font-size:var(--text-md-size)}.tag-disabled{opacity:0.5;cursor:not-allowed}.tag:hover{border-color:var(--color-neutral-300)}.tag-disabled:hover{border-color:var(--color-neutral-200)}.animate-dismiss{animation:dismiss 0.2s ease-out forwards}@keyframes dismiss{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}";
|
|
5
5
|
|
|
@@ -87,6 +87,6 @@ function defineCustomElement() {
|
|
|
87
87
|
defineCustomElement();
|
|
88
88
|
|
|
89
89
|
export { BhTag as B, defineCustomElement as d };
|
|
90
|
-
//# sourceMappingURL=p-
|
|
90
|
+
//# sourceMappingURL=p-BM_aWCWB.js.map
|
|
91
91
|
|
|
92
|
-
//# sourceMappingURL=p-
|
|
92
|
+
//# sourceMappingURL=p-BM_aWCWB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BM_aWCWB.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ynFAAynF;;MCU7nF,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAER,OAAO,GAAe,WAAW;;IAGjC,IAAI,GAAY,IAAI;;IAGpB,KAAK,GAAW,OAAO;;IAGvB,WAAW,GAAY,KAAK;;IAG5B,QAAQ,GAAY,KAAK;;IAGzB,QAAQ,GAAW,GAAG;;IAGtB,SAAS,GAAW,EAAE;;IAGrB,YAAY,GAAY,KAAK;;AAG7B,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;QAC5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;YAGxB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;aAC1B,EAAE,GAAG,CAAC;;AAEX,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,YAAY;SACrC;AAED,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,OAAO,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EAErB,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAc,CAC7G,EAGD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,EAAA,EACtC,IAAI,CAAC,KAAK,CACN,CACF,CACH,EAGL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,SAAS,EAAA,EAEpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4CAA4C,EAAA,EAAA,OAAA,CAEjD,CACA,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-tag/bh-tag.css?tag=bh-tag&encapsulation=shadow","src/components/bh-tag/bh-tag.tsx"],"sourcesContent":["/* Tag Base Styles */\n:host {\n display: inline-block;\n}\n\n.tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-sm);\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n background-color: var(--color-white);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-sm);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n}\n\n/* Clickable Tags */\n.tag-dismissible {\n cursor: pointer;\n}\n\n/* Size Variants */\n.tag-sm {\n padding: var(--spacing-xxs) var(--spacing-md);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n}\n\n.tag-sm.tag-dismissible {\n padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-md {\n padding: var(--spacing-xxs) var(--spacing-md);\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n.tag-md.tag-dismissible {\n padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-lg {\n padding: var(--spacing-xs) var(--spacing-lg);\n font-size: var(--text-md-size);\n line-height: var(--text-md-line);\n}\n\n.tag-lg.tag-dismissible {\n padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);\n}\n\n/* Content Layout */\n.tag-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-xs);\n}\n\n/* Avatar Variant - specific adjustments */\n.tag-avatar .tag-content {\n gap: var(--spacing-sm);\n}\n\n.tag-sm.tag-avatar {\n padding-left: var(--spacing-xs);\n}\n\n.tag-sm.tag-avatar.tag-dismissible {\n padding-left: var(--spacing-xs);\n}\n\n.tag-md.tag-avatar {\n padding-left: var(--spacing-sm);\n}\n\n.tag-md.tag-avatar.tag-dismissible {\n padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar {\n padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar.tag-dismissible {\n padding-left: var(--spacing-sm);\n}\n\n/* Label wrapper for tooltip positioning */\n.tag-label-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n\n/* Label */\n.tag-label {\n color: var(--color-neutral-700);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Dismiss Button */\n.tag-dismiss {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: var(--spacing-xxs);\n border-radius: var(--radius-xs);\n transition: background-color 0.2s ease;\n width: var(--spacing-xl);\n height: var(--spacing-xl);\n flex-shrink: 0;\n}\n\n.tag-lg .tag-dismiss {\n padding: var(--spacing-xs);\n width: var(--spacing-2xl);\n height: var(--spacing-2xl);\n}\n\n.tag-dismiss:hover {\n background-color: var(--color-neutral-100);\n}\n\n.tag-dismiss:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.tag-dismiss-icon {\n font-size: var(--text-sm-size);\n color: var(--color-neutral-500);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.tag-lg .tag-dismiss-icon {\n font-size: var(--text-md-size);\n}\n\n/* Disabled State */\n.tag-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Hover State for Dismissible Tags */\n.tag:hover {\n border-color: var(--color-neutral-300);\n}\n\n.tag-disabled:hover {\n border-color: var(--color-neutral-200);\n}\n\n/* Dismiss animation */\n.animate-dismiss {\n animation: dismiss 0.2s ease-out forwards;\n}\n\n@keyframes dismiss {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.8);\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'bh-tag',\n styleUrl: 'bh-tag.css',\n shadow: true,\n})\nexport class BhTag {\n /** Tag variant */\n @Prop() variant: TagVariant = 'text-only';\n\n /** Tag size */\n @Prop() size: TagSize = 'md';\n\n /** Tag label text */\n @Prop() label: string = 'Label';\n\n /** Whether the tag is dismissible */\n @Prop() dismissible: boolean = false;\n\n /** Whether the tag is disabled */\n @Prop() disabled: boolean = false;\n\n /** Maximum width for the label (in pixels) */\n @Prop() maxWidth: number = 120;\n\n /** Avatar image source (for avatar variant) */\n @Prop() avatarSrc: string = '';\n\n /** Internal dismissing state */\n @State() isDismissing: boolean = false;\n\n /** Emitted when dismiss button is clicked */\n @Event() bhDismiss!: EventEmitter<void>;\n\n private handleDismiss = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (this.dismissible && !this.disabled && !this.isDismissing) {\n this.isDismissing = true;\n\n // Simulate animation duration\n setTimeout(() => {\n this.bhDismiss.emit();\n this.isDismissing = false;\n }, 200);\n }\n };\n\n render() {\n const classes = {\n 'tag': true,\n [`tag-${this.size}`]: true,\n [`tag-${this.variant}`]: true,\n 'tag-dismissible': this.dismissible,\n 'tag-disabled': this.disabled,\n 'animate-dismiss': this.isDismissing,\n };\n\n const labelStyle = {\n maxWidth: `${this.maxWidth}px`,\n };\n\n return (\n <span class={classes}>\n <div class=\"tag-content\">\n {/* Avatar variant */}\n {this.variant === 'avatar' && (\n <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n )}\n\n {/* Label */}\n <span class=\"tag-label-wrapper\">\n <span class=\"tag-label\" style={labelStyle}>\n {this.label}\n </span>\n </span>\n </div>\n\n {/* Dismiss button (if dismissible) */}\n {this.dismissible && (\n <button\n class=\"tag-dismiss\"\n onClick={this.handleDismiss}\n disabled={this.disabled}\n type=\"button\"\n aria-label=\"Dismiss\"\n >\n <span class=\"material-symbols-outlined tag-dismiss-icon\">\n close\n </span>\n </button>\n )}\n </span>\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 bhButtonIconCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.button-icon{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md, 8px);cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit;outline:none;padding:0}.button-icon:focus-visible{box-shadow:0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9)}.button-icon-xs{width:24px;height:24px}.button-icon-xs .icon{font-size:16px}.button-icon-sm{width:32px;height:32px}.button-icon-sm .icon{font-size:18px}.button-icon-md{width:40px;height:40px}.button-icon-md .icon{font-size:20px}.button-icon-lg{width:48px;height:48px}.button-icon-lg .icon{font-size:24px}.button-icon-primary{background:var(--color-brand-600, #6941C6);color:var(--color-white, #FFFFFF)}.button-icon-primary:hover:not(.button-icon-disabled){background:var(--color-brand-700, #5235A8)}.button-icon-primary:active:not(.button-icon-disabled){background:var(--color-brand-800, #42298F)}.button-icon-secondary{background:var(--color-white, #FFFFFF);color:var(--color-neutral-700, #344054);border:1px solid var(--color-neutral-300, #D0D5DD)}.button-icon-secondary:hover:not(.button-icon-disabled){background:var(--color-neutral-50, #F9FAFB);border-color:var(--color-neutral-400, #98A2B3)}.button-icon-secondary:active:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7)}.button-icon-tertiary{background:transparent;color:var(--color-brand-600, #6941C6)}.button-icon-tertiary:hover:not(.button-icon-disabled){background:var(--color-brand-50, #F9F5FF)}.button-icon-tertiary:active:not(.button-icon-disabled){background:var(--color-brand-100, #F4EBFF)}.button-icon-quaternary{background:transparent;color:var(--color-neutral-500, #667085)}.button-icon-quaternary:hover:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7);color:var(--color-neutral-700, #344054)}.button-icon-quaternary:active:not(.button-icon-disabled){background:var(--color-neutral-200, #EAECF0)}.button-icon-disabled{opacity:0.5;cursor:not-allowed}.button-icon-loading{cursor:wait}.loading-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}.button-icon-sm .loading-spinner{width:14px;height:14px}.button-icon-xs .loading-spinner{width:12px;height:12px}.button-icon-lg .loading-spinner{width:20px;height:20px}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon{display:flex;align-items:center;justify-content:center}.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}";
|
|
4
4
|
|
|
@@ -95,6 +95,6 @@ function defineCustomElement() {
|
|
|
95
95
|
defineCustomElement();
|
|
96
96
|
|
|
97
97
|
export { BhButtonIcon as B, defineCustomElement as d };
|
|
98
|
-
//# sourceMappingURL=p-
|
|
98
|
+
//# sourceMappingURL=p-BsB67vNb.js.map
|
|
99
99
|
|
|
100
|
-
//# sourceMappingURL=p-
|
|
100
|
+
//# sourceMappingURL=p-BsB67vNb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BsB67vNb.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+4FAA+4F;;MCe15F,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACvB;;AAEG;IACK,SAAS,GAAwB,SAAS;AAElD;;AAEG;IACK,IAAI,GAAmB,IAAI;AAEnC;;AAEG;IACK,QAAQ,GAAW,KAAK;AAEhC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;;;;AAKG;IACK,IAAI,GAAmB,QAAQ;AAEvC;;AAEG;IACK,SAAS,GAAkB,IAAI;AAEvC;;AAEG;AACM,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACnC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE5B,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;YAC3C,CAAC,IAAI,CAAC,QAAQ;AACd,YAAA,CAAC,IAAI,CAAC,OAAO,EACb;YACA,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAA8B,CAAC;;AAErD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,eAAe,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;SACpC;QAED,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAC5B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAQ,KAEpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,EAAA,EACrD,IAAI,CAAC,QAAQ,CACT,CACR,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-button-icon/bh-button-icon.css?tag=bh-button-icon&encapsulation=shadow","src/components/bh-button-icon/bh-button-icon.tsx"],"sourcesContent":[":host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* Base Button Icon */\n.button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--radius-md, 8px);\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n font-family: inherit;\n outline: none;\n padding: 0;\n}\n\n.button-icon:focus-visible {\n box-shadow: 0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9);\n}\n\n/* Sizes */\n.button-icon-xs {\n width: 24px;\n height: 24px;\n}\n\n.button-icon-xs .icon {\n font-size: 16px;\n}\n\n.button-icon-sm {\n width: 32px;\n height: 32px;\n}\n\n.button-icon-sm .icon {\n font-size: 18px;\n}\n\n.button-icon-md {\n width: 40px;\n height: 40px;\n}\n\n.button-icon-md .icon {\n font-size: 20px;\n}\n\n.button-icon-lg {\n width: 48px;\n height: 48px;\n}\n\n.button-icon-lg .icon {\n font-size: 24px;\n}\n\n/* Primary Hierarchy */\n.button-icon-primary {\n background: var(--color-brand-600, #6941C6);\n color: var(--color-white, #FFFFFF);\n}\n\n.button-icon-primary:hover:not(.button-icon-disabled) {\n background: var(--color-brand-700, #5235A8);\n}\n\n.button-icon-primary:active:not(.button-icon-disabled) {\n background: var(--color-brand-800, #42298F);\n}\n\n/* Secondary Hierarchy */\n.button-icon-secondary {\n background: var(--color-white, #FFFFFF);\n color: var(--color-neutral-700, #344054);\n border: 1px solid var(--color-neutral-300, #D0D5DD);\n}\n\n.button-icon-secondary:hover:not(.button-icon-disabled) {\n background: var(--color-neutral-50, #F9FAFB);\n border-color: var(--color-neutral-400, #98A2B3);\n}\n\n.button-icon-secondary:active:not(.button-icon-disabled) {\n background: var(--color-neutral-100, #F2F4F7);\n}\n\n/* Tertiary Hierarchy */\n.button-icon-tertiary {\n background: transparent;\n color: var(--color-brand-600, #6941C6);\n}\n\n.button-icon-tertiary:hover:not(.button-icon-disabled) {\n background: var(--color-brand-50, #F9F5FF);\n}\n\n.button-icon-tertiary:active:not(.button-icon-disabled) {\n background: var(--color-brand-100, #F4EBFF);\n}\n\n/* Quaternary Hierarchy */\n.button-icon-quaternary {\n background: transparent;\n color: var(--color-neutral-500, #667085);\n}\n\n.button-icon-quaternary:hover:not(.button-icon-disabled) {\n background: var(--color-neutral-100, #F2F4F7);\n color: var(--color-neutral-700, #344054);\n}\n\n.button-icon-quaternary:active:not(.button-icon-disabled) {\n background: var(--color-neutral-200, #EAECF0);\n}\n\n/* Disabled State */\n.button-icon-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Loading State */\n.button-icon-loading {\n cursor: wait;\n}\n\n/* Loading Spinner */\n.loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n.button-icon-sm .loading-spinner {\n width: 14px;\n height: 14px;\n}\n\n.button-icon-xs .loading-spinner {\n width: 12px;\n height: 12px;\n}\n\n.button-icon-lg .loading-spinner {\n width: 20px;\n height: 20px;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Icon */\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\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, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonIconHierarchy =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'quaternary';\nexport type ButtonIconSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonIconType = 'button' | 'submit' | 'reset';\n\n@Component({\n tag: 'bh-button-icon',\n styleUrl: 'bh-button-icon.css',\n shadow: true,\n})\nexport class BhButtonIcon {\n /**\n * The visual hierarchy of the button\n */\n @Prop() hierarchy: ButtonIconHierarchy = 'primary';\n\n /**\n * The size of the button\n */\n @Prop() size: ButtonIconSize = 'md';\n\n /**\n * The icon name (Material Symbols)\n */\n @Prop() iconName: string = 'add';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the button is in loading state\n */\n @Prop() loading: boolean = false;\n\n /**\n * The type of button for form submission\n * - 'button': No form submission (default)\n * - 'submit': Submits the form\n * - 'reset': Resets the form\n */\n @Prop() type: ButtonIconType = 'button';\n\n /**\n * Accessible label for the button\n */\n @Prop() ariaLabel: string | null = null;\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 && !this.loading) {\n this.bhClick.emit(event);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (\n (event.key === 'Enter' || event.key === ' ') &&\n !this.disabled &&\n !this.loading\n ) {\n event.preventDefault();\n this.bhClick.emit(event as unknown as MouseEvent);\n }\n };\n\n render() {\n const buttonClasses = {\n 'button-icon': true,\n [`button-icon-${this.hierarchy}`]: true,\n [`button-icon-${this.size}`]: true,\n 'button-icon-disabled': this.disabled,\n 'button-icon-loading': this.loading,\n };\n\n return (\n <button\n type={this.type}\n class={buttonClasses}\n disabled={this.disabled}\n aria-label={this.ariaLabel || this.iconName}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n part=\"button\"\n >\n {this.loading ? (\n <span class=\"loading-spinner\" part=\"spinner\"></span>\n ) : (\n <span class=\"material-symbols-outlined icon\" part=\"icon\">\n {this.iconName}\n </span>\n )}\n </button>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
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
|
import { s as syncCheckableFormValue, v as validateRequired } from './p-2KjdCYlS.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-CzM_4nyA.js';
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-UG_h-ztP.js';
|
|
5
5
|
|
|
6
6
|
const bhCheckboxCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.checkbox-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none;position:relative}.checkbox-wrapper-disabled{cursor:not-allowed}.checkbox{display:inline-flex;align-items:center;justify-content:center;outline:none;user-select:none;transition:all 0.2s ease;box-sizing:border-box;background:var(--color-white);border:2px solid var(--color-neutral-300);position:relative;flex-shrink:0;pointer-events:none}.checkbox-sm{width:16px;height:16px;border-radius:var(--radius-xs);margin-top:3px}.checkbox-md{width:20px;height:20px;border-radius:var(--radius-sm);margin-top:2px}.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md{margin-top:0}.checkbox.checkbox-checked{background:var(--color-brand-600);border-color:var(--color-brand-600);color:var(--color-white)}.checkbox.checkbox-hover:not(.checkbox-disabled){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled){background:var(--color-brand-700);border-color:var(--color-brand-700)}.checkbox.checkbox-focused:not(.checkbox-disabled){border-color:var(--color-neutral-300);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white)}.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white)}.checkbox.checkbox-disabled{background:var(--color-neutral-50);border-color:var(--color-neutral-300);cursor:not-allowed;opacity:1}.checkbox.checkbox-checked.checkbox-disabled{background:var(--color-neutral-50);border:2px solid var(--color-neutral-300);color:var(--color-neutral-300)}.checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);line-height:1;font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20}.checkbox .check-icon{color:var(--color-white)}.checkbox-disabled .check-icon{color:var(--color-neutral-300)}.checkbox .minus-icon{color:var(--color-white)}.checkbox-disabled .minus-icon{color:var(--color-neutral-300)}.checkbox-sm .checkbox-icon{font-size:14px}.checkbox-md .checkbox-icon{font-size:18px}.checkbox-control{display:inline-flex;align-items:flex-start;cursor:pointer}.checkbox-wrapper-disabled .checkbox-control{cursor:not-allowed}";
|
|
7
7
|
|
|
@@ -184,6 +184,6 @@ function defineCustomElement() {
|
|
|
184
184
|
defineCustomElement();
|
|
185
185
|
|
|
186
186
|
export { BhCheckbox as B, defineCustomElement as d };
|
|
187
|
-
//# sourceMappingURL=p-
|
|
187
|
+
//# sourceMappingURL=p-BsgViq32.js.map
|
|
188
188
|
|
|
189
|
-
//# sourceMappingURL=p-
|
|
189
|
+
//# sourceMappingURL=p-BsgViq32.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-C69LfZib.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox/bh-checkbox.css?tag=bh-checkbox&encapsulation=shadow","src/components/bh-checkbox/bh-checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n CHECKBOX COMPONENT STYLES - StencilJS\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n VISUALLY HIDDEN NATIVE INPUT\n ========================================================================== */\n\n.checkbox-input {\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\n/* ==========================================================================\n WRAPPER STYLES\n ========================================================================== */\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.checkbox-wrapper-disabled {\n cursor: not-allowed;\n}\n\n/* ==========================================================================\n CHECKBOX BOX STYLES\n ========================================================================== */\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n outline: none;\n user-select: none;\n transition: all 0.2s ease;\n box-sizing: border-box;\n background: var(--color-white);\n border: 2px solid var(--color-neutral-300);\n position: relative;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n/* Size Variants */\n.checkbox-sm {\n width: 16px;\n height: 16px;\n border-radius: var(--radius-xs);\n margin-top: 3px;\n}\n\n.checkbox-md {\n width: 20px;\n height: 20px;\n border-radius: var(--radius-sm);\n margin-top: 2px;\n}\n\n/* Remove margin when no label */\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md {\n margin-top: 0;\n}\n\n/* State: Checked */\n.checkbox.checkbox-checked {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n color: var(--color-white);\n}\n\n/* State: Hover */\n.checkbox.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-300);\n}\n\n.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-brand-700);\n border-color: var(--color-brand-700);\n}\n\n/* State: Focused */\n.checkbox.checkbox-focused:not(.checkbox-disabled) {\n border-color: var(--color-neutral-300);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled) {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n/* State: Disabled */\n.checkbox.checkbox-disabled {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n cursor: not-allowed;\n opacity: 1;\n}\n\n.checkbox.checkbox-checked.checkbox-disabled {\n background: var(--color-neutral-50);\n border: 2px solid var(--color-neutral-300);\n color: var(--color-neutral-300);\n}\n\n/* ==========================================================================\n ICONS\n ========================================================================== */\n\n.checkbox-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;\n}\n\n.checkbox .check-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .check-icon {\n color: var(--color-neutral-300);\n}\n\n.checkbox .minus-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .minus-icon {\n color: var(--color-neutral-300);\n}\n\n/* Adjust icon sizes for different checkbox sizes */\n.checkbox-sm .checkbox-icon {\n font-size: 14px;\n}\n\n.checkbox-md .checkbox-icon {\n font-size: 18px;\n}\n\n/* ==========================================================================\n CHECKBOX CONTROL WRAPPER\n ========================================================================== */\n\n.checkbox-control {\n display: inline-flex;\n align-items: flex-start;\n cursor: pointer;\n}\n\n.checkbox-wrapper-disabled .checkbox-control {\n cursor: not-allowed;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox',\n styleUrl: 'bh-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhCheckbox {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private inputRef?: HTMLInputElement;\n private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n /** Checkbox size */\n @Prop() size: CheckboxSize = 'md';\n\n /** Checked state */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Indeterminate state */\n @Prop({ mutable: true }) indeterminate: boolean = false;\n\n /** Disabled state */\n @Prop() disabled: boolean = false;\n\n /** Name attribute for form submission */\n @Prop() name: string = '';\n\n /** Value attribute for form submission */\n @Prop() value: string = 'on';\n\n /** Optional label text - when provided, renders checkbox with label */\n @Prop() label: string = '';\n\n /** Optional supporting text below the label */\n @Prop() supportingText: string = '';\n\n /** Whether the checkbox is required */\n @Prop() required: boolean = false;\n\n /** Default checked state for form reset */\n @Prop() defaultChecked: boolean = false;\n\n /** Internal hover state */\n @State() isHovered: boolean = false;\n\n /** Internal focus state */\n @State() isFocused: boolean = false;\n\n /** Emitted when checkbox state changes via user interaction */\n @Event() bhChange!: EventEmitter<boolean>;\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.checked = newValue;\n }\n }\n\n @Watch('indeterminate')\n handleIndeterminateChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.indeterminate = newValue;\n }\n }\n\n componentDidLoad() {\n if (this.inputRef) {\n this.inputRef.indeterminate = this.indeterminate;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n formResetCallback() {\n this.checked = this.defaultChecked;\n this.indeterminate = false;\n if (this.inputRef) {\n this.inputRef.checked = this.defaultChecked;\n this.inputRef.indeterminate = false;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n this.checked = false;\n if (this.inputRef) {\n this.inputRef.indeterminate = false;\n this.inputRef.checked = false;\n }\n } else {\n this.checked = input.checked;\n }\n\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n this.bhChange.emit(this.checked);\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleControlClick = () => {\n if (this.disabled) return;\n this.inputRef?.click();\n };\n\n private renderCheckboxControl() {\n const isCheckedState = this.checked || this.indeterminate;\n\n const checkboxClasses = {\n 'checkbox': true,\n [`checkbox-${this.size}`]: true,\n 'checkbox-checked': isCheckedState,\n 'checkbox-disabled': this.disabled,\n 'checkbox-focused': this.isFocused && !this.disabled,\n 'checkbox-hover': this.isHovered && !this.disabled,\n };\n\n return (\n <div\n class=\"checkbox-control\"\n onClick={this.handleControlClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"checkbox\"\n id={this.uniqueId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n class=\"checkbox-input\"\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n />\n <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n {this.checked && !this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n check\n </span>\n )}\n {this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n remove\n </span>\n )}\n </div>\n </div>\n );\n }\n\n render() {\n const hasLabel = this.label || this.supportingText;\n\n const wrapperClasses = {\n 'checkbox-wrapper': true,\n 'checkbox-wrapper-with-label': !!hasLabel,\n 'checkbox-wrapper-disabled': this.disabled,\n };\n\n // Render with bh-label when label/supportingText is provided\n if (hasLabel) {\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n <bh-label\n layout=\"inline-start\"\n label={this.label}\n supportingText={this.supportingText}\n disabled={this.disabled}\n for={this.uniqueId}\n >\n {this.renderCheckboxControl()}\n </bh-label>\n </div>\n );\n }\n\n // Standalone checkbox without label\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n {this.renderCheckboxControl()}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-BsgViq32.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox/bh-checkbox.css?tag=bh-checkbox&encapsulation=shadow","src/components/bh-checkbox/bh-checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n CHECKBOX COMPONENT STYLES - StencilJS\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n VISUALLY HIDDEN NATIVE INPUT\n ========================================================================== */\n\n.checkbox-input {\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\n/* ==========================================================================\n WRAPPER STYLES\n ========================================================================== */\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.checkbox-wrapper-disabled {\n cursor: not-allowed;\n}\n\n/* ==========================================================================\n CHECKBOX BOX STYLES\n ========================================================================== */\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n outline: none;\n user-select: none;\n transition: all 0.2s ease;\n box-sizing: border-box;\n background: var(--color-white);\n border: 2px solid var(--color-neutral-300);\n position: relative;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n/* Size Variants */\n.checkbox-sm {\n width: 16px;\n height: 16px;\n border-radius: var(--radius-xs);\n margin-top: 3px;\n}\n\n.checkbox-md {\n width: 20px;\n height: 20px;\n border-radius: var(--radius-sm);\n margin-top: 2px;\n}\n\n/* Remove margin when no label */\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md {\n margin-top: 0;\n}\n\n/* State: Checked */\n.checkbox.checkbox-checked {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n color: var(--color-white);\n}\n\n/* State: Hover */\n.checkbox.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-300);\n}\n\n.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-brand-700);\n border-color: var(--color-brand-700);\n}\n\n/* State: Focused */\n.checkbox.checkbox-focused:not(.checkbox-disabled) {\n border-color: var(--color-neutral-300);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled) {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n/* State: Disabled */\n.checkbox.checkbox-disabled {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n cursor: not-allowed;\n opacity: 1;\n}\n\n.checkbox.checkbox-checked.checkbox-disabled {\n background: var(--color-neutral-50);\n border: 2px solid var(--color-neutral-300);\n color: var(--color-neutral-300);\n}\n\n/* ==========================================================================\n ICONS\n ========================================================================== */\n\n.checkbox-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;\n}\n\n.checkbox .check-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .check-icon {\n color: var(--color-neutral-300);\n}\n\n.checkbox .minus-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .minus-icon {\n color: var(--color-neutral-300);\n}\n\n/* Adjust icon sizes for different checkbox sizes */\n.checkbox-sm .checkbox-icon {\n font-size: 14px;\n}\n\n.checkbox-md .checkbox-icon {\n font-size: 18px;\n}\n\n/* ==========================================================================\n CHECKBOX CONTROL WRAPPER\n ========================================================================== */\n\n.checkbox-control {\n display: inline-flex;\n align-items: flex-start;\n cursor: pointer;\n}\n\n.checkbox-wrapper-disabled .checkbox-control {\n cursor: not-allowed;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox',\n styleUrl: 'bh-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhCheckbox {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private inputRef?: HTMLInputElement;\n private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n /** Checkbox size */\n @Prop() size: CheckboxSize = 'md';\n\n /** Checked state */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Indeterminate state */\n @Prop({ mutable: true }) indeterminate: boolean = false;\n\n /** Disabled state */\n @Prop() disabled: boolean = false;\n\n /** Name attribute for form submission */\n @Prop() name: string = '';\n\n /** Value attribute for form submission */\n @Prop() value: string = 'on';\n\n /** Optional label text - when provided, renders checkbox with label */\n @Prop() label: string = '';\n\n /** Optional supporting text below the label */\n @Prop() supportingText: string = '';\n\n /** Whether the checkbox is required */\n @Prop() required: boolean = false;\n\n /** Default checked state for form reset */\n @Prop() defaultChecked: boolean = false;\n\n /** Internal hover state */\n @State() isHovered: boolean = false;\n\n /** Internal focus state */\n @State() isFocused: boolean = false;\n\n /** Emitted when checkbox state changes via user interaction */\n @Event() bhChange!: EventEmitter<boolean>;\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.checked = newValue;\n }\n }\n\n @Watch('indeterminate')\n handleIndeterminateChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.indeterminate = newValue;\n }\n }\n\n componentDidLoad() {\n if (this.inputRef) {\n this.inputRef.indeterminate = this.indeterminate;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n formResetCallback() {\n this.checked = this.defaultChecked;\n this.indeterminate = false;\n if (this.inputRef) {\n this.inputRef.checked = this.defaultChecked;\n this.inputRef.indeterminate = false;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n this.checked = false;\n if (this.inputRef) {\n this.inputRef.indeterminate = false;\n this.inputRef.checked = false;\n }\n } else {\n this.checked = input.checked;\n }\n\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n this.bhChange.emit(this.checked);\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleControlClick = () => {\n if (this.disabled) return;\n this.inputRef?.click();\n };\n\n private renderCheckboxControl() {\n const isCheckedState = this.checked || this.indeterminate;\n\n const checkboxClasses = {\n 'checkbox': true,\n [`checkbox-${this.size}`]: true,\n 'checkbox-checked': isCheckedState,\n 'checkbox-disabled': this.disabled,\n 'checkbox-focused': this.isFocused && !this.disabled,\n 'checkbox-hover': this.isHovered && !this.disabled,\n };\n\n return (\n <div\n class=\"checkbox-control\"\n onClick={this.handleControlClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"checkbox\"\n id={this.uniqueId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n class=\"checkbox-input\"\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n />\n <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n {this.checked && !this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n check\n </span>\n )}\n {this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n remove\n </span>\n )}\n </div>\n </div>\n );\n }\n\n render() {\n const hasLabel = this.label || this.supportingText;\n\n const wrapperClasses = {\n 'checkbox-wrapper': true,\n 'checkbox-wrapper-with-label': !!hasLabel,\n 'checkbox-wrapper-disabled': this.disabled,\n };\n\n // Render with bh-label when label/supportingText is provided\n if (hasLabel) {\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n <bh-label\n layout=\"inline-start\"\n label={this.label}\n supportingText={this.supportingText}\n disabled={this.disabled}\n for={this.uniqueId}\n >\n {this.renderCheckboxControl()}\n </bh-label>\n </div>\n );\n }\n\n // Standalone checkbox without label\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n {this.renderCheckboxControl()}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
|
|
2
2
|
|
|
3
3
|
const bhMonthPickerContentCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n 0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n 0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n 0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n 0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.month-picker-content{width:100%;overflow-x:hidden;font-family:var(--font-inter)}.month-picker-content.animate-slide-up-enter{animation-duration:var(--animation-duration-slow, 0.3s)}.month-picker-content.scrollable{max-height:340px;overflow-y:auto;overflow-y:overlay;position:relative}.month-picker-content.scrollable::-webkit-scrollbar{width:var(--spacing-xs)}.month-picker-content.scrollable::-webkit-scrollbar-track{background:transparent;border-radius:var(--radius-xs)}.month-picker-content.scrollable::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--radius-xs);transition:background 0.2s ease}.month-picker-content.scrollable:hover::-webkit-scrollbar-track{background:var(--color-neutral-50)}.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb{background:var(--color-neutral-200)}.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.month-picker-content.scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent}.month-picker-content.scrollable:hover{scrollbar-color:var(--color-neutral-200) transparent}.calendar{display:flex;flex-direction:column;width:100%;padding:var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg)}.year-section{display:flex;flex-direction:column;width:100%}.year-month-container{display:flex;flex-direction:row;width:100%;align-items:flex-start}.year-label{width:auto;height:auto;display:flex;align-items:flex-start;justify-content:flex-start;font-family:var(--font-inter);font-weight:var(--weight-bold);font-size:var(--text-sm-size);line-height:var(--text-md-line);color:var(--color-neutral-700);flex-shrink:0;min-width:50px;padding:var(--spacing-md) 0}.months-row{display:flex;flex-direction:column;}.month-button{width:40px;height:40px;border-radius:var(--radius-full);border:2px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--leading-sm);color:var(--color-neutral-500);cursor:pointer;transition:all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);flex-shrink:0;text-align:center;overflow:hidden}.month-row{display:flex;gap:var(--spacing-sm);justify-content:flex-start}.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today){background:var(--color-neutral-50);color:var(--color-neutral-800)}.month-button.selected{background:var(--color-brand-600);color:var(--color-white);font-weight:var(--weight-semibold)}.month-button.today:not(.selected){border-color:var(--color-brand-600)}.month-button.today:not(.selected):hover{background:var(--color-brand-100);color:var(--color-brand-600)}.month-button.inactive,.month-button:disabled{opacity:0.4;cursor:not-allowed;color:var(--color-neutral-400)}.month-button:disabled:hover{background:transparent}.section-divider{width:100%;margin:var(--spacing-xl) 0}.divider-container{width:100%;display:flex;justify-content:center}.divider-line{width:100%;height:1px;background:var(--color-neutral-200)}.month-button:focus{outline:none}.month-button.keyboard-focused{outline:var(--border-width-md, 2px) solid var(--color-brand-500);outline-offset:var(--spacing-xs)}";
|
|
4
4
|
|
|
@@ -219,6 +219,6 @@ function defineCustomElement() {
|
|
|
219
219
|
defineCustomElement();
|
|
220
220
|
|
|
221
221
|
export { BhMonthPickerContent as B, defineCustomElement as d };
|
|
222
|
-
//# sourceMappingURL=p-
|
|
222
|
+
//# sourceMappingURL=p-BuUjUqUh.js.map
|
|
223
223
|
|
|
224
|
-
//# sourceMappingURL=p-
|
|
224
|
+
//# sourceMappingURL=p-BuUjUqUh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-SkkbcLa0.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,2zPAA2zP;;MCiB90P,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AAG/B;;AAEG;IACK,OAAO,GAAW,IAAI;AAE9B;;AAEG;IACK,OAAO,GAAW,IAAI;AAE9B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,cAAc,GAAoB,EAAE;AAE5C;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;AACK,IAAA,aAAa;AAErB;;AAEG;AACK,IAAA,YAAY;AAEpB;;AAEG;IACK,MAAM,GAAW,OAAO;AAEhC;;AAEG;AACK,IAAA,KAAK;IAEJ,qBAAqB,GAAkB,IAAI;IAC3C,oBAAoB,GAAkB,IAAI;IAC1C,eAAe,GAAY,KAAK;AAEzC;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,iBAAiB;IAElB,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AAC7F,IAAA,WAAW,GAAG,IAAI,IAAI,EAAE;AACxB,IAAA,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC1C,IAAA,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;AAGpD,IAAA,iBAAiB,CAAC,QAA+B,EAAA;QAC/C,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,KAAK;AAC3C,YAAA,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,IAAI;;;AAK7C,IAAA,yBAAyB,CAAC,QAA4B,EAAA;AACpD,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ;;;AAKzC,IAAA,wBAAwB,CAAC,QAA4B,EAAA;AACnD,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,oBAAoB,GAAG,QAAQ;;;IAIxC,iBAAiB,GAAA;;AAEf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;YAC7C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI;;AACtC,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YAC9E,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY;YACpE,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW;;aAC5D;;AAEL,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE;AACxE,gBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,YAAY;AAC9C,gBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,WAAW;;iBACvC;AACL,gBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,YAAY;gBAC9C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;;;;IAK/F,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;;;IAI5C,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI;YAAE;AAExC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,uBAAuB,CAAgB;AAC3F,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,IAAI,CAAC,oBAAoB,CAAA,CAAE,CAAgB;AAE1G,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW;YAAE;AAEhC,QAAA,MAAM,eAAe,GAAG,SAAS,CAAC,YAAY;AAC9C,QAAA,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS;AAC5C,QAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY;QAElD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC,OAAO;QAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC,OAAO;AAE7D,QAAA,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE;YAC/B,MAAM,YAAY,GAAG,EAAE;AACvB,YAAA,MAAM,SAAS,GAAG,cAAc,GAAG,eAAe,GAAG,CAAC,GAAG,iBAAiB,GAAG,CAAC,GAAG,YAAY;YAC7F,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC;;aACvC,IAAI,WAAW,EAAE;AACtB,YAAA,SAAS,CAAC,SAAS,GAAG,CAAC;;aAClB;AACL,YAAA,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY;;;IAIxC,QAAQ,GAAA;AACd,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;;IAGpF,cAAc,CAAC,UAAkB,EAAE,IAAY,EAAA;QACrD,OAAO,IAAI,CAAC,YAAY,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI;;IAG9D,iBAAiB,CAAC,UAAkB,EAAE,IAAY,EAAA;AACxD,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9C,YAAA,OAAO,KAAK;;QAGd,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAC9B,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,KAAK,IAAI,CACpE;;IAGK,WAAW,CAAC,UAAkB,EAAE,IAAY,EAAA;AAClD,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;YAC9D;;AAGF,QAAA,IAAI,CAAC,qBAAqB,GAAG,UAAU;AACvC,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;QAEhC,MAAM,SAAS,GAAc,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE;AACxD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7B,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGhC,aAAa,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC7B,KAAC;IAEO,eAAe,GAAG,MAAK;AAC7B,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;AAC9B,KAAC;IAEO,qBAAqB,CAAC,UAAkB,EAAE,IAAY,EAAA;AAC5D,QAAA,MAAM,OAAO,GAAG,CAAC,cAAc,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;AAC7C,YAAA,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;AAE1B,QAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,UAAU,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,EAAE;AACnF,YAAA,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;QAE1B,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;AACzC,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGvB,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE7B,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAA+C,4CAAA,EAAA,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,EAAE,CAAE,CAAA,EAC3F,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC9B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe,EAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EAClB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,EAAE,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,EAAA,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAO,EAEpC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAErB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EACnB,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,MACzC,cACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,QAAQ,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,EAEhD,EAAA,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CACjB,CACV,CAAC,CACE,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAI;AACvC,YAAA,MAAM,UAAU,GAAG,GAAG,GAAG,CAAC;YAC1B,QACE,cACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,QAAQ,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,EAEhD,EAAA,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CACjB;SAEZ,CAAC,CACE,CACF,CACF,EAGL,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,KAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,CAAO,CAC5B,CACF,CACP,CACG,CACP,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-month-picker-content/bh-month-picker-content.css?tag=bh-month-picker-content&encapsulation=shadow","src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n/* Content area - can be scrollable or not based on parent needs */\n.month-picker-content {\n width: 100%;\n overflow-x: hidden;\n font-family: var(--font-inter);\n}\n\n/* Extend animation duration for smoother effect */\n.month-picker-content.animate-slide-up-enter {\n animation-duration: var(--animation-duration-slow, 0.3s);\n}\n\n.month-picker-content.scrollable {\n max-height: 340px;\n overflow-y: auto;\n overflow-y: overlay; /* Overlay scrollbar - doesn't take space from content */\n position: relative;\n}\n\n/* Custom scrollbar styling - hidden by default, visible on hover */\n.month-picker-content.scrollable::-webkit-scrollbar {\n width: var(--spacing-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-track {\n background: transparent;\n border-radius: var(--radius-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: var(--radius-xs);\n transition: background 0.2s ease;\n}\n\n/* Show scrollbar on hover */\n.month-picker-content.scrollable:hover::-webkit-scrollbar-track {\n background: var(--color-neutral-50);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar - hidden by default */\n.month-picker-content.scrollable {\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n\n/* Firefox - show scrollbar on hover */\n.month-picker-content.scrollable:hover {\n scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Calendar container */\n.calendar {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);\n}\n\n/* Year Section - Contains year button + months row */\n.year-section {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.year-month-container {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: flex-start;\n}\n\n/* Year Label - positioned on left */\n.year-label {\n width: auto;\n height: auto;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n font-family: var(--font-inter);\n font-weight: var(--weight-bold);\n font-size: var(--text-sm-size);\n line-height: var(--text-md-line);\n color: var(--color-neutral-700);\n flex-shrink: 0;\n min-width: 50px;\n padding: var(--spacing-md) 0;\n}\n\n/* Months Grid - 2 rows of 6 months each */\n.months-row {\n display: flex;\n flex-direction: column;\n /* flex: 1;\n width: 100%; */\n}\n\n/* Month Button - 40x40px circular */\n.month-button {\n width: 40px;\n height: 40px;\n border-radius: var(--radius-full);\n border: 2px solid transparent;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n font-size: var(--text-sm-size);\n line-height: var(--leading-sm);\n color: var(--color-neutral-500);\n cursor: pointer;\n transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n flex-shrink: 0;\n text-align: center;\n overflow: hidden;\n}\n\n.month-row {\n display: flex;\n gap: var(--spacing-sm);\n justify-content: flex-start;\n}\n\n.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today) {\n background: var(--color-neutral-50);\n color: var(--color-neutral-800);\n}\n\n/* Selected state - blue background */\n.month-button.selected {\n background: var(--color-brand-600);\n color: var(--color-white);\n font-weight: var(--weight-semibold);\n}\n\n/* Today's date state - blue border to match date picker */\n.month-button.today:not(.selected) {\n border-color: var(--color-brand-600);\n}\n\n.month-button.today:not(.selected):hover {\n background: var(--color-brand-100);\n color: var(--color-brand-600);\n}\n\n/* Inactive/disabled state */\n.month-button.inactive,\n.month-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n color: var(--color-neutral-400);\n}\n\n.month-button:disabled:hover {\n background: transparent;\n}\n\n/* Section Divider - Between year sections */\n.section-divider {\n width: 100%;\n margin: var(--spacing-xl) 0;\n}\n\n.divider-container {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.divider-line {\n width: 100%;\n height: 1px;\n background: var(--color-neutral-200);\n}\n\n/* Focus states for accessibility - completely disable outline */\n.month-button:focus {\n outline: none;\n}\n\n/* Keyboard navigation state - will be added via JavaScript */\n.month-button.keyboard-focused {\n outline: var(--border-width-md, 2px) solid var(--color-brand-500);\n outline-offset: var(--spacing-xs);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n month: number; // 0-11 (January = 0, December = 11)\n year: number;\n}\n\nexport interface DisabledMonth {\n month: number;\n year: number;\n}\n\n@Component({\n tag: 'bh-month-picker-content',\n styleUrl: 'bh-month-picker-content.css',\n shadow: true,\n})\nexport class BhMonthPickerContent {\n @Element() el!: HTMLElement;\n\n /**\n * Minimum year in the picker\n */\n @Prop() minYear: number = 1998;\n\n /**\n * Maximum year in the picker\n */\n @Prop() maxYear: number = 2060;\n\n /**\n * Whether the picker is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Array of disabled months\n */\n @Prop() disabledMonths: DisabledMonth[] = [];\n\n /**\n * Whether the content is scrollable\n */\n @Prop() scrollable: boolean = true;\n\n /**\n * Currently selected month (0-11)\n */\n @Prop() selectedMonth?: number;\n\n /**\n * Currently selected year\n */\n @Prop() selectedYear?: number;\n\n /**\n * Height of the content area\n */\n @Prop() height: string = '375px';\n\n /**\n * Value object with month and year\n */\n @Prop() value?: MonthYear;\n\n @State() internalSelectedMonth: number | null = null;\n @State() internalSelectedYear: number | null = null;\n @State() isUsingKeyboard: boolean = false;\n\n /**\n * Event emitted when a month is selected\n */\n @Event() bhChange!: EventEmitter<MonthYear>;\n\n /**\n * Event emitted when a month/year is selected\n */\n @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n private currentDate = new Date();\n private currentMonth = this.currentDate.getMonth();\n private currentYear = this.currentDate.getFullYear();\n\n @Watch('value')\n handleValueChange(newValue: MonthYear | undefined) {\n if (newValue) {\n this.internalSelectedMonth = newValue.month;\n this.internalSelectedYear = newValue.year;\n }\n }\n\n @Watch('selectedMonth')\n handleSelectedMonthChange(newValue: number | undefined) {\n if (newValue !== undefined) {\n this.internalSelectedMonth = newValue;\n }\n }\n\n @Watch('selectedYear')\n handleSelectedYearChange(newValue: number | undefined) {\n if (newValue !== undefined) {\n this.internalSelectedYear = newValue;\n }\n }\n\n componentWillLoad() {\n // Initialize with props or current date\n if (this.value) {\n this.internalSelectedMonth = this.value.month;\n this.internalSelectedYear = this.value.year;\n } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n } else {\n // Initialize with current date if within range\n if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n this.internalSelectedMonth = this.currentMonth;\n this.internalSelectedYear = this.currentYear;\n } else {\n this.internalSelectedMonth = this.currentMonth;\n this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n }\n }\n }\n\n componentDidLoad() {\n if (this.scrollable) {\n setTimeout(() => this.scrollToSelectedYear(), 0);\n }\n }\n\n private scrollToSelectedYear() {\n if (this.internalSelectedYear === null) return;\n\n const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n if (!container || !yearElement) return;\n\n const containerHeight = container.clientHeight;\n const yearElementTop = yearElement.offsetTop;\n const yearElementHeight = yearElement.offsetHeight;\n\n const isFirstYear = this.internalSelectedYear === this.minYear;\n const isLastYear = this.internalSelectedYear === this.maxYear;\n\n if (!isFirstYear && !isLastYear) {\n const scrollOffset = 50;\n const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n container.scrollTop = Math.max(0, scrollTop);\n } else if (isFirstYear) {\n container.scrollTop = 0;\n } else {\n container.scrollTop = container.scrollHeight;\n }\n }\n\n private getYears(): number[] {\n return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n }\n\n private isCurrentMonth(monthIndex: number, year: number): boolean {\n return this.currentMonth === monthIndex && this.currentYear === year;\n }\n\n private isMonthSelectable(monthIndex: number, year: number): boolean {\n if (year < this.minYear || year > this.maxYear) {\n return false;\n }\n\n return !this.disabledMonths.some(\n disabled => disabled.month === monthIndex && disabled.year === year\n );\n }\n\n private selectMonth(monthIndex: number, year: number) {\n if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n return;\n }\n\n this.internalSelectedMonth = monthIndex;\n this.internalSelectedYear = year;\n\n const selection: MonthYear = { month: monthIndex, year };\n this.bhChange.emit(selection);\n this.bhMonthYearSelect.emit(selection);\n }\n\n private handleKeyDown = () => {\n this.isUsingKeyboard = true;\n };\n\n private handleMouseDown = () => {\n this.isUsingKeyboard = false;\n };\n\n private getMonthButtonClasses(monthIndex: number, year: number): string {\n const classes = ['month-button'];\n\n if (!this.isMonthSelectable(monthIndex, year)) {\n classes.push('inactive');\n }\n if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n classes.push('selected');\n }\n if (this.isCurrentMonth(monthIndex, year)) {\n classes.push('today');\n }\n\n return classes.join(' ');\n }\n\n render() {\n const years = this.getYears();\n\n return (\n <Host>\n <div\n class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n style={{ height: this.height }}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <div class=\"calendar\">\n {years.map((year, yearIndex) => (\n <div key={year} class=\"year-section\" id={`year-${year}`}>\n <div class=\"year-month-container\">\n <div class=\"year-label\">{year}</div>\n\n <div class=\"months-row\">\n {/* First row: Jan-Jun */}\n <div class=\"month-row\">\n {this.months.slice(0, 6).map((_, monthIndex) => (\n <button\n key={monthIndex}\n class={this.getMonthButtonClasses(monthIndex, year)}\n disabled={!this.isMonthSelectable(monthIndex, year)}\n onClick={() => this.selectMonth(monthIndex, year)}\n >\n {this.months[monthIndex]}\n </button>\n ))}\n </div>\n\n {/* Second row: Jul-Dec */}\n <div class=\"month-row\">\n {this.months.slice(6, 12).map((_, idx) => {\n const monthIndex = idx + 6;\n return (\n <button\n key={monthIndex}\n class={this.getMonthButtonClasses(monthIndex, year)}\n disabled={!this.isMonthSelectable(monthIndex, year)}\n onClick={() => this.selectMonth(monthIndex, year)}\n >\n {this.months[monthIndex]}\n </button>\n );\n })}\n </div>\n </div>\n </div>\n\n {/* Section Divider (not for last year) */}\n {yearIndex < years.length - 1 && (\n <div class=\"section-divider\">\n <div class=\"divider-container\">\n <div class=\"divider-line\"></div>\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-BuUjUqUh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-month-picker-content/bh-month-picker-content.css?tag=bh-month-picker-content&encapsulation=shadow","src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n/* Content area - can be scrollable or not based on parent needs */\n.month-picker-content {\n width: 100%;\n overflow-x: hidden;\n font-family: var(--font-inter);\n}\n\n/* Extend animation duration for smoother effect */\n.month-picker-content.animate-slide-up-enter {\n animation-duration: var(--animation-duration-slow, 0.3s);\n}\n\n.month-picker-content.scrollable {\n max-height: 340px;\n overflow-y: auto;\n overflow-y: overlay; /* Overlay scrollbar - doesn't take space from content */\n position: relative;\n}\n\n/* Custom scrollbar styling - hidden by default, visible on hover */\n.month-picker-content.scrollable::-webkit-scrollbar {\n width: var(--spacing-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-track {\n background: transparent;\n border-radius: var(--radius-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: var(--radius-xs);\n transition: background 0.2s ease;\n}\n\n/* Show scrollbar on hover */\n.month-picker-content.scrollable:hover::-webkit-scrollbar-track {\n background: var(--color-neutral-50);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb {\n background: var(--color-neutral-200);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover {\n background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar - hidden by default */\n.month-picker-content.scrollable {\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n\n/* Firefox - show scrollbar on hover */\n.month-picker-content.scrollable:hover {\n scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Calendar container */\n.calendar {\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);\n}\n\n/* Year Section - Contains year button + months row */\n.year-section {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.year-month-container {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: flex-start;\n}\n\n/* Year Label - positioned on left */\n.year-label {\n width: auto;\n height: auto;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n font-family: var(--font-inter);\n font-weight: var(--weight-bold);\n font-size: var(--text-sm-size);\n line-height: var(--text-md-line);\n color: var(--color-neutral-700);\n flex-shrink: 0;\n min-width: 50px;\n padding: var(--spacing-md) 0;\n}\n\n/* Months Grid - 2 rows of 6 months each */\n.months-row {\n display: flex;\n flex-direction: column;\n /* flex: 1;\n width: 100%; */\n}\n\n/* Month Button - 40x40px circular */\n.month-button {\n width: 40px;\n height: 40px;\n border-radius: var(--radius-full);\n border: 2px solid transparent;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-inter);\n font-weight: var(--weight-medium);\n font-size: var(--text-sm-size);\n line-height: var(--leading-sm);\n color: var(--color-neutral-500);\n cursor: pointer;\n transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n flex-shrink: 0;\n text-align: center;\n overflow: hidden;\n}\n\n.month-row {\n display: flex;\n gap: var(--spacing-sm);\n justify-content: flex-start;\n}\n\n.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today) {\n background: var(--color-neutral-50);\n color: var(--color-neutral-800);\n}\n\n/* Selected state - blue background */\n.month-button.selected {\n background: var(--color-brand-600);\n color: var(--color-white);\n font-weight: var(--weight-semibold);\n}\n\n/* Today's date state - blue border to match date picker */\n.month-button.today:not(.selected) {\n border-color: var(--color-brand-600);\n}\n\n.month-button.today:not(.selected):hover {\n background: var(--color-brand-100);\n color: var(--color-brand-600);\n}\n\n/* Inactive/disabled state */\n.month-button.inactive,\n.month-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n color: var(--color-neutral-400);\n}\n\n.month-button:disabled:hover {\n background: transparent;\n}\n\n/* Section Divider - Between year sections */\n.section-divider {\n width: 100%;\n margin: var(--spacing-xl) 0;\n}\n\n.divider-container {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.divider-line {\n width: 100%;\n height: 1px;\n background: var(--color-neutral-200);\n}\n\n/* Focus states for accessibility - completely disable outline */\n.month-button:focus {\n outline: none;\n}\n\n/* Keyboard navigation state - will be added via JavaScript */\n.month-button.keyboard-focused {\n outline: var(--border-width-md, 2px) solid var(--color-brand-500);\n outline-offset: var(--spacing-xs);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n month: number; // 0-11 (January = 0, December = 11)\n year: number;\n}\n\nexport interface DisabledMonth {\n month: number;\n year: number;\n}\n\n@Component({\n tag: 'bh-month-picker-content',\n styleUrl: 'bh-month-picker-content.css',\n shadow: true,\n})\nexport class BhMonthPickerContent {\n @Element() el!: HTMLElement;\n\n /**\n * Minimum year in the picker\n */\n @Prop() minYear: number = 1998;\n\n /**\n * Maximum year in the picker\n */\n @Prop() maxYear: number = 2060;\n\n /**\n * Whether the picker is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Array of disabled months\n */\n @Prop() disabledMonths: DisabledMonth[] = [];\n\n /**\n * Whether the content is scrollable\n */\n @Prop() scrollable: boolean = true;\n\n /**\n * Currently selected month (0-11)\n */\n @Prop() selectedMonth?: number;\n\n /**\n * Currently selected year\n */\n @Prop() selectedYear?: number;\n\n /**\n * Height of the content area\n */\n @Prop() height: string = '375px';\n\n /**\n * Value object with month and year\n */\n @Prop() value?: MonthYear;\n\n @State() internalSelectedMonth: number | null = null;\n @State() internalSelectedYear: number | null = null;\n @State() isUsingKeyboard: boolean = false;\n\n /**\n * Event emitted when a month is selected\n */\n @Event() bhChange!: EventEmitter<MonthYear>;\n\n /**\n * Event emitted when a month/year is selected\n */\n @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n private currentDate = new Date();\n private currentMonth = this.currentDate.getMonth();\n private currentYear = this.currentDate.getFullYear();\n\n @Watch('value')\n handleValueChange(newValue: MonthYear | undefined) {\n if (newValue) {\n this.internalSelectedMonth = newValue.month;\n this.internalSelectedYear = newValue.year;\n }\n }\n\n @Watch('selectedMonth')\n handleSelectedMonthChange(newValue: number | undefined) {\n if (newValue !== undefined) {\n this.internalSelectedMonth = newValue;\n }\n }\n\n @Watch('selectedYear')\n handleSelectedYearChange(newValue: number | undefined) {\n if (newValue !== undefined) {\n this.internalSelectedYear = newValue;\n }\n }\n\n componentWillLoad() {\n // Initialize with props or current date\n if (this.value) {\n this.internalSelectedMonth = this.value.month;\n this.internalSelectedYear = this.value.year;\n } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n } else {\n // Initialize with current date if within range\n if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n this.internalSelectedMonth = this.currentMonth;\n this.internalSelectedYear = this.currentYear;\n } else {\n this.internalSelectedMonth = this.currentMonth;\n this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n }\n }\n }\n\n componentDidLoad() {\n if (this.scrollable) {\n setTimeout(() => this.scrollToSelectedYear(), 0);\n }\n }\n\n private scrollToSelectedYear() {\n if (this.internalSelectedYear === null) return;\n\n const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n if (!container || !yearElement) return;\n\n const containerHeight = container.clientHeight;\n const yearElementTop = yearElement.offsetTop;\n const yearElementHeight = yearElement.offsetHeight;\n\n const isFirstYear = this.internalSelectedYear === this.minYear;\n const isLastYear = this.internalSelectedYear === this.maxYear;\n\n if (!isFirstYear && !isLastYear) {\n const scrollOffset = 50;\n const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n container.scrollTop = Math.max(0, scrollTop);\n } else if (isFirstYear) {\n container.scrollTop = 0;\n } else {\n container.scrollTop = container.scrollHeight;\n }\n }\n\n private getYears(): number[] {\n return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n }\n\n private isCurrentMonth(monthIndex: number, year: number): boolean {\n return this.currentMonth === monthIndex && this.currentYear === year;\n }\n\n private isMonthSelectable(monthIndex: number, year: number): boolean {\n if (year < this.minYear || year > this.maxYear) {\n return false;\n }\n\n return !this.disabledMonths.some(\n disabled => disabled.month === monthIndex && disabled.year === year\n );\n }\n\n private selectMonth(monthIndex: number, year: number) {\n if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n return;\n }\n\n this.internalSelectedMonth = monthIndex;\n this.internalSelectedYear = year;\n\n const selection: MonthYear = { month: monthIndex, year };\n this.bhChange.emit(selection);\n this.bhMonthYearSelect.emit(selection);\n }\n\n private handleKeyDown = () => {\n this.isUsingKeyboard = true;\n };\n\n private handleMouseDown = () => {\n this.isUsingKeyboard = false;\n };\n\n private getMonthButtonClasses(monthIndex: number, year: number): string {\n const classes = ['month-button'];\n\n if (!this.isMonthSelectable(monthIndex, year)) {\n classes.push('inactive');\n }\n if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n classes.push('selected');\n }\n if (this.isCurrentMonth(monthIndex, year)) {\n classes.push('today');\n }\n\n return classes.join(' ');\n }\n\n render() {\n const years = this.getYears();\n\n return (\n <Host>\n <div\n class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n style={{ height: this.height }}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <div class=\"calendar\">\n {years.map((year, yearIndex) => (\n <div key={year} class=\"year-section\" id={`year-${year}`}>\n <div class=\"year-month-container\">\n <div class=\"year-label\">{year}</div>\n\n <div class=\"months-row\">\n {/* First row: Jan-Jun */}\n <div class=\"month-row\">\n {this.months.slice(0, 6).map((_, monthIndex) => (\n <button\n key={monthIndex}\n class={this.getMonthButtonClasses(monthIndex, year)}\n disabled={!this.isMonthSelectable(monthIndex, year)}\n onClick={() => this.selectMonth(monthIndex, year)}\n >\n {this.months[monthIndex]}\n </button>\n ))}\n </div>\n\n {/* Second row: Jul-Dec */}\n <div class=\"month-row\">\n {this.months.slice(6, 12).map((_, idx) => {\n const monthIndex = idx + 6;\n return (\n <button\n key={monthIndex}\n class={this.getMonthButtonClasses(monthIndex, year)}\n disabled={!this.isMonthSelectable(monthIndex, year)}\n onClick={() => this.selectMonth(monthIndex, year)}\n >\n {this.months[monthIndex]}\n </button>\n );\n })}\n </div>\n </div>\n </div>\n\n {/* Section Divider (not for last year) */}\n {yearIndex < years.length - 1 && (\n <div class=\"section-divider\">\n <div class=\"divider-container\">\n <div class=\"divider-line\"></div>\n </div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
|
|
2
2
|
|
|
3
3
|
const bhPageNavigationChildCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n 0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n 0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n 0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n 0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-child-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-child-badge{margin-left:auto;font-family:var(--font-inter);font-size:12px;font-weight:500;color:var(--color-neutral-500)}";
|
|
4
4
|
|
|
@@ -66,6 +66,6 @@ function defineCustomElement() {
|
|
|
66
66
|
defineCustomElement();
|
|
67
67
|
|
|
68
68
|
export { BhPageNavigationChild as B, defineCustomElement as d };
|
|
69
|
-
//# sourceMappingURL=p-
|
|
69
|
+
//# sourceMappingURL=p-C24VI6pZ.js.map
|
|
70
70
|
|
|
71
|
-
//# sourceMappingURL=p-
|
|
71
|
+
//# sourceMappingURL=p-C24VI6pZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-C24VI6pZ.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,u2LAAu2L;;MCO33L,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAChC;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,WAAW;IAEZ,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAEO,cAAc,GAAA;QACpB,OAAO;AACL,YAAA,uBAAuB,EAAE,IAAI;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KACzC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CACG,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-page-navigation-child/bh-page-navigation-child.css?tag=bh-page-navigation-child&encapsulation=shadow","src/components/bh-page-navigation-child/bh-page-navigation-child.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n.page-navigation-child {\n display: flex;\n align-items: center;\n padding: var(--spacing-md) var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 36px;\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n margin: var(--spacing-none) var(--spacing-xs);\n background-color: transparent;\n border: 1px solid transparent;\n margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n background-color: var(--color-neutral-50);\n position: relative;\n z-index: 1;\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n content: '';\n position: absolute;\n left: -4.5px;\n top: 50%;\n transform: translateY(-50%);\n width: 2px;\n height: 24px;\n background-color: var(--color-brand-600);\n z-index: 3;\n}\n\n.page-navigation-child-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n width: 100%;\n}\n\n.page-navigation-child-label {\n font-family: var(--font-inter);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-neutral-600);\n flex: 1;\n transition: all 0.15s ease;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n color: var(--color-brand-600);\n font-weight: 600;\n}\n\n.page-navigation-child-badge {\n margin-left: auto;\n font-family: var(--font-inter);\n font-size: 12px;\n font-weight: 500;\n color: var(--color-neutral-500);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'bh-page-navigation-child',\n styleUrl: 'bh-page-navigation-child.css',\n shadow: true,\n})\nexport class BhPageNavigationChild {\n /**\n * Label text for the navigation item\n */\n @Prop() label!: string;\n\n /**\n * Optional badge text/number to display\n */\n @Prop() badge?: string | number;\n\n /**\n * Whether to show the badge (when badge prop is provided)\n */\n @Prop() showBadge: boolean = true;\n\n /**\n * Whether the item is currently active/selected\n */\n @Prop() isActive: boolean = false;\n\n /**\n * Event emitted when the navigation item is clicked\n */\n @Event() bhItemClick!: EventEmitter<void>;\n\n private handleClick = () => {\n this.bhItemClick.emit();\n };\n\n private getItemClasses() {\n return {\n 'page-navigation-child': true,\n 'active': this.isActive,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.getItemClasses()} onClick={this.handleClick}>\n <div class=\"page-navigation-child-content\">\n <span class=\"page-navigation-child-label\">{this.label}</span>\n {this.badge !== undefined && this.showBadge && (\n <span class=\"page-navigation-child-badge\">{this.badge}</span>\n )}\n </div>\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 bhLoaderSpinnerCss = ":host{display:inline-block}.loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.loader-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.loader-spinner{position:relative;display:inline-block}.loader-message{color:var(--color-neutral-700);font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:var(--weight-medium);text-align:center;margin-top:var(--spacing-xs)}.loader-overlay .loader-message{color:var(--color-white)}.spinner-gradient{animation:gradient-rotate 2s linear infinite;will-change:transform}.gradient-svg{display:block;transform-origin:50% 50%}.gradient-path{stroke-dasharray:90, 150;stroke-dashoffset:0;animation:gradient-dash 1.5s ease-in-out infinite;transform-origin:50% 50%}.size-sm .gradient-svg{width:20px;height:20px}.size-sm .gradient-path{stroke-width:5}.size-md .gradient-svg{width:30px;height:30px}.size-md .gradient-path{stroke-width:5}.size-lg .gradient-svg{width:40px;height:40px}.size-lg .gradient-path{stroke-width:5}.size-xl .gradient-svg{width:60px;height:60px}.size-xl .gradient-path{stroke-width:6}@keyframes gradient-rotate{100%{transform:rotate(360deg)}}@keyframes gradient-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}.loader-container:hover .spinner-gradient{animation-duration:1s}.loader-container:hover .gradient-path{animation-duration:0.6s}.spinner-gradient{backface-visibility:hidden;perspective:1000px}.gradient-svg{transform:translateZ(0)}";
|
|
4
4
|
|
|
@@ -65,6 +65,6 @@ function defineCustomElement() {
|
|
|
65
65
|
defineCustomElement();
|
|
66
66
|
|
|
67
67
|
export { BhLoaderSpinner as B, defineCustomElement as d };
|
|
68
|
-
//# sourceMappingURL=p-
|
|
68
|
+
//# sourceMappingURL=p-CA0LmFbe.js.map
|
|
69
69
|
|
|
70
|
-
//# sourceMappingURL=p-
|
|
70
|
+
//# sourceMappingURL=p-CA0LmFbe.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-CA0LmFbe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-loader-spinner/bh-loader-spinner.css?tag=bh-loader-spinner&encapsulation=shadow","src/components/bh-loader-spinner/bh-loader-spinner.tsx"],"sourcesContent":["/* ==========================================================================\n LOADER SPINNER COMPONENT - StencilJS\n ========================================================================== */\n\n:host {\n display: inline-block;\n}\n\n/* Overlay styles */\n.loader-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n}\n\n.loader-overlay-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-md);\n}\n\n/* Container styles */\n.loader-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-sm);\n}\n\n.loader-spinner {\n position: relative;\n display: inline-block;\n}\n\n/* Message styles */\n.loader-message {\n color: var(--color-neutral-700);\n font-size: var(--text-sm-size);\n line-height: var(--text-sm-line);\n font-weight: var(--weight-medium);\n text-align: center;\n margin-top: var(--spacing-xs);\n}\n\n.loader-overlay .loader-message {\n color: var(--color-white);\n}\n\n/* =========================\n GRADIENT VARIANT - Bellhop Sidebar Style\n ========================= */\n.spinner-gradient {\n animation: gradient-rotate 2s linear infinite;\n will-change: transform;\n}\n\n.gradient-svg {\n display: block;\n transform-origin: 50% 50%;\n}\n\n.gradient-path {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: 0;\n animation: gradient-dash 1.5s ease-in-out infinite;\n transform-origin: 50% 50%;\n}\n\n/* Size variations for gradient */\n.size-sm .gradient-svg {\n width: 20px;\n height: 20px;\n}\n\n.size-sm .gradient-path {\n stroke-width: 5;\n}\n\n.size-md .gradient-svg {\n width: 30px;\n height: 30px;\n}\n\n.size-md .gradient-path {\n stroke-width: 5;\n}\n\n.size-lg .gradient-svg {\n width: 40px;\n height: 40px;\n}\n\n.size-lg .gradient-path {\n stroke-width: 5;\n}\n\n.size-xl .gradient-svg {\n width: 60px;\n height: 60px;\n}\n\n.size-xl .gradient-path {\n stroke-width: 6;\n}\n\n@keyframes gradient-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes gradient-dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n\n/* Hover effects - Ultra smooth acceleration */\n.loader-container:hover .spinner-gradient {\n animation-duration: 1s;\n}\n\n.loader-container:hover .gradient-path {\n animation-duration: 0.6s;\n}\n\n/* Performance optimizations */\n.spinner-gradient {\n backface-visibility: hidden;\n perspective: 1000px;\n}\n\n.gradient-svg {\n transform: translateZ(0);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type LoaderVariant = 'default' | 'white';\n\n@Component({\n tag: 'bh-loader-spinner',\n styleUrl: 'bh-loader-spinner.css',\n shadow: true,\n})\nexport class BhLoaderSpinner {\n /** Loader size */\n @Prop() size: LoaderSize = 'md';\n\n /** Loader color variant - use 'white' for dark surfaces like buttons */\n @Prop() variant: LoaderVariant = 'default';\n\n /** Whether to show as overlay */\n @Prop() overlay: boolean = false;\n\n /** Message to show in overlay mode */\n @Prop() overlayMessage: string = '';\n\n /** Whether to show message */\n @Prop() showMessage: boolean = false;\n\n /** Message text */\n @Prop() message: string = 'Loading...';\n\n private renderSpinner() {\n const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';\n\n return (\n <div class={`loader-spinner variant-${this.variant}`}>\n <div class=\"spinner-gradient\">\n <svg class=\"gradient-svg\" viewBox=\"0 0 50 50\">\n <defs>\n {this.variant === 'white' ? (\n <linearGradient\n id=\"bellhop-gradient-white\"\n x1=\"0%\"\n y1=\"0%\"\n x2=\"0%\"\n y2=\"100%\"\n >\n <stop offset=\"0%\" style={{ stopColor: 'rgba(255, 255, 255, 1)' }} />\n <stop offset=\"50%\" style={{ stopColor: 'rgba(255, 255, 255, 0.8)' }} />\n <stop offset=\"100%\" style={{ stopColor: 'rgba(255, 255, 255, 0.5)' }} />\n </linearGradient>\n ) : (\n <linearGradient\n id=\"bellhop-gradient\"\n x1=\"0%\"\n y1=\"0%\"\n x2=\"0%\"\n y2=\"100%\"\n >\n <stop offset=\"0%\" style={{ stopColor: 'var(--color-accent-300)' }} />\n <stop offset=\"51%\" style={{ stopColor: 'var(--color-brand-400)' }} />\n <stop offset=\"100%\" style={{ stopColor: 'var(--color-brand-600)' }} />\n </linearGradient>\n )}\n </defs>\n <circle\n class=\"gradient-path\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke={`url(#${gradientId})`}\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n />\n </svg>\n </div>\n </div>\n );\n }\n\n private renderMessage(isOverlay: boolean) {\n const shouldShowMessage = isOverlay\n ? (this.showMessage || this.overlayMessage)\n : this.showMessage;\n\n if (!shouldShowMessage) return null;\n\n return (\n <div class=\"loader-message\">\n {isOverlay ? (this.overlayMessage || this.message) : this.message}\n </div>\n );\n }\n\n render() {\n if (this.overlay) {\n return (\n <div class=\"loader-overlay\">\n <div class=\"loader-overlay-content\">\n <div class={`loader-container size-${this.size}`}>\n {this.renderSpinner()}\n </div>\n {this.renderMessage(true)}\n </div>\n </div>\n );\n }\n\n return (\n <div class={`loader-container size-${this.size}`}>\n {this.renderSpinner()}\n {this.renderMessage(false)}\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-QjxdVLPX.js';
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-BsB67vNb.js';
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-CnQh9uSW.js';
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-CA0LmFbe.js';
|
|
6
|
+
import { d as defineCustomElement$1 } from './p-BuUjUqUh.js';
|
|
7
7
|
|
|
8
8
|
const bhDateRangePickerContentCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n 'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n 0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n 0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n 0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n 0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.date-range-picker-content{display:flex;flex-direction:column;font-family:var(--font-inter);width:fit-content}.date-pickers{display:flex;flex-direction:row;width:100%;position:relative;gap:var(--spacing-sm)}.left-picker{display:flex;flex-direction:column;width:296px}.right-picker{display:flex;flex-direction:column;width:296px}.date-pickers::after{content:'';position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:1px;height:100%;background:var(--color-neutral-200);pointer-events:none;z-index:1}@media (max-width: 768px){.date-range-picker-content{width:320px}.date-pickers{flex-direction:column}.left-picker,.right-picker{width:100%}.date-pickers::after{display:none}}";
|
|
9
9
|
|
|
@@ -208,6 +208,6 @@ function defineCustomElement() {
|
|
|
208
208
|
defineCustomElement();
|
|
209
209
|
|
|
210
210
|
export { BhDateRangePickerContent as B, defineCustomElement as d };
|
|
211
|
-
//# sourceMappingURL=p-
|
|
211
|
+
//# sourceMappingURL=p-CECXxls6.js.map
|
|
212
212
|
|
|
213
|
-
//# sourceMappingURL=p-
|
|
213
|
+
//# sourceMappingURL=p-CECXxls6.js.map
|