iss-ctrl 0.0.21 → 0.0.23

package/README.md

@@ -7,6 +7,39 @@ This library was generated with [Angular CLI](https://github.com/angular/angular
 Run `ng generate component component-name --project iss` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project iss`.
 > Note: Don't forget to add `--project iss` or else it will be added to the default project in your `angular.json` file.
 
+## Entry points
+
+The package is split so an app downloads only what it renders.
+
+| Entry point | Contents |
+| --- | --- |
+| `iss-ctrl` | The form engine: `Outlet`, `FormEngine`, `FieldBase`, the COMPONENTS/VIEWERS/SERVICES/VALIDATORS indexes, validators and pipes. |
+| `iss-ctrl/tokens` | `HOST`, `UI_LANGUAGE`, `USER_SEARCH_API` and the `ATTACHMENT_*` tokens. Import from here in an app's root providers so the engine stays out of its initial bundle. |
+| `iss-ctrl/base` | `ControlBase`, `ViewerBase`, `Hints`, `IssDateAdapter`, the Hijri utilities — what a control is built from. |
+| `iss-ctrl/<control>` | One per control: `input`, `textarea`, `dropdownlist`, `checkbox`, `radio`, `chips`, `toggle-button`, `slide-toggle`, `date-picker`, `time-picker`, `datetime-picker`, `date-range-picker`, `file-picker`, `plate`, `mobile`. |
+
+Controls are deliberately **not** re-exported from `iss-ctrl`. A static re-export makes the
+bundler inline the control — and then every control — into whatever imports the engine, which
+is what the split exists to prevent. Import a control from its own entry point:
+
+```ts
+import { Outlet } from "iss-ctrl";
+import { HOST } from "iss-ctrl/tokens";
+import { MobileControl } from "iss-ctrl/mobile";
+```
+
+Fields and viewers are internal: the outlet resolves them through the indexes with a dynamic
+import, so each one is its own lazy chunk. `iss-ctrl/mobile` matters most — it is the only
+part of the library that pulls in libphonenumber-js.
+
+## Adding a control
+
+Add `projects/iss/<name>/` with an `ng-package.json` and `src/public-api.ts`, put the control
+and its support files there, add the path to `tsconfig.json`, and keep the field and viewer in
+`projects/iss/src/components/controls/<name>/`. A control may import from `iss-ctrl/base`,
+`iss-ctrl/tokens` and other control entry points, but never from `iss-ctrl` — that closes a
+dependency cycle and ng-packagr will reject the build.
+
 ## Build
 
 Run `ng build iss` to build the project. The build artifacts will be stored in the `dist/` directory.

package/fesm2022/iss-ctrl-attachment.viewer-DVUL39xd.mjs

@@ -0,0 +1,110 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ViewerBase } from 'iss-ctrl/base';
+
+class AttachmentViewer extends ViewerBase {
+    uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    uploadingError = input("", ...(ngDevMode ? [{ debugName: "uploadingError" }] : /* istanbul ignore next */ []));
+    deleteOut = output();
+    attachments = computed(() => {
+        return this.field().ctrlJsonValue().map((attachment) => {
+            return {
+                name: attachment.name,
+                size: attachment.size,
+                type: attachment.type,
+                errorMsg: attachment.errorMsg,
+                file: attachment.file
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+    onDownload($event) {
+        const fileUrl = this.#createObjectUrl($event.detail.value);
+        const anchorElement = this.#createAnchorElement(fileUrl, $event.detail.value.name);
+        this.#useAnchorElementThenDispose(anchorElement, fileUrl);
+    }
+    onDelete(index) {
+        const fileHtmlElement = document.getElementById("file");
+        if (fileHtmlElement) {
+            fileHtmlElement.value = "";
+        }
+        const updatedFiles = this.field().ctrlJsonValue().filter((_, i) => i !== index);
+        this.field().ctrlJsonValue = computed(() => updatedFiles, ...(ngDevMode ? [{ debugName: "ctrlJsonValue" }] : /* istanbul ignore next */ []));
+        this.deleteOut.emit(this.field().ctrlJsonValue());
+    }
+    #createObjectUrl(file) {
+        const blob = new Blob([file], { type: "application/octet-stream" });
+        return window.URL.createObjectURL(blob);
+    }
+    #createAnchorElement(fileUrl, fileName) {
+        const a = document.createElement("a");
+        a.setAttribute("style", "display: none");
+        a.href = fileUrl;
+        a.download = fileName;
+        return a;
+    }
+    #useAnchorElementThenDispose(a, fileUrl) {
+        a.click();
+        window.URL.revokeObjectURL(fileUrl);
+        a.remove();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AttachmentViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AttachmentViewer, isStandalone: true, selector: "iss-viewer-attachment", inputs: { uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, uploadingError: { classPropertyName: "uploadingError", publicName: "uploadingError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteOut: "deleteOut" }, usesInheritance: true, ngImport: i0, template: `
+    @if (attachments()?.length) {
+      <section class="files-list">
+        @for (file of attachments(); track $index) {
+          <div class="file-item-container">
+            @if (file) {
+              <ds-attachments
+                [matTooltip]="file.name"
+                [file]="file.file ?? file"
+                [showDownload]="field().config.showDownloadButton"
+                [attr.readonly]="!field().config.showDeleteButton"
+                (downloadEvent)="onDownload($event)"
+                (deleteEvent)="onDelete($index)"
+              >
+              </ds-attachments>
+              @if (uploading()) {
+                <mat-progress-bar mode="indeterminate" />
+              }
+            }
+          </div>
+        }
+      </section>
+    }
+  `, isInline: true, styles: [".insideTableStyle{width:272px}.files-list{--file-item-width: 270px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media(max-width:768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.mat-mdc-progress-bar{--mat-progress-bar-active-indicator-color: var(--purple);--mat-progress-bar-track-color: rgba(var(--rgb-purple), .25)}.file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AttachmentViewer, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-viewer-attachment", imports: [
+                        MatTooltip,
+                        MatProgressBar,
+                    ], template: `
+    @if (attachments()?.length) {
+      <section class="files-list">
+        @for (file of attachments(); track $index) {
+          <div class="file-item-container">
+            @if (file) {
+              <ds-attachments
+                [matTooltip]="file.name"
+                [file]="file.file ?? file"
+                [showDownload]="field().config.showDownloadButton"
+                [attr.readonly]="!field().config.showDeleteButton"
+                (downloadEvent)="onDownload($event)"
+                (deleteEvent)="onDelete($index)"
+              >
+              </ds-attachments>
+              @if (uploading()) {
+                <mat-progress-bar mode="indeterminate" />
+              }
+            }
+          </div>
+        }
+      </section>
+    }
+  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [".insideTableStyle{width:272px}.files-list{--file-item-width: 270px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media(max-width:768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.mat-mdc-progress-bar{--mat-progress-bar-active-indicator-color: var(--purple);--mat-progress-bar-track-color: rgba(var(--rgb-purple), .25)}.file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}\n"] }]
+        }], propDecorators: { uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], uploadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingError", required: false }] }], deleteOut: [{ type: i0.Output, args: ["deleteOut"] }] } });
+
+export { AttachmentViewer };
+//# sourceMappingURL=iss-ctrl-attachment.viewer-DVUL39xd.mjs.map

