@eduboxpro/studio 0.1.40 → 0.1.41

package/fesm2022/eduboxpro-studio.mjs

@@ -5702,6 +5702,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Switch component
  */
 
+/**
+ * Tags Input component with form control support
+ *
+ * @example
+ * <studio-tags-input [(ngModel)]="tags" label="Tags" />
+ * <studio-tags-input [formControl]="tagsControl" placeholder="Add tags..." />
+ */
+class TagsInputComponent {
+    configService = inject(StudioConfigService);
+    tagsInputDefaults = computed(() => this.configService.config().components?.tagsInput, ...(ngDevMode ? [{ debugName: "tagsInputDefaults" }] : []));
+    inputRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    size = withConfigDefault(this.sizeInput, computed(() => this.tagsInputDefaults()?.size), 'md');
+    variant = withConfigDefault(this.variantInput, computed(() => this.tagsInputDefaults()?.variant), 'outline');
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    placeholder = input('Добавьте теги...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
+    tagPrefix = input('#', ...(ngDevMode ? [{ debugName: "tagPrefix" }] : []));
+    tagColor = input('primary', ...(ngDevMode ? [{ debugName: "tagColor" }] : []));
+    maxTags = input(...(ngDevMode ? [undefined, { debugName: "maxTags" }] : []));
+    minLength = input(1, ...(ngDevMode ? [{ debugName: "minLength" }] : []));
+    maxLength = input(50, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : []));
+    separators = input([',', 'Enter'], ...(ngDevMode ? [{ debugName: "separators" }] : []));
+    transform = input('none', ...(ngDevMode ? [{ debugName: "transform" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    tagsChange = output();
+    tagAdded = output();
+    tagRemoved = output();
+    tags = signal([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    inputId = `studio-tags-input-${Math.random().toString(36).substr(2, 9)}`;
+    onChange = () => { };
+    onTouched = () => { };
+    badgeSize = computed(() => {
+        const size = this.size();
+        if (size === 'lg')
+            return 'md';
+        return 'sm';
+    }, ...(ngDevMode ? [{ debugName: "badgeSize" }] : []));
+    hostClasses = computed(() => classNames('studio-tags-input', `studio-tags-input--${this.size()}`, `studio-tags-input--${this.variant()}`, this.fullWidth() && 'studio-tags-input--full-width', this.disabled() && 'studio-tags-input--disabled', this.error() && 'studio-tags-input--error'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    focusInput() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    onInput(event) {
+        const value = event.target.value;
+        const separators = this.separators().filter(s => s !== 'Enter');
+        for (const sep of separators) {
+            if (value.includes(sep)) {
+                const parts = value.split(sep);
+                const tagToAdd = parts[0].trim();
+                if (tagToAdd) {
+                    this.addTag(tagToAdd);
+                }
+                this.inputValue.set(parts.slice(1).join(sep));
+                return;
+            }
+        }
+        this.inputValue.set(value);
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && this.separators().includes('Enter')) {
+            event.preventDefault();
+            const value = this.inputValue().trim();
+            if (value) {
+                this.addTag(value);
+                this.inputValue.set('');
+            }
+        }
+        else if (event.key === 'Backspace' && !this.inputValue()) {
+            const currentTags = this.tags();
+            if (currentTags.length > 0) {
+                const removed = currentTags[currentTags.length - 1];
+                this.removeTag(removed);
+            }
+        }
+    }
+    onPaste(event) {
+        const pastedText = event.clipboardData?.getData('text');
+        if (!pastedText)
+            return;
+        const separators = this.separators().filter(s => s !== 'Enter');
+        let hasSeparator = false;
+        for (const sep of separators) {
+            if (pastedText.includes(sep)) {
+                hasSeparator = true;
+                event.preventDefault();
+                const parts = pastedText.split(sep);
+                parts.forEach(part => {
+                    const tag = part.trim();
+                    if (tag) {
+                        this.addTag(tag);
+                    }
+                });
+                break;
+            }
+        }
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+        const value = this.inputValue().trim();
+        if (value) {
+            this.addTag(value);
+            this.inputValue.set('');
+        }
+    }
+    addTag(tag) {
+        let processedTag = tag.replace(/^#/, '').trim();
+        if (processedTag.length < this.minLength() || processedTag.length > this.maxLength()) {
+            return;
+        }
+        const transform = this.transform();
+        if (transform === 'lowercase') {
+            processedTag = processedTag.toLowerCase();
+        }
+        else if (transform === 'uppercase') {
+            processedTag = processedTag.toUpperCase();
+        }
+        const currentTags = this.tags();
+        if (!this.allowDuplicates() && currentTags.includes(processedTag)) {
+            return;
+        }
+        const max = this.maxTags();
+        if (max && currentTags.length >= max) {
+            return;
+        }
+        const newTags = [...currentTags, processedTag];
+        this.tags.set(newTags);
+        this.onChange(newTags);
+        this.tagsChange.emit(newTags);
+        this.tagAdded.emit(processedTag);
+    }
+    removeTag(tag) {
+        if (this.disabled())
+            return;
+        const newTags = this.tags().filter(t => t !== tag);
+        this.tags.set(newTags);
+        this.onChange(newTags);
+        this.tagsChange.emit(newTags);
+        this.tagRemoved.emit(tag);
+    }
+    writeValue(value) {
+        this.tags.set(value || []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TagsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TagsInputComponent, isStandalone: true, selector: "studio-tags-input", inputs: { sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, tagPrefix: { classPropertyName: "tagPrefix", publicName: "tagPrefix", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { tagsChange: "tagsChange", tagAdded: "tagAdded", tagRemoved: "tagRemoved" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TagsInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"studio-tags-input__wrapper\">\n  @if (label()) {\n    <label class=\"studio-tags-input__label\" [for]=\"inputId\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-tags-input__required\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    class=\"studio-tags-input__container\"\n    [class.studio-tags-input__container--focused]=\"isFocused()\"\n    [class.studio-tags-input__container--disabled]=\"disabled()\"\n    [class.studio-tags-input__container--error]=\"error()\"\n    (click)=\"focusInput()\"\n  >\n    @for (tag of tags(); track tag) {\n      <studio-badge\n        variant=\"soft\"\n        [color]=\"tagColor()\"\n        [size]=\"badgeSize()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"removeTag(tag)\"\n      >\n        @if (tagPrefix()) {\n          {{ tagPrefix() }}\n        }\n        {{ tag }}\n      </studio-badge>\n    }\n\n    <input\n      #inputElement\n      [id]=\"inputId\"\n      type=\"text\"\n      class=\"studio-tags-input__input\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  @if (hint() && !error()) {\n    <p class=\"studio-tags-input__hint\">{{ hint() }}</p>\n  }\n\n  @if (error() && errorMessage()) {\n    <p class=\"studio-tags-input__error\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:inline-block}.studio-tags-input--full-width{display:block;width:100%}.studio-tags-input--full-width .studio-tags-input__container{width:100%}.studio-tags-input__wrapper{display:flex;flex-direction:column;gap:.25rem}.studio-tags-input__label{display:block;font-size:.875rem;font-weight:500;color:var(--studio-text-primary, #374151);margin-bottom:.25rem}:host-context(.dark) .studio-tags-input__label{color:var(--studio-text-primary-dark, #d1d5db)}.studio-tags-input__required{color:var(--studio-color-error, #ef4444);margin-left:.125rem}.studio-tags-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;padding:.5rem .75rem;min-height:2.5rem;border:1px solid var(--studio-border-color, #d1d5db);border-radius:var(--studio-radius-md, .5rem);background:var(--studio-bg-primary, #ffffff);cursor:text;transition:all .15s ease}:host-context(.dark) .studio-tags-input__container{background:var(--studio-bg-primary-dark, #1f2937);border-color:var(--studio-border-color-dark, #4b5563)}.studio-tags-input__container--focused{border-color:var(--studio-color-primary, #3b82f6);box-shadow:0 0 0 2px var(--studio-color-primary-alpha, rgba(59, 130, 246, .2))}.studio-tags-input__container--disabled{opacity:.6;cursor:not-allowed;background:var(--studio-bg-disabled, #f3f4f6)}:host-context(.dark) .studio-tags-input__container--disabled{background:var(--studio-bg-disabled-dark, #374151)}.studio-tags-input__container--error{border-color:var(--studio-color-error, #ef4444)}.studio-tags-input__container--error.studio-tags-input__container--focused{box-shadow:0 0 0 2px var(--studio-color-error-alpha, rgba(239, 68, 68, .2))}.studio-tags-input__input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font-size:.875rem;color:var(--studio-text-primary, #111827);padding:0}:host-context(.dark) .studio-tags-input__input{color:var(--studio-text-primary-dark, #f9fafb)}.studio-tags-input__input::placeholder{color:var(--studio-text-muted, #9ca3af)}.studio-tags-input__input:disabled{cursor:not-allowed}.studio-tags-input__hint{font-size:.75rem;color:var(--studio-text-muted, #6b7280);margin:0}.studio-tags-input__error{font-size:.75rem;color:var(--studio-color-error, #ef4444);margin:0}:host(.studio-tags-input--sm) .studio-tags-input__container{min-height:2rem;padding:.25rem .5rem;gap:.25rem}:host(.studio-tags-input--sm) .studio-tags-input__input{font-size:.75rem}:host(.studio-tags-input--sm) .studio-tags-input__label{font-size:.75rem}:host(.studio-tags-input--lg) .studio-tags-input__container{min-height:3rem;padding:.625rem 1rem;gap:.5rem}:host(.studio-tags-input--lg) .studio-tags-input__input{font-size:1rem}:host(.studio-tags-input--lg) .studio-tags-input__label{font-size:1rem}:host(.studio-tags-input--filled) .studio-tags-input__container{background:var(--studio-bg-secondary, #f3f4f6);border-color:transparent}:host-context(.dark) :host(.studio-tags-input--filled) .studio-tags-input__container{background:var(--studio-bg-secondary-dark, #374151)}:host(.studio-tags-input--filled) .studio-tags-input__container--focused{background:var(--studio-bg-primary, #ffffff);border-color:var(--studio-color-primary, #3b82f6)}:host-context(.dark) :host(.studio-tags-input--filled) .studio-tags-input__container--focused{background:var(--studio-bg-primary-dark, #1f2937)}:host(.studio-tags-input--ghost) .studio-tags-input__container{background:transparent;border-color:transparent}:host(.studio-tags-input--ghost) .studio-tags-input__container--focused{background:var(--studio-bg-secondary, #f3f4f6)}:host-context(.dark) :host(.studio-tags-input--ghost) .studio-tags-input__container--focused{background:var(--studio-bg-secondary-dark, #374151)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "studio-badge", inputs: ["variant", "size", "color", "radius", "icon", "iconPosition", "dot", "dotColor", "removable", "href", "target", "disabled", "value", "max", "showZero", "uppercase", "bold", "pulse", "autoColor"], outputs: ["removed", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TagsInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-tags-input', standalone: true, imports: [BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TagsInputComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<div class=\"studio-tags-input__wrapper\">\n  @if (label()) {\n    <label class=\"studio-tags-input__label\" [for]=\"inputId\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-tags-input__required\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    class=\"studio-tags-input__container\"\n    [class.studio-tags-input__container--focused]=\"isFocused()\"\n    [class.studio-tags-input__container--disabled]=\"disabled()\"\n    [class.studio-tags-input__container--error]=\"error()\"\n    (click)=\"focusInput()\"\n  >\n    @for (tag of tags(); track tag) {\n      <studio-badge\n        variant=\"soft\"\n        [color]=\"tagColor()\"\n        [size]=\"badgeSize()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"removeTag(tag)\"\n      >\n        @if (tagPrefix()) {\n          {{ tagPrefix() }}\n        }\n        {{ tag }}\n      </studio-badge>\n    }\n\n    <input\n      #inputElement\n      [id]=\"inputId\"\n      type=\"text\"\n      class=\"studio-tags-input__input\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  @if (hint() && !error()) {\n    <p class=\"studio-tags-input__hint\">{{ hint() }}</p>\n  }\n\n  @if (error() && errorMessage()) {\n    <p class=\"studio-tags-input__error\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:inline-block}.studio-tags-input--full-width{display:block;width:100%}.studio-tags-input--full-width .studio-tags-input__container{width:100%}.studio-tags-input__wrapper{display:flex;flex-direction:column;gap:.25rem}.studio-tags-input__label{display:block;font-size:.875rem;font-weight:500;color:var(--studio-text-primary, #374151);margin-bottom:.25rem}:host-context(.dark) .studio-tags-input__label{color:var(--studio-text-primary-dark, #d1d5db)}.studio-tags-input__required{color:var(--studio-color-error, #ef4444);margin-left:.125rem}.studio-tags-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;padding:.5rem .75rem;min-height:2.5rem;border:1px solid var(--studio-border-color, #d1d5db);border-radius:var(--studio-radius-md, .5rem);background:var(--studio-bg-primary, #ffffff);cursor:text;transition:all .15s ease}:host-context(.dark) .studio-tags-input__container{background:var(--studio-bg-primary-dark, #1f2937);border-color:var(--studio-border-color-dark, #4b5563)}.studio-tags-input__container--focused{border-color:var(--studio-color-primary, #3b82f6);box-shadow:0 0 0 2px var(--studio-color-primary-alpha, rgba(59, 130, 246, .2))}.studio-tags-input__container--disabled{opacity:.6;cursor:not-allowed;background:var(--studio-bg-disabled, #f3f4f6)}:host-context(.dark) .studio-tags-input__container--disabled{background:var(--studio-bg-disabled-dark, #374151)}.studio-tags-input__container--error{border-color:var(--studio-color-error, #ef4444)}.studio-tags-input__container--error.studio-tags-input__container--focused{box-shadow:0 0 0 2px var(--studio-color-error-alpha, rgba(239, 68, 68, .2))}.studio-tags-input__input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font-size:.875rem;color:var(--studio-text-primary, #111827);padding:0}:host-context(.dark) .studio-tags-input__input{color:var(--studio-text-primary-dark, #f9fafb)}.studio-tags-input__input::placeholder{color:var(--studio-text-muted, #9ca3af)}.studio-tags-input__input:disabled{cursor:not-allowed}.studio-tags-input__hint{font-size:.75rem;color:var(--studio-text-muted, #6b7280);margin:0}.studio-tags-input__error{font-size:.75rem;color:var(--studio-color-error, #ef4444);margin:0}:host(.studio-tags-input--sm) .studio-tags-input__container{min-height:2rem;padding:.25rem .5rem;gap:.25rem}:host(.studio-tags-input--sm) .studio-tags-input__input{font-size:.75rem}:host(.studio-tags-input--sm) .studio-tags-input__label{font-size:.75rem}:host(.studio-tags-input--lg) .studio-tags-input__container{min-height:3rem;padding:.625rem 1rem;gap:.5rem}:host(.studio-tags-input--lg) .studio-tags-input__input{font-size:1rem}:host(.studio-tags-input--lg) .studio-tags-input__label{font-size:1rem}:host(.studio-tags-input--filled) .studio-tags-input__container{background:var(--studio-bg-secondary, #f3f4f6);border-color:transparent}:host-context(.dark) :host(.studio-tags-input--filled) .studio-tags-input__container{background:var(--studio-bg-secondary-dark, #374151)}:host(.studio-tags-input--filled) .studio-tags-input__container--focused{background:var(--studio-bg-primary, #ffffff);border-color:var(--studio-color-primary, #3b82f6)}:host-context(.dark) :host(.studio-tags-input--filled) .studio-tags-input__container--focused{background:var(--studio-bg-primary-dark, #1f2937)}:host(.studio-tags-input--ghost) .studio-tags-input__container{background:transparent;border-color:transparent}:host(.studio-tags-input--ghost) .studio-tags-input__container--focused{background:var(--studio-bg-secondary, #f3f4f6)}:host-context(.dark) :host(.studio-tags-input--ghost) .studio-tags-input__container--focused{background:var(--studio-bg-secondary-dark, #374151)}\n"] }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], tagPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagPrefix", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }], tagsChange: [{ type: i0.Output, args: ["tagsChange"] }], tagAdded: [{ type: i0.Output, args: ["tagAdded"] }], tagRemoved: [{ type: i0.Output, args: ["tagRemoved"] }] } });
+
 /**
  * Pagination component for navigating through pages of data
  *
@@ -8530,5 +8713,5 @@ function hasChildren(block) {
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, EmptyStateComponent, FileViewerComponent, IconComponent, InputComponent, InspectorComponent, LogoComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, SignalStore, SkeletonComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, defaultFileViewerLabels, hasChildren, isContentBlock, isFormBlock, isInteractiveBlock, isLayoutBlock, isSafeUrl, isStudioBlock, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { AvatarComponent, BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, EmptyStateComponent, FileViewerComponent, IconComponent, InputComponent, InspectorComponent, LogoComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, SignalStore, SkeletonComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TagsInputComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, defaultFileViewerLabels, hasChildren, isContentBlock, isFormBlock, isInteractiveBlock, isLayoutBlock, isSafeUrl, isStudioBlock, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map