@testgorilla/tgo-ui 11.22.2 → 12.0.0

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

@@ -1,370 +1,760 @@
-import { NgClass, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, computed, output, signal, HostListener, ViewChild, HostBinding, Optional, Self, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { FieldComponent, FieldComponentModule } from '@testgorilla/tgo-ui/components/field';
-import * as i1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-
-/**
- * A global counter used to generate unique inline field IDs.
- */
+import { CommonModule, NgClass } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, HostListener, NgModule, Optional, Self, ViewChild, ViewEncapsulation, computed, input, output, signal } from "@angular/core";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { FieldComponent, FieldComponentModule } from "@testgorilla/tgo-ui/components/field";
+import * as i1 from "@angular/forms";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatInputModule } from "@angular/material/input";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
 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++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        /**
-         * Field label
-         */
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /**
-         * Field placeholder
-         */
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        /**
-         * Current value
-         */
-        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether the field is required
-         */
-        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether the field is disabled
-         */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        /**
-         * Application theme
-         */
-        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        /**
-         * Field type
-         */
-        this.fieldType = input('text', ...(ngDevMode ? [{ debugName: "fieldType" }] : /* istanbul ignore next */ []));
-        /**
-         * Field type
-         */
-        this.maxRows = input(0, ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
-        /**
-         * Error messages
-         */
-        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to show errors
-         */
-        this.showErrors = input(true, ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
-        /**
-         * Button configuration
-         */
-        this.buttonConfig = input({
-            saveLabel: 'Save',
-            cancelLabel: 'Cancel',
-            saveIcon: 'Check-filled',
-            cancelIcon: 'Close-filled',
-        }, ...(ngDevMode ? [{ debugName: "buttonConfig" }] : /* istanbul ignore next */ []));
-        /**
-         * Validation configuration
-         */
-        this.validation = input({}, ...(ngDevMode ? [{ debugName: "validation" }] : /* istanbul ignore next */ []));
-        /**
-         * ARIA label
-         */
-        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.saveButtonTestId = computed(() => (this.testId() ? `${this.testId()}-save` : null), ...(ngDevMode ? [{ debugName: "saveButtonTestId" }] : /* istanbul ignore next */ []));
-        this.cancelButtonTestId = computed(() => (this.testId() ? `${this.testId()}-cancel` : null), ...(ngDevMode ? [{ debugName: "cancelButtonTestId" }] : /* istanbul ignore next */ []));
-        /**
-         * Full width
-         */
-        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
-        /**
-         * Emitted when save button is clicked
-         */
-        this.save = output();
-        /**
-         * Emitted when cancel button is clicked
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-native -- output shadows a native event; rename is breaking, deferred to the breaking-change MAJOR (see plan)
-        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, ...(ngDevMode ? [{ debugName: "_isEditing" }] : /* istanbul ignore next */ []));
-        this._originalValue = signal('', ...(ngDevMode ? [{ debugName: "_originalValue" }] : /* istanbul ignore next */ []));
-        this._currentValue = signal('', ...(ngDevMode ? [{ debugName: "_currentValue" }] : /* istanbul ignore next */ []));
-        this._state = signal('default', ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
-        this.isEditing = computed(() => this._isEditing(), ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
-        this.currentValue = computed(() => this._currentValue(), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
-        this.state = computed(() => this._state(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        this.saveButtonConfig = computed(() => ({
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- intentional falsy fallback: an empty-string label must also fall back to the default (pre-rollout behavior)
-            label: this.buttonConfig().saveLabel || 'Save',
-            iconName: this.buttonConfig().saveIcon ?? 'Check-filled',
-            variant: 'secondary-inverted',
-            size: 'small',
-            disabled: this.disabled(),
-        }), ...(ngDevMode ? [{ debugName: "saveButtonConfig" }] : /* istanbul ignore next */ []));
-        this.cancelButtonConfig = computed(() => ({
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- intentional falsy fallback: an empty-string label must also fall back to the default (pre-rollout behavior)
-            label: this.buttonConfig().cancelLabel || 'Cancel',
-            iconName: this.buttonConfig().cancelIcon ?? 'Close-filled',
-            variant: 'secondary-inverted',
-            size: 'small',
-            disabled: this.disabled(),
-        }), ...(ngDevMode ? [{ debugName: "cancelButtonConfig" }] : /* istanbul ignore next */ []));
-        this.onChange = (_val) => { };
-        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 instanceof KeyboardEvent && !event.shiftKey) {
-            event.preventDefault();
-            this.saveEdit();
-        }
-    }
-    onTabPressed() { }
-    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 : false;
-    }
-    hasMinLengthError(value, config) {
-        return config.minLength ? value.length < config.minLength : false;
-    }
-    hasMaxLengthError(value, config) {
-        return config.maxLength ? value.length > config.maxLength : false;
-    }
-    hasPatternError(value, config) {
-        return config.pattern ? !config.pattern.test(value) : false;
-    }
-    hasCustomValidationError(value, config) {
-        return config.customValidator ? config.customValidator(value) : false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", 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.0.0", version: "21.2.25", type: InlineFieldComponent, isStandalone: true, 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 }, testId: { classPropertyName: "testId", publicName: "testId", 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()" }, 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      [testId]=\"testId()\"\n    ></ui-field>\n\n    @if (isEditing()) {\n      <div 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          [testId]=\"saveButtonTestId()\"\n          class=\"save-button\"\n        ></ui-button>\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          [testId]=\"cancelButtonTestId()\"\n          class=\"cancel-button\"\n        ></ui-button>\n      </div>\n    }\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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", "testId", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", 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()',
-                    }, imports: [NgClass, FieldComponent, ButtonComponent], 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      [testId]=\"testId()\"\n    ></ui-field>\n\n    @if (isEditing()) {\n      <div 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          [testId]=\"saveButtonTestId()\"\n          class=\"save-button\"\n        ></ui-button>\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          [testId]=\"cancelButtonTestId()\"\n          class=\"cancel-button\"\n        ></ui-button>\n      </div>\n    }\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
-            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldType", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }], buttonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonConfig", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], editingModeChange: [{ type: i0.Output, args: ["editingModeChange"] }], focusEvent: [{ type: i0.Output, args: ["focusEvent"] }], blurEvent: [{ type: i0.Output, args: ["blurEvent"] }], 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']
-            }] } });
-
-class InlineFieldComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InlineFieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: InlineFieldComponentModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule,
-            ButtonComponentModule,
-            FieldComponentModule,
-            IconComponentModule,
-            InlineFieldComponent], exports: [InlineFieldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InlineFieldComponentModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule,
-            ButtonComponentModule,
-            FieldComponentModule,
-            IconComponentModule,
-            InlineFieldComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InlineFieldComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatInputModule,
-                        ButtonComponentModule,
-                        FieldComponentModule,
-                        IconComponentModule,
-                        InlineFieldComponent,
-                    ],
-                    exports: [InlineFieldComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var InlineFieldComponent = class InlineFieldComponent {
+	constructor(cdr, destroyRef, elementRef, ngControl) {
+		this.cdr = cdr;
+		this.destroyRef = destroyRef;
+		this.elementRef = elementRef;
+		this.ngControl = ngControl;
+		this.class = "ui-inline-field";
+		this.id = input(`inline-field-${inlineFieldID++}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input("light", ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.fieldType = input("text", ...ngDevMode ? [{ debugName: "fieldType" }] : /* istanbul ignore next */ []);
+		this.maxRows = input(0, ...ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []);
+		this.errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+		this.showErrors = input(true, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+		this.buttonConfig = input({
+			saveLabel: "Save",
+			cancelLabel: "Cancel",
+			saveIcon: "Check-filled",
+			cancelIcon: "Close-filled"
+		}, ...ngDevMode ? [{ debugName: "buttonConfig" }] : /* istanbul ignore next */ []);
+		this.validation = input({}, ...ngDevMode ? [{ debugName: "validation" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.saveButtonTestId = computed(() => this.testId() ? `${this.testId()}-save` : null, ...ngDevMode ? [{ debugName: "saveButtonTestId" }] : /* istanbul ignore next */ []);
+		this.cancelButtonTestId = computed(() => this.testId() ? `${this.testId()}-cancel` : null, ...ngDevMode ? [{ debugName: "cancelButtonTestId" }] : /* istanbul ignore next */ []);
+		this.fullWidth = input(false, ...ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []);
+		this.save = output();
+		this.cancel = output();
+		this.valueChange = output();
+		this.editingModeChange = output();
+		this.focusEvent = output();
+		this.blurEvent = output();
+		this._isEditing = signal(false, ...ngDevMode ? [{ debugName: "_isEditing" }] : /* istanbul ignore next */ []);
+		this._originalValue = signal("", ...ngDevMode ? [{ debugName: "_originalValue" }] : /* istanbul ignore next */ []);
+		this._currentValue = signal("", ...ngDevMode ? [{ debugName: "_currentValue" }] : /* istanbul ignore next */ []);
+		this._state = signal("default", ...ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []);
+		this.isEditing = computed(() => this._isEditing(), ...ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []);
+		this.currentValue = computed(() => this._currentValue(), ...ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []);
+		this.state = computed(() => this._state(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.saveButtonConfig = computed(() => ({
+			label: this.buttonConfig().saveLabel || "Save",
+			iconName: this.buttonConfig().saveIcon ?? "Check-filled",
+			variant: "secondary-inverted",
+			size: "small",
+			disabled: this.disabled()
+		}), ...ngDevMode ? [{ debugName: "saveButtonConfig" }] : /* istanbul ignore next */ []);
+		this.cancelButtonConfig = computed(() => ({
+			label: this.buttonConfig().cancelLabel || "Cancel",
+			iconName: this.buttonConfig().cancelIcon ?? "Close-filled",
+			variant: "secondary-inverted",
+			size: "small",
+			disabled: this.disabled()
+		}), ...ngDevMode ? [{ debugName: "cancelButtonConfig" }] : /* istanbul ignore next */ []);
+		this.onChange = (_val) => {};
+		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;
+		if ((!relatedTarget || !this.elementRef.nativeElement.contains(relatedTarget)) && 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 instanceof KeyboardEvent && !event.shiftKey) {
+			event.preventDefault();
+			this.saveEdit();
+		}
+	}
+	onTabPressed() {}
+	onInputFocus() {
+		if (!this.disabled() && !this.isEditing()) this.enterEditMode();
+		this._state.set("focused");
+		this.focusEvent.emit();
+		this.onTouched();
+	}
+	onInputBlur() {
+		this.blurEvent.emit();
+	}
+	onInputChange(event) {
+		const newValue = event.target.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();
+		if (this.hasValidationError(newValue)) {
+			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 : false;
+	}
+	hasMinLengthError(value, config) {
+		return config.minLength ? value.length < config.minLength : false;
+	}
+	hasMaxLengthError(value, config) {
+		return config.maxLength ? value.length > config.maxLength : false;
+	}
+	hasPatternError(value, config) {
+		return config.pattern ? !config.pattern.test(value) : false;
+	}
+	hasCustomValidationError(value, config) {
+		return config.customValidator ? config.customValidator(value) : false;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			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.0.0",
+			version: "22.2.4",
+			type: InlineFieldComponent,
+			isStandalone: true,
+			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
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					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()"
+				},
+				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      [testId]=\"testId()\"\n    ></ui-field>\n\n    @if (isEditing()) {\n      <div 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          [testId]=\"saveButtonTestId()\"\n          class=\"save-button\"\n        ></ui-button>\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          [testId]=\"cancelButtonTestId()\"\n          class=\"cancel-button\"\n        ></ui-button>\n      </div>\n    }\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: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: 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",
+						"testId",
+						"loading",
+						"isValid",
+						"maxCharacters",
+						"trimOnBlur",
+						"trimOnSubmit",
+						"maxRows",
+						"hasTextAreaCounter",
+						"hideBuiltInErrors",
+						"hideLabelInErrors",
+						"max",
+						"min",
+						"textareaHeight",
+						"borderless",
+						"autosizableTextarea",
+						"isAIVariant",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"hasError"
+					],
+					outputs: ["validateEvent", "fieldBlur"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	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()"
+			},
+			imports: [
+				NgClass,
+				FieldComponent,
+				ButtonComponent
+			],
+			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      [testId]=\"testId()\"\n    ></ui-field>\n\n    @if (isEditing()) {\n      <div 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          [testId]=\"saveButtonTestId()\"\n          class=\"save-button\"\n        ></ui-button>\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          [testId]=\"cancelButtonTestId()\"\n          class=\"cancel-button\"\n        ></ui-button>\n      </div>\n    }\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 }],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		fieldType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldType",
+				required: false
+			}]
+		}],
+		maxRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxRows",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		showErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showErrors",
+				required: false
+			}]
+		}],
+		buttonConfig: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonConfig",
+				required: false
+			}]
+		}],
+		validation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validation",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		fullWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullWidth",
+				required: false
+			}]
+		}],
+		save: [{
+			type: i0.Output,
+			args: ["save"]
+		}],
+		cancel: [{
+			type: i0.Output,
+			args: ["cancel"]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		editingModeChange: [{
+			type: i0.Output,
+			args: ["editingModeChange"]
+		}],
+		focusEvent: [{
+			type: i0.Output,
+			args: ["focusEvent"]
+		}],
+		blurEvent: [{
+			type: i0.Output,
+			args: ["blurEvent"]
+		}],
+		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"]
+		}]
+	}
+});
+var InlineFieldComponentModule = class InlineFieldComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: InlineFieldComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: InlineFieldComponentModule,
+			imports: [
+				CommonModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatInputModule,
+				ButtonComponentModule,
+				FieldComponentModule,
+				IconComponentModule,
+				InlineFieldComponent
+			],
+			exports: [InlineFieldComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: InlineFieldComponentModule,
+			imports: [
+				CommonModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatInputModule,
+				ButtonComponentModule,
+				FieldComponentModule,
+				IconComponentModule,
+				InlineFieldComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: InlineFieldComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				FormsModule,
+				ReactiveFormsModule,
+				MatInputModule,
+				ButtonComponentModule,
+				FieldComponentModule,
+				IconComponentModule,
+				InlineFieldComponent
+			],
+			exports: [InlineFieldComponent]
+		}]
+	}]
+});
 export { InlineFieldComponent, InlineFieldComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-inline-field.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-inline-field.mjs.map