bromcom-ui-next 0.1.29 → 0.1.31

package/dist/collection/components/segmented-picker/segmented-picker.component.js

@@ -1,131 +1,241 @@
 import { h, Host } from "@stencil/core";
 import { tv } from "../../utils/tv";
+/**
+ * Modern Segmented Picker component with CSS Grid-based indicator
+ * @slot - Default slot for bcm-segment components
+ */
 export class BcmSegmentedPicker {
-    constructor() {
-        /** Controls the component size */
-        this.size = 'medium';
-        /** Disabled state */
-        this.disabled = false;
-        /** Full width component */
-        this.fullWidth = false;
-        this.options = [];
-        this.indicatorStyles = {
-            left: '0',
-            width: '0',
-            transition: 'none',
-        };
-        this.segmentedClass = tv({
-            base: 'segmented-container bcm-ui-element inline-flex relative bg-[--bcm-ui-color-background-default-default] border border-solid border-[--bcm-ui-color-border-default] rounded overflow-hidden',
-            variants: {
-                size: {
-                    small: 'text-size-4',
-                    medium: 'text-size-5',
-                    large: 'text-size-6',
-                },
-                fullWidth: {
-                    true: 'w-full',
-                },
-                disabled: {
-                    true: 'opacity-50 cursor-not-allowed',
-                    false: 'cursor-pointer',
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                fullWidth: false,
-                disabled: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
+    el;
+    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() {
-        // İlk yüklemede options'ları belirle
-        this.parseOptions();
-        // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç
-        if (!this.value && this.options.length > 0) {
-            this.value = this.options[0].value;
-        }
+        this.discoverSegments();
+        // Initialize active index in componentWillLoad to avoid re-render warning
+        this.updateActiveIndex();
+        // Initialize form value
+        this.updateFormValueAndValidity();
     }
     componentDidLoad() {
-        // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle
-        this.updateIndicatorPosition(false);
+        this.updateSegmentStates();
+        this.updateCSSVariables();
+        this.propagatePropsToSegments();
     }
-    componentDidUpdate() {
-        this.updateIndicatorPosition();
+    /**
+     * 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;
+            }
+        }
     }
-    valueChanged() {
-        this.updateIndicatorPosition();
+    /**
+     * 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;
     }
-    handleOptionClick(event) {
-        if (this.disabled)
+    /**
+     * Updates ElementInternals form value and validity
+     */
+    updateFormValueAndValidity() {
+        if (!this.internals)
             return;
-        const value = event.detail;
-        if (this.value !== value) {
-            this.value = value;
-            this.bcmChange.emit({ value });
+        // 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);
         }
     }
-    parseOptions() {
-        const slotNodes = Array.from(this.host.children);
-        this.options = slotNodes
-            .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')
-            .map(option => ({
-            value: option.getAttribute('value') || '',
-            label: option.getAttribute('label') || option.textContent || '',
-        }));
+    /**
+     * Updates selected state of all segment elements
+     */
+    updateSegmentStates() {
+        this.segmentElements.forEach((segment) => {
+            segment.selected = segment.value === this.value;
+        });
     }
-    updateIndicatorPosition(animate = true) {
-        // Seçili option elemanını bul
-        const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value="${this.value}"]`);
-        if (!selectedOption)
-            return;
-        // Tüm option'ları seç
-        const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');
-        // Seçili option'ın indeksini bul
-        let selectedIndex = -1;
-        for (let i = 0; i < allOptions.length; i++) {
-            if (allOptions[i].getAttribute('value') === this.value) {
-                selectedIndex = i;
-                break;
-            }
+    /**
+     * 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}%`);
         }
-        if (selectedIndex === -1)
-            return;
-        // DOM manipülasyonu asenkron olarak yap
-        setTimeout(() => {
-            try {
-                // Seçili option'a kadar olan genişliği hesapla
-                let leftPosition = 0;
-                for (let i = 0; i < selectedIndex; i++) {
-                    const optionElement = allOptions[i];
-                    if (optionElement) {
-                        leftPosition += optionElement.offsetWidth;
-                    }
-                }
-                // Seçili option'ın genişliği
-                const selectedWidth = allOptions[selectedIndex].offsetWidth;
-                // İndikatör stillerini güncelle
-                this.indicatorStyles = {
-                    left: `${leftPosition}px`,
-                    width: `${selectedWidth}px`,
-                    transition: animate ? 'all 0.2s ease-in-out' : 'none',
-                };
-            }
-            catch (error) {
-                console.error('Error updating indicator position:', error);
-            }
-        }, 10);
     }
+    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({
+        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({
+        base: 'indicator absolute inset-y-0 bg-color-base rounded shadow-sm z-20',
+        variants: {
+            size: {
+                small: '',
+                medium: '',
+                large: '',
+            },
+        },
+    });
     render() {
-        return (h(Host, { key: 'd0cbc159bc9bbc04dd3529d49013c70fedd51900' }, h("div", { key: '482aaafb09980d4e898da826be0d551335fbf074', class: this.segmentedClass({
+        return (h(Host, { key: '406ff9e6bb8a1f9211c279756bf0be969051d5e2' }, 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" }), h("div", { key: '3ccfa07bf5b45c3f8d8370412aa77a1d350b053c', class: this.containerClass({
                 size: this.size,
                 fullWidth: this.fullWidth,
+                shadow: this.shadow,
                 disabled: this.disabled,
-            }) }, h("div", { key: '32ae6dd4e49a4bb8d054b0c6ed0438a8a5fd88d4', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '5d4cbf382a1f7796c54a78c707579a1b517d4afe', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '0dd209dd41f1da85bbe40542f7b3f725e2856094' })))));
+            }), role: "radiogroup", "aria-required": this.required, "aria-disabled": this.disabled }, h("div", { key: 'c3a3acf4f0c6460056c69f64b1d13a7bcd3ff908', class: this.indicatorClass({ size: this.size }) }), h("div", { key: '881f2e1e295dbb2bb1a76ec6636904a7f9cc1f12', class: "segments-grid grid grid-auto-flow-col grid-auto-columns-fr relative w-full" }, h("slot", { key: '07e7e220040398f9157d80b2f582d1d0a0c20211' })))));
     }
     static get is() { return "bcm-segmented-picker"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["segmented-picker.css"]
@@ -138,54 +248,106 @@ export class BcmSegmentedPicker {
     }
     static get properties() {
         return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected segment value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form association"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this field is required in a form"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "SegmentedPickerSize",
+                    "original": "'small' | 'medium' | 'large'",
                     "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {
-                        "SegmentedPickerSize": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/segmented-picker/types.ts::SegmentedPickerSize"
-                        }
-                    }
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls the component size"
+                    "text": "Size variant"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": true,
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The selected option value"
+                    "text": "Full width flag"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -200,12 +362,12 @@ export class BcmSegmentedPicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "fullWidth": {
+            "shadow": {
                 "type": "boolean",
-                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -216,54 +378,107 @@ export class BcmSegmentedPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Full width component"
+                    "text": "Enable shadow on container"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "shadow",
                 "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "options": {},
-            "indicatorStyles": {}
+            "segments": {},
+            "activeIndex": {}
         };
     }
     static get events() {
         return [{
-                "method": "bcmChange",
-                "name": "bcmChange",
+                "method": "bcmSegmentChange",
+                "name": "bcmSegmentChange",
                 "bubbles": false,
                 "cancelable": true,
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": "Change event"
+                    "text": "Emits when selected segment changes"
                 },
                 "complexType": {
-                    "original": "{ value: string }",
-                    "resolved": "{ value: string; }",
+                    "original": "{ value: string; previousValue: string }",
+                    "resolved": "{ value: string; previousValue: string; }",
                     "references": {}
                 }
             }];
     }
-    static get elementRef() { return "host"; }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public method to programmatically set active segment",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Public method to get active segment value",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",
-                "methodName": "valueChanged"
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleValidationPropsChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleValidationPropsChange"
+            }, {
+                "propName": "size",
+                "methodName": "handleSizeChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "bcmOptionClick",
-                "method": "handleOptionClick",
+                "name": "bcmSegmentClick",
+                "method": "handleSegmentClick",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=segmented-picker.component.js.map