oasys-lib 2.33.1 → 2.33.2

package/fesm2022/oasys-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, input, output, viewChild, signal, computed, EventEmitter, ViewChild, ContentChild, Output, NgModule, HostBinding, model, forwardRef, CUSTOM_ELEMENTS_SCHEMA, viewChildren, ContentChildren } from '@angular/core';
+import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, input, output, viewChild, signal, computed, EventEmitter, ViewChild, ContentChild, Output, NgModule, HostBinding, model, forwardRef, CUSTOM_ELEMENTS_SCHEMA, viewChildren, ContentChildren, contentChildren, effect } from '@angular/core';
 import { BehaviorSubject, Subject, Observable } from 'rxjs';
 import { takeUntil, take, map } from 'rxjs/operators';
 import * as i1 from '@angular/cdk/layout';
@@ -4179,6 +4179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
             }] } });
 
 class OasysFormErrorsSummaryItemComponent {
+    elementRef = inject(ElementRef);
     itemId = signal('errors-summary-item', ...(ngDevMode ? [{ debugName: "itemId" }] : []));
     abstractControl = input(...(ngDevMode ? [undefined, { debugName: "abstractControl" }] : []));
     error_messages = input({}, ...(ngDevMode ? [{ debugName: "error_messages" }] : []));
@@ -4191,16 +4192,38 @@ class OasysFormErrorsSummaryItemComponent {
                 // Find the ui-text-input component with the matching ng-reflect-name
                 const textInputComponent = document.querySelector(`ui-text-input[ng-reflect-name="${controlName}"]`);
                 if (textInputComponent) {
-                    // Find the input element inside the ui-text-input component
                     const inputElement = textInputComponent.querySelector('input');
                     if (inputElement) {
                         inputElement.focus();
                         inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        this.trapShiftTab(inputElement);
                     }
                 }
             }
         }
     }
