@gravitee/ui-particles-angular 16.4.0 → 17.0.0

package/fesm2022/gravitee-ui-particles-angular.mjs

@@ -7087,6 +7087,23 @@ class GioFormCronHarness extends ComponentHarness {
     }
 }
 
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const GIO_FORM_SELECTION_INLINE_STATE = new InjectionToken('GIO_FORM_SELECTION_INLINE_STATE');
+
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
  *
@@ -7103,68 +7120,86 @@ class GioFormCronHarness extends ComponentHarness {
  * limitations under the License.
  */
 class GioFormSelectionInlineCardComponent {
+    get valueAttr() {
+        return this.value ?? null;
+    }
     get _disabled() {
-        return this.disabled || this._parendDisabled || this.lock;
+        return this._disabledState();
+    }
+    get _selected() {
+        return this._selectedState();
     }
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
+    constructor() {
         this.lock = false;
         this.disabled = false;
-        this.selected = false;
-        this._parendDisabled = false;
+        this.parentState = inject(GIO_FORM_SELECTION_INLINE_STATE, { optional: true });
+        this._disabledState = computed(() => {
+            const parentDisabled = this.parentState?.disabled() ?? false;
+            return this.disabled || parentDisabled || this.lock;
+        }, ...(ngDevMode ? [{ debugName: "_disabledState" }] : []));
+        this._selectedState = computed(() => {
+            if (!this.parentState) {
+                return false;
+            }
+            return this.value === this.parentState.selectedValue();
+        }, ...(ngDevMode ? [{ debugName: "_selectedState" }] : []));
     }
     onSelectCard() {
         if (!this._disabled && !this.lock) {
-            this.selected = !this.selected;
-            if (this.onSelectFn) {
+            // Use injected callback if available, otherwise fall back to onSelectFn
+            if (this.parentState) {
+                this.parentState.onCardSelect(this.value);
+            }
+            else if (this.onSelectFn) {
                 this.onSelectFn(this.value);
             }
         }
     }
-    _markForCheck() {
-        // When group value changes, the button will not be notified. Use `markForCheck` to explicit
-        // update radio button's status
-        this.changeDetector.markForCheck();
-        this.changeDetector.detectChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormSelectionInlineCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioFormSelectionInlineCardComponent, isStandalone: false, selector: "gio-form-selection-inline-card", inputs: { value: "value", lock: "lock", disabled: "disabled" }, host: { listeners: { "click": "onSelectCard()" }, properties: { "class.disabled": "this._disabled", "class.selected": "this.selected" } }, ngImport: i0, template: `
-    <div matRipple [matRippleDisabled]="_disabled" class="card" [class.selected]="selected" [class.disabled]="_disabled">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormSelectionInlineCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: GioFormSelectionInlineCardComponent, isStandalone: false, selector: "gio-form-selection-inline-card", inputs: { value: "value", lock: "lock", disabled: "disabled" }, host: { listeners: { "click": "onSelectCard()" }, properties: { "attr.value": "this.valueAttr", "class.disabled": "this._disabled", "class.selected": "this._selected" } }, ngImport: i0, template: `
+    <div matRipple [matRippleDisabled]="_disabled" class="card" [class.selected]="_selected" [class.disabled]="_disabled">
       <span class="selection-icon">
         @if (lock) {
           <mat-icon class="selection-icon__lock-icon" svgIcon="gio:lock"></mat-icon>
         }
-        <mat-icon class="selection-icon__radio-icon">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</mat-icon>
+        <mat-icon class="selection-icon__radio-icon">{{ _selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</mat-icon>
       </span>
 
-      <div class="card__content"><ng-content></ng-content></div>
+      <div class="card__content">
+        <ng-content></ng-content>
+      </div>
     </div>
   `, isInline: true, styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}:host{display:flex;flex:1 0 0%}.card{min-width:64px;min-height:40px;flex:1 1 auto;border:1px solid var(--mat-form-field-outlined-outline-color);border-radius:4px;margin:6px 0;cursor:pointer}.card .selection-icon{position:absolute;top:8px;right:8px;display:flex;height:24px;flex-direction:row;align-items:center;border-radius:100%;gap:4px}.card .selection-icon__lock-icon{height:22px;cursor:pointer}.card .selection-icon__lock-icon,.card .selection-icon__radio-icon{color:var(--mat-form-field-outlined-outline-color)}.card.selected{border:2px solid #da3b00;margin:5px 0;color:#da3b00}.card.selected .selection-icon__radio-icon{color:#da3b00}.card.disabled{border-color:#0003;color:#00000061;cursor:auto}.card.disabled__content{opacity:.4}.card.disabled .selection-icon__radio-icon{color:#0003}.card.disabled .selection-icon__lock-icon{color:#da3b00}.card:hover:not(.disabled,.selected){border-color:var(--mat-form-field-outlined-hover-outline-color)}.card:hover:not(.disabled,.selected) .selection-icon__radio-icon{color:var(--mat-form-field-outlined-hover-outline-color)}.card__content{padding:16px}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormSelectionInlineCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-selection-inline-card', template: `
-    <div matRipple [matRippleDisabled]="_disabled" class="card" [class.selected]="selected" [class.disabled]="_disabled">
+    <div matRipple [matRippleDisabled]="_disabled" class="card" [class.selected]="_selected" [class.disabled]="_disabled">
       <span class="selection-icon">
         @if (lock) {
           <mat-icon class="selection-icon__lock-icon" svgIcon="gio:lock"></mat-icon>
         }
-        <mat-icon class="selection-icon__radio-icon">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</mat-icon>
+        <mat-icon class="selection-icon__radio-icon">{{ _selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</mat-icon>
       </span>
 
-      <div class="card__content"><ng-content></ng-content></div>
+      <div class="card__content">
+        <ng-content></ng-content>
+      </div>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: ["@charset \"UTF-8\";.gio-top-bar-menu .gio-badge-accent{background-color:var(--gio-oem-palette--active, #ffc2ac);color:var(--gio-oem-palette--active-contrast, #1e1b1b)}:host{display:flex;flex:1 0 0%}.card{min-width:64px;min-height:40px;flex:1 1 auto;border:1px solid var(--mat-form-field-outlined-outline-color);border-radius:4px;margin:6px 0;cursor:pointer}.card .selection-icon{position:absolute;top:8px;right:8px;display:flex;height:24px;flex-direction:row;align-items:center;border-radius:100%;gap:4px}.card .selection-icon__lock-icon{height:22px;cursor:pointer}.card .selection-icon__lock-icon,.card .selection-icon__radio-icon{color:var(--mat-form-field-outlined-outline-color)}.card.selected{border:2px solid #da3b00;margin:5px 0;color:#da3b00}.card.selected .selection-icon__radio-icon{color:#da3b00}.card.disabled{border-color:#0003;color:#00000061;cursor:auto}.card.disabled__content{opacity:.4}.card.disabled .selection-icon__radio-icon{color:#0003}.card.disabled .selection-icon__lock-icon{color:#da3b00}.card:hover:not(.disabled,.selected){border-color:var(--mat-form-field-outlined-hover-outline-color)}.card:hover:not(.disabled,.selected) .selection-icon__radio-icon{color:var(--mat-form-field-outlined-hover-outline-color)}.card__content{padding:16px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+        }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], lock: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], valueAttr: [{
+                type: HostBinding,
+                args: ['attr.value']
             }], _disabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
-            }], selected: [{
+            }], _selected: [{
                 type: HostBinding,
                 args: ['class.selected']
             }], onSelectCard: [{
@@ -7188,32 +7223,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * limitations under the License.
  */
 class GioFormSelectionInlineComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.disabled = false;
+    constructor() {
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this._selection = signal(undefined, ...(ngDevMode ? [{ debugName: "_selection" }] : []));
         this._onChange = () => ({});
         this._onTouched = () => ({});
     }
-    ngAfterContentInit() {
-        this.selectCardsList?.forEach(card => {
-            card._parendDisabled = this.disabled;
-            if (card.value === this.selection) {
-                card.selected = true;
-                this.changeDetector.markForCheck();
-            }
-            card.onSelectFn = value => {
-                if (!this.disabled) {
+    // Expose state for injection token
+    getState() {
+        return {
+            disabled: this._disabled.asReadonly(),
+            selectedValue: this._selection.asReadonly(),
+            onCardSelect: (value) => {
+                if (!this._disabled()) {
                     this.updateCardsSelection(value);
                 }
-            };
-            card._markForCheck();
-        });
+            },
+        };
     }
     // From ControlValueAccessor interface
     writeValue(value) {
-        this.selection = value;
+        this._selection.set(value);
         this.updateCardsSelection(value);
-        this.changeDetector.markForCheck();
     }
     // From ControlValueAccessor interface
     registerOnChange(fn) {
@@ -7225,51 +7256,42 @@ class GioFormSelectionInlineComponent {
     }
     // From ControlValueAccessor interface
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (this.selectCardsList) {
-            this.selectCardsList.forEach(card => {
-                card._parendDisabled = this.disabled;
-                card._markForCheck();
-            });
-        }
-        this.changeDetector.markForCheck();
+        this._disabled.set(isDisabled);
     }
     updateCardsSelection(value) {
-        if (this.selectCardsList) {
-            this.selectCardsList.forEach(card => {
-                const newSelectedValue = card.value === value;
-                if (newSelectedValue !== card.selected) {
-                    card.selected = card.value === value;
-                    card._markForCheck();
-                }
-            });
-            this.selection = value;
-            this._onChange(this.selection);
-            this._onTouched();
-        }
+        this._selection.set(value);
+        this._onChange(this._selection());
+        this._onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormSelectionInlineComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormSelectionInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: GioFormSelectionInlineComponent, isStandalone: false, selector: "gio-form-selection-inline", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GioFormSelectionInlineComponent),
             },
-        ], queries: [{ propertyName: "selectCardsList", predicate: i0.forwardRef(() => GioFormSelectionInlineCardComponent), descendants: true }], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<ng-content select=\"gio-form-selection-inline-card\"></ng-content>\n", styles: [":host{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            {
+                provide: GIO_FORM_SELECTION_INLINE_STATE,
+                useFactory: (component) => component.getState(),
+                deps: [forwardRef(() => GioFormSelectionInlineComponent)],
+            },
+        ], ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<ng-content select=\"gio-form-selection-inline-card\"></ng-content>\n", styles: [":host{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GioFormSelectionInlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gio-form-selection-inline', providers: [
+            args: [{ selector: 'gio-form-selection-inline', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => GioFormSelectionInlineComponent),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<ng-content select=\"gio-form-selection-inline-card\"></ng-content>\n", styles: [":host{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectCardsList: [{
-                type: ContentChildren,
-                args: [forwardRef(() => GioFormSelectionInlineCardComponent), { descendants: true }]
-            }] } });
+                        {
+                            provide: GIO_FORM_SELECTION_INLINE_STATE,
+                            useFactory: (component) => component.getState(),
+                            deps: [forwardRef(() => GioFormSelectionInlineComponent)],
+                        },
+                    ], standalone: false, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<ng-content select=\"gio-form-selection-inline-card\"></ng-content>\n", styles: [":host{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}\n"] }]
+        }], ctorParameters: () => [] });
 
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)