iss-ctrl 0.0.16 → 0.0.18

package/fesm2022/{iss-ctrl-iss-ctrl-CUlx5aua.mjs → iss-ctrl-iss-ctrl-C_ZiixeF.mjs}

@@ -170,6 +170,21 @@ class ControlBase {
     validate(control) {
         return this.ctrl.errors;
     }
+    /**
+     * Whether the control currently holds no value.
+     *
+     * Reflected on the host as `iss-ctrl-empty`, which is what `upgrade.scss` uses to keep the
+     * resting outline of an empty field: Material's own `mat-form-field-hide-placeholder` drops
+     * off the moment the field is focused, so the border would change colour on focus alone.
+     * Override it in a control whose value does not live on {@link ControlBase.ctrl}.
+     */
+    isEmpty() {
+        const value = this.ctrl.getRawValue();
+        if (Array.isArray(value)) {
+            return value.length === 0;
+        }
+        return value === null || value === undefined || value === "";
+    }
     onTouch = () => { };
     onPropagateValue = (_) => { };
     emitValue(value) {
@@ -195,11 +210,14 @@ class ControlBase {
         this.onChange.emit(emissionValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ControlBase, isStandalone: true, selector: "ng-component", inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ControlBase, isStandalone: true, selector: "ng-component", inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class.iss-ctrl-empty": "isEmpty()" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, decorators: [{
             type: Component,
-            args: [{ template: `` }]
+            args: [{
+                    template: ``,
+                    host: { "[class.iss-ctrl-empty]": "isEmpty()" }
+                }]
         }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
 
 /**
@@ -390,6 +408,10 @@ class ChipsControl extends ControlBase {
         event.chipInput.clear();
         this.emitValue(this.#stringifyValues());
     }
+    // the chips are the value here; `ctrl` stays untouched
+    isEmpty() {
+        return this.keywords().length === 0;
+    }
     #stringifyValues() {
         return this.keywords().map((s) => s.trim()).join();
     }
@@ -1133,6 +1155,11 @@ class DateRangePickerControl extends ControlBase {
     ngOnDestroy() {
         this.#sub.unsubscribe();
     }
+    // the endpoints live on `range`; `ctrl` only holds the emitted value of a complete range
+    isEmpty() {
+        const { start, end } = this.range.getRawValue();
+        return !start && !end;
+    }
     openPicker(picker) {
         if (this.readonly()) {
             return;
@@ -6356,22 +6383,22 @@ const COMPONENTS = {
     datetime: () => Promise.resolve().then(function () { return datetimePicker_field; }).then((c) => c.DatetimePickerField),
     date_range: () => Promise.resolve().then(function () { return dateRangePicker_field; }).then((c) => c.DateRangePickerField),
     attachment: () => Promise.resolve().then(function () { return filePicker_field; }).then((c) => c.FilePickerField),
-    userPicker: () => import('./iss-ctrl-user-picker.field-69Tqgu2G.mjs').then((c) => c.UserPickerField),
+    userPicker: () => import('./iss-ctrl-user-picker.field-C7DZ3ck2.mjs').then((c) => c.UserPickerField),
     vehicle_plate: () => Promise.resolve().then(function () { return plate_field; }).then((c) => c.PlateField),
-    enrichment: () => import('./iss-ctrl-note.field-DpXXdNd0.mjs').then((c) => c.NoteField),
+    enrichment: () => import('./iss-ctrl-note.field-CakHrlcq.mjs').then((c) => c.NoteField),
     mobile: () => Promise.resolve().then(function () { return mobile_field; }).then((c) => c.MobileField),
-    table: () => import('./iss-ctrl-table.field-C5SDeghW.mjs').then((c) => c.TableField),
+    table: () => import('./iss-ctrl-table.field-Ce1KnlZO.mjs').then((c) => c.TableField),
     chips: () => Promise.resolve().then(function () { return chips_field; }).then((c) => c.ChipsField),
     switch: () => Promise.resolve().then(function () { return slideToggle_field; }).then((c) => c.SlideToggleField),
 };
 
 const SERVICES = {
-    setValue: () => import('./iss-ctrl-set-value-event-CXVuywEr.mjs').then((s) => s.SetValueEvent),
+    setValue: () => import('./iss-ctrl-set-value-event-C-uD228s.mjs').then((s) => s.SetValueEvent),
     show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
-    load: () => import('./iss-ctrl-load-value-event-Bq6nRj3K.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-Bvfi4PZq.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-Ck642ldN.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-Dbdwgl4g.mjs').then((s) => s.ReplaceApiKeys),
+    load: () => import('./iss-ctrl-load-value-event-BjsuFpPf.mjs').then((s) => s.LoadValueEvent),
+    loadOptions: () => import('./iss-ctrl-load-options-event-DOlkFXz5.mjs').then((s) => s.LoadOptionsEvent),
+    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-D5S3shyl.mjs').then((s) => s.TriggerBasedOnJsonValue),
+    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-C-G34VNS.mjs').then((s) => s.ReplaceApiKeys),
 };
 
 // Read-only counterpart of COMPONENTS: the component used to render a field's value
@@ -6594,19 +6621,15 @@ class Outlet {
         />
       }
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: FieldDataInjector, name: "FieldDataInjector" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:2rem}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: FieldDataInjector, name: "FieldDataInjector" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Outlet, decorators: [{
             type: Component,
-            args: [{
-                    selector: "iss-form-outlet",
-                    imports: [
+            args: [{ selector: "iss-form-outlet", imports: [
                         NgComponentOutlet,
                         FieldDataInjector,
                         AsyncPipe,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (components() && components()?.length) {
       @for (component of components(); track $index) {
         <ng-container
@@ -6616,8 +6639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         />
       }
     }
-  `
-                }]
+  `, styles: [":host{display:flex;flex-direction:column;gap:2rem}\n"] }]
         }], propDecorators: { ready: [{ type: i0.Output, args: ["ready"] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }] } });
 
 const VIEW_PROVIDER = {
@@ -6771,33 +6793,33 @@ class ValidationMessageComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationMessageComponent, isStandalone: true, selector: "iss-validation-message-viewer", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (errors() !== null && showMessage()) {
-      @for (error of errors() ?? {} | keyvalue; track error) {
-        <p>
-          <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
-        </p>
-      }
+      <div class="messages">
+        @for (error of errors() ?? {} | keyvalue; track error) {
+          <p>
+            <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
+          </p>
+        }
+      </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block;position:relative}.messages{position:absolute;inset-inline:0;top:0;z-index:1}p{margin:0}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "iss-validation-message-viewer",
-                    imports: [
+            args: [{ selector: "iss-validation-message-viewer", imports: [
                         KeyValuePipe,
                         TranslatePipe,
                         MatError
-                    ],
-                    template: `
+                    ], template: `
     @if (errors() !== null && showMessage()) {
-      @for (error of errors() ?? {} | keyvalue; track error) {
-        <p>
-          <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
-        </p>
-      }
+      <div class="messages">
+        @for (error of errors() ?? {} | keyvalue; track error) {
+          <p>
+            <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
+          </p>
+        }
+      </div>
     }
-  `,
-                }]
+  `, styles: [":host{display:block;position:relative}.messages{position:absolute;inset-inline:0;top:0;z-index:1}p{margin:0}\n"] }]
         }], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: true }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: true }] }] } });
 
 class EventTrigger {
@@ -9416,4 +9438,4 @@ var time_validator = /*#__PURE__*/Object.freeze({
  */
 
 export { PlateViewer as $, TimePickerField as A, DatePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatetimePickerField as G, HOST as H, IssField as I, DateRangePickerField as J, InputViewer as K, Loader as L, MobileControl as M, TextareaViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, ChipsViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, RadioViewer as U, VIEW_PROVIDER as V, SelectViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ValidationMessageComponent as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, startOfHijriMonth as aA, getHijriDaysInMonth as aB, createHijriDate as aC, formatHijriDate as aD, parseHijriDate as aE, toHijriDisplay as aF, IssValidators as aG, FileValidators as aH, TimeValidator as aI, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, FIELD_DATA as ae, UI_LANGUAGE as af, ATTACHMENT_UPLOAD_URL as ag, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ah, ATTACHMENT_DOWNLOAD_URL as ai, USER_SEARCH_API as aj, HintsComponent as ak, Droppable as al, ArabicNumberPipe as am, FieldDataInjector as an, PlateLetterPipe as ao, SelectStatusPipe as ap, TranslatePipe as aq, FileHandler as ar, IssDateAdapter as as, provideIssDateAdapter as at, Phone as au, arrayFrom as av, formatFileSize as aw, HIJRI_LOCALE as ax, HIJRI_MONTH_NAMES as ay, getHijriParts as az, ViewerBase as b, FormEngine as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
-//# sourceMappingURL=iss-ctrl-iss-ctrl-CUlx5aua.mjs.map
+//# sourceMappingURL=iss-ctrl-iss-ctrl-C_ZiixeF.mjs.map