@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/p-CbeeTFys.js.map

@@ -0,0 +1 @@
+{"file":"p-CbeeTFys.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-pagination/bh-pagination.css?tag=bh-pagination&encapsulation=shadow","src/components/bh-pagination/bh-pagination.tsx"],"sourcesContent":["/* =============================================================================\n   bh-pagination Component Styles\n   ============================================================================= */\n\n:host {\n  display: block;\n  font-family: var(--font-family-body, 'Inter', sans-serif);\n}\n\n/* -----------------------------------------------------------------------------\n   Base Pagination Container\n   ----------------------------------------------------------------------------- */\n\n.pagination {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--sp-4, 1rem);\n  padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);\n  background-color: var(--color-white, #fff);\n  border-top: 1px solid var(--color-neutral-200, #e2e4eb);\n}\n\n/* -----------------------------------------------------------------------------\n   Size Variants\n   ----------------------------------------------------------------------------- */\n\n.pagination-sm {\n  padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);\n  gap: var(--sp-3, 0.75rem);\n}\n\n.pagination-sm .pagination-info-text,\n.pagination-sm .pagination-page-size-label {\n  font-size: 0.75rem;\n}\n\n.pagination-sm .pagination-btn {\n  width: 28px;\n  height: 28px;\n}\n\n.pagination-sm .pagination-btn .material-symbols-outlined {\n  font-size: 18px;\n}\n\n.pagination-sm .pagination-select {\n  height: 28px;\n  font-size: 0.75rem;\n  padding: 0 var(--sp-5, 1.25rem) 0 var(--sp-2, 0.5rem);\n}\n\n.pagination-md {\n  /* Default - no changes needed */\n}\n\n.pagination-lg {\n  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);\n  gap: var(--sp-5, 1.25rem);\n}\n\n.pagination-lg .pagination-info-text,\n.pagination-lg .pagination-page-size-label {\n  font-size: 0.9375rem;\n}\n\n.pagination-lg .pagination-btn {\n  width: 40px;\n  height: 40px;\n}\n\n.pagination-lg .pagination-btn .material-symbols-outlined {\n  font-size: 24px;\n}\n\n.pagination-lg .pagination-select {\n  height: 40px;\n  font-size: 0.9375rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Disabled State\n   ----------------------------------------------------------------------------- */\n\n.pagination-disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n   Info Section\n   ----------------------------------------------------------------------------- */\n\n.pagination-info {\n  display: flex;\n  align-items: center;\n}\n\n.pagination-info-text {\n  font-size: 0.875rem;\n  color: var(--color-neutral-600, #5c627a);\n  white-space: nowrap;\n}\n\n/* -----------------------------------------------------------------------------\n   Controls Section\n   ----------------------------------------------------------------------------- */\n\n.pagination-controls {\n  display: flex;\n  align-items: center;\n  gap: var(--sp-4, 1rem);\n}\n\n/* -----------------------------------------------------------------------------\n   Page Size Selector\n   ----------------------------------------------------------------------------- */\n\n.pagination-page-size {\n  display: flex;\n  align-items: center;\n  gap: var(--sp-2, 0.5rem);\n}\n\n.pagination-page-size-label {\n  font-size: 0.875rem;\n  color: var(--color-neutral-600, #5c627a);\n  white-space: nowrap;\n}\n\n.pagination-select {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  background-color: var(--color-white, #fff);\n  border: 1px solid var(--color-neutral-300, #c0c4d4);\n  border-radius: var(--radius-md, 6px);\n  padding: 0 var(--sp-6, 1.5rem) 0 var(--sp-3, 0.75rem);\n  height: 32px;\n  font-size: 0.875rem;\n  color: var(--color-neutral-900, #141624);\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n\n  /* Custom dropdown arrow */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235c627a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 4px center;\n  background-size: 16px;\n}\n\n.pagination-select:hover:not(:disabled) {\n  border-color: var(--color-neutral-400, #939ab4);\n}\n\n.pagination-select:focus {\n  outline: none;\n  border-color: var(--color-brand-500, #6366f1);\n  box-shadow: 0 0 0 3px var(--color-brand-100, #e0e1fc);\n}\n\n.pagination-select:disabled {\n  background-color: var(--color-neutral-100, #f0f1f5);\n  cursor: not-allowed;\n}\n\n/* -----------------------------------------------------------------------------\n   Navigation Buttons\n   ----------------------------------------------------------------------------- */\n\n.pagination-nav {\n  display: flex;\n  align-items: center;\n  gap: var(--sp-1, 0.25rem);\n}\n\n.pagination-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-md, 6px);\n  background-color: transparent;\n  color: var(--color-neutral-600, #5c627a);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.pagination-btn .material-symbols-outlined {\n  font-size: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.pagination-btn:hover:not(:disabled) {\n  background-color: var(--color-neutral-100, #f0f1f5);\n  color: var(--color-neutral-900, #141624);\n}\n\n.pagination-btn:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-brand-100, #e0e1fc);\n}\n\n.pagination-btn:active:not(:disabled) {\n  background-color: var(--color-neutral-200, #e2e4eb);\n}\n\n.pagination-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* -----------------------------------------------------------------------------\n   Responsive Adjustments\n   ----------------------------------------------------------------------------- */\n\n@media (max-width: 640px) {\n  .pagination {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--sp-3, 0.75rem);\n  }\n\n  .pagination-info {\n    justify-content: center;\n  }\n\n  .pagination-controls {\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  .pagination-page-size {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .pagination-nav {\n    justify-content: center;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\n\nexport type PaginationSize = 'sm' | 'md' | 'lg';\n\nexport interface PaginationChangeEvent {\n  page: number;\n  pageSize: number;\n}\n\n@Component({\n  tag: 'bh-pagination',\n  styleUrl: 'bh-pagination.css',\n  shadow: true,\n})\nexport class BhPagination {\n  /**\n   * Current page (1-indexed)\n   */\n  @Prop({ mutable: true }) page: number = 1;\n\n  /**\n   * Total number of items\n   */\n  @Prop() totalItems: number = 0;\n\n  /**\n   * Number of items per page\n   */\n  @Prop({ mutable: true }) pageSize: number = 10;\n\n  /**\n   * Available page size options\n   */\n  @Prop() pageSizeOptions: number[] = [10, 25, 50, 100];\n\n  /**\n   * Show page size selector\n   */\n  @Prop() showPageSizeSelector: boolean = true;\n\n  /**\n   * Show item count info (e.g., \"Showing 1 to 10 of 100 results\")\n   */\n  @Prop() showItemCount: boolean = true;\n\n  /**\n   * Show first/last page buttons\n   */\n  @Prop() showFirstLastButtons: boolean = true;\n\n  /**\n   * Size variant of the pagination\n   */\n  @Prop() size: PaginationSize = 'md';\n\n  /**\n   * Whether the pagination is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Label for \"Rows per page\" text (for i18n)\n   */\n  @Prop() rowsPerPageLabel: string = 'Rows per page:';\n\n  /**\n   * Label template for showing results (use {start}, {end}, {total} placeholders)\n   */\n  @Prop() showingResultsLabel: string = 'Showing {start} to {end} of {total} results';\n\n  /**\n   * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)\n   */\n  @Prop() pageInfoLabel: string = 'Page {page} of {totalPages}';\n\n  @State() internalPage: number = 1;\n  @State() internalPageSize: number = 10;\n\n  /**\n   * Emitted when the page changes\n   */\n  @Event() bhPageChange!: EventEmitter<PaginationChangeEvent>;\n\n  /**\n   * Emitted when page size changes\n   */\n  @Event() bhPageSizeChange!: EventEmitter<PaginationChangeEvent>;\n\n  componentWillLoad() {\n    this.internalPage = this.page;\n    this.internalPageSize = this.pageSize;\n  }\n\n  private get totalPages(): number {\n    return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));\n  }\n\n  private get startItem(): number {\n    if (this.totalItems === 0) return 0;\n    return (this.internalPage - 1) * this.internalPageSize + 1;\n  }\n\n  private get endItem(): number {\n    return Math.min(this.internalPage * this.internalPageSize, this.totalItems);\n  }\n\n  private get canGoPrevious(): boolean {\n    return this.internalPage > 1 && !this.disabled;\n  }\n\n  private get canGoNext(): boolean {\n    return this.internalPage < this.totalPages && !this.disabled;\n  }\n\n  private goToPage(newPage: number) {\n    if (this.disabled) return;\n\n    const page = Math.max(1, Math.min(newPage, this.totalPages));\n    if (page !== this.internalPage) {\n      this.internalPage = page;\n      this.page = page;\n      this.bhPageChange.emit({ page, pageSize: this.internalPageSize });\n    }\n  }\n\n  private handlePageSizeChange(event: Event) {\n    if (this.disabled) return;\n\n    const select = event.target as HTMLSelectElement;\n    const newPageSize = parseInt(select.value, 10);\n\n    if (newPageSize !== this.internalPageSize) {\n      this.internalPageSize = newPageSize;\n      this.pageSize = newPageSize;\n\n      // Reset to page 1 when page size changes, or adjust if current page is now out of bounds\n      const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newPageSize));\n      const newPage = Math.min(this.internalPage, newTotalPages);\n\n      if (newPage !== this.internalPage) {\n        this.internalPage = newPage;\n        this.page = newPage;\n      }\n\n      this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });\n    }\n  }\n\n  private goToFirst = () => this.goToPage(1);\n  private goToPrevious = () => this.goToPage(this.internalPage - 1);\n  private goToNext = () => this.goToPage(this.internalPage + 1);\n  private goToLast = () => this.goToPage(this.totalPages);\n\n  private getInfoText(): string {\n    if (this.totalItems === 0) {\n      return 'No results';\n    }\n\n    if (this.showItemCount && this.totalItems > 0) {\n      return this.showingResultsLabel\n        .replace('{start}', String(this.startItem))\n        .replace('{end}', String(this.endItem))\n        .replace('{total}', String(this.totalItems));\n    }\n\n    return this.pageInfoLabel\n      .replace('{page}', String(this.internalPage))\n      .replace('{totalPages}', String(this.totalPages));\n  }\n\n  render() {\n    const paginationClasses = {\n      'pagination': true,\n      [`pagination-${this.size}`]: true,\n      'pagination-disabled': this.disabled,\n    };\n\n    return (\n      <div class={paginationClasses} role=\"navigation\" aria-label=\"Pagination\">\n        {/* Info section */}\n        <div class=\"pagination-info\">\n          <span class=\"pagination-info-text\">{this.getInfoText()}</span>\n        </div>\n\n        {/* Controls section */}\n        <div class=\"pagination-controls\">\n          {/* Page size selector */}\n          {this.showPageSizeSelector && (\n            <div class=\"pagination-page-size\">\n              <span class=\"pagination-page-size-label\">{this.rowsPerPageLabel}</span>\n              <select\n                class=\"pagination-select\"\n                onChange={(e) => this.handlePageSizeChange(e)}\n                disabled={this.disabled}\n                aria-label=\"Select page size\"\n              >\n                {this.pageSizeOptions.map((size) => (\n                  <option key={size} value={String(size)} selected={size === this.internalPageSize}>\n                    {size}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Navigation buttons */}\n          <div class=\"pagination-nav\">\n            {this.showFirstLastButtons && (\n              <button\n                type=\"button\"\n                class=\"pagination-btn\"\n                onClick={this.goToFirst}\n                disabled={!this.canGoPrevious}\n                aria-label=\"Go to first page\"\n              >\n                <span class=\"material-symbols-outlined\">first_page</span>\n              </button>\n            )}\n\n            <button\n              type=\"button\"\n              class=\"pagination-btn\"\n              onClick={this.goToPrevious}\n              disabled={!this.canGoPrevious}\n              aria-label=\"Go to previous page\"\n            >\n              <span class=\"material-symbols-outlined\">chevron_left</span>\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"pagination-btn\"\n              onClick={this.goToNext}\n              disabled={!this.canGoNext}\n              aria-label=\"Go to next page\"\n            >\n              <span class=\"material-symbols-outlined\">chevron_right</span>\n            </button>\n\n            {this.showFirstLastButtons && (\n              <button\n                type=\"button\"\n                class=\"pagination-btn\"\n                onClick={this.goToLast}\n                disabled={!this.canGoNext}\n                aria-label=\"Go to last page\"\n              >\n                <span class=\"material-symbols-outlined\">last_page</span>\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-Ccq-Rk5W.js

@@ -0,0 +1,204 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$5 } from './p-C69LfZib.js';
+import { d as defineCustomElement$4 } from './p-DQUicoqi.js';
+import { d as defineCustomElement$3 } from './p-DufL1yr4.js';
+import { d as defineCustomElement$2 } from './p-BZELvMID.js';
+import { d as defineCustomElement$1 } from './p-5LJWVh2v.js';
+
+const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";
+
+const BhCheckboxGroupItem = /*@__PURE__*/ proxyCustomElement(class BhCheckboxGroupItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemChange = createEvent(this, "bhItemChange");
+    }
+    /**
+     * The type of input control
+     */
+    type = 'checkbox';
+    /**
+     * The size variant
+     */
+    size = 'sm';
+    /**
+     * Unique value identifier for this item
+     */
+    value = '';
+    /**
+     * Whether the item is checked (for checkbox type)
+     */
+    checked = false;
+    /**
+     * Whether the item is selected (for radio type)
+     */
+    selected = false;
+    /**
+     * Whether the item is disabled
+     */
+    disabled = false;
+    /**
+     * Material Symbol icon name (for icon-simple type)
+     */
+    icon = '';
+    /**
+     * Title text
+     */
+    itemTitle = '';
+    /**
+     * Subtitle text (inline with title)
+     */
+    subtitle = '';
+    /**
+     * Description text
+     */
+    description = '';
+    /**
+     * Radio group name (for radio type)
+     */
+    name = '';
+    isHovered = false;
+    isFocused = false;
+    /**
+     * Emitted when the item state changes
+     */
+    bhItemChange;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            if (!this.selected) {
+                this.selected = true;
+                this.bhItemChange.emit({ value: this.value, checked: true });
+            }
+        }
+        else {
+            this.checked = !this.checked;
+            this.bhItemChange.emit({ value: this.value, checked: this.checked });
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled)
+            this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        if (!this.disabled)
+            this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleCheckboxChange = (event) => {
+        event.stopPropagation();
+        this.checked = event.detail;
+        this.bhItemChange.emit({ value: this.value, checked: this.checked });
+    };
+    handleRadioChange = (event) => {
+        event.stopPropagation();
+        this.selected = true;
+        this.bhItemChange.emit({ value: this.value, checked: true });
+    };
+    render() {
+        const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;
+        const containerClasses = {
+            'checkbox-group-item': true,
+            [`checkbox-group-item-${this.size}`]: true,
+            [`checkbox-group-item-${this.type}`]: true,
+            'checkbox-group-item-active': isActive,
+            'checkbox-group-item-disabled': this.disabled,
+            'checkbox-group-item-hovered': this.isHovered,
+            'checkbox-group-item-focused': this.isFocused,
+        };
+        const renderInput = () => {
+            if (this.type === 'radio') {
+                return (h("bh-radio-button", { size: this.size, selected: this.selected, disabled: this.disabled, value: this.value, name: this.name, onBhChange: this.handleRadioChange }));
+            }
+            // For icon-simple, use `selected` state; for checkbox, use `checked` state
+            const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;
+            return (h("bh-checkbox", { size: this.size, checked: isChecked, disabled: this.disabled, onBhChange: this.handleCheckboxChange }));
+        };
+        const renderIcon = () => {
+            if (this.type === 'icon-simple' && this.icon) {
+                return (h("bh-featured-icon", { size: "sm", icon: this.icon, color: "gray", iconStyle: "outlined" }));
+            }
+            return null;
+        };
+        const renderContent = () => (h("div", { class: "item-content" }, h("div", { class: "item-text-row" }, this.itemTitle && h("span", { class: "item-title" }, this.itemTitle), this.subtitle && h("span", { class: "item-subtitle" }, this.subtitle)), this.description && h("p", { class: "item-description" }, this.description)));
+        return (h(Host, null, h("div", { class: containerClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": String(isActive), "aria-disabled": this.disabled ? 'true' : null }, this.type === 'icon-simple' ? (
+        // Icon Simple: icon + content | input
+        [renderIcon(), renderContent(), renderInput()]) : (
+        // Checkbox/Radio: input | content
+        [renderInput(), renderContent()]))));
+    }
+    static get style() { return bhCheckboxGroupItemCss; }
+}, [769, "bh-checkbox-group-item", {
+        "type": [1],
+        "size": [1],
+        "value": [1],
+        "checked": [1028],
+        "selected": [1028],
+        "disabled": [4],
+        "icon": [1],
+        "itemTitle": [1, "item-title"],
+        "subtitle": [1],
+        "description": [1],
+        "name": [1],
+        "isHovered": [32],
+        "isFocused": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-checkbox-group-item", "bh-checkbox", "bh-featured-icon", "bh-label", "bh-radio-button", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-checkbox-group-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCheckboxGroupItem);
+            }
+            break;
+        case "bh-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-featured-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-radio-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCheckboxGroupItem as B, defineCustomElement as d };
+//# sourceMappingURL=p-Ccq-Rk5W.js.map
+
+//# sourceMappingURL=p-Ccq-Rk5W.js.map

package/dist/components/p-Ccq-Rk5W.js.map

@@ -0,0 +1 @@
+{"file":"p-Ccq-Rk5W.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,4mEAA4mE;;MCU9nE,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAC9B;;AAEG;IACK,IAAI,GAA0B,UAAU;AAEhD;;AAEG;IACK,IAAI,GAA0B,IAAI;AAE1C;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;AAEG;IACsB,OAAO,GAAY,KAAK;AAEjD;;AAEG;IACsB,QAAQ,GAAY,KAAK;AAElD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,IAAI,GAAW,EAAE;AAGzB;;AAEG;IACK,SAAS,GAAW,EAAE;AAE9B;;AAEG;IACK,QAAQ,GAAW,EAAE;AAE7B;;AAEG;IACK,WAAW,GAAW,EAAE;AAEhC;;AAEG;IACK,IAAI,GAAW,EAAE;IAEhB,SAAS,GAAY,KAAK;IAC1B,SAAS,GAAY,KAAK;AAEnC;;AAEG;AACM,IAAA,YAAY;IAEb,WAAW,GAAG,MAAK;QACzB,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;AACxD,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;;aAEzD;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;AAExE,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,WAAW,EAAE;;AAEtB,KAAC;IAEO,gBAAgB,GAAG,MAAK;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AAC3C,KAAC;IAEO,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,KAAC;IAEO,WAAW,GAAG,MAAK;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AAC3C,KAAC;IAEO,UAAU,GAAG,MAAK;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,KAAC;AAEO,IAAA,oBAAoB,GAAG,CAAC,KAA2B,KAAI;QAC7D,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACtE,KAAC;AAEO,IAAA,iBAAiB,GAAG,CAAC,KAA0B,KAAI;QACzD,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC9D,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO;AAEtG,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,uBAAuB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1C,YAAA,CAAC,uBAAuB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1C,YAAA,4BAA4B,EAAE,QAAQ;YACtC,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;SAC9C;QAED,MAAM,WAAW,GAAG,MAAK;AACvB,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,QACE,CACE,CAAA,iBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAAA,CAClC;;;AAIN,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO;AAC5E,YAAA,QACE,CACE,CAAA,aAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,oBAAoB,EACrC,CAAA;AAEN,SAAC;QAED,MAAM,UAAU,GAAG,MAAK;YACtB,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC5C,QACE,wBACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,UAAU,EACpB,CAAA;;AAGN,YAAA,OAAO,IAAI;AACb,SAAC;AAED,QAAA,MAAM,aAAa,GAAG,OACpB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,SAAS,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,EAClE,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CAChE,EACL,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CACnE,CACP;QAED,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,OAAO,GAAG,UAAU,EACpC,cAAA,EAAA,MAAM,CAAC,QAAQ,CAAC,mBACf,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE3C,IAAI,CAAC,IAAI,KAAK,aAAa;;AAE1B,QAAA,CAAC,UAAU,EAAE,EAAE,aAAa,EAAE,EAAE,WAAW,EAAE,CAAC;;QAG9C,CAAC,WAAW,EAAE,EAAE,aAAa,EAAE,CAAC,CACjC,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox-group-item/bh-checkbox-group-item.css?tag=bh-checkbox-group-item&encapsulation=shadow","src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.checkbox-group-item {\n  display: flex;\n  align-items: flex-start;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-sizing: border-box;\n  font-family: var(--font-inter);\n  outline: none;\n}\n\n/* Size variants */\n.checkbox-group-item-sm {\n  padding: var(--spacing-xl);\n  gap: var(--spacing-md);\n}\n\n.checkbox-group-item-md {\n  padding: var(--spacing-xl) var(--spacing-2xl);\n  gap: var(--spacing-lg);\n}\n\n/* Icon simple type has more gap */\n.checkbox-group-item-icon-simple {\n  gap: var(--spacing-lg);\n}\n\n/* Active/Selected state */\n.checkbox-group-item-active {\n  border-color: var(--color-brand-600);\n  box-shadow: inset 0 0 0 1px var(--color-brand-600);\n  background: var(--color-brand-50);\n}\n\n/* Hover state */\n.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  background: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n}\n\n/* Focus state */\n.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100);\n}\n\n.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled) {\n  box-shadow: inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100);\n}\n\n/* Disabled state */\n.checkbox-group-item-disabled {\n  background: var(--color-neutral-100);\n  border-color: var(--color-neutral-200);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Content container */\n.item-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: var(--spacing-xs);\n  min-width: 0;\n}\n\n/* Title row with title and subtitle */\n.item-text-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  flex-wrap: wrap;\n}\n\n/* Title */\n.item-title {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-900);\n}\n\n/* Subtitle (inline with title) */\n.item-subtitle {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n}\n\n/* Description */\n.item-description {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n  margin: 0;\n}\n\n/* Disabled text styles */\n.checkbox-group-item-disabled .item-title,\n.checkbox-group-item-disabled .item-subtitle,\n.checkbox-group-item-disabled .item-description {\n  color: var(--color-neutral-400);\n}\n\n/* Prevent inner checkbox/radio from capturing clicks - let the card handle it */\n.checkbox-group-item bh-checkbox,\n.checkbox-group-item bh-radio-button {\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox-group-item',\n  styleUrl: 'bh-checkbox-group-item.css',\n  shadow: true,\n})\nexport class BhCheckboxGroupItem {\n  /**\n   * The type of input control\n   */\n  @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n  /**\n   * The size variant\n   */\n  @Prop() size: CheckboxGroupItemSize = 'sm';\n\n  /**\n   * Unique value identifier for this item\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether the item is checked (for checkbox type)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Whether the item is selected (for radio type)\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Material Symbol icon name (for icon-simple type)\n   */\n  @Prop() icon: string = '';\n\n\n  /**\n   * Title text\n   */\n  @Prop() itemTitle: string = '';\n\n  /**\n   * Subtitle text (inline with title)\n   */\n  @Prop() subtitle: string = '';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Radio group name (for radio type)\n   */\n  @Prop() name: string = '';\n\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the item state changes\n   */\n  @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      if (!this.selected) {\n        this.selected = true;\n        this.bhItemChange.emit({ value: this.value, checked: true });\n      }\n    } else {\n      this.checked = !this.checked;\n      this.bhItemChange.emit({ value: this.value, checked: this.checked });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.disabled) this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    if (!this.disabled) this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.checked = event.detail;\n    this.bhItemChange.emit({ value: this.value, checked: this.checked });\n  };\n\n  private handleRadioChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.selected = true;\n    this.bhItemChange.emit({ value: this.value, checked: true });\n  };\n\n  render() {\n    const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n    const containerClasses = {\n      'checkbox-group-item': true,\n      [`checkbox-group-item-${this.size}`]: true,\n      [`checkbox-group-item-${this.type}`]: true,\n      'checkbox-group-item-active': isActive,\n      'checkbox-group-item-disabled': this.disabled,\n      'checkbox-group-item-hovered': this.isHovered,\n      'checkbox-group-item-focused': this.isFocused,\n    };\n\n    const renderInput = () => {\n      if (this.type === 'radio') {\n        return (\n          <bh-radio-button\n            size={this.size}\n            selected={this.selected}\n            disabled={this.disabled}\n            value={this.value}\n            name={this.name}\n            onBhChange={this.handleRadioChange}\n          />\n        );\n      }\n      // For icon-simple, use `selected` state; for checkbox, use `checked` state\n      const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n      return (\n        <bh-checkbox\n          size={this.size}\n          checked={isChecked}\n          disabled={this.disabled}\n          onBhChange={this.handleCheckboxChange}\n        />\n      );\n    };\n\n    const renderIcon = () => {\n      if (this.type === 'icon-simple' && this.icon) {\n        return (\n          <bh-featured-icon\n            size=\"sm\"\n            icon={this.icon}\n            color=\"gray\"\n            iconStyle=\"outlined\"\n          />\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => (\n      <div class=\"item-content\">\n        <div class=\"item-text-row\">\n          {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n          {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n        </div>\n        {this.description && <p class=\"item-description\">{this.description}</p>}\n      </div>\n    );\n\n    return (\n      <Host>\n        <div\n          class={containerClasses}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          tabIndex={this.disabled ? -1 : 0}\n          role={this.type === 'radio' ? 'radio' : 'checkbox'}\n          aria-checked={String(isActive)}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          {this.type === 'icon-simple' ? (\n            // Icon Simple: icon + content | input\n            [renderIcon(), renderContent(), renderInput()]\n          ) : (\n            // Checkbox/Radio: input | content\n            [renderInput(), renderContent()]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}