@testgorilla/tgo-ui 4.1.2-beta → 4.1.3-beta

package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs

@@ -0,0 +1,367 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, HostListener, ViewChild, HostBinding, Optional, Self, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@testgorilla/tgo-ui/components/button';
+import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
+import * as i4 from '@testgorilla/tgo-ui/components/field';
+import { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';
+import { MatInputModule } from '@angular/material/input';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+
+/**
+ * A global counter used to generate unique inline field IDs.
+ */
+let inlineFieldID = 0;
+class InlineFieldComponent {
+    constructor(cdr, destroyRef, elementRef, ngControl) {
+        this.cdr = cdr;
+        this.destroyRef = destroyRef;
+        this.elementRef = elementRef;
+        this.ngControl = ngControl;
+        this.class = 'ui-inline-field';
+        /**
+         * Component ID for accessibility
+         */
+        this.id = input(`inline-field-${inlineFieldID++}`);
+        /**
+         * Field label
+         */
+        this.label = input('');
+        /**
+         * Field placeholder
+         */
+        this.placeholder = input('');
+        /**
+         * Current value
+         */
+        this.value = input('');
+        /**
+         * Whether the field is required
+         */
+        this.required = input(false);
+        /**
+         * Whether the field is disabled
+         */
+        this.disabled = input(false);
+        /**
+         * Application theme
+         */
+        this.applicationTheme = input('light');
+        /**
+         * Field type
+         */
+        this.fieldType = input('text');
+        /**
+         * Field type
+         */
+        this.maxRows = input(0);
+        /**
+         * Error messages
+         */
+        this.errors = input([]);
+        /**
+         * Whether to show errors
+         */
+        this.showErrors = input(true);
+        /**
+         * Button configuration
+         */
+        this.buttonConfig = input({
+            saveLabel: 'Save',
+            cancelLabel: 'Cancel',
+            saveIcon: 'Check-filled',
+            cancelIcon: 'Close-filled',
+        });
+        /**
+         * Validation configuration
+         */
+        this.validation = input({});
+        /**
+         * ARIA label
+         */
+        this.ariaLabel = input('');
+        /**
+         * Full width
+         */
+        this.fullWidth = input(false);
+        /**
+         * Emitted when save button is clicked
+         */
+        this.save = output();
+        /**
+         * Emitted when cancel button is clicked
+         */
+        this.cancel = output();
+        /**
+         * Emitted when value changes
+         */
+        this.valueChange = output();
+        /**
+         * Emitted when editing mode changes
+         */
+        this.editingModeChange = output();
+        /**
+         * Emitted on focus
+         */
+        this.focusEvent = output();
+        /**
+         * Emitted on blur
+         */
+        this.blurEvent = output();
+        this._isEditing = signal(false);
+        this._originalValue = signal('');
+        this._currentValue = signal('');
+        this._state = signal('default');
+        this.isEditing = computed(() => this._isEditing());
+        this.currentValue = computed(() => this._currentValue());
+        this.state = computed(() => this._state());
+        this.saveButtonConfig = computed(() => ({
+            label: this.buttonConfig().saveLabel || 'Save',
+            iconName: this.buttonConfig().saveIcon || 'Check-filled',
+            variant: 'secondary-inverted',
+            size: 'small',
+            disabled: this.disabled(),
+        }));
+        this.cancelButtonConfig = computed(() => ({
+            label: this.buttonConfig().cancelLabel || 'Cancel',
+            iconName: this.buttonConfig().cancelIcon || 'Close-filled',
+            variant: 'secondary-inverted',
+            size: 'small',
+            disabled: this.disabled(),
+        }));
+        this.onChange = (_value) => { };
+        this.onTouched = () => { };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this._currentValue.set(this.value());
+        this._originalValue.set(this.value());
+        this.updateState();
+    }
+    writeValue(value) {
+        const newValue = value || '';
+        this._currentValue.set(newValue);
+        if (!this.isEditing()) {
+            this._originalValue.set(newValue);
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        this.updateState();
+        this.cdr.markForCheck();
+    }
+    onComponentFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        const isLeavingComponent = !relatedTarget || !this.elementRef.nativeElement.contains(relatedTarget);
+        if (isLeavingComponent && this.isEditing()) {
+            this._currentValue.set(this._originalValue());
+            this.exitEditMode();
+            this.onChange(this._originalValue());
+            this.cancel.emit();
+        }
+    }
+    onEscapePressed(event) {
+        if (this.isEditing()) {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    onEnterPressed(event) {
+        if (this.isEditing() && !event.shiftKey) {
+            event.preventDefault();
+            this.saveEdit();
+        }
+    }
+    onTabPressed() {
+        return;
+    }
+    onInputFocus() {
+        if (!this.disabled() && !this.isEditing()) {
+            this.enterEditMode();
+        }
+        this._state.set('focused');
+        this.focusEvent.emit();
+        this.onTouched();
+    }
+    onInputBlur() {
+        this.blurEvent.emit();
+    }
+    onInputChange(event) {
+        const inputElement = event.target;
+        const newValue = inputElement.value;
+        this._currentValue.set(newValue);
+        this.valueChange.emit(newValue);
+    }
+    focus() {
+        if (this.fieldComponent) {
+            this.fieldComponent.focus();
+            this.fieldComponent.field?.nativeElement?.select();
+        }
+    }
+    enterEditMode() {
+        if (this.disabled() || this.isEditing()) {
+            return;
+        }
+        this._originalValue.set(this._currentValue());
+        this._isEditing.set(true);
+        this._state.set('editing');
+        this.editingModeChange.emit(true);
+        this.cdr.markForCheck();
+    }
+    saveEdit() {
+        if (!this.isEditing()) {
+            return;
+        }
+        const newValue = this.currentValue();
+        const hasValidationError = this.hasValidationError(newValue);
+        if (hasValidationError) {
+            this._state.set('error');
+            this.cdr.markForCheck();
+            return;
+        }
+        const changeEvent = {
+            value: newValue,
+            saved: true,
+            previousValue: this._originalValue(),
+        };
+        this._originalValue.set(newValue);
+        this.exitEditMode();
+        this.onChange(newValue);
+        this.save.emit(changeEvent);
+    }
+    cancelEdit() {
+        if (!this.isEditing()) {
+            return;
+        }
+        this._currentValue.set(this._originalValue());
+        this.exitEditMode();
+        this.cancel.emit();
+    }
+    exitEditMode() {
+        this._isEditing.set(false);
+        this.updateState();
+        this.editingModeChange.emit(false);
+        this.cdr.markForCheck();
+    }
+    updateState() {
+        if (this.disabled()) {
+            this._state.set('disabled');
+        }
+        else if (this.errors().length > 0) {
+            this._state.set('error');
+        }
+        else if (this.isEditing()) {
+            this._state.set('editing');
+        }
+        else {
+            this._state.set('default');
+        }
+    }
+    hasValidationError(value) {
+        const config = this.validation();
+        return (this.hasRequiredError(value, config) ||
+            this.hasMinLengthError(value, config) ||
+            this.hasMaxLengthError(value, config) ||
+            this.hasPatternError(value, config) ||
+            this.hasCustomValidationError(value, config));
+    }
+    hasRequiredError(value, config) {
+        return !!config.required && (!value || value.trim().length === 0);
+    }
+    hasMinLengthError(value, config) {
+        return !!config.minLength && value.length < config.minLength;
+    }
+    hasMaxLengthError(value, config) {
+        return !!config.maxLength && value.length > config.maxLength;
+    }
+    hasPatternError(value, config) {
+        return !!config.pattern && !config.pattern.test(value);
+    }
+    hasCustomValidationError(value, config) {
+        return !!config.customValidator && config.customValidator(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: InlineFieldComponent, isStandalone: false, selector: "ui-inline-field", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, fieldType: { classPropertyName: "fieldType", publicName: "fieldType", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null }, buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel", valueChange: "valueChange", editingModeChange: "editingModeChange", focusEvent: "focusEvent", blurEvent: "blurEvent" }, host: { listeners: { "focusout": "onComponentFocusOut($event)", "keydown.escape": "onEscapePressed($event)", "keydown.enter": "onEnterPressed($event)", "keydown.tab": "onTabPressed($event)" }, properties: { "attr.theme": "applicationTheme()", "attr.state": "state()", "attr.editing": "isEditing()", "class.full-width": "fullWidth()", "class": "this.class" } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldElement"], descendants: true }], ngImport: i0, template: "<div class=\"inline-field-container\">\n  <div class=\"field-wrapper\" [ngClass]=\"{ 'is-editing': isEditing() }\">\n    <ui-field\n      [id]=\"id() + '-input'\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"currentValue()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [errors]=\"errors()\"\n      [showBottomContent]=\"showErrors()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [applicationTheme]=\"applicationTheme()\"\n      [fullWidth]=\"true\"\n      [isAutocompleteOff]=\"true\"\n      [type]=\"fieldType()\"\n      [maxRows]=\"maxRows()\"\n      (input)=\"onInputChange($event)\"\n      (fieldBlur)=\"onInputBlur()\"\n      (focusin)=\"onInputFocus()\"\n      #fieldElement\n      data-testid=\"inline-field\"\n    ></ui-field>\n\n    <div *ngIf=\"isEditing()\" class=\"action-buttons\">\n      <ui-button\n        [label]=\"saveButtonConfig().label\"\n        [iconName]=\"saveButtonConfig().iconName\"\n        [variant]=\"saveButtonConfig().variant\"\n        [size]=\"saveButtonConfig().size\"\n        [disabled]=\"saveButtonConfig().disabled\"\n        [applicationTheme]=\"applicationTheme()\"\n        [iconPosition]=\"'left'\"\n        (buttonClickEvent)=\"saveEdit()\"\n        [attr.aria-label]=\"'Save ' + (label() || 'field')\"\n        class=\"save-button\"\n      ></ui-button>\n\n      <ui-button\n        [label]=\"cancelButtonConfig().label\"\n        [iconName]=\"cancelButtonConfig().iconName\"\n        [variant]=\"cancelButtonConfig().variant\"\n        [size]=\"cancelButtonConfig().size\"\n        [disabled]=\"cancelButtonConfig().disabled\"\n        [applicationTheme]=\"applicationTheme()\"\n        [iconPosition]=\"'left'\"\n        (buttonClickEvent)=\"cancelEdit()\"\n        [attr.aria-label]=\"'Cancel editing ' + (label() || 'field')\"\n        class=\"cancel-button\"\n      ></ui-button>\n    </div>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-inline-field{display:block;position:relative;width:100%;max-width:320px}.ui-inline-field.full-width{max-width:100%}.ui-inline-field .inline-field-container,.ui-inline-field .field-wrapper{position:relative;width:100%}.ui-inline-field .field-wrapper ::ng-deep ui-field .mat-mdc-form-field-subscript-wrapper{display:none!important}.ui-inline-field .field-wrapper .action-buttons{position:absolute;top:calc(100% + 4px);right:0;display:flex;gap:8px;z-index:10}.ui-inline-field .field-wrapper:hover .action-buttons.show-on-hover{opacity:1}.ui-inline-field .error-messages{margin-top:4px}.ui-inline-field .error-messages .error-message{display:flex;align-items:center;gap:4px;color:#e02800;font-size:12px;line-height:16px}.ui-inline-field .error-messages .error-message .error-icon ::ng-deep svg{color:#e02800}.ui-inline-field[state=disabled]{pointer-events:none}@media (max-width: 768px){.ui-inline-field .field-wrapper .action-buttons{position:static;margin-top:8px;justify-content:flex-end}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i4.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-inline-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.theme]': 'applicationTheme()',
+                        '[attr.state]': 'state()',
+                        '[attr.editing]': 'isEditing()',
+                        '[class.full-width]': 'fullWidth()',
+                    }, standalone: false, template: "<div class=\"inline-field-container\">\n  <div class=\"field-wrapper\" [ngClass]=\"{ 'is-editing': isEditing() }\">\n    <ui-field\n      [id]=\"id() + '-input'\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"currentValue()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [errors]=\"errors()\"\n      [showBottomContent]=\"showErrors()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [applicationTheme]=\"applicationTheme()\"\n      [fullWidth]=\"true\"\n      [isAutocompleteOff]=\"true\"\n      [type]=\"fieldType()\"\n      [maxRows]=\"maxRows()\"\n      (input)=\"onInputChange($event)\"\n      (fieldBlur)=\"onInputBlur()\"\n      (focusin)=\"onInputFocus()\"\n      #fieldElement\n      data-testid=\"inline-field\"\n    ></ui-field>\n\n    <div *ngIf=\"isEditing()\" class=\"action-buttons\">\n      <ui-button\n        [label]=\"saveButtonConfig().label\"\n        [iconName]=\"saveButtonConfig().iconName\"\n        [variant]=\"saveButtonConfig().variant\"\n        [size]=\"saveButtonConfig().size\"\n        [disabled]=\"saveButtonConfig().disabled\"\n        [applicationTheme]=\"applicationTheme()\"\n        [iconPosition]=\"'left'\"\n        (buttonClickEvent)=\"saveEdit()\"\n        [attr.aria-label]=\"'Save ' + (label() || 'field')\"\n        class=\"save-button\"\n      ></ui-button>\n\n      <ui-button\n        [label]=\"cancelButtonConfig().label\"\n        [iconName]=\"cancelButtonConfig().iconName\"\n        [variant]=\"cancelButtonConfig().variant\"\n        [size]=\"cancelButtonConfig().size\"\n        [disabled]=\"cancelButtonConfig().disabled\"\n        [applicationTheme]=\"applicationTheme()\"\n        [iconPosition]=\"'left'\"\n        (buttonClickEvent)=\"cancelEdit()\"\n        [attr.aria-label]=\"'Cancel editing ' + (label() || 'field')\"\n        class=\"cancel-button\"\n      ></ui-button>\n    </div>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-inline-field{display:block;position:relative;width:100%;max-width:320px}.ui-inline-field.full-width{max-width:100%}.ui-inline-field .inline-field-container,.ui-inline-field .field-wrapper{position:relative;width:100%}.ui-inline-field .field-wrapper ::ng-deep ui-field .mat-mdc-form-field-subscript-wrapper{display:none!important}.ui-inline-field .field-wrapper .action-buttons{position:absolute;top:calc(100% + 4px);right:0;display:flex;gap:8px;z-index:10}.ui-inline-field .field-wrapper:hover .action-buttons.show-on-hover{opacity:1}.ui-inline-field .error-messages{margin-top:4px}.ui-inline-field .error-messages .error-message{display:flex;align-items:center;gap:4px;color:#e02800;font-size:12px;line-height:16px}.ui-inline-field .error-messages .error-message .error-icon ::ng-deep svg{color:#e02800}.ui-inline-field[state=disabled]{pointer-events:none}@media (max-width: 768px){.ui-inline-field .field-wrapper .action-buttons{position:static;margin-top:8px;justify-content:flex-end}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { class: [{
+                type: HostBinding
+            }], fieldComponent: [{
+                type: ViewChild,
+                args: ['fieldElement']
+            }], onComponentFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onEscapePressed: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], onEnterPressed: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], onTabPressed: [{
+                type: HostListener,
+                args: ['keydown.tab', ['$event']]
+            }] } });
+
+class InlineFieldComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineFieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: InlineFieldComponentModule, declarations: [InlineFieldComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatInputModule,
+            ButtonComponentModule,
+            FieldComponentModule,
+            IconComponentModule], exports: [InlineFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineFieldComponentModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatInputModule,
+            ButtonComponentModule,
+            FieldComponentModule,
+            IconComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineFieldComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InlineFieldComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        ButtonComponentModule,
+                        FieldComponentModule,
+                        IconComponentModule,
+                    ],
+                    exports: [InlineFieldComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InlineFieldComponent, InlineFieldComponentModule, inlineFieldID };
+//# sourceMappingURL=testgorilla-tgo-ui-components-inline-field.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-inline-field.mjs","sources":["../../../components/inline-field/inline-field.component.ts","../../../components/inline-field/inline-field.component.html","../../../components/inline-field/inline-field.component.module.ts","../../../components/inline-field/testgorilla-tgo-ui-components-inline-field.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  HostListener,\n  input,\n  OnInit,\n  output,\n  ViewChild,\n  ViewEncapsulation,\n  computed,\n  signal,\n  Optional,\n  Self,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport {\n  InlineFieldState,\n  InlineFieldButtonConfig,\n  InlineFieldValidation,\n  InlineFieldChangeEvent,\n} from './inline-field.model';\nimport { FieldComponent } from '@testgorilla/tgo-ui/components/field';\nimport { FieldType } from '@testgorilla/tgo-ui/components/field';\n\n/**\n * A global counter used to generate unique inline field IDs.\n */\nexport let inlineFieldID = 0;\n\n@Component({\n    selector: 'ui-inline-field',\n    templateUrl: './inline-field.component.html',\n    styleUrls: ['./inline-field.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[attr.theme]': 'applicationTheme()',\n        '[attr.state]': 'state()',\n        '[attr.editing]': 'isEditing()',\n        '[class.full-width]': 'fullWidth()',\n    },\n    standalone: false\n})\nexport class InlineFieldComponent implements OnInit, ControlValueAccessor {\n  @HostBinding() class = 'ui-inline-field';\n\n  /**\n   * Component ID for accessibility\n   */\n  id = input(`inline-field-${inlineFieldID++}`);\n\n  /**\n   * Field label\n   */\n  label = input('');\n\n  /**\n   * Field placeholder\n   */\n  placeholder = input('');\n\n  /**\n   * Current value\n   */\n  value = input('');\n\n  /**\n   * Whether the field is required\n   */\n  required = input(false);\n\n  /**\n   * Whether the field is disabled\n   */\n  disabled = input(false);\n\n  /**\n   * Application theme\n   */\n  applicationTheme = input<ApplicationTheme>('light');\n\n  /**\n   * Field type\n   */\n  fieldType = input<FieldType>('text');\n\n  /**\n   * Field type\n   */\n  maxRows = input<number>(0);\n\n  /**\n   * Error messages\n   */\n  errors = input<string[]>([]);\n\n  /**\n   * Whether to show errors\n   */\n  showErrors = input(true);\n\n  /**\n   * Button configuration\n   */\n  buttonConfig = input<InlineFieldButtonConfig>({\n    saveLabel: 'Save',\n    cancelLabel: 'Cancel',\n    saveIcon: 'Check-filled',\n    cancelIcon: 'Close-filled',\n  });\n\n  /**\n   * Validation configuration\n   */\n  validation = input<InlineFieldValidation>({});\n\n  /**\n   * ARIA label\n   */\n  ariaLabel = input('');\n\n  /**\n   * Full width\n   */\n  fullWidth = input(false);\n\n  /**\n   * Emitted when save button is clicked\n   */\n  save = output<InlineFieldChangeEvent>();\n\n  /**\n   * Emitted when cancel button is clicked\n   */\n  cancel = output<void>();\n\n  /**\n   * Emitted when value changes\n   */\n  valueChange = output<string>();\n\n  /**\n   * Emitted when editing mode changes\n   */\n  editingModeChange = output<boolean>();\n\n  /**\n   * Emitted on focus\n   */\n  focusEvent = output<void>();\n\n  /**\n   * Emitted on blur\n   */\n  blurEvent = output<void>();\n\n  @ViewChild('fieldElement') fieldComponent: FieldComponent;\n\n  private _isEditing = signal(false);\n  private _originalValue = signal('');\n  private _currentValue = signal('');\n  private _state = signal<InlineFieldState>('default');\n\n  isEditing = computed(() => this._isEditing());\n  currentValue = computed(() => this._currentValue());\n  state = computed(() => this._state());\n\n  saveButtonConfig = computed(() => ({\n    label: this.buttonConfig().saveLabel || 'Save',\n    iconName: this.buttonConfig().saveIcon || 'Check-filled',\n    variant: 'secondary-inverted' as const,\n    size: 'small' as const,\n    disabled: this.disabled(),\n  }));\n\n  cancelButtonConfig = computed(() => ({\n    label: this.buttonConfig().cancelLabel || 'Cancel',\n    iconName: this.buttonConfig().cancelIcon || 'Close-filled',\n    variant: 'secondary-inverted' as const,\n    size: 'small' as const,\n    disabled: this.disabled(),\n  }));\n\n  private onChange = (_value: string) => {};\n  private onTouched = () => {};\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private destroyRef: DestroyRef,\n    private elementRef: ElementRef,\n    @Optional() @Self() public ngControl: NgControl\n  ) {\n    if (this.ngControl != null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  ngOnInit(): void {\n    this._currentValue.set(this.value());\n    this._originalValue.set(this.value());\n    this.updateState();\n  }\n\n  writeValue(value: string): void {\n    const newValue = value || '';\n    this._currentValue.set(newValue);\n    if (!this.isEditing()) {\n      this._originalValue.set(newValue);\n    }\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(_isDisabled: boolean): void {\n    this.updateState();\n    this.cdr.markForCheck();\n  }\n\n  @HostListener('focusout', ['$event'])\n  onComponentFocusOut(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    const isLeavingComponent = !relatedTarget || !this.elementRef.nativeElement.contains(relatedTarget);\n\n    if (isLeavingComponent && this.isEditing()) {\n      this._currentValue.set(this._originalValue());\n      this.exitEditMode();\n      this.onChange(this._originalValue());\n      this.cancel.emit();\n    }\n  }\n\n  @HostListener('keydown.escape', ['$event'])\n  onEscapePressed(event: KeyboardEvent): void {\n    if (this.isEditing()) {\n      event.preventDefault();\n      this.cancelEdit();\n    }\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  onEnterPressed(event: KeyboardEvent): void {\n    if (this.isEditing() && !event.shiftKey) {\n      event.preventDefault();\n      this.saveEdit();\n    }\n  }\n\n  @HostListener('keydown.tab', ['$event'])\n  onTabPressed(): void {\n    return;\n  }\n\n  onInputFocus(): void {\n    if (!this.disabled() && !this.isEditing()) {\n      this.enterEditMode();\n    }\n    this._state.set('focused');\n    this.focusEvent.emit();\n    this.onTouched();\n  }\n\n  onInputBlur(): void {\n    this.blurEvent.emit();\n  }\n\n  onInputChange(event: Event): void {\n    const inputElement = event.target as HTMLInputElement;\n    const newValue = inputElement.value;\n    this._currentValue.set(newValue);\n    this.valueChange.emit(newValue);\n  }\n\n  focus(): void {\n    if (this.fieldComponent) {\n      this.fieldComponent.focus();\n      this.fieldComponent.field?.nativeElement?.select();\n    }\n  }\n\n  enterEditMode(): void {\n    if (this.disabled() || this.isEditing()) {\n      return;\n    }\n\n    this._originalValue.set(this._currentValue());\n    this._isEditing.set(true);\n    this._state.set('editing');\n    this.editingModeChange.emit(true);\n\n    this.cdr.markForCheck();\n  }\n\n  saveEdit(): void {\n    if (!this.isEditing()) {\n      return;\n    }\n\n    const newValue = this.currentValue();\n    const hasValidationError = this.hasValidationError(newValue);\n\n    if (hasValidationError) {\n      this._state.set('error');\n      this.cdr.markForCheck();\n      return;\n    }\n\n    const changeEvent: InlineFieldChangeEvent = {\n      value: newValue,\n      saved: true,\n      previousValue: this._originalValue(),\n    };\n\n    this._originalValue.set(newValue);\n    this.exitEditMode();\n    this.onChange(newValue);\n    this.save.emit(changeEvent);\n  }\n\n  cancelEdit(): void {\n    if (!this.isEditing()) {\n      return;\n    }\n\n    this._currentValue.set(this._originalValue());\n    this.exitEditMode();\n    this.cancel.emit();\n  }\n\n  private exitEditMode(): void {\n    this._isEditing.set(false);\n    this.updateState();\n    this.editingModeChange.emit(false);\n    this.cdr.markForCheck();\n  }\n\n  private updateState(): void {\n    if (this.disabled()) {\n      this._state.set('disabled');\n    } else if (this.errors().length > 0) {\n      this._state.set('error');\n    } else if (this.isEditing()) {\n      this._state.set('editing');\n    } else {\n      this._state.set('default');\n    }\n  }\n\n  private hasValidationError(value: string): boolean {\n    const config = this.validation();\n\n    return (\n      this.hasRequiredError(value, config) ||\n      this.hasMinLengthError(value, config) ||\n      this.hasMaxLengthError(value, config) ||\n      this.hasPatternError(value, config) ||\n      this.hasCustomValidationError(value, config)\n    );\n  }\n\n  private hasRequiredError(value: string, config: InlineFieldValidation): boolean {\n    return !!config.required && (!value || value.trim().length === 0);\n  }\n\n  private hasMinLengthError(value: string, config: InlineFieldValidation): boolean {\n    return !!config.minLength && value.length < config.minLength;\n  }\n\n  private hasMaxLengthError(value: string, config: InlineFieldValidation): boolean {\n    return !!config.maxLength && value.length > config.maxLength;\n  }\n\n  private hasPatternError(value: string, config: InlineFieldValidation): boolean {\n    return !!config.pattern && !config.pattern.test(value);\n  }\n\n  private hasCustomValidationError(value: string, config: InlineFieldValidation): boolean {\n    return !!config.customValidator && config.customValidator(value);\n  }\n}\n","<div class=\"inline-field-container\">\n  <div class=\"field-wrapper\" [ngClass]=\"{ 'is-editing': isEditing() }\">\n    <ui-field\n      [id]=\"id() + '-input'\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"currentValue()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [errors]=\"errors()\"\n      [showBottomContent]=\"showErrors()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [applicationTheme]=\"applicationTheme()\"\n      [fullWidth]=\"true\"\n      [isAutocompleteOff]=\"true\"\n      [type]=\"fieldType()\"\n      [maxRows]=\"maxRows()\"\n      (input)=\"onInputChange($event)\"\n      (fieldBlur)=\"onInputBlur()\"\n      (focusin)=\"onInputFocus()\"\n      #fieldElement\n      data-testid=\"inline-field\"\n    ></ui-field>\n\n    <div *ngIf=\"isEditing()\" class=\"action-buttons\">\n      <ui-button\n        [label]=\"saveButtonConfig().label\"\n        [iconName]=\"saveButtonConfig().iconName\"\n        [variant]=\"saveButtonConfig().variant\"\n        [size]=\"saveButtonConfig().size\"\n        [disabled]=\"saveButtonConfig().disabled\"\n        [applicationTheme]=\"applicationTheme()\"\n        [iconPosition]=\"'left'\"\n        (buttonClickEvent)=\"saveEdit()\"\n        [attr.aria-label]=\"'Save ' + (label() || 'field')\"\n        class=\"save-button\"\n      ></ui-button>\n\n      <ui-button\n        [label]=\"cancelButtonConfig().label\"\n        [iconName]=\"cancelButtonConfig().iconName\"\n        [variant]=\"cancelButtonConfig().variant\"\n        [size]=\"cancelButtonConfig().size\"\n        [disabled]=\"cancelButtonConfig().disabled\"\n        [applicationTheme]=\"applicationTheme()\"\n        [iconPosition]=\"'left'\"\n        (buttonClickEvent)=\"cancelEdit()\"\n        [attr.aria-label]=\"'Cancel editing ' + (label() || 'field')\"\n        class=\"cancel-button\"\n      ></ui-button>\n    </div>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { InlineFieldComponent } from './inline-field.component';\n\n@NgModule({\n  declarations: [InlineFieldComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    ButtonComponentModule,\n    FieldComponentModule,\n    IconComponentModule,\n  ],\n  exports: [InlineFieldComponent],\n})\nexport class InlineFieldComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}