+    trapShiftTab(inputElement) {
+        const liElement = this.elementRef.nativeElement.querySelector('li');
+        if (!liElement)
+            return;
+        let cleaned = false;
+        const cleanup = () => {
+            if (cleaned)
+                return;
+            cleaned = true;
+            inputElement.removeEventListener('keydown', onShiftTab);
+            inputElement.removeEventListener('blur', cleanup);
+        };
+        const onShiftTab = (event) => {
+            if (event.key === 'Tab' && event.shiftKey) {
+                event.preventDefault();
+                liElement.focus();
+                cleanup();
+            }
+        };
+        inputElement.addEventListener('keydown', onShiftTab);
+        inputElement.addEventListener('blur', cleanup);
+    }
     errorMessage = computed(() => {
         const currentErrors = this.abstractControl()?.errors;
         const messages = this.error_messages() ?? {};
@@ -4223,30 +4246,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
 
 class OasysFormErrorsSummaryComponent {
     formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
-    errorsSummaryItems;
-    hasErrorsSummaryItems = computed(() => this.errorsSummaryItems.length > 0, ...(ngDevMode ? [{ debugName: "hasErrorsSummaryItems" }] : []));
-    ngAfterContentInit() {
-        if (this.errorsSummaryItems.length === 0) {
-            console.error('ui-form-errors-summary: No ui-form-errors-summary-item components found. Please add at least one ui-form-errors-summary-item.');
-        }
-        this.errorsSummaryItems.forEach((item, index) => {
-            item.itemId.set(`errors-summary-item-${index}`);
+    errorsSummaryItems = contentChildren(OasysFormErrorsSummaryItemComponent, ...(ngDevMode ? [{ debugName: "errorsSummaryItems" }] : []));
+    hasErrorsSummaryItems = computed(() => this.errorsSummaryItems().length > 0, ...(ngDevMode ? [{ debugName: "hasErrorsSummaryItems" }] : []));
+    constructor() {
+        effect(() => {
+            const items = this.errorsSummaryItems();
+            if (items.length === 0) {
+                console.error('ui-form-errors-summary: No ui-form-errors-summary-item components found. Please add at least one ui-form-errors-summary-item.');
+            }
+            items.forEach((item, index) => {
+                item.itemId.set(`errors-summary-item-${index}`);
+            });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: OasysFormErrorsSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: OasysFormErrorsSummaryComponent, isStandalone: true, selector: "ui-form-errors-summary", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "errorsSummaryItems", predicate: OasysFormErrorsSummaryItemComponent }], ngImport: i0, template: "<div #errorsSummary>\n  @if (!formGroup().valid && hasErrorsSummaryItems()) {\n    <ui-box class=\"ui-form-errors-summary\" box_space=\"near\" box_align_x=\"center\">\n      <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n        <div class=\"badge\">\n          <ui-icon icon_name=\"error\" icon_size_override=\"2\"></ui-icon>\n        </div>\n\n        <ui-stack stack_gap=\"near\">\n          <ui-stack stack_gap=\"tight\" class=\"content\" stack_direction=\"y\">\n            <div class=\"text-label--secondary\" id=\"errors-summary-title\">\n              <ng-content select=\"ui-form-errors-summary-title\"></ng-content>\n            </div>\n            <ul>\n              <ng-content></ng-content>\n            </ul>\n          </ui-stack>\n        </ui-stack>\n      </ui-stack>\n    </ui-box>\n  }\n</div>\n", styles: [":host{display:contents}.ui-form-errors-summary{margin-bottom:var(--oasys-spacing-near);background-color:var(--oasys-color-system-background-negative)}.ui-form-errors-summary .badge{padding:2px;border-radius:9999px;color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-negative)}.ui-form-errors-summary .badge ui-icon{fill:currentColor}.ui-form-errors-summary .content{gap:var(--oasys-spacing-tiny)}.ui-form-errors-summary ul{margin:0}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: OasysFormErrorsSummaryComponent, isStandalone: true, selector: "ui-form-errors-summary", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "errorsSummaryItems", predicate: OasysFormErrorsSummaryItemComponent, isSignal: true }], ngImport: i0, template: "<div #errorsSummary>\n  @if (!formGroup().valid && hasErrorsSummaryItems()) {\n    <ui-box class=\"ui-form-errors-summary\" box_space=\"near\" box_align_x=\"center\">\n      <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n        <div class=\"badge\">\n          <ui-icon icon_name=\"error\" icon_size_override=\"2\"></ui-icon>\n        </div>\n\n        <ui-stack stack_gap=\"near\">\n          <ui-stack stack_gap=\"tight\" class=\"content\" stack_direction=\"y\">\n            <div class=\"text-label--secondary\" id=\"errors-summary-title\">\n              <ng-content select=\"ui-form-errors-summary-title\"></ng-content>\n            </div>\n            <ul>\n              <ng-content></ng-content>\n            </ul>\n          </ui-stack>\n        </ui-stack>\n      </ui-stack>\n    </ui-box>\n  }\n</div>\n", styles: [":host{display:contents}.ui-form-errors-summary{margin-bottom:var(--oasys-spacing-near);background-color:var(--oasys-color-system-background-negative)}.ui-form-errors-summary .badge{padding:2px;border-radius:9999px;color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-negative)}.ui-form-errors-summary .badge ui-icon{fill:currentColor}.ui-form-errors-summary .content{gap:var(--oasys-spacing-tiny)}.ui-form-errors-summary ul{margin:0}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }, { kind: "component", type: LayoutStackComponent, selector: "ui-stack", inputs: ["stack_gap", "stack_align", "stack_direction", "stack_distribute", "stack_wrap", "stack_collapse_below", "stack_as_list"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["icon_size", "icon_size_override", "icon_name", "icon_context", "alt_text", "icon_class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: OasysFormErrorsSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-form-errors-summary', standalone: true, imports: [LayoutBoxComponent, LayoutStackComponent, IconComponent], template: "<div #errorsSummary>\n  @if (!formGroup().valid && hasErrorsSummaryItems()) {\n    <ui-box class=\"ui-form-errors-summary\" box_space=\"near\" box_align_x=\"center\">\n      <ui-stack stack_direction=\"x\" stack_gap=\"near\">\n        <div class=\"badge\">\n          <ui-icon icon_name=\"error\" icon_size_override=\"2\"></ui-icon>\n        </div>\n\n        <ui-stack stack_gap=\"near\">\n          <ui-stack stack_gap=\"tight\" class=\"content\" stack_direction=\"y\">\n            <div class=\"text-label--secondary\" id=\"errors-summary-title\">\n              <ng-content select=\"ui-form-errors-summary-title\"></ng-content>\n            </div>\n            <ul>\n              <ng-content></ng-content>\n            </ul>\n          </ui-stack>\n        </ui-stack>\n      </ui-stack>\n    </ui-box>\n  }\n</div>\n", styles: [":host{display:contents}.ui-form-errors-summary{margin-bottom:var(--oasys-spacing-near);background-color:var(--oasys-color-system-background-negative)}.ui-form-errors-summary .badge{padding:2px;border-radius:9999px;color:var(--oasys-color-brand-foreground-primary-on-dark);background-color:var(--oasys-color-system-foreground-negative)}.ui-form-errors-summary .badge ui-icon{fill:currentColor}.ui-form-errors-summary .content{gap:var(--oasys-spacing-tiny)}.ui-form-errors-summary ul{margin:0}\n"] }]
-        }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], errorsSummaryItems: [{
-                type: ContentChildren,
-                args: [OasysFormErrorsSummaryItemComponent]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], errorsSummaryItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OasysFormErrorsSummaryItemComponent), { isSignal: true }] }] } });
 
 class OasysFormErrorsSummaryTitleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: OasysFormErrorsSummaryTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: OasysFormErrorsSummaryTitleComponent, isStandalone: true, selector: "ui-form-errors-summary-title", host: { attributes: { "role": "alert", "aria-live": "polite" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: OasysFormErrorsSummaryTitleComponent, isStandalone: true, selector: "ui-form-errors-summary-title", host: { attributes: { "tabindex": "-1" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: OasysFormErrorsSummaryTitleComponent, decorators: [{
             type: Component,
@@ -4256,8 +4279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     host: {
-                        role: 'alert',
-                        'aria-live': 'polite',
+                        tabindex: '-1',
                     },
                 }]
         }] });