iss-ctrl 0.0.21 → 0.0.23

package/fesm2022/iss-ctrl-slide-toggle.field-vCJHOiSG.mjs

@@ -0,0 +1,85 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatLabel } from '@angular/material/form-field';
+import { F as FieldBase, V as VIEW_PROVIDER, a as ValidationMessage, b as FieldViewer } from './iss-ctrl-iss-ctrl-BG-QWWdq.mjs';
+import { SlideToggleControl } from 'iss-ctrl/slide-toggle';
+import { SlideToggleViewer } from './iss-ctrl-slide-toggle.viewer-hsIHwDj3.mjs';
+
+/**
+ * `<iss-field-slide-toggle>` — an on/off switch for a boolean value.
+ *
+ * Rendered by the outlet for fields of type `switch`. In `edit` mode it renders
+ * {@link SlideToggleControl} plus the validation message; in `view` mode the matching viewer.
+ *
+ * ### Supported `config` keys
+ * | Key | Type | Description |
+ * | --- | --- | --- |
+ * | `hideLabel` | `boolean` | Hides the field label. |
+ * | `readonly` | `boolean` | Shows the value but blocks interaction. |
+ *
+ * ### Other field members used
+ * `label()`
+ *
+ * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and
+ * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.
+ *
+ * @example
+ * ```json
+ * { "name": "active", "type": "switch", "label": "Active" }
+ * ```
+ */
+class SlideToggleField extends FieldBase {
+    onChange($event) {
+        this.field.ctrlJsonValue.set($event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SlideToggleField, isStandalone: true, selector: "iss-field-slide-toggle", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
+        <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-slide-toggle [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-field-slide-toggle",
+                    viewProviders: [VIEW_PROVIDER],
+                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessage, FieldViewer],
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
+        <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-slide-toggle [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `
+                }]
+        }] });
+
+export { SlideToggleField };
+//# sourceMappingURL=iss-ctrl-slide-toggle.field-vCJHOiSG.mjs.map

package/fesm2022/iss-ctrl-slide-toggle.field-vCJHOiSG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-slide-toggle.field-vCJHOiSG.mjs","sources":["../../../projects/iss/src/components/controls/slide-toggle/slide-toggle.field.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { MatLabel } from \"@angular/material/form-field\";\nimport { VIEW_PROVIDER } from \"../../../shared/constants/view-provider.const\";\nimport { FieldViewer } from \"../../shared/field-viewer\";\nimport { ValidationMessage } from \"../../shared/validation-message\";\nimport { FieldBase } from \"../base/field-base\";\nimport { SlideToggleControl } from \"iss-ctrl/slide-toggle\";\nimport { SlideToggleViewer } from \"./slide-toggle.viewer\";\n\n/**\n * `<iss-field-slide-toggle>` — an on/off switch for a boolean value.\n *\n * Rendered by the outlet for fields of type `switch`. In `edit` mode it renders\n * {@link SlideToggleControl} plus the validation message; in `view` mode the matching viewer.\n *\n * ### Supported `config` keys\n * | Key | Type | Description |\n * | --- | --- | --- |\n * | `hideLabel` | `boolean` | Hides the field label. |\n * | `readonly` | `boolean` | Shows the value but blocks interaction. |\n *\n * ### Other field members used\n * `label()`\n *\n * Every field also honours `visible`, `mode`, `validation`, `asyncValidation` and\n * `events` — see {@link IssField} for the full model and {@link FieldConfig} for all keys.\n *\n * @example\n * ```json\n * { \"name\": \"active\", \"type\": \"switch\", \"label\": \"Active\" }\n * ```\n */\n@Component({\n  selector: \"iss-field-slide-toggle\",\n  viewProviders: [VIEW_PROVIDER],\n  imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessage, FieldViewer],\n  template: `\n    @if (field.visible()) {\n      @if (field.mode() === \"edit\") {\n        @if (!field.config.hideLabel()) {\n          <mat-label>{{ field.label() }}</mat-label>\n        }\n        <iss-ctrl-slide-toggle [formControlName]=\"field.name\" [readonly]=\"field.config.readonly() ?? false\" (onChange)=\"onChange($event)\"/>\n        <iss-validation-message-viewer [errors]=\"ctrl.errors\" [showMessage]=\"!ctrl.untouched\"/>\n      } @else {\n        <iss-field-viewer>\n          @if (!field.config.hideLabel()) {\n            <label>{{ field.label() }}</label>\n          }\n          <iss-viewer-slide-toggle [field]=\"field\"/>\n        </iss-field-viewer>\n      }\n    }\n  `\n})\nexport class SlideToggleField extends FieldBase {\n  onChange($event: any) {\n    this.field.ctrlJsonValue.set($event);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAwBG,MAAO,gBAAiB,SAAQ,SAAS,CAAA;AAC7C,IAAA,QAAQ,CAAC,MAAW,EAAA;QAClB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC;IACtC;uGAHW,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnBjB;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAlBS,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,WAAW,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,aAAA,EAD/F,CAAC,aAAa,CAAC,EAAA,CAAA;;2FAqBnB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAvB5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;oBAClC,aAAa,EAAE,CAAC,aAAa,CAAC;AAC9B,oBAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,CAAC;AAC/G,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;AAiBT,EAAA;AACF,iBAAA;;;;;"}

package/fesm2022/iss-ctrl-slide-toggle.mjs

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { ControlBase } from 'iss-ctrl/base';
+
+/**
+ * `<iss-ctrl-slide-toggle>` — an on/off switch for a boolean value.
+ *
+ * @example
+ * ```html
+ * <iss-ctrl-slide-toggle formControlName="active" (onChange)="save($event)"/>
+ * ```
+ *
+ * ### Own inputs
+ * None — the control is configured entirely through the inherited properties.
+ *
+ * ### Inherited from {@link ControlBase}
+ * `formControlName` · `readonly` · `className` · `(onChange)`
+ *
+ * Projects a `<label>` above the control — the wrapping `iss-field-*` passes the field label in that way.
+ */
+class SlideToggleControl extends ControlBase {
+    onSlideToggleChange(checked) {
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
+        this.emitValue(checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: SlideToggleControl, isStandalone: true, selector: "iss-ctrl-slide-toggle", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-slide-toggle class="d-block" [formControl]="ctrl" [disabled]="readonly()" (change)="onSlideToggleChange($event.checked)">
+      <ng-content select="label"></ng-content>
+    </mat-slide-toggle>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-ctrl-slide-toggle",
+                    imports: [MatSlideToggleModule, ReactiveFormsModule],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true }
+                    ],
+                    template: `
+    <mat-slide-toggle class="d-block" [formControl]="ctrl" [disabled]="readonly()" (change)="onSlideToggleChange($event.checked)">
+      <ng-content select="label"></ng-content>
+    </mat-slide-toggle>
+  `
+                }]
+        }] });
+
+// The slide-toggle control. Its field and viewer stay in the primary entry point and reach it
+// from there, so the control ships only to an app that renders it or imports it directly.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlideToggleControl };
+//# sourceMappingURL=iss-ctrl-slide-toggle.mjs.map

