npm - bromcom-ui-next - Versions diffs - 0.1.21 → 0.1.23 - Mend

bromcom-ui-next 0.1.21 → 0.1.23

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.

Files changed (454) hide show

package/dist/cjs/bcm-checkbox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-checkbox.entry.cjs.js","mappings":"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","names":["generateId","tv","h"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/*\n @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n /\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /* Reference to the host element /\n @Element() el: HTMLElement;\n\n /\n Unique ID for the component. Automatically generated if not specified.\n /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /\n Label text to display next to the checkbox\n /\n @Prop()\n label?: string;\n\n /\n Name attribute for the checkbox when used in a form\n /\n @Prop()\n name: string;\n\n /\n Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n /\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /\n Size variant of the checkbox\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Determines if the checkbox is checked\n /\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /\n Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n /\n @Prop()\n error: boolean = false;\n\n /\n Determines if the checkbox is disabled\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Controls the position of the label relative to the checkbox\n /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /\n Internal state to track checked status\n /\n @State() internalChecked: boolean;\n\n /\n Event emitted when the checked state changes\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /* Reference to the underlying input element /\n private inputElement: HTMLInputElement;\n\n /\n Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n /\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /\n Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n /\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /\n Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n /\n @Watch('checked')\n syncCheckedProp(newValue: boolean \| undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /\n Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n /\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /\n Handles change events on the checkbox\n * Updates state and emits the change event\n /\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /\n Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n /\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /\n Tailwind Variants definition for the component\n * Configures styling based on component props\n /\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /\n Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' \|\| this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label \|\| 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-checkbox.entry.cjs.js","mappings":"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","names":["generateId","tv","h"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/*\n @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n /\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /* Reference to the host element /\n @Element() el: HTMLElement;\n\n /\n Unique ID for the component. Automatically generated if not specified.\n /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /\n Label text to display next to the checkbox\n /\n @Prop()\n label?: string;\n\n /\n Name attribute for the checkbox when used in a form\n /\n @Prop()\n name: string;\n\n /\n Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n /\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /\n Size variant of the checkbox\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Determines if the checkbox is checked\n /\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /\n Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n /\n @Prop()\n error: boolean = false;\n\n /\n Determines if the checkbox is disabled\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Controls the position of the label relative to the checkbox\n /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /\n Internal state to track checked status\n /\n @State() internalChecked: boolean;\n\n /\n Event emitted when the checked state changes\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /* Reference to the underlying input element /\n private inputElement: HTMLInputElement;\n\n /\n Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n /\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /\n Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n /\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /\n Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n /\n @Watch('checked')\n syncCheckedProp(newValue: boolean \| undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /\n Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n /\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /\n Handles change events on the checkbox\n * Updates state and emits the change event\n /\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /\n Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n /\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /\n Tailwind Variants definition for the component\n * Configures styling based on component props\n /\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /\n Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' \|\| this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label \|\| 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bcm-checkbox.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bcm-checkbox.entry.cjs.js","sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /** Reference to the host element */\n @Element() el: HTMLElement;\n\n /**\n * Unique ID for the component. Automatically generated if not specified.\n */\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /**\n * Label text to display next to the checkbox\n */\n @Prop()\n label?: string;\n\n /**\n * Name attribute for the checkbox when used in a form\n */\n @Prop()\n name: string;\n\n /**\n * Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n */\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Size variant of the checkbox\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Determines if the checkbox is checked\n */\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n */\n @Prop()\n error: boolean = false;\n\n /**\n * Determines if the checkbox is disabled\n */\n @Prop()\n disabled: boolean = false;\n\n /**\n * Controls the position of the label relative to the checkbox\n */\n @Prop()\n labelPosition: 'left' | 'right' = 'right';\n\n /**\n * Internal state to track checked status\n */\n @State() internalChecked: boolean;\n\n /**\n * Event emitted when the checked state changes\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /** Reference to the underlying input element */\n private inputElement: HTMLInputElement;\n\n /**\n * Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n */\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /**\n * Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n */\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /**\n * Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n */\n @Watch('checked')\n syncCheckedProp(newValue: boolean | undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /**\n * Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n */\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /**\n * Handles change events on the checkbox\n * Updates state and emits the change event\n */\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /**\n * Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n */\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /**\n * Tailwind Variants definition for the component\n * Configures styling based on component props\n */\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /**\n * Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' || this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label || 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"names":["generateId","tv","h"],"mappings":"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"}

package/dist/cjs/bcm-chip.cjs.entry.js CHANGED Viewed

@@ -1,9 +1,7 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-6710808e.js');
-const tv = require('./tv-d2e35446.js');
+var index = require('./index-DFpZVb11.js');
+var tv = require('./tv-ngpIbGlG.js');
 const STATUS_COLORS = {
     info: 'blue',
@@ -13,7 +11,6 @@ const STATUS_COLORS = {
 };
 const chipCss = ":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";
-const BcmChipStyle0 = chipCss;
 const BcmChip = class {
     constructor(hostRef) {
@@ -123,8 +120,9 @@ const BcmChip = class {
         return (index.h("div", { key: '0c57684b2042bcbc6b5950c8a51412eea46bf9e7', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '5eef26442dbe670cfa317998b349fa1794c845f8' }), this.dismissible && index.h("bcm-icon", { key: '5ca7c5b1dfb83db893772208ea792d9272cea649', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
 };
-BcmChip.style = BcmChipStyle0;
+BcmChip.style = chipCss;
 exports.bcm_chip = BcmChip;
+//# sourceMappingURL=bcm-chip.entry.cjs.js.map
 //# sourceMappingURL=bcm-chip.cjs.entry.js.map

package/dist/cjs/bcm-chip.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-chip.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' \| 'medium' \| 'large';\nexport type ChipKind = 'filled' \| 'outlined' \| 'text';\nexport type ChipStatus = 'info' \| 'error' \| 'warning' \| 'success' \| 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n \n @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n \n @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n \n @prop {ChipSize} size - Defines the size of the chip: 'small' \| 'medium' \| 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' \| 'outlined' \| 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' \| 'error' \| 'warning' \| 'success' \| 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n \n @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n \n @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n /\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /* Chip size variant /\n @Prop()\n size?: ChipSize = 'medium';\n\n /* Chip style variant /\n @Prop()\n kind?: ChipKind = 'filled';\n\n /* Chip status /\n @Prop()\n status?: ChipStatus = 'default';\n\n /* Whether chip can be dismissed /\n @Prop()\n dismissible?: boolean = false;\n\n /* Whether chip is disabled /\n @Prop()\n disabled?: boolean = false;\n\n /* Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-chip.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' \| 'medium' \| 'large';\nexport type ChipKind = 'filled' \| 'outlined' \| 'text';\nexport type ChipStatus = 'info' \| 'error' \| 'warning' \| 'success' \| 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n \n @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n \n @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n \n @prop {ChipSize} size - Defines the size of the chip: 'small' \| 'medium' \| 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' \| 'outlined' \| 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' \| 'error' \| 'warning' \| 'success' \| 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n \n @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n \n @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n /\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /* Chip size variant /\n @Prop()\n size?: ChipSize = 'medium';\n\n /* Chip style variant /\n @Prop()\n kind?: ChipKind = 'filled';\n\n /* Chip status /\n @Prop()\n status?: ChipStatus = 'default';\n\n /* Whether chip can be dismissed /\n @Prop()\n dismissible?: boolean = false;\n\n /* Whether chip is disabled /\n @Prop()\n disabled?: boolean = false;\n\n /* Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bcm-chip.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bcm-chip.entry.cjs.js","sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /** Chip size variant */\n @Prop()\n size?: ChipSize = 'medium';\n\n /** Chip style variant */\n @Prop()\n kind?: ChipKind = 'filled';\n\n /** Chip status */\n @Prop()\n status?: ChipStatus = 'default';\n\n /** Whether chip can be dismissed */\n @Prop()\n dismissible?: boolean = false;\n\n /** Whether chip is disabled */\n @Prop()\n disabled?: boolean = false;\n\n /** Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"names":["tv","h"],"mappings":"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"}

package/dist/cjs/bcm-divider.cjs.entry.js CHANGED Viewed

@@ -1,12 +1,9 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-6710808e.js');
-const tv = require('./tv-d2e35446.js');
+var index = require('./index-DFpZVb11.js');
+var tv = require('./tv-ngpIbGlG.js');
 const dividerCss = ".block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.static{position:static}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\\[1px\\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\\[--bcm-divider-border\\]{border-color:var(--bcm-divider-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmDividerStyle0 = dividerCss;
 const Divider = class {
     constructor(hostRef) {
@@ -74,8 +71,9 @@ const Divider = class {
             }) }));
     }
 };
-Divider.style = BcmDividerStyle0;
+Divider.style = dividerCss;
 exports.bcm_divider = Divider;
+//# sourceMappingURL=bcm-divider.entry.cjs.js.map
 //# sourceMappingURL=bcm-divider.cjs.entry.js.map

package/dist/cjs/bcm-divider.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-divider.entry.cjs.js","mappings":"~~;;;;;;;~~AAAA,MAAM,UAAU,GAAG,itBAAitB,~~CAAC~~;~~AACruB~~,~~yBAAe~~,~~UAAU~~;;~~MCcZ,OAAO~~;~~IALpB;;;;;;;;;QAcE~~,~~cAAS~~,GAA8B,YAAY,~~CAAC;;;;;;;;QAUpD~~,~~YAAO~~,GAAkC,OAAO,~~CAAC;;;;;;;;;;;;QAcjD~~,~~SAAI~~,GAAiC,QAAQ~~,CAAC~~;~~QAEtC~~,~~iBAAY~~,GAAGA,KAAE,CACvB;~~YACE~~,IAAI,EAAE,+BAA+B;~~YACrC~~,QAAQ,EAAE;~~gBACR~~,SAAS,EAAE;~~oBACT~~,UAAU,EAAE,iBAAiB;~~oBAC7B~~,QAAQ,EAAE,iBAAiB;~~iBAC5B~~;~~gBACD~~,OAAO,EAAE;~~oBACP~~,KAAK,EAAE,cAAc;~~oBACrB~~,MAAM,EAAE,eAAe;~~oBACvB~~,MAAM,EAAE,eAAe;~~iBACxB~~;~~gBACD~~,IAAI,EAAE;~~oBACJ~~,KAAK,EAAE,cAAc;~~oBACrB~~,MAAM,EAAE,UAAU;~~oBAClB~~,KAAK,EAAE,UAAU;~~iBAClB~~;~~aACF~~;~~YACD~~,eAAe,EAAE;~~gBACf~~,SAAS,EAAE,YAAY;~~gBACvB~~,OAAO,EAAE,OAAO;~~gBAChB~~,IAAI,EAAE,QAAQ;~~aACf~~;SACF,EACD;~~YACE~~,OAAO,EAAE,KAAK;~~SACf~~,CACF~~,CAAC~~;~~KAeH~~;IAbC,MAAM;QACJ,QACEC,~~kEACE~~,IAAI,EAAC,WAAW,~~sBACE~~,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,~~GACG~~,~~EACP;KACH;;;;;;~~","names":["tv","h"],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n /\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /\n @prop {('horizontal'\|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n @prop {('solid'\|'dashed'\|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n /\n @Prop()\n variant: 'solid' \| 'dashed' \| 'dotted' = 'solid';\n\n /\n @prop {('small'\|'medium'\|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-divider.entry.cjs.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,itBAAitB;;MCevtB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAEnD;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErC,QAAA,IAAY,CAAA,YAAA,GAAGA,KAAE,CACvB;AACE,YAAA,IAAI,EAAE,+BAA+B;AACrC,YAAA,QAAQ,EAAE;AACR,gBAAA,SAAS,EAAE;AACT,oBAAA,UAAU,EAAE,iBAAiB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,eAAe;AACxB,iBAAA;AACD,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,UAAU;AAClB,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,IAAI,EAAE,QAAQ;AACf,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAeF;IAbC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;","names":["tv","h"],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n /\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /\n @prop {('horizontal'\|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n @prop {('solid'\|'dashed'\|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n /\n @Prop()\n variant: 'solid' \| 'dashed' \| 'dotted' = 'solid';\n\n /\n @prop {('small'\|'medium'\|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bcm-divider.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bcm-divider.entry.cjs.js","sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n */\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /**\n * @prop {('horizontal'|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n */\n @Prop()\n direction: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * @prop {('solid'|'dashed'|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n */\n @Prop()\n variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n /**\n * @prop {('small'|'medium'|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"names":["tv","h"],"mappings":";;;;;AAAA,MAAM,UAAU,GAAG,itBAAitB;;MCevtB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAEnD;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErC,QAAA,IAAY,CAAA,YAAA,GAAGA,KAAE,CACvB;AACE,YAAA,IAAI,EAAE,+BAA+B;AACrC,YAAA,QAAQ,EAAE;AACR,gBAAA,SAAS,EAAE;AACT,oBAAA,UAAU,EAAE,iBAAiB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,eAAe;AACxB,iBAAA;AACD,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,UAAU;AAClB,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,IAAI,EAAE,QAAQ;AACf,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAeF;IAbC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;"}

package/dist/cjs/bcm-pop-confirm.cjs.entry.js CHANGED Viewed

@@ -1,13 +1,10 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-6710808e.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-3ec8404c.js');
-const tv = require('./tv-d2e35446.js');
+var index = require('./index-DFpZVb11.js');
+var floatingUi_dom = require('./floating-ui.dom-DyKmFgkP.js');
+var tv = require('./tv-ngpIbGlG.js');
 const popConfirmCss = ".absolute{position:absolute}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
-const BcmPopConfirmStyle0 = popConfirmCss;
 // Status icons for different states
 const statusIcons = {
@@ -117,9 +114,9 @@ const PopConfirm = class {
         this.updatePosition = async () => {
             if (!this.triggerElement || !this.popoverElement || !this.arrowElement)
                 return;
-            const { x, y, placement, middlewareData } = await floatingUi_dom_esm.computePosition(this.triggerElement, this.popoverElement, {
+            const { x, y, placement, middlewareData } = await floatingUi_dom.computePosition(this.triggerElement, this.popoverElement, {
                 placement: this.placement,
-                middleware: [floatingUi_dom_esm.offset(12), floatingUi_dom_esm.flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), floatingUi_dom_esm.shift({ padding: 8 }), floatingUi_dom_esm.arrow({ element: this.arrowElement })],
+                middleware: [floatingUi_dom.offset(12), floatingUi_dom.flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), floatingUi_dom.shift({ padding: 8 }), floatingUi_dom.arrow({ element: this.arrowElement })],
             });
             this.currentPlacement = placement;
             Object.assign(this.popoverElement.style, {
@@ -245,8 +242,9 @@ const PopConfirm = class {
     }
     get el() { return index.getElement(this); }
 };
-PopConfirm.style = BcmPopConfirmStyle0;
+PopConfirm.style = popConfirmCss;
 exports.bcm_pop_confirm = PopConfirm;
+//# sourceMappingURL=bcm-pop-confirm.entry.cjs.js.map
 //# sourceMappingURL=bcm-pop-confirm.cjs.entry.js.map

package/dist/cjs/bcm-pop-confirm.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-pop-confirm.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,qnGAAqnG,CAAC;AAC5oG,4BAAe,aAAa;;ACG5B;AACA,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,yBAAyB;IAC/B,OAAO,EAAE,0BAA0B;IACnC,OAAO,EAAE,kCAAkC;IAC3C,KAAK,EAAE,sBAAsB;CAC9B,CAAC;MAoEW,UAAU;IALvB;;;;;;;;;QAeE,eAAU,GAAW,4CAA4C,CAAC;;;;;QAOlE,eAAU,GAAW,QAAQ,CAAC;;;;;QAO9B,gBAAW,GAAW,KAAK,CAAC;;;;;QAO5B,gBAAW,GAAW,EAAE,CAAC;;;;;QAOzB,eAAU,GAAW,EAAE,CAAC;;;;;QAOxB,cAAS,GAAc,QAAQ,CAAC;;;;;QAOhC,SAAI,GAAiC,QAAQ,CAAC;;;;;QAO9C,WAAM,GAA6C,MAAM,CAAC;;;;;QAO1D,eAAU,GAAY,IAAI,CAAC;;;;;;QAc3B,WAAM,GAAY,KAAK,CAAC;;;;;;QAoDhB,uBAAkB,GAAG,CAAC,KAAY;YACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBACnB,qBAAqB,CAAC;oBACpB,IAAI,CAAC,cAAc,EAAE,CAAC;iBACvB,CAAC,CAAC;aACJ;SACF,CAAC;;;;;;QAOM,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;;;;;;QAOM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;;;;;QA2BM,mBAAc,GAAG;YACvB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE/E,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,MAAMA,kCAAe,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC1G,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAACC,yBAAM,CAAC,EAAE,CAAC,EAAEC,uBAAI,CAAC,EAAE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,EAAEC,wBAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAEC,wBAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;aACzJ,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,GAAG,SAAgB,CAAC;YAEzC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;gBACvC,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,GAAG,EAAE,GAAG,CAAC,IAAI;aACd,CAAC,CAAC;YAEH,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACxE,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAwC,CAAC;YAErF,MAAM,UAAU,GAAG;gBACjB,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,OAAO;aACd,CAAC,aAAa,CAAC,CAAC;YAEjB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;gBACrC,IAAI,EAAE,MAAM,IAAI,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,EAAE;gBACzC,GAAG,EAAE,MAAM,IAAI,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,EAAE;gBACxC,CAAC,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,MAAM,GAAG,OAAO;aAC3E,CAAC,CAAC;SACJ,CAAC;;;;;QA2BM,YAAO,GAAGC,KAAE,CAAC;YACnB,KAAK,EAAE;gBACL,SAAS,EAAE,6GAA6G;gBACxH,MAAM,EAAE,mCAAmC;gBAC3C,iBAAiB,EAAE,+DAA+D;gBAClF,aAAa,EAAE,wHAAwH;gBACvI,cAAc,EAAE,kCAAkC;gBAClD,MAAM,EAAE,iCAAiC;aAC1C;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,SAAS,EAAE,gCAAgC;wBAC3C,MAAM,EAAE,aAAa;wBACrB,MAAM,EAAE,aAAa;wBACrB,cAAc,EAAE,aAAa;wBAC7B,iBAAiB,EAAE,OAAO;qBAC3B;oBACD,MAAM,EAAE;wBACN,SAAS,EAAE,gCAAgC;wBAC3C,MAAM,EAAE,aAAa;wBACrB,MAAM,EAAE,aAAa;wBACrB,cAAc,EAAE,aAAa;wBAC7B,iBAAiB,EAAE,SAAS;qBAC7B;oBACD,KAAK,EAAE;wBACL,SAAS,EAAE,gCAAgC;wBAC3C,MAAM,EAAE,aAAa;wBACrB,MAAM,EAAE,aAAa;wBACrB,cAAc,EAAE,aAAa;wBAC7B,iBAAiB,EAAE,OAAO;qBAC3B;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;aACf;SACF,CAAC,CAAC;KAkDJ;;;;;IA3NC,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,OAAO,CAAC,IAAI,CAAC,2BAA2B,IAAI,CAAC,QAAQ,cAAc,CAAC,CAAC;YACrE,OAAO;SACR;QACD,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACxE;;;;;IAgDD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,qBAAqB,CAAC;YACpB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC,CAAC;KACJ;;;;;IAOD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;;;;;IA0CD,IAAY,YAAY;QACtB,OAAO;YACL,cAAc,EAAE,2BAA2B,IAAI,CAAC,MAAM,GAAG;YACzD,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC,CAAC;KACH;;;;;IAMD,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAC3E;KACF;;;;;;IAkDD,MAAM;;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YACnG,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QACH,QACEC,QAACC,cAAQ,uDACN,IAAI,CAAC,MAAM,KACVD,kEAAK,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAExIA,kEAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,MAAA,IAAI,CAAC,gBAAgB,mCAAI,KAAK,EAAE,GAAQ,EAG1GA,qEAAQ,KAAK,EAAE,MAAM,EAAE,IACrBA,kEAAK,KAAK,EAAE,iBAAiB,EAAE,IAC5B,IAAI,CAAC,UAAU,IAAIA,oFAAqB,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAa,EAC9EA,mEAAM,KAAK,EAAE,cAAc,EAAE,IAAG,IAAI,CAAC,UAAU,CAAQ,EACvDA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACNA,kEAAK,KAAK,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,IACrDA,oFAAoB,cAAc,GAAY,CAC1C,CACC,EAGTA,mEAAM,KAAK,EAAC,sCAAsC,IAChDA,mEAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,CAAQ,CACtC,EAGPA,qEAAQ,KAAK,EAAE,MAAM,EAAE,IACrBA,yEAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,IACnE,IAAI,CAAC,UAAU,CACL,EACbA,yEAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACzF,IAAI,CAAC,WAAW,CACN,EACbA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACL,CACP,CACQ,EACX;KACH;;;;;;;","names":["computePosition","offset","flip","shift","arrow","tv","h","Fragment"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/*\n @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n \n @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n \n @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n \n @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n \n // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n \n @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' \| 'medium' \| 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' \| 'error' \| 'warning' \| 'success' \| 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n \n @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n \n @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n \n @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n \n @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n \n @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n /\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /\n The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n /\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /\n The text displayed on the cancel button.\n * @default 'Cancel'\n /\n @Prop()\n cancelText: string = 'Cancel';\n\n /\n The text displayed on the confirm button.\n * @default 'Yes'\n /\n @Prop()\n confirmText: string = 'Yes';\n\n /\n The description or body content of the pop-up.\n * @default ''\n /\n @Prop()\n description: string = '';\n\n /\n The header text displayed at the top of the pop-up.\n * @default ''\n /\n @Prop()\n headerText: string = '';\n\n /\n The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n /\n @Prop()\n placement: Placement = 'bottom';\n\n /\n The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n /\n @Prop()\n status: 'info' \| 'error' \| 'warning' \| 'success' = 'info';\n\n /\n Whether to display a status icon based on the `status` prop.\n * @default true\n /\n @Prop()\n statusIcon: boolean = true;\n\n /\n The ID of the trigger element (e.g., a button) that opens the pop-up.\n /\n @Prop()\n targetId: string;\n\n // State variables\n /\n Indicates whether the pop-up is currently open or closed.\n * @default false\n /\n @State()\n isOpen: boolean = false;\n\n /\n The current placement position of the pop-up after computation.\n /\n @State()\n currentPlacement: 'top' \| 'bottom' \| 'left' \| 'right';\n\n // Event Emitters\n /\n Emits an event when the user confirms the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /\n Emits an event when the user cancels the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /\n Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n /\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n /\n Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n /\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /\n Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /\n Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /\n Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n /\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /\n Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n /\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /\n Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n /\n private updatePosition = async () => {\n if (!this.triggerElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /\n Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n /\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /\n Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n /\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /\n Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n /\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /\n Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n /\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/ Arrow /}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/ Header Content /}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/ Main Content /}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/ Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-pop-confirm.entry.cjs.js","mappings":"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","names":["computePosition","offset","flip","shift","arrow","tv","h","Fragment"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/*\n @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n \n @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n \n @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n \n @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n \n // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n \n @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' \| 'medium' \| 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' \| 'error' \| 'warning' \| 'success' \| 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n \n @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n \n @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n \n @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n \n @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n \n @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n /\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /\n The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n /\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /\n The text displayed on the cancel button.\n * @default 'Cancel'\n /\n @Prop()\n cancelText: string = 'Cancel';\n\n /\n The text displayed on the confirm button.\n * @default 'Yes'\n /\n @Prop()\n confirmText: string = 'Yes';\n\n /\n The description or body content of the pop-up.\n * @default ''\n /\n @Prop()\n description: string = '';\n\n /\n The header text displayed at the top of the pop-up.\n * @default ''\n /\n @Prop()\n headerText: string = '';\n\n /\n The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n /\n @Prop()\n placement: Placement = 'bottom';\n\n /\n The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n /\n @Prop()\n status: 'info' \| 'error' \| 'warning' \| 'success' = 'info';\n\n /\n Whether to display a status icon based on the `status` prop.\n * @default true\n /\n @Prop()\n statusIcon: boolean = true;\n\n /\n The ID of the trigger element (e.g., a button) that opens the pop-up.\n /\n @Prop()\n targetId: string;\n\n // State variables\n /\n Indicates whether the pop-up is currently open or closed.\n * @default false\n /\n @State()\n isOpen: boolean = false;\n\n /\n The current placement position of the pop-up after computation.\n /\n @State()\n currentPlacement: 'top' \| 'bottom' \| 'left' \| 'right';\n\n // Event Emitters\n /\n Emits an event when the user confirms the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /\n Emits an event when the user cancels the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /\n Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n /\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n /\n Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n /\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /\n Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /\n Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /\n Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n /\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /\n Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n /\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /\n Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n /\n private updatePosition = async () => {\n if (!this.triggerElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /\n Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n /\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /\n Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n /\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /\n Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n /\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /\n Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n /\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/ Arrow /}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/ Header Content /}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/ Main Content /}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/ Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bcm-pop-confirm.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bcm-pop-confirm.entry.cjs.js","sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/**\n * @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n *\n * @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n *\n * @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n *\n * @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n *\n * // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n *\n * @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' | 'medium' | 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' | 'error' | 'warning' | 'success' | 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n *\n * @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n *\n * @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n *\n * @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n *\n * @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n *\n * @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n */\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /**\n * The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n */\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /**\n * The text displayed on the cancel button.\n * @default 'Cancel'\n */\n @Prop()\n cancelText: string = 'Cancel';\n\n /**\n * The text displayed on the confirm button.\n * @default 'Yes'\n */\n @Prop()\n confirmText: string = 'Yes';\n\n /**\n * The description or body content of the pop-up.\n * @default ''\n */\n @Prop()\n description: string = '';\n\n /**\n * The header text displayed at the top of the pop-up.\n * @default ''\n */\n @Prop()\n headerText: string = '';\n\n /**\n * The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n */\n @Prop()\n placement: Placement = 'bottom';\n\n /**\n * The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n */\n @Prop()\n status: 'info' | 'error' | 'warning' | 'success' = 'info';\n\n /**\n * Whether to display a status icon based on the `status` prop.\n * @default true\n */\n @Prop()\n statusIcon: boolean = true;\n\n /**\n * The ID of the trigger element (e.g., a button) that opens the pop-up.\n */\n @Prop()\n targetId: string;\n\n // State variables\n /**\n * Indicates whether the pop-up is currently open or closed.\n * @default false\n */\n @State()\n isOpen: boolean = false;\n\n /**\n * The current placement position of the pop-up after computation.\n */\n @State()\n currentPlacement: 'top' | 'bottom' | 'left' | 'right';\n\n // Event Emitters\n /**\n * Emits an event when the user confirms the action in the pop-up.\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /**\n * Emits an event when the user cancels the action in the pop-up.\n */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /**\n * Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n */\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n /**\n * Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n */\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /**\n * Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n */\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /**\n * Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n */\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /**\n * Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n */\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /**\n * Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n */\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /**\n * Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n */\n private updatePosition = async () => {\n if (!this.triggerElement || !this.popoverElement || !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /**\n * Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n */\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /**\n * Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n */\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /**\n * Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n */\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /**\n * Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n */\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/* Arrow */}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/* Header Content */}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/* Main Content */}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/* Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"names":["computePosition","offset","flip","shift","arrow","tv","h","Fragment"],"mappings":"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"}

package/dist/cjs/bcm-popover.cjs.entry.js CHANGED Viewed

@@ -1,13 +1,10 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-6710808e.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-3ec8404c.js');
-const tv = require('./tv-d2e35446.js');
+var index = require('./index-DFpZVb11.js');
+var floatingUi_dom = require('./floating-ui.dom-DyKmFgkP.js');
+var tv = require('./tv-ngpIbGlG.js');
 const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.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)}";
-const BcmPopoverStyle0 = popoverCss;
 const Popover = class {
     constructor(hostRef) {
@@ -86,7 +83,7 @@ const Popover = class {
                     this.targetElement.addEventListener('mouseleave', this.hidePopover);
                 }
                 if (this.popoverElement && !this.cleanupAutoUpdate) {
-                    this.cleanupAutoUpdate = floatingUi_dom_esm.autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());
+                    this.cleanupAutoUpdate = floatingUi_dom.autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());
                 }
             }
         };
