bromcom-ui-next 0.1.9 → 0.1.11

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAOvC,MAAM,OAAO,QAAQ;IALrB;QAUa,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAG,EAAE,CAAC;YACvB,IAAI,EAAE,yNAAyN;SAClO,CAAC,CAAC;QAEK,qBAAgB,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAClC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;YAClE,CAAC;QACL,CAAC,CAAC;KAkBL;IApDG,gBAAgB;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE,CAAC;YACT,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC;IACL,CAAC;IAGD,wBAAwB,CAAC,KAAkB;;QACvC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YAC/B,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC1B,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YACxB,OAAO,EAAE,OAAO;YAChB,QAAQ;SACX,CAAC,CAAC;IACP,CAAC;IAcD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,mEAAY,IAAI,EAAC,SAAS;gBACtB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC3B;YACZ,IAAI,CAAC,OAAO,IAAI,CACb,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS;gBACrC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACtD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,CACG,CAChB,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown',\n    styleUrl: 'dropdown.css',\n    shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() host: HTMLElement;\n\n    @Prop() text?: string;\n\n    @State() isReady: boolean = false;\n\n    @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n    protected buttonRef?: HTMLBcmButtonElement;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropdownChange',\n    })\n    bcmDropdownChange: EventEmitter<any>;\n\n    componentDidLoad() {\n        const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n        if (button) {\n            this.buttonRef = button;\n            this.isReady = true;\n        }\n    }\n\n    @Listen('bcmDropDownItemChange', { capture: true })\n    handleDropdownItemChange(event: CustomEvent) {\n        const { element, selected } = event?.detail;\n\n        this.dropdownItems?.forEach(item => {\n            if (item != element) {\n                item.selected = false;\n            }\n        });\n\n        this.bcmDropdownChange.emit({\n            element: element,\n            selected,\n        });\n    }\n\n    private dropdownClass = tv({\n        base: 'dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll',\n    });\n\n    private handleSlotChange = () => {\n        this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n        if (this.dropdownItems.length === 0) {\n            console.warn('No dropdown items found in dropdown component');\n        }\n    };\n\n    render() {\n        return (\n            <Host>\n                <bcm-button kind=\"outline\">\n                    <span part=\"text\">{this.text}</span>\n                </bcm-button>\n                {this.isReady && (\n                    <bcm-linked targetElement={this.buttonRef}>\n                        <div part=\"dropdown-container\" class={this.dropdownClass()}>\n                            <slot onSlotchange={this.handleSlotChange}></slot>\n                        </div>\n                    </bcm-linked>\n                )}\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAOvC,MAAM,OAAO,QAAQ;IALrB;QAUW,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAG,EAAE,CAAC;YACzB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEK,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACpC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;YAChE,CAAC;QACH,CAAC,CAAC;KAkBH;IApDC,gBAAgB;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,wBAAwB,CAAC,KAAkB;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YACjC,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAcD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mEAAY,IAAI,EAAC,SAAS;gBACxB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB;YACZ,IAAI,CAAC,OAAO,IAAI,CACf,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS;gBACvC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.css

@@ -1 +1 @@
-.visible{visibility:visible}.hidden{display:none}:host{--dropdown-box-min-weight:32px;--dropdown-box-max-width:384px;--dropdown-box-max-height:384px;--dropdown-box-background-color:var("--bcm-ui-color-background-base-default")}.scroll{height:140px;overflow-y:auto;width:140px}.scroll:active::-webkit-scrollbar-thumb,.scroll:focus::-webkit-scrollbar-thumb,.scroll:hover::-webkit-scrollbar-thumb{visibility:visible}.scroll::-webkit-scrollbar-thumb{background-color:#a9a9a9;visibility:hidden}.scroll::-webkit-scrollbar{height:8px;width:8px}.static{position:static}.flex{display:flex}.max-h-\[--dropdown-box-max-height\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\[--dropdown-box-min-weight\]{min-width:var(--dropdown-box-min-weight)}.max-w-\[--dropdown-box-max-weight\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\[--dropdown-box-background-color\]{background-color:var(--dropdown-box-background-color)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}
+.visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}

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

@@ -39,10 +39,10 @@ export class DropdownItem {
     }
     render() {
         var _a;
-        return (h("div", { key: '210f1b6277e07eeabd5da39d63a332ae84bed898', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: 'dab286a93e70df2389820986b12dbb099686a949', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: '4edc3ba20bd9b7f0bcb456178c72c3050e391e31', name: "left-content" }, this.icon && h("bcm-icon", { key: '867366e7d2491d1d59613f1ada4b5355ea1f67f9', "icon-name": this.icon })), h("div", { key: '845b630b0865d7e73dec69f00819105c7447fac8', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'ad70e94c42c8ee3bf01e8e14ee9d21909cacc204' }, this.text)), h("slot", { key: 'dfd1dd09b8c0c2f8927e8804087b32254fc7a05d', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, h("slot", { key: 'd8b3f85acfa5f9744cdcd7aac41cce576123ff2b', name: "left-content" }, this.icon && h("bcm-icon", { key: '4a8908b05d48832b5758fa430f8d188b2bcb2caf', "icon-name": this.icon })), h("div", { key: '233863671bd28de9c5bc45f7221398f04297dcaa', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'b2cf533aff90f2bff5328d26b964f00664d42473' }, this.text)), h("slot", { key: '3f423b125ba32fe7d593a0cb5d000b7a6db8f172', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
     }
     static get is() { return "bcm-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -254,14 +254,14 @@ export class BcmInput {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: '329961819a0b1206c3d63b9c243ff7a40ed804af', class: "bcm-ui-element" }, this.label && (h("label", { key: 'aaf17bea9b4b76e377688a09ffc6b3c03802dd0a', class: classNames('input-label font-medium', {
+        return (h("div", { key: '2ffb8fb2258052afb9a1be11c412f7ec2a77674a', class: "bcm-ui-element" }, this.label && (h("label", { key: '077c5815c06b749f8e65f05c0d71da7dec1350a9', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: 'dcd71580ffeb1d551b44bbf5855c58a0fd894df7', name: "label" }, this.label), this.required && h("span", { key: '76cd1eba6895c9764de8bd5d920ece61378a6ccf' }, "*"))), h("div", { key: 'd9b6a175dc8b3489ebb48aa56baa8808fdffec55', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '5557b58dba9ccfe42b04bb29169dfce72a460423', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '7f2e74230b52334ca860fda49e5ffd78b3b5f7f6', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '74bad4cd327a1f3b40f793073b4e842915438ad3', name: "prefix" }))), h("input", { key: 'bef941d6c710a5f62a7fc8b6c92dd4a7970dba25', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: '000769fffb5af147a41919393b527b36158b9471', class: "flex items-center gap-2 px-2" }, h("slot", { key: '0064416ee9905b16508b10892e2eb00b7bc3923a', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'b7dd33c6c1c6b5dff32206d493b9c76b927dd535', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '307629a3cb19870c5e32cb2fa7124278ae273b97', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '7642829eb05ddbb9144a46f635c96bdf1c9ec826', name: "label" }, this.label), this.required && h("span", { key: '37e63e0fca75c432750797617ecdca1ef400365d' }, "*"))), h("div", { key: '6db34371d3c3694d9bfd9b5f7660bda0c381c27d', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '1fe5041c83183798eb81f895e7e8eb4c1f487e77', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'adf3a9c5517b8ea547b8758612cad7bae3f1ce06', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '827685ff7970556c419da213816a3fd7170d5412', name: "prefix" }))), h("input", { key: '620916eef85c0491c7ce8c315ed30c4509452008', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'd4a6920200111d0c93719750db59f49c7e32e171', class: "flex items-center gap-2 px-2" }, h("slot", { key: '4d3879324fc478fef659acd21eefaefe5b2c9b9e', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '04ffae44189d3a0bc20e08bc1759c318d8552a06', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '81e317ab588b7bf2de6e19145d81665c1e4331fd', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',