package/fesm2022/iss-ctrl-attachment.viewer-DVUL39xd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iss-ctrl-attachment.viewer-DVUL39xd.mjs","sources":["../../../projects/iss/src/components/controls/file-picker/attachment.viewer.ts"],"sourcesContent":["import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal, output, OutputEmitterRef } from \"@angular/core\";\nimport { MatProgressBar } from \"@angular/material/progress-bar\";\nimport { MatTooltip } from \"@angular/material/tooltip\";\nimport { ViewerBase } from \"iss-ctrl/base\";\nimport { IssFile } from \"iss-ctrl/file-picker\";\n\n@Component({\n  selector: \"iss-viewer-attachment\",\n  imports: [\n    MatTooltip,\n    MatProgressBar,\n  ],\n  template: `\n    @if (attachments()?.length) {\n      <section class=\"files-list\">\n        @for (file of attachments(); track $index) {\n          <div class=\"file-item-container\">\n            @if (file) {\n              <ds-attachments\n                [matTooltip]=\"file.name\"\n                [file]=\"file.file ?? file\"\n                [showDownload]=\"field().config.showDownloadButton\"\n                [attr.readonly]=\"!field().config.showDeleteButton\"\n                (downloadEvent)=\"onDownload($event)\"\n                (deleteEvent)=\"onDelete($index)\"\n              >\n              </ds-attachments>\n              @if (uploading()) {\n                <mat-progress-bar mode=\"indeterminate\" />\n              }\n            }\n          </div>\n        }\n      </section>\n    }\n  `,\n  styles: `\n    .insideTableStyle {\n      width: 272px;\n    }\n\n    .files-list {\n      --file-item-width: 270px;\n      display: grid;\n      grid-template-columns: repeat(auto-fill, var(--file-item-width));\n      grid-gap: 0.5rem;\n      @media (max-width: 768px) {\n        grid-template-columns: repeat(auto-fill, minmax(var(--file-item-width), 1fr));\n      }\n\n\n    }\n\n    .mat-mdc-progress-bar {\n      --mat-progress-bar-active-indicator-color: var(--purple);\n      --mat-progress-bar-track-color: rgba(var(--rgb-purple), .25);\n    }\n\n\n    .file-item-container {\n      .file-item {\n        --file-bg: var(--off-white);\n        --file-radius: var(--box-radius);\n        --icon-color: var(--purple);\n        --icon-size: 2rem;\n        --file-border: transparent;\n\n        display: flex;\n        align-items: center;\n        background-color: var(--file-bg);\n        border: 1px solid var(--file-border);\n        border-radius: var(--file-radius);\n        padding: 0 1rem;\n        height: 70px;\n        gap: 0.75rem;\n\n        &.error {\n          --file-bg: rgba(var(--rgb-red), 10%);\n          --file-border: var(--red);\n          --icon-color: var(--red);\n        }\n\n        .icon {\n          color: var(--icon-color);\n          font-size: var(--icon-size);\n        }\n\n        .file-action {\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    ds-attachments::part(base) {\n      --file-width: 250px;\n    }\n\n    ::ng-deep {\n      .file-item .name-size {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        flex-grow: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        min-width: 120px;\n      }\n    }\n  `,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AttachmentViewer extends ViewerBase {\n  uploading: InputSignal<boolean> = input(false);\n  uploadingError: InputSignal<string> = input(\"\");\n  deleteOut: OutputEmitterRef<File[]> = output();\n  attachments = computed(() => {\n    return this.field().ctrlJsonValue().map((attachment: IssFile): IssFile => {\n      return {\n        name: attachment.name,\n        size: attachment.size,\n        type: attachment.type,\n        errorMsg: attachment.errorMsg,\n        file: attachment.file\n      };\n    });\n  });\n\n  protected onDownload($event: any) {\n    const fileUrl: string = this.#createObjectUrl($event.detail.value);\n    const anchorElement: HTMLAnchorElement = this.#createAnchorElement(fileUrl, $event.detail.value.name);\n    this.#useAnchorElementThenDispose(anchorElement, fileUrl);\n  }\n\n  protected onDelete(index: number) {\n    const fileHtmlElement: HTMLInputElement | null = document.getElementById(\"file\") as HTMLInputElement;\n    if (fileHtmlElement) {\n      fileHtmlElement.value = \"\";\n    }\n    const updatedFiles = this.field().ctrlJsonValue().filter((_: any, i: number): boolean => i !== index);\n    this.field().ctrlJsonValue = computed(() => updatedFiles);\n    this.deleteOut.emit(this.field().ctrlJsonValue());\n  }\n\n  #createObjectUrl(file: File): string {\n    const blob: Blob = new Blob([file], {type: \"application/octet-stream\"});\n    return window.URL.createObjectURL(blob);\n  }\n\n  #createAnchorElement(fileUrl: string, fileName: string): HTMLAnchorElement {\n    const a: HTMLAnchorElement = document.createElement(\"a\");\n    a.setAttribute(\"style\", \"display: none\");\n    a.href = fileUrl;\n    a.download = fileName;\n    return a;\n  }\n\n  #useAnchorElementThenDispose(a: HTMLAnchorElement, fileUrl: string) {\n    a.click();\n    window.URL.revokeObjectURL(fileUrl);\n    a.remove();\n  }\n}\n"],"names":[],"mappings":"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"}