package/fesm2022/iss-ctrl-slide-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-slide-toggle.mjs","sources":["../../../projects/iss/slide-toggle/src/slide-toggle.control.ts","../../../projects/iss/slide-toggle/src/public-api.ts","../../../projects/iss/slide-toggle/src/iss-ctrl-slide-toggle.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\nimport { MatSlideToggleModule } from \"@angular/material/slide-toggle\";\nimport { ControlBase } from \"iss-ctrl/base\";\n\n/**\n * `<iss-ctrl-slide-toggle>` — an on/off switch for a boolean value.\n *\n * @example\n * ```html\n * <iss-ctrl-slide-toggle formControlName=\"active\" (onChange)=\"save($event)\"/>\n * ```\n *\n * ### Own inputs\n * None — the control is configured entirely through the inherited properties.\n *\n * ### Inherited from {@link ControlBase}\n * `formControlName` · `readonly` · `className` · `(onChange)`\n *\n * Projects a `<label>` above the control — the wrapping `iss-field-*` passes the field label in that way.\n */\n@Component({\n  selector: \"iss-ctrl-slide-toggle\",\n  imports: [MatSlideToggleModule, ReactiveFormsModule],\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true }\n  ],\n  template: `\n    <mat-slide-toggle class=\"d-block\" [formControl]=\"ctrl\" [disabled]=\"readonly()\" (change)=\"onSlideToggleChange($event.checked)\">\n      <ng-content select=\"label\"></ng-content>\n    </mat-slide-toggle>\n  `\n})\nexport class SlideToggleControl extends ControlBase {\n  onSlideToggleChange(checked: boolean) {\n    if (this.readonly()) {\n      return;\n    }\n    this.markAsTouched();\n    this.emitValue(checked);\n  }\n}\n","// The slide-toggle control. Its field and viewer stay in the primary entry point and reach it\n// from there, so the control ships only to an app that renders it or imports it directly.\n\nexport * from \"./slide-toggle.control\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAKA;;;;;;;;;;;;;;;AAeG;AAaG,MAAO,kBAAmB,SAAQ,WAAW,CAAA;AACjD,IAAA,mBAAmB,CAAC,OAAgB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;QACA,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;IACzB;uGAPW,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,SAAA,EATlB;YACT,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,KAAK,EAAE,IAAI;SAC3E,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EACS;;;;GAIT,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EARS,oBAAoB,yXAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAUxC,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,OAAO,EAAE,CAAC,oBAAoB,EAAE,mBAAmB,CAAC;AACpD,oBAAA,SAAS,EAAE;wBACT,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,oBAAoB,EAAE,KAAK,EAAE,IAAI;AAC3E,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;AAIT,EAAA;AACF,iBAAA;;;AChCD;AACA;;ACDA;;AAEG;;;;"}

