@eduboxpro/studio 0.1.20 → 0.1.21

package/fesm2022/eduboxpro-studio.mjs

@@ -4135,6 +4135,309 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 args: ['keydown', ['$event']]
             }] } });
 
+const COUNTRY_OPTIONS = [
+    { code: 'kz', name: 'Казахстан', dialCode: '+7', flag: '🇰🇿', minLength: 11, maxLength: 11, placeholder: '+7 XXX XXX XX XX' },
+    { code: 'ru', name: 'Россия', dialCode: '+7', flag: '🇷🇺', minLength: 11, maxLength: 11, placeholder: '+7 XXX XXX XX XX' },
+    { code: 'kg', name: 'Кыргызстан', dialCode: '+996', flag: '🇰🇬', minLength: 12, maxLength: 12, placeholder: '+996 XXX XXX XXX' },
+    { code: 'uz', name: 'Узбекистан', dialCode: '+998', flag: '🇺🇿', minLength: 12, maxLength: 12, placeholder: '+998 XX XXX XX XX' },
+    { code: 'tr', name: 'Турция', dialCode: '+90', flag: '🇹🇷', minLength: 12, maxLength: 12, placeholder: '+90 XXX XXX XX XX' },
+    { code: 'az', name: 'Азербайджан', dialCode: '+994', flag: '🇦🇿', minLength: 12, maxLength: 12, placeholder: '+994 XX XXX XX XX' }
+];
+class PhoneInputComponent {
+    configService = inject(StudioConfigService);
+    inputDefaults = computed(() => this.configService.config().components?.input, ...(ngDevMode ? [{ debugName: "inputDefaults" }] : []));
+    inputEl = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
+    // Styling
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.inputDefaults()?.variant), 'outline');
+    size = withConfigDefault(this.sizeInput, computed(() => this.inputDefaults()?.size), 'md');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.inputDefaults()?.radius), 'md');
+    // Phone specific
+    country = model('kz', ...(ngDevMode ? [{ debugName: "country" }] : []));
+    showCountrySelector = input(false, ...(ngDevMode ? [{ debugName: "showCountrySelector" }] : []));
+    showFlag = input(true, ...(ngDevMode ? [{ debugName: "showFlag" }] : []));
+    showCountryCode = input(true, ...(ngDevMode ? [{ debugName: "showCountryCode" }] : []));
+    // States
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    // Label & hints
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    errorMessage = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    // Layout
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : []));
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // Events
+    valueChange = output();
+    countryChange = output();
+    focused = output();
+    blurred = output();
+    // Internal state
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    isDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDropdownOpen" }] : []));
+    generatedId = `studio-phone-input-${Math.random().toString(36).substr(2, 9)}`;
+    onChange = () => { };
+    onTouched = () => { };
+    // Country options
+    countryOptions = COUNTRY_OPTIONS;
+    // Computed
+    currentCountry = computed(() => {
+        return COUNTRY_OPTIONS.find(c => c.code === this.country()) || COUNTRY_OPTIONS[0];
+    }, ...(ngDevMode ? [{ debugName: "currentCountry" }] : []));
+    currentFlag = computed(() => this.currentCountry().flag, ...(ngDevMode ? [{ debugName: "currentFlag" }] : []));
+    currentCode = computed(() => this.currentCountry().dialCode, ...(ngDevMode ? [{ debugName: "currentCode" }] : []));
+    currentPlaceholder = computed(() => this.currentCountry().placeholder, ...(ngDevMode ? [{ debugName: "currentPlaceholder" }] : []));
+    isComplete = computed(() => {
+        const digits = this.value().replace(/\D/g, '');
+        const config = this.currentCountry();
+        return digits.length >= config.minLength;
+    }, ...(ngDevMode ? [{ debugName: "isComplete" }] : []));
+    hasValue = computed(() => {
+        const val = this.value();
+        return val !== '' && val !== null && val !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    hostClasses = computed(() => classNames('studio-phone-input', `studio-phone-input--${this.variant()}`, `studio-phone-input--${this.size()}`, `studio-phone-input--radius-${this.radius()}`, this.error() && 'studio-phone-input--error', this.disabled() && 'studio-phone-input--disabled', this.readonly() && 'studio-phone-input--readonly', this.loading() && 'studio-phone-input--loading', this.fullWidth() && 'studio-phone-input--full-width', this.isFocused() && 'studio-phone-input--focused', this.isTouched() && 'studio-phone-input--touched', this.hasValue() && 'studio-phone-input--has-value', this.showCountrySelector() && 'studio-phone-input--with-selector'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    ariaDescribedByValue = computed(() => {
+        const ids = [];
+        if (this.hint())
+            ids.push(this.hintId);
+        if (this.error() && this.errorMessage())
+            ids.push(this.errorId);
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedByValue" }] : []));
+    hintId = `${this.generatedId}-hint`;
+    errorId = `${this.generatedId}-error`;
+    constructor() {
+        effect(() => {
+            if (this.autoFocus() && this.inputEl()) {
+                setTimeout(() => this.inputEl()?.nativeElement.focus(), 0);
+            }
+        });
+        // Re-format when country changes
+        effect(() => {
+            const country = this.country();
+            const currentValue = this.value();
+            if (currentValue) {
+                const formatted = this.formatPhoneNumber(currentValue);
+                this.displayValue.set(formatted);
+            }
+        });
+    }
+    // ControlValueAccessor
+    writeValue(value) {
+        const formatted = this.formatPhoneNumber(value ?? '');
+        this.value.set(value ?? '');
+        this.displayValue.set(formatted);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
+    // Validator
+    validate(control) {
+        if (!control.value)
+            return null;
+        const digits = control.value.replace(/\D/g, '');
+        const config = this.currentCountry();
+        if (digits.length < config.minLength) {
+            return { phoneIncomplete: { value: control.value, required: config.minLength, actual: digits.length } };
+        }
+        return null;
+    }
+    // Country selector
+    toggleDropdown() {
+        if (this.disabled() || this.readonly())
+            return;
+        this.isDropdownOpen.update(v => !v);
+    }
+    selectCountry(country) {
+        this.country.set(country.code);
+        this.isDropdownOpen.set(false);
+        this.countryChange.emit(country.code);
+        // Clear current value and set new country code
+        const newCode = country.dialCode;
+        this.value.set('');
+        this.displayValue.set('');
+        // Focus input after selecting
+        setTimeout(() => {
+            this.inputEl()?.nativeElement.focus();
+        }, 0);
+    }
+    closeDropdown() {
+        this.isDropdownOpen.set(false);
+    }
+    // Format phone number for display
+    formatPhoneNumber(value) {
+        let digits = value.replace(/\D/g, '');
+        if (!digits)
+            return '';
+        const config = this.currentCountry();
+        digits = digits.slice(0, config.maxLength);
+        return this.formatByCountry(digits, this.country());
+    }
+    formatByCountry(digits, country) {
+        switch (country) {
+            case 'kz':
+            case 'ru':
+                // +7 XXX XXX XX XX
+                return this.formatPattern(digits, [1, 3, 3, 2, 2], '+');
+            case 'kg':
+                // +996 XXX XXX XXX
+                return this.formatPattern(digits, [3, 3, 3, 3], '+');
+            case 'uz':
+                // +998 XX XXX XX XX
+                return this.formatPattern(digits, [3, 2, 3, 2, 2], '+');
+            case 'tr':
+                // +90 XXX XXX XX XX
+                return this.formatPattern(digits, [2, 3, 3, 2, 2], '+');
+            case 'az':
+                // +994 XX XXX XX XX
+                return this.formatPattern(digits, [3, 2, 3, 2, 2], '+');
+            default:
+                return '+' + digits;
+        }
+    }
+    formatPattern(digits, groups, prefix) {
+        let result = prefix;
+        let index = 0;
+        for (let i = 0; i < groups.length && index < digits.length; i++) {
+            const groupSize = groups[i];
+            const chunk = digits.slice(index, index + groupSize);
+            if (i > 0 && chunk) {
+                result += ' ';
+            }
+            result += chunk;
+            index += groupSize;
+        }
+        return result;
+    }
+    // Event handlers
+    handleInput(event) {
+        const target = event.target;
+        const cursorPos = target.selectionStart || 0;
+        const oldValue = this.displayValue();
+        let rawValue = target.value;
+        const formatted = this.formatPhoneNumber(rawValue);
+        const rawDigits = rawValue.replace(/\D/g, '');
+        this.value.set(rawDigits ? '+' + rawDigits : '');
+        this.displayValue.set(formatted);
+        target.value = formatted;
+        const lengthDiff = formatted.length - oldValue.length;
+        let newCursorPos = cursorPos + lengthDiff;
+        newCursorPos = Math.max(0, Math.min(newCursorPos, formatted.length));
+        setTimeout(() => {
+            target.setSelectionRange(newCursorPos, newCursorPos);
+        }, 0);
+        const outputValue = rawDigits ? '+' + rawDigits : '';
+        this.onChange(outputValue);
+        this.valueChange.emit(outputValue);
+    }
+    handleFocus(event) {
+        this.isFocused.set(true);
+        if (!this.displayValue() && this.showCountryCode()) {
+            const code = this.currentCountry().dialCode;
+            this.displayValue.set(code + ' ');
+            const target = event.target;
+            target.value = code + ' ';
+            setTimeout(() => {
+                target.setSelectionRange(target.value.length, target.value.length);
+            }, 0);
+        }
+        this.focused.emit(event);
+    }
+    handleBlur(event) {
+        this.isFocused.set(false);
+        this.isTouched.set(true);
+        const digits = this.value().replace(/\D/g, '');
+        const codeDigits = this.currentCountry().dialCode.replace(/\D/g, '');
+        if (digits === codeDigits || digits.length <= codeDigits.length) {
+            this.value.set('');
+            this.displayValue.set('');
+            const target = event.target;
+            target.value = '';
+            this.onChange('');
+        }
+        this.onTouched();
+        this.blurred.emit(event);
+    }
+    handleKeyDown(event) {
+        const target = event.target;
+        const cursorPos = target.selectionStart || 0;
+        // Allow: backspace, delete, tab, escape, enter, arrows
+        if ([8, 46, 9, 27, 13, 37, 38, 39, 40].includes(event.keyCode)) {
+            return;
+        }
+        // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+        if ((event.ctrlKey || event.metaKey) && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
+            return;
+        }
+        // Allow: + at the beginning
+        if (event.key === '+' && cursorPos === 0) {
+            return;
+        }
+        // Block non-numeric
+        if (!/^\d$/.test(event.key)) {
+            event.preventDefault();
+        }
+        // Block if max length reached
+        const digits = target.value.replace(/\D/g, '');
+        if (digits.length >= this.currentCountry().maxLength && target.selectionStart === target.selectionEnd) {
+            event.preventDefault();
+        }
+    }
+    handleContainerClick(event) {
+        // Close dropdown when clicking outside selector
+        const target = event.target;
+        if (!target.closest('.studio-phone-input__selector')) {
+            this.isDropdownOpen.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: PhoneInputComponent, isStandalone: true, selector: "studio-phone-input", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, showCountrySelector: { classPropertyName: "showCountrySelector", publicName: "showCountrySelector", isSignal: true, isRequired: false, transformFunction: null }, showFlag: { classPropertyName: "showFlag", publicName: "showFlag", isSignal: true, isRequired: false, transformFunction: null }, showCountryCode: { classPropertyName: "showCountryCode", publicName: "showCountryCode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { country: "countryChange", valueChange: "valueChange", countryChange: "countryChange", focused: "focused", blurred: "blurred" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PhoneInputComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => PhoneInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label [for]=\"id() || generatedId\" class=\"studio-phone-input__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-phone-input__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-phone-input__container\" (click)=\"handleContainerClick($event)\">\n  @if (showCountrySelector()) {\n    <div class=\"studio-phone-input__selector\">\n      <button\n        type=\"button\"\n        class=\"studio-phone-input__selector-btn\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"toggleDropdown()\"\n        [attr.aria-expanded]=\"isDropdownOpen()\"\n        aria-haspopup=\"listbox\">\n        <span class=\"studio-phone-input__selector-flag\">{{ currentFlag() }}</span>\n        <studio-icon name=\"chevron-down\" [size]=\"14\" class=\"studio-phone-input__selector-arrow\" />\n      </button>\n\n      @if (isDropdownOpen()) {\n        <div class=\"studio-phone-input__dropdown\" role=\"listbox\">\n          @for (option of countryOptions; track option.code) {\n            <button\n              type=\"button\"\n              class=\"studio-phone-input__dropdown-item\"\n              [class.studio-phone-input__dropdown-item--selected]=\"option.code === country()\"\n              role=\"option\"\n              [attr.aria-selected]=\"option.code === country()\"\n              (click)=\"selectCountry(option)\">\n              <span class=\"studio-phone-input__dropdown-flag\">{{ option.flag }}</span>\n              <span class=\"studio-phone-input__dropdown-name\">{{ option.name }}</span>\n              <span class=\"studio-phone-input__dropdown-code\">{{ option.dialCode }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  } @else if (showFlag()) {\n    <span class=\"studio-phone-input__flag\">\n      {{ currentFlag() }}\n    </span>\n  }\n\n  <input\n    #inputElement\n    type=\"tel\"\n    inputmode=\"tel\"\n    class=\"studio-phone-input__field\"\n    [value]=\"displayValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [placeholder]=\"currentPlaceholder()\"\n    [required]=\"required()\"\n    [name]=\"name()\"\n    [id]=\"id() || generatedId\"\n    [attr.aria-label]=\"ariaLabel() || label() || 'Phone number'\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedByValue()\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  />\n\n  @if (loading()) {\n    <span class=\"studio-phone-input__loading\">\n      <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n    </span>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"studio-phone-input__hint\" [id]=\"hintId\">\n    {{ hint() }}\n  </span>\n}\n\n@if (error() && errorMessage()) {\n  <span class=\"studio-phone-input__error\" [id]=\"errorId\" role=\"alert\">\n    <studio-icon name=\"alert-circle\" [size]=\"14\" />\n    {{ errorMessage() }}\n  </span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-phone-input--full-width){width:100%}.studio-phone-input__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-phone-input__label .studio-phone-input__required{color:var(--studio-error);margin-left:.125rem}.studio-phone-input__container{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-phone-input__flag{display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.studio-phone-input__selector{position:relative;display:flex;align-items:center;flex-shrink:0}.studio-phone-input__selector-btn{display:flex;align-items:center;gap:.25rem;padding:0;background:transparent;border:none;cursor:pointer;color:var(--studio-text-primary);transition:all var(--studio-transition-fast)}.studio-phone-input__selector-btn:hover:not(:disabled){opacity:.8}.studio-phone-input__selector-btn:disabled{cursor:not-allowed;opacity:.6}.studio-phone-input__selector-flag{font-size:1.25rem;line-height:1}.studio-phone-input__selector-arrow{color:var(--studio-text-secondary);transition:transform var(--studio-transition-fast)}:host(.studio-phone-input--focused) .studio-phone-input__selector-arrow{color:var(--studio-primary)}.studio-phone-input__dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:100;min-width:200px;max-height:280px;overflow-y:auto;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-lg);padding:.25rem}.studio-phone-input__dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:transparent;border:none;border-radius:var(--studio-radius-sm);cursor:pointer;text-align:left;color:var(--studio-text-primary);transition:all var(--studio-transition-fast)}.studio-phone-input__dropdown-item:hover{background:var(--studio-bg-secondary)}.studio-phone-input__dropdown-item--selected{background:var(--studio-primary-bg);color:var(--studio-primary)}.studio-phone-input__dropdown-flag{font-size:1.25rem;line-height:1;flex-shrink:0}.studio-phone-input__dropdown-name{flex:1;font-size:.875rem;white-space:nowrap}.studio-phone-input__dropdown-code{font-size:.75rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-phone-input__field{flex:1;width:100%;font-family:inherit;font-size:1rem;color:var(--studio-text-primary);background:transparent;border:none;outline:none;transition:all var(--studio-transition-fast)}.studio-phone-input__field::placeholder{color:var(--studio-text-tertiary)}.studio-phone-input__field:disabled{cursor:not-allowed;opacity:.6}.studio-phone-input__field:read-only{cursor:default}.studio-phone-input__loading{display:flex;align-items:center;color:var(--studio-primary);flex-shrink:0}.studio-phone-input__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-phone-input__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-phone-input__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}:host(.studio-phone-input--outline) .studio-phone-input__container{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-phone-input--outline) .studio-phone-input__container:hover:not(:has(.studio-phone-input__field:disabled)){border-color:var(--studio-primary)}:host(.studio-phone-input--outline.studio-phone-input--focused) .studio-phone-input__container{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-phone-input--outline.studio-phone-input--error) .studio-phone-input__container{border-color:var(--studio-error)}:host(.studio-phone-input--outline.studio-phone-input--error) .studio-phone-input__container:hover{border-color:var(--studio-error)}:host(.studio-phone-input--outline.studio-phone-input--error.studio-phone-input--focused) .studio-phone-input__container{box-shadow:0 0 0 3px #ef44441a}:host(.studio-phone-input--outline.studio-phone-input--disabled) .studio-phone-input__container{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-phone-input--filled) .studio-phone-input__container{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-phone-input--filled) .studio-phone-input__container:hover:not(:has(.studio-phone-input__field:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-phone-input--filled.studio-phone-input--focused) .studio-phone-input__container{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-phone-input--filled.studio-phone-input--error) .studio-phone-input__container{border-bottom-color:var(--studio-error)}:host(.studio-phone-input--filled.studio-phone-input--disabled) .studio-phone-input__container{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-phone-input--underline) .studio-phone-input__container{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-phone-input--underline) .studio-phone-input__container:hover:not(:has(.studio-phone-input__field:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-phone-input--underline.studio-phone-input--focused) .studio-phone-input__container{border-bottom:2px solid var(--studio-primary)}:host(.studio-phone-input--underline.studio-phone-input--error) .studio-phone-input__container{border-bottom-color:var(--studio-error)}:host(.studio-phone-input--underline.studio-phone-input--disabled) .studio-phone-input__container{border-bottom-style:dashed;opacity:.6}:host(.studio-phone-input--sm) .studio-phone-input__field{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-phone-input--sm) .studio-phone-input__flag{padding-left:.75rem;font-size:1rem}:host(.studio-phone-input--sm) .studio-phone-input__selector{padding-left:.75rem}:host(.studio-phone-input--sm) .studio-phone-input__selector-flag{font-size:1rem}:host(.studio-phone-input--sm) .studio-phone-input__loading{padding-right:.5rem}:host(.studio-phone-input--md) .studio-phone-input__field{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-phone-input--md) .studio-phone-input__flag{padding-left:1rem;font-size:1.25rem}:host(.studio-phone-input--md) .studio-phone-input__selector{padding-left:1rem}:host(.studio-phone-input--md) .studio-phone-input__selector-flag{font-size:1.25rem}:host(.studio-phone-input--md) .studio-phone-input__loading{padding-right:.75rem}:host(.studio-phone-input--lg) .studio-phone-input__field{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-phone-input--lg) .studio-phone-input__flag{padding-left:1.25rem;font-size:1.5rem}:host(.studio-phone-input--lg) .studio-phone-input__selector{padding-left:1.25rem}:host(.studio-phone-input--lg) .studio-phone-input__selector-flag{font-size:1.5rem}:host(.studio-phone-input--lg) .studio-phone-input__loading{padding-right:1rem}:host(.studio-phone-input--radius-none) .studio-phone-input__container{border-radius:0}:host(.studio-phone-input--radius-sm) .studio-phone-input__container{border-radius:var(--studio-radius-sm)}:host(.studio-phone-input--radius-md) .studio-phone-input__container{border-radius:var(--studio-radius-md)}:host(.studio-phone-input--radius-lg) .studio-phone-input__container{border-radius:var(--studio-radius-lg)}:host(.studio-phone-input--radius-full) .studio-phone-input__container{border-radius:9999px}:host(.studio-phone-input--filled.studio-phone-input--radius-none) .studio-phone-input__container{border-radius:0}:host(.studio-phone-input--filled.studio-phone-input--radius-sm) .studio-phone-input__container{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-phone-input--filled.studio-phone-input--radius-md) .studio-phone-input__container{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-phone-input--filled.studio-phone-input--radius-lg) .studio-phone-input__container{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-phone-input--filled.studio-phone-input--radius-full) .studio-phone-input__container{border-radius:9999px 9999px 0 0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: PhoneInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-phone-input', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhoneInputComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => PhoneInputComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "@if (label()) {\n  <label [for]=\"id() || generatedId\" class=\"studio-phone-input__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-phone-input__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-phone-input__container\" (click)=\"handleContainerClick($event)\">\n  @if (showCountrySelector()) {\n    <div class=\"studio-phone-input__selector\">\n      <button\n        type=\"button\"\n        class=\"studio-phone-input__selector-btn\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"toggleDropdown()\"\n        [attr.aria-expanded]=\"isDropdownOpen()\"\n        aria-haspopup=\"listbox\">\n        <span class=\"studio-phone-input__selector-flag\">{{ currentFlag() }}</span>\n        <studio-icon name=\"chevron-down\" [size]=\"14\" class=\"studio-phone-input__selector-arrow\" />\n      </button>\n\n      @if (isDropdownOpen()) {\n        <div class=\"studio-phone-input__dropdown\" role=\"listbox\">\n          @for (option of countryOptions; track option.code) {\n            <button\n              type=\"button\"\n              class=\"studio-phone-input__dropdown-item\"\n              [class.studio-phone-input__dropdown-item--selected]=\"option.code === country()\"\n              role=\"option\"\n              [attr.aria-selected]=\"option.code === country()\"\n              (click)=\"selectCountry(option)\">\n              <span class=\"studio-phone-input__dropdown-flag\">{{ option.flag }}</span>\n              <span class=\"studio-phone-input__dropdown-name\">{{ option.name }}</span>\n              <span class=\"studio-phone-input__dropdown-code\">{{ option.dialCode }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  } @else if (showFlag()) {\n    <span class=\"studio-phone-input__flag\">\n      {{ currentFlag() }}\n    </span>\n  }\n\n  <input\n    #inputElement\n    type=\"tel\"\n    inputmode=\"tel\"\n    class=\"studio-phone-input__field\"\n    [value]=\"displayValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [placeholder]=\"currentPlaceholder()\"\n    [required]=\"required()\"\n    [name]=\"name()\"\n    [id]=\"id() || generatedId\"\n    [attr.aria-label]=\"ariaLabel() || label() || 'Phone number'\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedByValue()\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  />\n\n  @if (loading()) {\n    <span class=\"studio-phone-input__loading\">\n      <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n    </span>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"studio-phone-input__hint\" [id]=\"hintId\">\n    {{ hint() }}\n  </span>\n}\n\n@if (error() && errorMessage()) {\n  <span class=\"studio-phone-input__error\" [id]=\"errorId\" role=\"alert\">\n    <studio-icon name=\"alert-circle\" [size]=\"14\" />\n    {{ errorMessage() }}\n  </span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-phone-input--full-width){width:100%}.studio-phone-input__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-phone-input__label .studio-phone-input__required{color:var(--studio-error);margin-left:.125rem}.studio-phone-input__container{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-phone-input__flag{display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.studio-phone-input__selector{position:relative;display:flex;align-items:center;flex-shrink:0}.studio-phone-input__selector-btn{display:flex;align-items:center;gap:.25rem;padding:0;background:transparent;border:none;cursor:pointer;color:var(--studio-text-primary);transition:all var(--studio-transition-fast)}.studio-phone-input__selector-btn:hover:not(:disabled){opacity:.8}.studio-phone-input__selector-btn:disabled{cursor:not-allowed;opacity:.6}.studio-phone-input__selector-flag{font-size:1.25rem;line-height:1}.studio-phone-input__selector-arrow{color:var(--studio-text-secondary);transition:transform var(--studio-transition-fast)}:host(.studio-phone-input--focused) .studio-phone-input__selector-arrow{color:var(--studio-primary)}.studio-phone-input__dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:100;min-width:200px;max-height:280px;overflow-y:auto;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-lg);padding:.25rem}.studio-phone-input__dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:transparent;border:none;border-radius:var(--studio-radius-sm);cursor:pointer;text-align:left;color:var(--studio-text-primary);transition:all var(--studio-transition-fast)}.studio-phone-input__dropdown-item:hover{background:var(--studio-bg-secondary)}.studio-phone-input__dropdown-item--selected{background:var(--studio-primary-bg);color:var(--studio-primary)}.studio-phone-input__dropdown-flag{font-size:1.25rem;line-height:1;flex-shrink:0}.studio-phone-input__dropdown-name{flex:1;font-size:.875rem;white-space:nowrap}.studio-phone-input__dropdown-code{font-size:.75rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-phone-input__field{flex:1;width:100%;font-family:inherit;font-size:1rem;color:var(--studio-text-primary);background:transparent;border:none;outline:none;transition:all var(--studio-transition-fast)}.studio-phone-input__field::placeholder{color:var(--studio-text-tertiary)}.studio-phone-input__field:disabled{cursor:not-allowed;opacity:.6}.studio-phone-input__field:read-only{cursor:default}.studio-phone-input__loading{display:flex;align-items:center;color:var(--studio-primary);flex-shrink:0}.studio-phone-input__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-phone-input__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-phone-input__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}:host(.studio-phone-input--outline) .studio-phone-input__container{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-phone-input--outline) .studio-phone-input__container:hover:not(:has(.studio-phone-input__field:disabled)){border-color:var(--studio-primary)}:host(.studio-phone-input--outline.studio-phone-input--focused) .studio-phone-input__container{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-phone-input--outline.studio-phone-input--error) .studio-phone-input__container{border-color:var(--studio-error)}:host(.studio-phone-input--outline.studio-phone-input--error) .studio-phone-input__container:hover{border-color:var(--studio-error)}:host(.studio-phone-input--outline.studio-phone-input--error.studio-phone-input--focused) .studio-phone-input__container{box-shadow:0 0 0 3px #ef44441a}:host(.studio-phone-input--outline.studio-phone-input--disabled) .studio-phone-input__container{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-phone-input--filled) .studio-phone-input__container{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-phone-input--filled) .studio-phone-input__container:hover:not(:has(.studio-phone-input__field:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-phone-input--filled.studio-phone-input--focused) .studio-phone-input__container{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-phone-input--filled.studio-phone-input--error) .studio-phone-input__container{border-bottom-color:var(--studio-error)}:host(.studio-phone-input--filled.studio-phone-input--disabled) .studio-phone-input__container{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-phone-input--underline) .studio-phone-input__container{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-phone-input--underline) .studio-phone-input__container:hover:not(:has(.studio-phone-input__field:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-phone-input--underline.studio-phone-input--focused) .studio-phone-input__container{border-bottom:2px solid var(--studio-primary)}:host(.studio-phone-input--underline.studio-phone-input--error) .studio-phone-input__container{border-bottom-color:var(--studio-error)}:host(.studio-phone-input--underline.studio-phone-input--disabled) .studio-phone-input__container{border-bottom-style:dashed;opacity:.6}:host(.studio-phone-input--sm) .studio-phone-input__field{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-phone-input--sm) .studio-phone-input__flag{padding-left:.75rem;font-size:1rem}:host(.studio-phone-input--sm) .studio-phone-input__selector{padding-left:.75rem}:host(.studio-phone-input--sm) .studio-phone-input__selector-flag{font-size:1rem}:host(.studio-phone-input--sm) .studio-phone-input__loading{padding-right:.5rem}:host(.studio-phone-input--md) .studio-phone-input__field{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-phone-input--md) .studio-phone-input__flag{padding-left:1rem;font-size:1.25rem}:host(.studio-phone-input--md) .studio-phone-input__selector{padding-left:1rem}:host(.studio-phone-input--md) .studio-phone-input__selector-flag{font-size:1.25rem}:host(.studio-phone-input--md) .studio-phone-input__loading{padding-right:.75rem}:host(.studio-phone-input--lg) .studio-phone-input__field{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-phone-input--lg) .studio-phone-input__flag{padding-left:1.25rem;font-size:1.5rem}:host(.studio-phone-input--lg) .studio-phone-input__selector{padding-left:1.25rem}:host(.studio-phone-input--lg) .studio-phone-input__selector-flag{font-size:1.5rem}:host(.studio-phone-input--lg) .studio-phone-input__loading{padding-right:1rem}:host(.studio-phone-input--radius-none) .studio-phone-input__container{border-radius:0}:host(.studio-phone-input--radius-sm) .studio-phone-input__container{border-radius:var(--studio-radius-sm)}:host(.studio-phone-input--radius-md) .studio-phone-input__container{border-radius:var(--studio-radius-md)}:host(.studio-phone-input--radius-lg) .studio-phone-input__container{border-radius:var(--studio-radius-lg)}:host(.studio-phone-input--radius-full) .studio-phone-input__container{border-radius:9999px}:host(.studio-phone-input--filled.studio-phone-input--radius-none) .studio-phone-input__container{border-radius:0}:host(.studio-phone-input--filled.studio-phone-input--radius-sm) .studio-phone-input__container{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-phone-input--filled.studio-phone-input--radius-md) .studio-phone-input__container{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-phone-input--filled.studio-phone-input--radius-lg) .studio-phone-input__container{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-phone-input--filled.studio-phone-input--radius-full) .studio-phone-input__container{border-radius:9999px 9999px 0 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }, { type: i0.Output, args: ["countryChange"] }], showCountrySelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountrySelector", required: false }] }], showFlag: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFlag", required: false }] }], showCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountryCode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], countryChange: [{ type: i0.Output, args: ["countryChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+
 class ModalComponent {
     destroyRef = inject(DestroyRef);
     // Inputs
@@ -6905,5 +7208,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map