@@ -98,9 +95,9 @@ const Popover = class {
         this.updatePosition = async () => {
             if (!this.targetElement || !this.popoverElement || !this.arrowElement)
                 return;
-            const { x, y, placement, middlewareData } = await floatingUi_dom_esm.computePosition(this.targetElement, this.popoverElement, {
+            const { x, y, placement, middlewareData } = await floatingUi_dom.computePosition(this.targetElement, this.popoverElement, {
                 placement: this.placement,
-                middleware: [floatingUi_dom_esm.offset(12), floatingUi_dom_esm.flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), floatingUi_dom_esm.shift({ padding: 8 }), floatingUi_dom_esm.arrow({ element: this.arrowElement })],
+                middleware: [floatingUi_dom.offset(12), floatingUi_dom.flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), floatingUi_dom.shift({ padding: 8 }), floatingUi_dom.arrow({ element: this.arrowElement })],
             });
             Object.assign(this.popoverElement.style, {
                 left: `${x}px`,
@@ -184,8 +181,9 @@ const Popover = class {
     }
     get el() { return index.getElement(this); }
 };
-Popover.style = BcmPopoverStyle0;
+Popover.style = popoverCss;
 exports.bcm_popover = Popover;
+//# sourceMappingURL=bcm-popover.entry.cjs.js.map
 //# sourceMappingURL=bcm-popover.cjs.entry.js.map