package/fesm2022/iss-ctrl-slide-toggle.viewer-hsIHwDj3.mjs

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import { ViewerBase } from 'iss-ctrl/base';
+
+class SlideToggleViewer extends ViewerBase {
+    // the control writes a boolean, while a value coming from the server is a string
+    isChecked(value) {
+        return value === true || value === "true";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SlideToggleViewer, isStandalone: true, selector: "iss-viewer-slide-toggle", usesInheritance: true, ngImport: i0, template: `
+    @if (isChecked(field().ctrlValue())) {
+      {{ field().label() + ' Yes' }}
+    } @else {
+      {{ field().label() + ' No' }}
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleViewer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-viewer-slide-toggle",
+                    template: `
+    @if (isChecked(field().ctrlValue())) {
+      {{ field().label() + ' Yes' }}
+    } @else {
+      {{ field().label() + ' No' }}
+    }
+  `,
+                }]
+        }] });
+
+export { SlideToggleViewer };
+//# sourceMappingURL=iss-ctrl-slide-toggle.viewer-hsIHwDj3.mjs.map

package/fesm2022/iss-ctrl-slide-toggle.viewer-hsIHwDj3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-slide-toggle.viewer-hsIHwDj3.mjs","sources":["../../../projects/iss/src/components/controls/slide-toggle/slide-toggle.viewer.ts"],"sourcesContent":["import { Component } from \"@angular/core\";\nimport { ViewerBase } from \"iss-ctrl/base\";\n\n@Component({\n  selector: \"iss-viewer-slide-toggle\",\n  template: `\n    @if (isChecked(field().ctrlValue())) {\n      {{ field().label() + ' Yes' }}\n    } @else {\n      {{ field().label() + ' No' }}\n    }\n  `,\n})\nexport class SlideToggleViewer extends ViewerBase {\n  // the control writes a boolean, while a value coming from the server is a string\n  isChecked(value: unknown): boolean {\n    return value === true || value === \"true\";\n  }\n}\n"],"names":[],"mappings":";;;;AAaM,MAAO,iBAAkB,SAAQ,UAAU,CAAA;;AAE/C,IAAA,SAAS,CAAC,KAAc,EAAA;AACtB,QAAA,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,MAAM;IAC3C;uGAJW,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARlB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,yBAAyB;AACnC,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACF,iBAAA;;;;;"}

package/fesm2022/{iss-ctrl-table.field-B5FxF6hn.mjs → iss-ctrl-table.field-DdFjH-D8.mjs}

@@ -2,19 +2,21 @@ import * as i0 from '@angular/core';
 import { viewChild, ViewContainerRef, inject, DestroyRef, effect, Component, input, signal, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { c as ViewerBase, L as Loader, C as ControlBase, d as FormEngine, I as IssField, O as Outlet, F as FieldBase, V as VIEW_PROVIDER, a as ValidationMessage } from './iss-ctrl-iss-ctrl-BKu6a5HF.mjs';
+import { L as Loader, d as FormEngine, I as IssField, O as Outlet, F as FieldBase, V as VIEW_PROVIDER, a as ValidationMessage } from './iss-ctrl-iss-ctrl-BG-QWWdq.mjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i1 from '@angular/material/input';
+import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/paginator';
+import * as i5 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i5 from '@angular/material/sidenav';
+import * as i6 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i3 from '@angular/material/sort';
+import * as i4 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i2 from '@angular/material/table';
+import * as i3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ViewerBase, ControlBase } from 'iss-ctrl/base';
 import { take } from 'rxjs';
 
 class FieldViewer extends ViewerBase {
@@ -359,73 +361,73 @@ class TableControl extends ControlBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TableControl, isStandalone: true, selector: "iss-ctrl-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, withFilter: { classPropertyName: "withFilter", publicName: "withFilter", isSignal: true, isRequired: false, transformFunction: null }, withSort: { classPropertyName: "withSort", publicName: "withSort", isSignal: true, isRequired: false, transformFunction: null }, withPagination: { classPropertyName: "withPagination", publicName: "withPagination", isSignal: true, isRequired: false, transformFunction: null }, jsonValue: { classPropertyName: "jsonValue", publicName: "jsonValue", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: TableControl, multi: true },
-        ], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <form [formGroup]="tableOutletForm">
-          <iss-form-outlet [fields]="fields()"/>
-        </form>
-        <ds-button (click)="saveRow(true)">save
-        </ds-button>
-        <ds-button (click)="saveRow(false)">save and add more</ds-button>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div>
-          <ds-button icon="true" (click)="openNewRow()">
-            <ds-icon icon="plus"></ds-icon>
-          </ds-button>
-          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
-        </div>
-        @if (withFilter()) {
-          <mat-form-field>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
-          </mat-form-field>
-        }
-        <div class="mat-elevation-z8">
-          <table mat-table [dataSource]="dataSource" matSort>
-            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
-            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
-
-            @for (col of fieldNames(); track col) {
-              @if (col !== "actions") {
-                <ng-container [matColumnDef]="col">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
-                    {{ columnLabels()[$index] }}
-                  </th>
-                  <td mat-cell *matCellDef="let row">
-                    @if (viewFieldOf(row, $index); as viewField) {
-                      <iss-viewer-field [field]="viewField"/>
-                    }
-                  </td>
-                </ng-container>
-              }
-            }
-
-            <!-- Actions -->
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-              <td mat-cell *matCellDef="let row">
-                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
-                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
-                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
-              </td>
-            </ng-container>
-
-            <tr class="mat-row" *matNoDataRow>
-              <td class="mat-cell" colspan="4">
-                <ds-message type="emptyCard"></ds-message>
-              </td>
-            </tr>
-          </table>
-
-          @if (withPagination()) {
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
-          }
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Outlet, selector: "iss-form-outlet", inputs: ["fields"], outputs: ["ready"] }, { kind: "component", type: FieldViewer, selector: "iss-viewer-field" }] });
+        ], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <form [formGroup]="tableOutletForm">
+          <iss-form-outlet [fields]="fields()"/>
+        </form>
+        <ds-button (click)="saveRow(true)">save
+        </ds-button>
+        <ds-button (click)="saveRow(false)">save and add more</ds-button>
+      </mat-sidenav>
+      <mat-sidenav-content>
+        <div>
+          <ds-button icon="true" (click)="openNewRow()">
+            <ds-icon icon="plus"></ds-icon>
+          </ds-button>
+          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
+        </div>
+        @if (withFilter()) {
+          <mat-form-field>
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
+          </mat-form-field>
+        }
+        <div class="mat-elevation-z8">
+          <table mat-table [dataSource]="dataSource" matSort>
+            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
+            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
+
+            @for (col of fieldNames(); track col) {
+              @if (col !== "actions") {
+                <ng-container [matColumnDef]="col">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
+                    {{ columnLabels()[$index] }}
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    @if (viewFieldOf(row, $index); as viewField) {
+                      <iss-viewer-field [field]="viewField"/>
+                    }
+                  </td>
+                </ng-container>
+              }
+            }
+
+            <!-- Actions -->
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+              <td mat-cell *matCellDef="let row">
+                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
+                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
+                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
+              </td>
+            </ng-container>
+
+            <tr class="mat-row" *matNoDataRow>
+              <td class="mat-cell" colspan="4">
+                <ds-message type="emptyCard"></ds-message>
+              </td>
+            </tr>
+          </table>
+
+          @if (withPagination()) {
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
+          }
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `, isInline: true, styles: [".mat-drawer{position:fixed;left:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Outlet, selector: "iss-form-outlet", inputs: ["fields"], outputs: ["ready"] }, { kind: "component", type: FieldViewer, selector: "iss-viewer-field" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableControl, decorators: [{
             type: Component,
@@ -441,72 +443,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         FieldViewer,
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: TableControl, multi: true },
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <form [formGroup]="tableOutletForm">
-          <iss-form-outlet [fields]="fields()"/>
-        </form>
-        <ds-button (click)="saveRow(true)">save
-        </ds-button>
-        <ds-button (click)="saveRow(false)">save and add more</ds-button>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div>
-          <ds-button icon="true" (click)="openNewRow()">
-            <ds-icon icon="plus"></ds-icon>
-          </ds-button>
-          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
-        </div>
-        @if (withFilter()) {
-          <mat-form-field>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
-          </mat-form-field>
-        }
-        <div class="mat-elevation-z8">
-          <table mat-table [dataSource]="dataSource" matSort>
-            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
-            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
-
-            @for (col of fieldNames(); track col) {
-              @if (col !== "actions") {
-                <ng-container [matColumnDef]="col">
-                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
-                    {{ columnLabels()[$index] }}
-                  </th>
-                  <td mat-cell *matCellDef="let row">
-                    @if (viewFieldOf(row, $index); as viewField) {
-                      <iss-viewer-field [field]="viewField"/>
-                    }
-                  </td>
-                </ng-container>
-              }
-            }
-
-            <!-- Actions -->
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-              <td mat-cell *matCellDef="let row">
-                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
-                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
-                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
-              </td>
-            </ng-container>
-
-            <tr class="mat-row" *matNoDataRow>
-              <td class="mat-cell" colspan="4">
-                <ds-message type="emptyCard"></ds-message>
-              </td>
-            </tr>
-          </table>
-
-          @if (withPagination()) {
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
-          }
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <form [formGroup]="tableOutletForm">
+          <iss-form-outlet [fields]="fields()"/>
+        </form>
+        <ds-button (click)="saveRow(true)">save
+        </ds-button>
+        <ds-button (click)="saveRow(false)">save and add more</ds-button>
+      </mat-sidenav>
+      <mat-sidenav-content>
+        <div>
+          <ds-button icon="true" (click)="openNewRow()">
+            <ds-icon icon="plus"></ds-icon>
+          </ds-button>
+          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
+        </div>
+        @if (withFilter()) {
+          <mat-form-field>
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
+          </mat-form-field>
+        }
+        <div class="mat-elevation-z8">
+          <table mat-table [dataSource]="dataSource" matSort>
+            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
+            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
+
+            @for (col of fieldNames(); track col) {
+              @if (col !== "actions") {
+                <ng-container [matColumnDef]="col">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()">
+                    {{ columnLabels()[$index] }}
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    @if (viewFieldOf(row, $index); as viewField) {
+                      <iss-viewer-field [field]="viewField"/>
+                    }
+                  </td>
+                </ng-container>
+              }
+            }
+
+            <!-- Actions -->
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+              <td mat-cell *matCellDef="let row">
+                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
+                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
+                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
+              </td>
+            </ng-container>
+
+            <tr class="mat-row" *matNoDataRow>
+              <td class="mat-cell" colspan="4">
+                <ds-message type="emptyCard"></ds-message>
+              </td>
+            </tr>
+          </table>
+
+          @if (withPagination()) {
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
+          }
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
   `, styles: [".mat-drawer{position:fixed;left:0}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], withFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withFilter", required: false }] }], withSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSort", required: false }] }], withPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPagination", required: false }] }], jsonValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "jsonValue", required: false }] }], drawer: [{ type: i0.ViewChild, args: ["drawer", { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
 
@@ -589,4 +591,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 export { TableField };
-//# sourceMappingURL=iss-ctrl-table.field-B5FxF6hn.mjs.map
+//# sourceMappingURL=iss-ctrl-table.field-DdFjH-D8.mjs.map