bromcom-ui-next 0.1.29 → 0.1.31

package/dist/cjs/bcm-segment_2.cjs.entry.js

@@ -0,0 +1,335 @@
+'use strict';
+
+var index = require('./index-1Qal-onT.js');
+var tv = require('./tv-ngpIbGlG.js');
+
+const segmentCss = ".absolute{position:absolute}.relative{position:relative}.flex{display:flex}.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))}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{align-items:center;display:flex;position:relative;width:100%}.segment{flex:1;white-space:nowrap;width:100%}.divider{background-color:var(--bcm-ui-color-border-default);height:20px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:opacity .8s cubic-bezier(.4,0,.2,1);width:1px}.divider-hidden{opacity:0}.static{position:static}.z-20{z-index:20}.hidden{display:none}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.border-none{border-style:none}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.text-center{text-align:center}.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)}.font-medium{font-weight:500}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.opacity-50{opacity:.5}.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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-header:hover{color:var(--bcm-ui-color-text-header)}";
+
+const BcmSegment = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmSegmentClick = index.createEvent(this, "bcmSegmentClick", 5);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Unique identifier for this segment
+     */
+    value;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Selected state (controlled by parent)
+     */
+    selected = false;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size = 'medium';
+    /**
+     * Index of this segment (inherited from parent)
+     */
+    index = 0;
+    /**
+     * Index of currently active segment (inherited from parent)
+     */
+    activeIndex = 0;
+    /**
+     * Internal event emitted when segment is clicked
+     */
+    bcmSegmentClick;
+    handleClick = () => {
+        if (!this.disabled) {
+            this.bcmSegmentClick.emit(this.value);
+        }
+    };
+    /**
+     * Tailwind class configuration
+     */
+    segmentClass = tv.tv({
+        base: 'segment relative z-20 px-3 text-center font-medium transition-colors border-none bg-transparent select-none',
+        variants: {
+            size: {
+                small: 'text-size-4 py-px',
+                medium: 'text-size-5 py-1',
+                large: 'text-size-6 py-2',
+            },
+            selected: {
+                true: 'text-color-header',
+                false: 'text-color-helper',
+            },
+            disabled: {
+                true: 'cursor-not-allowed opacity-50',
+                false: 'cursor-pointer hover:text-color-header',
+            },
+        },
+    });
+    render() {
+        // Determine if divider should be hidden
+        // Hide divider if this segment or the next segment is active
+        const hideDivider = this.selected || this.index === this.activeIndex - 1;
+        return (index.h(index.Host, { key: 'fd8cc62e6cc3a1ad5eb40390c47907cc3c97a7b9', role: "radio", "aria-checked": this.selected.toString() }, index.h("button", { key: '17c5b00494a44939ec6556df9ee11b4fdf8d12e2', class: this.segmentClass({
+                size: this.size,
+                selected: this.selected,
+                disabled: this.disabled,
+            }), onClick: this.handleClick, disabled: this.disabled, type: "button" }, index.h("slot", { key: '20d275dcee6f951825facb6a171a57d96ec73f00' })), index.h("div", { key: '88fc43e25f3967569dbc5e56a5837fbedc3407e8', class: `divider ${hideDivider ? 'divider-hidden' : ''}` })));
+    }
+};
+BcmSegment.style = segmentCss;
+
+const segmentedPickerCss = ".block{display:block}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{display:block}.segmented-container{--indicator-left:0%;--indicator-width:0%}.indicator{left:var(--indicator-left);transition:all .2s cubic-bezier(.4,0,.2,1);width:var(--indicator-width)}.grid-auto-flow-col{grid-auto-flow:column}.grid-auto-columns-fr{grid-auto-columns:minmax(0,1fr)}.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}}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-y-0{bottom:0;top:0}.z-20{z-index:20}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.w-auto{width:auto}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.border{border-width:1px}.border-solid{border-style:solid}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.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)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:var(--bcm-ui-box-shadow-md);--tw-shadow-colored:var(--bcm-ui-box-shadow-md)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+
+const BcmSegmentedPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmSegmentChange = index.createEvent(this, "bcmSegmentChange", 1);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /**
+     * Selected segment value
+     */
+    value;
+    /**
+     * Name attribute for form association
+     */
+    name;
+    /**
+     * Whether this field is required in a form
+     */
+    required = false;
+    /**
+     * Size variant
+     */
+    size = 'medium';
+    /**
+     * Full width flag
+     */
+    fullWidth = false;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Enable shadow on container
+     */
+    shadow = false;
+    /**
+     * Emits when selected segment changes
+     */
+    bcmSegmentChange;
+    segments = [];
+    activeIndex = 0;
+    segmentElements = [];
+    hiddenInput;
+    componentWillLoad() {
+        this.discoverSegments();
+        // Initialize active index in componentWillLoad to avoid re-render warning
+        this.updateActiveIndex();
+        // Initialize form value
+        this.updateFormValueAndValidity();
+    }
+    componentDidLoad() {
+        this.updateSegmentStates();
+        this.updateCSSVariables();
+        this.propagatePropsToSegments();
+    }
+    /**
+     * When the parent <form> is reset, reset the segmented picker state
+     */
+    formResetCallback() {
+        // Reset to first enabled segment
+        const firstEnabledSegment = this.segments.find(s => !s.disabled);
+        if (firstEnabledSegment) {
+            this.value = firstEnabledSegment.value;
+        }
+    }
+    /**
+     * Discovers all bcm-segment children
+     */
+    discoverSegments() {
+        this.segmentElements = Array.from(this.el.querySelectorAll('bcm-segment'));
+        this.segments = this.segmentElements.map((segment) => ({
+            value: segment.value,
+            disabled: segment.disabled || false,
+        }));
+        // Set initial value if not provided
+        if (!this.value && this.segments.length > 0) {
+            const firstEnabledSegment = this.segments.find(s => !s.disabled);
+            if (firstEnabledSegment) {
+                this.value = firstEnabledSegment.value;
+            }
+        }
+    }
+    /**
+     * Updates the active index based on current value
+     */
+    updateActiveIndex() {
+        const index = this.segments.findIndex(s => s.value === this.value);
+        this.activeIndex = index >= 0 ? index : 0;
+    }
+    /**
+     * Updates ElementInternals form value and validity
+     */
+    updateFormValueAndValidity() {
+        if (!this.internals)
+            return;
+        // Set form value
+        this.internals.setFormValue(this.value || '');
+        // Update hidden input for validation
+        if (this.hiddenInput) {
+            this.hiddenInput.value = this.value || '';
+            this.hiddenInput.required = this.required;
+            this.hiddenInput.disabled = this.disabled;
+            const validity = this.hiddenInput.validity;
+            const message = this.hiddenInput.validationMessage;
+            this.internals.setValidity(validity, message, this.hiddenInput);
+        }
+    }
+    /**
+     * Updates selected state of all segment elements
+     */
+    updateSegmentStates() {
+        this.segmentElements.forEach((segment) => {
+            segment.selected = segment.value === this.value;
+        });
+    }
+    /**
+     * Updates CSS custom properties for indicator positioning
+     */
+    updateCSSVariables() {
+        const container = this.el.shadowRoot?.querySelector('.segmented-container');
+        if (container && this.segments.length > 0) {
+            const segmentWidth = 100 / this.segments.length;
+            const leftPosition = this.activeIndex * segmentWidth;
+            container.style.setProperty('--indicator-left', `${leftPosition}%`);
+            container.style.setProperty('--indicator-width', `${segmentWidth}%`);
+        }
+    }
+    handleValueChange(newValue, oldValue) {
+        this.updateActiveIndex();
+        this.updateSegmentStates();
+        this.updateCSSVariables();
+        this.updateFormValueAndValidity();
+        if (oldValue !== undefined && oldValue !== newValue) {
+            this.bcmSegmentChange.emit({
+                value: newValue,
+                previousValue: oldValue,
+            });
+        }
+    }
+    handleValidationPropsChange() {
+        this.updateFormValueAndValidity();
+    }
+    handleSizeChange() {
+        this.propagatePropsToSegments();
+    }
+    /**
+     * Propagates parent props to child segments
+     */
+    propagatePropsToSegments() {
+        this.segmentElements.forEach((segment, index) => {
+            segment.size = this.size;
+            segment.index = index;
+            segment.activeIndex = this.activeIndex;
+        });
+    }
+    /**
+     * Handles segment click events from children
+     */
+    handleSegmentClick(event) {
+        const clickedValue = event.detail;
+        const segment = this.segments.find(s => s.value === clickedValue);
+        if (segment && !segment.disabled && !this.disabled) {
+            this.value = clickedValue;
+        }
+    }
+    /**
+     * Public method to programmatically set active segment
+     */
+    async setValue(value) {
+        const segment = this.segments.find(s => s.value === value);
+        if (segment && !segment.disabled) {
+            this.value = value;
+        }
+    }
+    /**
+     * Public method to get active segment value
+     */
+    async getValue() {
+        return this.value;
+    }
+    /**
+     * Tailwind class configuration
+     */
+    containerClass = tv.tv({
+        base: 'segmented-container inline-flex relative rounded-lg border border-solid border-color-default bg-color-default overflow-hidden',
+        variants: {
+            size: {
+                small: 'text-size-4',
+                medium: 'text-size-5',
+                large: 'text-size-6',
+            },
+            fullWidth: {
+                true: 'w-full',
+                false: 'w-auto',
+            },
+            shadow: {
+                true: 'shadow-md',
+                false: '',
+            },
+            disabled: {
+                true: 'opacity-50 cursor-not-allowed',
+                false: 'cursor-pointer',
+            },
+        },
+    });
+    indicatorClass = tv.tv({
+        base: 'indicator absolute inset-y-0 bg-color-base rounded shadow-sm z-20',
+        variants: {
+            size: {
+                small: '',
+                medium: '',
+                large: '',
+            },
+        },
+    });
+    render() {
+        return (index.h(index.Host, { key: '406ff9e6bb8a1f9211c279756bf0be969051d5e2' }, index.h("input", { key: '27c06a30ed6e509a69fe996d7b785abebf8d1f0a', ref: el => (this.hiddenInput = el), type: "text", name: this.name, value: this.value || '', required: this.required, disabled: this.disabled, tabindex: -1, style: {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                padding: '0',
+                margin: '-1px',
+                overflow: 'hidden',
+                clip: 'rect(0, 0, 0, 0)',
+                whiteSpace: 'nowrap',
+                border: '0',
+            }, "aria-hidden": "true" }), index.h("div", { key: '3ccfa07bf5b45c3f8d8370412aa77a1d350b053c', class: this.containerClass({
+                size: this.size,
+                fullWidth: this.fullWidth,
+                shadow: this.shadow,
+                disabled: this.disabled,
+            }), role: "radiogroup", "aria-required": this.required, "aria-disabled": this.disabled }, index.h("div", { key: 'c3a3acf4f0c6460056c69f64b1d13a7bcd3ff908', class: this.indicatorClass({ size: this.size }) }), index.h("div", { key: '881f2e1e295dbb2bb1a76ec6636904a7f9cc1f12', class: "segments-grid grid grid-auto-flow-col grid-auto-columns-fr relative w-full" }, index.h("slot", { key: '07e7e220040398f9157d80b2f582d1d0a0c20211' })))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "required": ["handleValidationPropsChange"],
+        "disabled": ["handleValidationPropsChange"],
+        "size": ["handleSizeChange"]
+    }; }
+};
+BcmSegmentedPicker.style = segmentedPickerCss;
+
+exports.bcm_segment = BcmSegment;
+exports.bcm_segmented_picker = BcmSegmentedPicker;
+//# sourceMappingURL=bcm-segment.bcm-segmented-picker.entry.cjs.js.map

package/dist/cjs/bcm-shortcut.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BtiU-G2W.js');
+var index = require('./index-1Qal-onT.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 
 const shortcutCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.block{display:block}.h-fit{height:fit-content}.w-fit{width:fit-content}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.px-1{padding-left:.25rem;padding-right:.25rem}.text-center{text-align:center}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.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)}.font-medium{font-weight:500}.capitalize{text-transform:capitalize}.text-color-default{color:var(--bcm-ui-color-text-default)}.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)}";
@@ -18,9 +18,10 @@ const osKeys = {
 const BcmShortcut = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.size = 'small';
-        this.isMac = /Mac/.test(window.navigator.userAgent);
     }
+    hotkey;
+    size = 'small';
+    isMac = /Mac/.test(window.navigator.userAgent);
     getHotkey(key) {
         if (!key) {
             return '';
@@ -35,7 +36,7 @@ const BcmShortcut = class {
     }
     render() {
         const { size, hotkey } = this;
-        return (index.h("div", { key: 'eb49e2cf3b0afbd7e9572effa5b9c3fdf24d3068', class: index$1.classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
+        return (index.h("div", { key: '0dd6ccb6bb166f20494fa3229d463bf2f67d09e4', class: index$1.classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
                 'text-size-2': size === 'small',
                 'text-size-3': size === 'medium',
                 'text-size-4': size === 'large',
@@ -46,5 +47,3 @@ BcmShortcut.style = shortcutCss;
 
 exports.bcm_shortcut = BcmShortcut;
 //# sourceMappingURL=bcm-shortcut.entry.cjs.js.map
-
-//# sourceMappingURL=bcm-shortcut.cjs.entry.js.map

package/dist/cjs/bcm-shortcut.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-shortcut.entry.cjs.js","sources":["src/components/shortcut/shortcut.css?tag=bcm-shortcut&encapsulation=shadow","src/components/shortcut/shortcut.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport cs from 'classnames';\n\nconst osKeys = {\n  ctrl: '⌘',\n  alt: '⌥',\n  shift: '⇧',\n  del: '⌫',\n  delete: '⌫',\n  backspace: '⌦',\n  enter: '⏎',\n  return: '⏎',\n};\n\n@Component({\n  tag: 'bcm-shortcut',\n  styleUrl: './shortcut.css',\n  shadow: true,\n})\nexport class BcmShortcut implements ComponentInterface {\n  @Prop() hotkey: string;\n  @Prop() size: 'small' | 'medium' | 'large' = 'small';\n\n  private readonly isMac = /Mac/.test(window.navigator.userAgent);\n\n  getHotkey(key: string): string {\n    if (!key) {\n      return '';\n    }\n    if (this.isMac && (key.includes(' ') || key.includes('+'))) {\n      const keys = key.split(/[\\s+]+/);\n      return keys.map(k => osKeys[k] || k).join('');\n    } else {\n      return key;\n    }\n  }\n\n  render() {\n    const { size, hotkey } = this;\n\n    return (\n      <div\n        class={cs(\n          'bcm-ui-element bcm-ui-content-display',\n          'block h-fit w-fit rounded border border-solid px-1',\n          'border-color-default bg-color-default text-color-default',\n          'text-center font-medium capitalize',\n          {\n            'text-size-2': size === 'small',\n            'text-size-3': size === 'medium',\n            'text-size-4': size === 'large',\n          },\n        )}\n      >\n        {this.getHotkey(hotkey)}\n      </div>\n    );\n  }\n}\n"],"names":["h","cs"],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,ksCAAksC;;ACGttC,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;CACZ;MAOY,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAiC,OAAO;AAEnC,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC;AAmChE;AAjCC,IAAA,SAAS,CAAC,GAAW,EAAA;QACnB,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,OAAO,EAAE;;QAEX,IAAI,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;YAC1D,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;YAChC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;aACxC;AACL,YAAA,OAAO,GAAG;;;IAId,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;QAE7B,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAEC,kBAAE,CACP,uCAAuC,EACvC,oDAAoD,EACpD,0DAA0D,EAC1D,oCAAoC,EACpC;gBACE,aAAa,EAAE,IAAI,KAAK,OAAO;gBAC/B,aAAa,EAAE,IAAI,KAAK,QAAQ;gBAChC,aAAa,EAAE,IAAI,KAAK,OAAO;aAChC,CACF,EAAA,EAEA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CACnB;;;;;;;"}
+{"version":3,"file":"bcm-shortcut.entry.cjs.js","sources":["src/components/shortcut/shortcut.css?tag=bcm-shortcut&encapsulation=shadow","src/components/shortcut/shortcut.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport cs from 'classnames';\n\nconst osKeys = {\n  ctrl: '⌘',\n  alt: '⌥',\n  shift: '⇧',\n  del: '⌫',\n  delete: '⌫',\n  backspace: '⌦',\n  enter: '⏎',\n  return: '⏎',\n};\n\n@Component({\n  tag: 'bcm-shortcut',\n  styleUrl: './shortcut.css',\n  shadow: true,\n})\nexport class BcmShortcut implements ComponentInterface {\n  @Prop() hotkey: string;\n  @Prop() size: 'small' | 'medium' | 'large' = 'small';\n\n  private readonly isMac = /Mac/.test(window.navigator.userAgent);\n\n  getHotkey(key: string): string {\n    if (!key) {\n      return '';\n    }\n    if (this.isMac && (key.includes(' ') || key.includes('+'))) {\n      const keys = key.split(/[\\s+]+/);\n      return keys.map(k => osKeys[k] || k).join('');\n    } else {\n      return key;\n    }\n  }\n\n  render() {\n    const { size, hotkey } = this;\n\n    return (\n      <div\n        class={cs(\n          'bcm-ui-element bcm-ui-content-display',\n          'block h-fit w-fit rounded border border-solid px-1',\n          'border-color-default bg-color-default text-color-default',\n          'text-center font-medium capitalize',\n          {\n            'text-size-2': size === 'small',\n            'text-size-3': size === 'medium',\n            'text-size-4': size === 'large',\n          },\n        )}\n      >\n        {this.getHotkey(hotkey)}\n      </div>\n    );\n  }\n}\n"],"names":["h","cs"],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,ksCAAksC;;ACGttC,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;CACZ;MAOY,WAAW,GAAA,MAAA;;;;AACd,IAAA,MAAM;IACN,IAAI,GAAiC,OAAO;IAEnC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC;AAE/D,IAAA,SAAS,CAAC,GAAW,EAAA;QACnB,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,OAAO,EAAE;;QAEX,IAAI,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;YAC1D,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;YAChC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;aACxC;AACL,YAAA,OAAO,GAAG;;;IAId,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;QAE7B,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAEC,kBAAE,CACP,uCAAuC,EACvC,oDAAoD,EACpD,0DAA0D,EAC1D,oCAAoC,EACpC;gBACE,aAAa,EAAE,IAAI,KAAK,OAAO;gBAC/B,aAAa,EAAE,IAAI,KAAK,QAAQ;gBAChC,aAAa,EAAE,IAAI,KAAK,OAAO;aAChC,CACF,EAAA,EAEA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CACnB;;;;;;;"}