@anglr/common 21.3.0-beta.20241115051814 → 21.3.0

package/changelog.md

@@ -1,5 +1,90 @@
 # Changelog
 
+## Version 21.3.0 (2024-11-15)
+
+### Bug Fixes
+
+- fixed `FirstUppercaseSAPipe` typings, result cant be `undefined` or `null` if parameter is not `undefined` or `null`
+- fixed `FirstUppercaseLocalizeSAPipe` typings, result cant be `undefined` or `null`
+
+### Features
+
+- new `FileComponent` component, used for obtaining file contents from disk
+   - standalone
+   - **content child**
+      - `FileTemplateDirective` template to be displayed as file input
+      - `FILE_VISUAL` instance of file visual implementation if available
+   - **inputs**
+      - `multiple` indication whether is multiple files selection enabled
+      - `readContent` indication whether read file content, working only when `multiple` is not set (for single file)
+      - `binaryContent` indication whether content of file is binary and it will be read as ArrayBuffer instead of string
+      - `textEncoding` text encoding of read string file content
+   - **outputs**
+      - `stringContentChange` occurs when file changes and `binaryContent` is not set and `readContent` is set
+      - `arrayBufferContentChange` occurs when file changes and `binaryContent` is set and `readContent` is set
+      - `fileChange` occurs when selected file changes, occurs only when `multiple` is not set
+      - `filesChange` occurs when selected files changes, occurs only when `multiple` is set
+      - `fileName` occurs when selected file changes, occurs only when `multiple` is not set, contains name of selected file
+      - `filesNames` occurs when selected files changes, occurs only when `multiple` is set, contains names of selected files
+- new `FileInputComponent` component, that represents file input template
+   - standalone
+   - **provides**
+      - `FILE_VISUAL` as itself
+   - **implements**
+      - `FileVisual`
+   - **inputs**
+      - `buttonText` text to be displayed for file button
+      - `buttonClass` css classes applied to file button
+      - `textClass` css classes applied to file text, text displaying selected files
+      - `selectedText` text to be displayed as selected
+- new `UploadButtonComponent` component, that represents upload button file template
+   - standalone
+   - **provides**
+      - `FILE_VISUAL` as itself
+   - **implements**
+      - `FileVisual`
+   - **inputs**
+      - `uploadIconClass` css classes applied tu button icon
+      - `uploadText` text to be displayed as button text
+      - `uploadTextClass` css classes for displayed text for button
+      - `cssClass` css class applied to button
+      - `progress` current progress to be displayed
+- new `FileInputDirective` directive, that allows better communication with input file
+   - standalone
+   - **export as** `file`
+   - **implements**
+      - `OnDestroy`
+   - **inputs**
+      - `multiple` indication whether is multiple files selection enabled
+      - `readContent` indication whether read file content, working only when `multiple` is not set (for single file)
+      - `binaryContent` indication whether content of file is binary and it will be read as ArrayBuffer instead of string
+      - `textEncoding` text encoding of read string file content
+   - **outputs**
+      - `stringContentChange` occurs when file changes and `binaryContent` is not set and `readContent` is set
+      - `arrayBufferContentChange` occurs when file changes and `binaryContent` is set and `readContent` is set
+      - `fileChange` occurs when selected file changes, occurs only when `multiple` is not set
+      - `filesChange` occurs when selected files changes, occurs only when `multiple` is set
+      - `fileName` occurs when selected file changes, occurs only when `multiple` is not set, contains name of selected file
+      - `filesNames` occurs when selected files changes, occurs only when `multiple` is set, contains names of selected files
+   - **methods**
+      - `clearFile` clears selection of file/files
+- new `FileTemplateDirective` directive, that is used for obtaining file component visual template
+   - standalone
+- new `FileTemplateContext` interface
+   - **properties**
+      - `file` instance of selected file or null if none is selected
+      - `fileName` name of selected file
+      - `files` instance of selected array of files or null if none is selected
+      - `filesNames` array of names of selected files
+      - `multiple` indication whether multiple files selection is enabled
+   - **methods**
+      - `clearFile` clears selected file
+- new `FileVisual` interface
+   - **properties**
+      - `fileTemplateContext` instance of file template context passed to file visual to display info about selected files
+- new `FILE_VISUAL` injection token, used for obtaining implementation of file visual component
+- new `FileModule` module, used for grouping File components and directives
+
 ## Version 21.2.1 (2024-10-08)
 
 ### Bug Fixes
@@ -51,7 +136,7 @@
    - updated `RequiredClassDirective` directive
       - is now `standalone`
       - all `private`s are now `protected`
-      - new **inputs** 
+      - new **inputs**
          - `requiredClass` name of required css class that should be applied
    - updated `HasErrorDirective` directive
       - is now `standalone`

package/es2022/src/index.js

@@ -11,8 +11,9 @@ export { MultiButtonModule } from './modules/multiButton/modules/multiButton.mod
 export * from './components';
 export * from './decorators';
 export * from './modules/castPipes';
-export * from './modules/progressIndicator';
+export * from './modules/file';
 export * from './modules/logger';
+export * from './modules/progressIndicator';
 export * from './modules/tooltip';
 export * from './pipes';
 export * from './types/host';

package/es2022/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,gDAAgD,CAAC;AACpF,OAAO,EAAC,mBAAmB,EAAC,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAC,iBAAiB,EAAC,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAC,eAAe,EAAC,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAC,kBAAkB,EAAC,MAAM,8DAA8D,CAAC;AAChG,OAAO,EAAC,uBAAuB,EAAC,MAAM,wEAAwE,CAAC;AAC/G,OAAO,EAAC,oBAAoB,EAAC,MAAM,oEAAoE,CAAC;AAExG,OAAO,EAAC,wBAAwB,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,iBAAiB,EAAC,MAAM,kDAAkD,CAAC;AACnF,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,aAAa,EAAC,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAC,iBAAiB,EAAC,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAC,sBAAsB,EAAmB,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAC,oBAAoB,EAAqB,MAAM,+BAA+B,CAAC;AACvF,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wDAAwD,CAAC;AACvE,cAAc,sCAAsC,CAAC;AACrD,cAAc,8CAA8C,CAAC;AAC7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,gEAAgE,CAAC;AACnG,OAAO,EAAC,UAAU,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAC;AACnG,OAAO,EAAC,qBAAqB,EAAE,2BAA2B,EAAE,YAAY,EAAE,oBAAoB,EAAiB,oBAAoB,EAAuF,MAAM,0BAA0B,CAAC;AAC3P,cAAc,qBAAqB,CAAC;AAEpC,sBAAsB;AACtB,0BAA0B","sourcesContent":["export {GlobalizationService} from './services/globalization/globalization.service';\nexport {CommonDynamicModule} from './modules/commonDynamic.module';\nexport {CommonLocalizeModule} from './modules/commonLocalize.module';\nexport {CommonUtilsModule} from './modules/commonUtils.module';\nexport {DebugDataModule} from './modules/debugData/modules/debugData.module';\nexport {DebugDataComponent} from './modules/debugData/components/debugData/debugData.component';\nexport {DebugDataEnabledService} from './modules/debugData/services/debugDataEnabled/debugDataEnabled.service';\nexport {MultiButtonComponent} from './modules/multiButton/components/multiButton/multiButton.component';\nexport {MultiButtonCssClasses} from './modules/multiButton/components/multiButton/multiButton.interface';\nexport {MULTI_BUTTON_CSS_CLASSES} from './modules/multiButton/misc/tokens';\nexport {MultiButtonModule} from './modules/multiButton/modules/multiButton.module';\nexport * from './components';\nexport * from './decorators';\nexport * from './modules/castPipes';\nexport * from './modules/progressIndicator';\nexport * from './modules/logger';\nexport * from './modules/tooltip';\nexport * from './pipes';\nexport * from './types/host';\nexport * from './types/styles';\nexport * from './types/tokens';\nexport * from './types/providers';\nexport * from './utils';\nexport {CookieService} from './services/cookies/cookies.service';\nexport {StatusCodeService} from './services/statusCode/statusCode.service';\nexport {PermanentStorage, CookiePermanentStorage} from './services/permanentStorage';\nexport {MemoryTemporaryStorage, TemporaryStorage} from './services/temporaryStorage';\nexport {NoStringLocalization, StringLocalization} from './services/stringLocalization';\nexport * from './directives/bodyRender/bodyRender.directive';\nexport * from './directives/clickOutside/clickOutside.directive';\nexport * from './directives/ellipsisTooltip/ellipsisTooltip.directive';\nexport * from './directives/goBack/goBack.directive';\nexport * from './directives/positionTo/positionTo.directive';\nexport {NgComponentOutletEx} from './directives/ngComponentOutletEx/ngComponentOutletEx.directive';\nexport {APP_STABLE, extractAppStableResolve, runWhenModuleStable, runWhenAppStable} from './utils';\nexport {DEFAULT_NOTIFICATIONS, DefaultNotificationsService, Notification, NotificationSeverity, Notifications, NotificationsOptions, NotificationsProvider, NotificationsScopeProvider, NotificationsScopeProviderFactory} from './services/notifications';\nexport * from './services/position';\n\n//TODO: any to unknown\n//TODO: strict null checks"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,gDAAgD,CAAC;AACpF,OAAO,EAAC,mBAAmB,EAAC,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAC,iBAAiB,EAAC,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAC,eAAe,EAAC,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAC,kBAAkB,EAAC,MAAM,8DAA8D,CAAC;AAChG,OAAO,EAAC,uBAAuB,EAAC,MAAM,wEAAwE,CAAC;AAC/G,OAAO,EAAC,oBAAoB,EAAC,MAAM,oEAAoE,CAAC;AAExG,OAAO,EAAC,wBAAwB,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,iBAAiB,EAAC,MAAM,kDAAkD,CAAC;AACnF,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,aAAa,EAAC,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAC,iBAAiB,EAAC,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAC,sBAAsB,EAAmB,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAC,oBAAoB,EAAqB,MAAM,+BAA+B,CAAC;AACvF,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wDAAwD,CAAC;AACvE,cAAc,sCAAsC,CAAC;AACrD,cAAc,8CAA8C,CAAC;AAC7D,OAAO,EAAC,mBAAmB,EAAC,MAAM,gEAAgE,CAAC;AACnG,OAAO,EAAC,UAAU,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAC;AACnG,OAAO,EAAC,qBAAqB,EAAE,2BAA2B,EAAE,YAAY,EAAE,oBAAoB,EAAiB,oBAAoB,EAAuF,MAAM,0BAA0B,CAAC;AAC3P,cAAc,qBAAqB,CAAC;AAEpC,sBAAsB;AACtB,0BAA0B","sourcesContent":["export {GlobalizationService} from './services/globalization/globalization.service';\nexport {CommonDynamicModule} from './modules/commonDynamic.module';\nexport {CommonLocalizeModule} from './modules/commonLocalize.module';\nexport {CommonUtilsModule} from './modules/commonUtils.module';\nexport {DebugDataModule} from './modules/debugData/modules/debugData.module';\nexport {DebugDataComponent} from './modules/debugData/components/debugData/debugData.component';\nexport {DebugDataEnabledService} from './modules/debugData/services/debugDataEnabled/debugDataEnabled.service';\nexport {MultiButtonComponent} from './modules/multiButton/components/multiButton/multiButton.component';\nexport {MultiButtonCssClasses} from './modules/multiButton/components/multiButton/multiButton.interface';\nexport {MULTI_BUTTON_CSS_CLASSES} from './modules/multiButton/misc/tokens';\nexport {MultiButtonModule} from './modules/multiButton/modules/multiButton.module';\nexport * from './components';\nexport * from './decorators';\nexport * from './modules/castPipes';\nexport * from './modules/file';\nexport * from './modules/logger';\nexport * from './modules/progressIndicator';\nexport * from './modules/tooltip';\nexport * from './pipes';\nexport * from './types/host';\nexport * from './types/styles';\nexport * from './types/tokens';\nexport * from './types/providers';\nexport * from './utils';\nexport {CookieService} from './services/cookies/cookies.service';\nexport {StatusCodeService} from './services/statusCode/statusCode.service';\nexport {PermanentStorage, CookiePermanentStorage} from './services/permanentStorage';\nexport {MemoryTemporaryStorage, TemporaryStorage} from './services/temporaryStorage';\nexport {NoStringLocalization, StringLocalization} from './services/stringLocalization';\nexport * from './directives/bodyRender/bodyRender.directive';\nexport * from './directives/clickOutside/clickOutside.directive';\nexport * from './directives/ellipsisTooltip/ellipsisTooltip.directive';\nexport * from './directives/goBack/goBack.directive';\nexport * from './directives/positionTo/positionTo.directive';\nexport {NgComponentOutletEx} from './directives/ngComponentOutletEx/ngComponentOutletEx.directive';\nexport {APP_STABLE, extractAppStableResolve, runWhenModuleStable, runWhenAppStable} from './utils';\nexport {DEFAULT_NOTIFICATIONS, DefaultNotificationsService, Notification, NotificationSeverity, Notifications, NotificationsOptions, NotificationsProvider, NotificationsScopeProvider, NotificationsScopeProviderFactory} from './services/notifications';\nexport * from './services/position';\n\n//TODO: any to unknown\n//TODO: strict null checks"]}

package/es2022/src/modules/file/components/file/file.component.js

@@ -0,0 +1,119 @@
+import { Component, ChangeDetectionStrategy, contentChild, TemplateRef, viewChild, computed, signal, input, booleanAttribute, output, effect } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { FileInputDirective, FileTemplateDirective } from '../../directive';
+import { FILE_VISUAL } from '../../misc/tokens';
+import * as i0 from "@angular/core";
+/**
+ * Component used for obtaining file contents from disk
+ */
+export class FileComponent {
+    //######################### constructor #########################
+    constructor() {
+        /**
+         * Holds current value of file for file input
+         */
+        this.file = signal(null);
+        /**
+         * Holds current value of files for file input
+         */
+        this.files = signal(null);
+        /**
+         * Holds current value of file name for file input
+         */
+        this.name = signal(null);
+        /**
+         * Holds current value of files names for file input
+         */
+        this.names = signal(null);
+        //######################### protected properties - children #########################
+        /**
+         * Instance template to be displayed as file input
+         */
+        this.fileTemplate = contentChild.required(FileTemplateDirective, { read: (TemplateRef) });
+        /**
+         * Contains file input directive instance
+         */
+        this.fileInput = viewChild.required(FileInputDirective);
+        /**
+         * Instance of file visual implementation if available
+         */
+        this.fileVisual = contentChild(FILE_VISUAL);
+        //######################### public properties - inputs #########################
+        /**
+         * Indication whether is multiple files selection enabled
+         */
+        this.multiple = input(false, { transform: booleanAttribute });
+        /**
+         * Indication whether read file content, working only when `multiple` is not set (for single file)
+         */
+        this.readContent = input(false, { transform: booleanAttribute });
+        /**
+         * Indication whether content of file is binary and it will be read as ArrayBuffer instead of string
+         */
+        this.binaryContent = input(false, { transform: booleanAttribute });
+        /**
+         * Text encoding of read string file content
+         */
+        this.textEncoding = input();
+        //######################### public properties - outputs #########################
+        /**
+         * Occurs when file changes and `binaryContent` is not set and `readContent` is set
+         */
+        this.stringContentChange = output();
+        /**
+         * Occurs when file changes and `binaryContent` is set and `readContent` is set
+         */
+        this.arrayBufferContentChange = output();
+        /**
+         * Occurs when selected file changes, occurs only when `multiple` is not set
+         */
+        this.fileChange = output();
+        /**
+         * Occurs when selected files changes, occurs only when `multiple` is set
+         */
+        this.filesChange = output();
+        /**
+         * Occurs when selected file changes, occurs only when `multiple` is not set, contains name of selected file
+         */
+        this.fileName = output();
+        /**
+         * Occurs when selected files changes, occurs only when `multiple` is set, contains names of selected files
+         */
+        this.filesNames = output();
+        effect(() => {
+            const fileVisual = this.fileVisual();
+            if (fileVisual) {
+                const fileInput = this.fileInput();
+                fileVisual.fileTemplateContext.set({
+                    file: this.file(),
+                    files: this.files(),
+                    clearFile: fileInput.clearFile,
+                    fileName: this.name(),
+                    filesNames: this.names(),
+                    multiple: this.multiple(),
+                });
+            }
+        }, { allowSignalWrites: true });
+        this.templateContext = computed(() => {
+            const fileInput = this.fileInput();
+            return {
+                file: this.file(),
+                files: this.files(),
+                clearFile: fileInput.clearFile,
+                fileName: this.name(),
+                filesNames: this.names(),
+                multiple: this.multiple(),
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: FileComponent, isStandalone: true, selector: "file", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, readContent: { classPropertyName: "readContent", publicName: "readContent", isSignal: true, isRequired: false, transformFunction: null }, binaryContent: { classPropertyName: "binaryContent", publicName: "binaryContent", isSignal: true, isRequired: false, transformFunction: null }, textEncoding: { classPropertyName: "textEncoding", publicName: "textEncoding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stringContentChange: "stringContentChange", arrayBufferContentChange: "arrayBufferContentChange", fileChange: "fileChange", filesChange: "filesChange", fileName: "fileName", filesNames: "filesNames" }, queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "fileVisual", first: true, predicate: FILE_VISUAL, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: FileInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"fileTemplate(); context: templateContext()\"/>\n\n<input type=\"file\" \n       class=\"input-file\"\n       (fileChange)=\"file.set($event); fileChange.emit($event)\"\n       (filesChange)=\"files.set($event); filesChange.emit($event)\"\n       (fileName)=\"name.set($event); fileName.emit($event)\"\n       (filesNames)=\"names.set($event); filesNames.emit($event)\"\n       (stringContentChange)=\"stringContentChange.emit($event)\"\n       (arrayBufferContentChange)=\"arrayBufferContentChange.emit($event)\"\n       [multiple]=\"multiple()\"\n       [binaryContent]=\"binaryContent()\"\n       [readContent]=\"readContent()\"\n       [textEncoding]=\"textEncoding()\">", styles: [":host\n{\n    display: block;\n    position: relative;\n}\n\n.input-file\n{\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    cursor: pointer;\n    opacity: 0;\n}"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FileInputDirective, selector: "input[type=file]", inputs: ["multiple", "readContent", "binaryContent", "textEncoding"], outputs: ["stringContentChange", "arrayBufferContentChange", "fileChange", "filesChange", "fileName", "filesNames"], exportAs: ["file"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        FileInputDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"fileTemplate(); context: templateContext()\"/>\n\n<input type=\"file\" \n       class=\"input-file\"\n       (fileChange)=\"file.set($event); fileChange.emit($event)\"\n       (filesChange)=\"files.set($event); filesChange.emit($event)\"\n       (fileName)=\"name.set($event); fileName.emit($event)\"\n       (filesNames)=\"names.set($event); filesNames.emit($event)\"\n       (stringContentChange)=\"stringContentChange.emit($event)\"\n       (arrayBufferContentChange)=\"arrayBufferContentChange.emit($event)\"\n       [multiple]=\"multiple()\"\n       [binaryContent]=\"binaryContent()\"\n       [readContent]=\"readContent()\"\n       [textEncoding]=\"textEncoding()\">", styles: [":host\n{\n    display: block;\n    position: relative;\n}\n\n.input-file\n{\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    cursor: pointer;\n    opacity: 0;\n}"] }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=file.component.js.map

package/es2022/src/modules/file/components/file/file.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.component.js","sourceRoot":"","sources":["../../../../../../src/modules/file/components/file/file.component.ts","../../../../../../src/modules/file/components/file/file.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, contentChild, Signal, TemplateRef, viewChild, computed, WritableSignal, signal, InputSignalWithTransform, input, booleanAttribute, InputSignal, OutputEmitterRef, output, effect} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\n\nimport {FileInputDirective, FileTemplateContext, FileTemplateDirective} from '../../directive';\nimport {FILE_VISUAL} from '../../misc/tokens';\nimport {FileVisual} from '../../interfaces';\n\n/**\n * Component used for obtaining file contents from disk\n */\n@Component(\n{\n    selector: 'file',\n    templateUrl: 'file.component.html',\n    styleUrl: 'file.component.css',\n    standalone: true,\n    imports:\n    [\n        NgTemplateOutlet,\n        FileInputDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FileComponent\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Instance of context for file template\n     */\n    protected templateContext: Signal<FileTemplateContext>;\n\n    /**\n     * Holds current value of file for file input\n     */\n    protected file: WritableSignal<File|null|undefined> = signal(null);\n\n    /**\n     * Holds current value of files for file input\n     */\n    protected files: WritableSignal<File[]|null|undefined> = signal(null);\n\n    /**\n     * Holds current value of file name for file input\n     */\n    protected name: WritableSignal<string|null|undefined> = signal(null);\n\n    /**\n     * Holds current value of files names for file input\n     */\n    protected names: WritableSignal<string[]|null|undefined> = signal(null);\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Instance template to be displayed as file input\n     */\n    protected fileTemplate: Signal<TemplateRef<FileTemplateContext>> = contentChild.required(FileTemplateDirective, {read: TemplateRef<FileTemplateContext>});\n\n    /**\n     * Contains file input directive instance\n     */\n    protected fileInput: Signal<FileInputDirective> = viewChild.required(FileInputDirective);\n\n    /**\n     * Instance of file visual implementation if available\n     */\n    protected fileVisual: Signal<FileVisual|undefined|null> = contentChild(FILE_VISUAL);\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Indication whether is multiple files selection enabled\n     */\n    public multiple: InputSignalWithTransform<boolean, string|boolean> = input<boolean, boolean|string>(false, {transform: booleanAttribute});\n\n    /**\n     * Indication whether read file content, working only when `multiple` is not set (for single file)\n     */\n    public readContent: InputSignalWithTransform<boolean, string|boolean> = input<boolean, boolean|string>(false, {transform: booleanAttribute});\n\n    /**\n     * Indication whether content of file is binary and it will be read as ArrayBuffer instead of string\n     */\n    public binaryContent: InputSignalWithTransform<boolean, string|boolean> = input<boolean, boolean|string>(false, {transform: booleanAttribute});\n\n    /**\n     * Text encoding of read string file content\n     */\n    public textEncoding: InputSignal<string|undefined> = input();\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when file changes and `binaryContent` is not set and `readContent` is set\n     */\n    public stringContentChange: OutputEmitterRef<string|undefined|null> = output<string|undefined|null>();\n\n    /**\n     * Occurs when file changes and `binaryContent` is set and `readContent` is set\n     */\n    public arrayBufferContentChange: OutputEmitterRef<ArrayBuffer|undefined|null> = output<ArrayBuffer|undefined|null>();\n\n    /**\n     * Occurs when selected file changes, occurs only when `multiple` is not set\n     */\n    public fileChange: OutputEmitterRef<File|null|undefined> = output<File|undefined|null>();\n\n    /**\n     * Occurs when selected files changes, occurs only when `multiple` is set\n     */\n    public filesChange: OutputEmitterRef<File[]|null|undefined> = output<File[]|undefined|null>();\n\n    /**\n     * Occurs when selected file changes, occurs only when `multiple` is not set, contains name of selected file\n     */\n    public fileName: OutputEmitterRef<string|null|undefined> = output<string|undefined|null>();\n\n    /**\n     * Occurs when selected files changes, occurs only when `multiple` is set, contains names of selected files\n     */\n    public filesNames: OutputEmitterRef<string[]|null|undefined> = output<string[]|undefined|null>();\n\n    //######################### constructor #########################\n    constructor()\n    {\n        effect(() =>\n        {\n            const fileVisual = this.fileVisual();\n\n            if(fileVisual)\n            {\n                const fileInput = this.fileInput();\n                \n                fileVisual.fileTemplateContext.set(\n                {\n                    file: this.file(),\n                    files: this.files(),\n                    clearFile: fileInput.clearFile,\n                    fileName: this.name(),\n                    filesNames: this.names(),\n                    multiple: this.multiple(),\n                });\n            }\n        }, {allowSignalWrites: true});\n\n        this.templateContext = computed(() =>\n        {\n            const fileInput = this.fileInput();\n\n            return {\n                file: this.file(),\n                files: this.files(),\n                clearFile: fileInput.clearFile,\n                fileName: this.name(),\n                filesNames: this.names(),\n                multiple: this.multiple(),\n            };\n        });\n    }\n}","<ng-container *ngTemplateOutlet=\"fileTemplate(); context: templateContext()\"/>\n\n<input type=\"file\" \n       class=\"input-file\"\n       (fileChange)=\"file.set($event); fileChange.emit($event)\"\n       (filesChange)=\"files.set($event); filesChange.emit($event)\"\n       (fileName)=\"name.set($event); fileName.emit($event)\"\n       (filesNames)=\"names.set($event); filesNames.emit($event)\"\n       (stringContentChange)=\"stringContentChange.emit($event)\"\n       (arrayBufferContentChange)=\"arrayBufferContentChange.emit($event)\"\n       [multiple]=\"multiple()\"\n       [binaryContent]=\"binaryContent()\"\n       [readContent]=\"readContent()\"\n       [textEncoding]=\"textEncoding()\">"]}

package/es2022/src/modules/file/components/fileInput/fileInput.component.js

@@ -0,0 +1,62 @@
+import { Component, ChangeDetectionStrategy, forwardRef, signal, input, computed } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { FirstUppercaseLocalizeSAPipe, } from '@anglr/common';
+import { FILE_VISUAL } from '../../misc/tokens';
+import * as i0 from "@angular/core";
+/**
+ * Component that represents file input template
+ */
+export class FileInputComponent {
+    //######################### constructor #########################
+    constructor() {
+        //######################### public properties - implementation of FileVisual #########################
+        /**
+         * @inheritdoc
+         */
+        this.fileTemplateContext = signal(null);
+        //######################### public properties - inputs #########################
+        /**
+         * Text to be displayed for file button
+         */
+        this.buttonText = input('browse');
+        /**
+         * Css classes applied to file button
+         */
+        this.buttonClass = input('btn btn-primary');
+        /**
+         * Css classes applied to file text, text displaying selected files
+         */
+        this.textClass = input('form-control');
+        /**
+         * Text to be displayed as selected
+         */
+        this.selectedText = input();
+        this.selectedTextValue = computed(() => {
+            const context = this.fileTemplateContext();
+            if (context?.multiple) {
+                return this.selectedText() ?? context.filesNames?.join(', ');
+            }
+            return this.selectedText() ?? context?.fileName;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, textClass: { classPropertyName: "textClass", publicName: "textClass", isSignal: true, isRequired: false, transformFunction: null }, selectedText: { classPropertyName: "selectedText", publicName: "selectedText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: FILE_VISUAL,
+                useExisting: forwardRef(() => FileInputComponent),
+            }
+        ], ngImport: i0, template: "<div class=\"file-input\">\n    <div [ngClass]=\"buttonClass()\">\n        <span>{{buttonText() | firstUppercaseLocalize}}</span>\n    </div>\n\n    <div [ngClass]=\"textClass()\">{{selectedTextValue()}}</div>\n</div>\n", styles: [":host\n{\n    display: block;\n}\n\n.file-input\n{\n    display: grid;\n\n    grid-template-areas: 'button filename';\n    grid-template-rows: auto;\n    grid-template-columns: auto 1fr;\n\n    :nth-child(1),\n    :nth-child(1):before\n    {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :nth-child(2),\n    :nth-child(2):before\n    {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-input', standalone: true, imports: [
+                        NgClass,
+                        FirstUppercaseLocalizeSAPipe,
+                    ], providers: [
+                        {
+                            provide: FILE_VISUAL,
+                            useExisting: forwardRef(() => FileInputComponent),
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"file-input\">\n    <div [ngClass]=\"buttonClass()\">\n        <span>{{buttonText() | firstUppercaseLocalize}}</span>\n    </div>\n\n    <div [ngClass]=\"textClass()\">{{selectedTextValue()}}</div>\n</div>\n", styles: [":host\n{\n    display: block;\n}\n\n.file-input\n{\n    display: grid;\n\n    grid-template-areas: 'button filename';\n    grid-template-rows: auto;\n    grid-template-columns: auto 1fr;\n\n    :nth-child(1),\n    :nth-child(1):before\n    {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :nth-child(2),\n    :nth-child(2):before\n    {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n}\n"] }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=fileInput.component.js.map

package/es2022/src/modules/file/components/fileInput/fileInput.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileInput.component.js","sourceRoot":"","sources":["../../../../../../src/modules/file/components/fileInput/fileInput.component.ts","../../../../../../src/modules/file/components/fileInput/fileInput.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAoB,UAAU,EAAkB,MAAM,EAAE,KAAK,EAAuB,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC7J,OAAO,EAAC,OAAO,EAAC,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAC,4BAA4B,GAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;;AAI9C;;GAEG;AAsBH,MAAM,OAAO,kBAAkB;IAsC3B,iEAAiE;IACjE;QA9BA,sGAAsG;QAEtG;;WAEG;QACI,wBAAmB,GAAuD,MAAM,CAAqC,IAAI,CAAC,CAAC;QAElI,gFAAgF;QAEhF;;WAEG;QACI,eAAU,GAAwB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAEzD;;WAEG;QACI,gBAAW,GAAwB,KAAK,CAAC,iBAAiB,CAAC,CAAC;QAEnE;;WAEG;QACI,cAAS,GAAwB,KAAK,CAAC,cAAc,CAAC,CAAC;QAE9D;;WAEG;QACI,iBAAY,GAAuC,KAAK,EAAE,CAAC;QAK9D,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;YAEnC,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAE3C,IAAG,OAAO,EAAE,QAAQ,EACpB,CAAC;gBACG,OAAO,IAAI,CAAC,YAAY,EAAE,IAAI,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YACjE,CAAC;YAED,OAAO,IAAI,CAAC,YAAY,EAAE,IAAI,OAAO,EAAE,QAAQ,CAAC;QACpD,CAAC,CAAC,CAAC;IACP,CAAC;8GApDQ,kBAAkB;kGAAlB,kBAAkB,umBAT3B;YAEI;gBACI,OAAO,EAAE,WAAW;gBACpB,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC;aACpD;SACJ,0BC7BL,6NAOA,6gBDYQ,OAAO,+EACP,4BAA4B;;2FAYvB,kBAAkB;kBArB9B,SAAS;+BAEI,YAAY,cAGV,IAAI,WAEhB;wBACI,OAAO;wBACP,4BAA4B;qBAC/B,aAED;wBAEI;4BACI,OAAO,EAAE,WAAW;4BACpB,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,mBAAmB,CAAC;yBACpD;qBACJ,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy, ExistingProvider, forwardRef, WritableSignal, signal, input, InputSignal, Signal, computed} from '@angular/core';\nimport {NgClass} from '@angular/common';\nimport {FirstUppercaseLocalizeSAPipe,} from '@anglr/common';\n\nimport {FILE_VISUAL} from '../../misc/tokens';\nimport {FileVisual} from '../../interfaces';\nimport {FileTemplateContext} from '../../directive';\n\n/**\n * Component that represents file input template\n */\n@Component(\n{\n    selector: 'file-input',\n    templateUrl: 'fileInput.component.html',\n    styleUrl: 'fileInput.component.css',\n    standalone: true,\n    imports:\n    [\n        NgClass,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    providers:\n    [\n        <ExistingProvider>\n        {\n            provide: FILE_VISUAL,\n            useExisting: forwardRef(() => FileInputComponent),\n        }\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FileInputComponent implements FileVisual\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Selected text value based on file template context or selected text input\n     */\n    protected selectedTextValue: Signal<string|undefined|null>;\n    \n    //######################### public properties - implementation of FileVisual #########################\n\n    /**\n     * @inheritdoc\n     */\n    public fileTemplateContext: WritableSignal<FileTemplateContext|undefined|null> = signal<FileTemplateContext|undefined|null>(null);\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Text to be displayed for file button\n     */\n    public buttonText: InputSignal<string> = input('browse');\n\n    /**\n     * Css classes applied to file button\n     */\n    public buttonClass: InputSignal<string> = input('btn btn-primary');\n\n    /**\n     * Css classes applied to file text, text displaying selected files\n     */\n    public textClass: InputSignal<string> = input('form-control');\n\n    /**\n     * Text to be displayed as selected\n     */\n    public selectedText: InputSignal<string|undefined|null> = input();\n\n    //######################### constructor #########################\n    constructor()\n    {\n        this.selectedTextValue = computed(() =>\n        {\n            const context = this.fileTemplateContext();\n\n            if(context?.multiple)\n            {\n                return this.selectedText() ?? context.filesNames?.join(', ');\n            }\n\n            return this.selectedText() ?? context?.fileName;\n        });\n    }\n}","<div class=\"file-input\">\n    <div [ngClass]=\"buttonClass()\">\n        <span>{{buttonText() | firstUppercaseLocalize}}</span>\n    </div>\n\n    <div [ngClass]=\"textClass()\">{{selectedTextValue()}}</div>\n</div>\n"]}

package/es2022/src/modules/file/components/index.js

@@ -0,0 +1,4 @@
+export * from './file/file.component';
+export * from './fileInput/fileInput.component';
+export * from './uploadButton/uploadButton.component';
+//# sourceMappingURL=index.js.map

package/es2022/src/modules/file/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/file/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './file/file.component';\nexport * from './fileInput/fileInput.component';\nexport * from './uploadButton/uploadButton.component';\n"]}

package/es2022/src/modules/file/components/uploadButton/uploadButton.component.js

@@ -0,0 +1,59 @@
+import { Component, ChangeDetectionStrategy, forwardRef, signal, input, numberAttribute } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { IsPresentPipe, LocalizeSAPipe } from '@anglr/common';
+import { FILE_VISUAL } from '../../misc/tokens';
+import * as i0 from "@angular/core";
+/**
+ * Component that represents upload button file template
+ */
+export class UploadButtonComponent {
+    constructor() {
+        //######################### public properties - implementation of FileVisual #########################
+        /**
+         * @inheritdoc
+         */
+        this.fileTemplateContext = signal(null);
+        //######################### public properties - inputs #########################
+        /**
+         * Css classes applied tu button icon
+         */
+        this.uploadIconClass = input('fas fa-file-upload');
+        /**
+         * Text to be displayed as button text
+         */
+        this.uploadText = input('');
+        /**
+         * Css classes for displayed text for button
+         */
+        this.uploadTextClass = input('first-letter-uppercase');
+        /**
+         * Css class applied to button
+         */
+        this.cssClass = input('btn btn-icon', { alias: 'class' });
+        /**
+         * Current progress to be displayed
+         */
+        this.progress = input(null, { transform: numberAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UploadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: UploadButtonComponent, isStandalone: true, selector: "upload-button", inputs: { uploadIconClass: { classPropertyName: "uploadIconClass", publicName: "uploadIconClass", isSignal: true, isRequired: false, transformFunction: null }, uploadText: { classPropertyName: "uploadText", publicName: "uploadText", isSignal: true, isRequired: false, transformFunction: null }, uploadTextClass: { classPropertyName: "uploadTextClass", publicName: "uploadTextClass", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: FILE_VISUAL,
+                useExisting: forwardRef(() => UploadButtonComponent),
+            }
+        ], ngImport: i0, template: "@if(progress() | isPresent)\n{\n    <div class=\"progress\">\n        <span class=\"progress-value\">{{progress()}}%</span>\n        <div class=\"progress-indicator\"></div>\n    </div>\n}\n\n<button [ngClass]=\"cssClass()\" type=\"button\">\n    <span [ngClass]=\"uploadIconClass()\"></span>\n    \n    @if(uploadText())\n    {\n        <span [ngClass]=\"uploadTextClass()\">{{uploadText() | localize}}</span>\n    }\n</button>", styles: [":host\n{\n    display: flex;\n    flex-direction: row;\n}\n\n.progress\n{\n    font-size: 0.75em;\n    position: relative;\n    width: 33px;\n    height: 33px;\n    text-align: center;\n    margin-right: 4px;\n    display: flex;\n    justify-content: center;\n}\n\n.progress-value\n{\n    align-self: center;\n}\n\n.progress-indicator\n{\n    position: absolute;\n    width: 33px;\n    height: 16.5px;\n    top: 0;\n    left: 0;\n    border: 2px solid #009dd6;\n    border-bottom: none;\n    border-top-left-radius: 100px;\n    border-top-right-radius: 100px;\n    animation-name: rotate-progress;\n    animation-duration: 550ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    transform-origin: calc(50%) calc(50% + 8.25px);\n}\n\n@keyframes rotate-progress\n{\n    from\n    {\n        transform: rotate(0deg);\n    }\n    to\n    {\n        transform: rotate(360deg);\n    }\n}"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsPresentPipe, name: "isPresent" }, { kind: "pipe", type: LocalizeSAPipe, name: "localize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UploadButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upload-button', standalone: true, imports: [
+                        NgClass,
+                        IsPresentPipe,
+                        LocalizeSAPipe,
+                    ], providers: [
+                        {
+                            provide: FILE_VISUAL,
+                            useExisting: forwardRef(() => UploadButtonComponent),
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(progress() | isPresent)\n{\n    <div class=\"progress\">\n        <span class=\"progress-value\">{{progress()}}%</span>\n        <div class=\"progress-indicator\"></div>\n    </div>\n}\n\n<button [ngClass]=\"cssClass()\" type=\"button\">\n    <span [ngClass]=\"uploadIconClass()\"></span>\n    \n    @if(uploadText())\n    {\n        <span [ngClass]=\"uploadTextClass()\">{{uploadText() | localize}}</span>\n    }\n</button>", styles: [":host\n{\n    display: flex;\n    flex-direction: row;\n}\n\n.progress\n{\n    font-size: 0.75em;\n    position: relative;\n    width: 33px;\n    height: 33px;\n    text-align: center;\n    margin-right: 4px;\n    display: flex;\n    justify-content: center;\n}\n\n.progress-value\n{\n    align-self: center;\n}\n\n.progress-indicator\n{\n    position: absolute;\n    width: 33px;\n    height: 16.5px;\n    top: 0;\n    left: 0;\n    border: 2px solid #009dd6;\n    border-bottom: none;\n    border-top-left-radius: 100px;\n    border-top-right-radius: 100px;\n    animation-name: rotate-progress;\n    animation-duration: 550ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    transform-origin: calc(50%) calc(50% + 8.25px);\n}\n\n@keyframes rotate-progress\n{\n    from\n    {\n        transform: rotate(0deg);\n    }\n    to\n    {\n        transform: rotate(360deg);\n    }\n}"] }]
+        }] });
+//# sourceMappingURL=uploadButton.component.js.map

package/es2022/src/modules/file/components/uploadButton/uploadButton.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadButton.component.js","sourceRoot":"","sources":["../../../../../../src/modules/file/components/uploadButton/uploadButton.component.ts","../../../../../../src/modules/file/components/uploadButton/uploadButton.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAoB,UAAU,EAAkB,MAAM,EAAe,KAAK,EAAE,eAAe,EAA2B,MAAM,eAAe,CAAC;AACtL,OAAO,EAAC,OAAO,EAAC,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;;AAI9C;;GAEG;AAuBH,MAAM,OAAO,qBAAqB;IAtBlC;QAwBI,sGAAsG;QAEtG;;WAEG;QACI,wBAAmB,GAAuD,MAAM,CAAqC,IAAI,CAAC,CAAC;QAElI,gFAAgF;QAEhF;;WAEG;QACI,oBAAe,GAAwB,KAAK,CAAC,oBAAoB,CAAC,CAAC;QAE1E;;WAEG;QACI,eAAU,GAAwB,KAAK,CAAC,EAAE,CAAC,CAAC;QAEnD;;WAEG;QACI,oBAAe,GAAwB,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAE9E;;WAEG;QACI,aAAQ,GAAwB,KAAK,CAAC,cAAc,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC,CAAC,CAAC;QAE/E;;WAEG;QACI,aAAQ,GAAkF,KAAK,CAAsD,IAAI,EAAE,EAAC,SAAS,EAAE,eAAe,EAAC,CAAC,CAAC;KACnM;8GAnCY,qBAAqB;kGAArB,qBAAqB,0vBAT9B;YAEI;gBACI,OAAO,EAAE,WAAW;gBACpB,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC;aACvD;SACJ,0BC9BL,8aAeS,i9BDID,OAAO,+EACP,aAAa,6CACb,cAAc;;2FAYT,qBAAqB;kBAtBjC,SAAS;+BAEI,eAAe,cAGb,IAAI,WAEhB;wBACI,OAAO;wBACP,aAAa;wBACb,cAAc;qBACjB,aAED;wBAEI;4BACI,OAAO,EAAE,WAAW;4BACpB,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,sBAAsB,CAAC;yBACvD;qBACJ,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy, ExistingProvider, forwardRef, WritableSignal, signal, InputSignal, input, numberAttribute, InputSignalWithTransform} from '@angular/core';\nimport {NgClass} from '@angular/common';\nimport {IsPresentPipe, LocalizeSAPipe} from '@anglr/common';\n\nimport {FILE_VISUAL} from '../../misc/tokens';\nimport {FileVisual} from '../../interfaces';\nimport {FileTemplateContext} from '../../directive';\n\n/**\n * Component that represents upload button file template\n */\n@Component(\n{\n    selector: 'upload-button',\n    templateUrl: 'uploadButton.component.html',\n    styleUrl: 'uploadButton.component.css',\n    standalone: true,\n    imports:\n    [\n        NgClass,\n        IsPresentPipe,\n        LocalizeSAPipe,\n    ],\n    providers:\n    [\n        <ExistingProvider>\n        {\n            provide: FILE_VISUAL,\n            useExisting: forwardRef(() => UploadButtonComponent),\n        }\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class UploadButtonComponent implements FileVisual\n{\n    //######################### public properties - implementation of FileVisual #########################\n\n    /**\n     * @inheritdoc\n     */\n    public fileTemplateContext: WritableSignal<FileTemplateContext|undefined|null> = signal<FileTemplateContext|undefined|null>(null);\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Css classes applied tu button icon\n     */\n    public uploadIconClass: InputSignal<string> = input('fas fa-file-upload');\n\n    /**\n     * Text to be displayed as button text\n     */\n    public uploadText: InputSignal<string> = input('');\n\n    /**\n     * Css classes for displayed text for button\n     */\n    public uploadTextClass: InputSignal<string> = input('first-letter-uppercase');\n\n    /**\n     * Css class applied to button\n     */\n    public cssClass: InputSignal<string> = input('btn btn-icon', {alias: 'class'});\n\n    /**\n     * Current progress to be displayed\n     */\n    public progress: InputSignalWithTransform<number|undefined|null, number|string|undefined|null> = input<number|undefined|null, number|string|undefined|null>(null, {transform: numberAttribute});\n}","@if(progress() | isPresent)\n{\n    <div class=\"progress\">\n        <span class=\"progress-value\">{{progress()}}%</span>\n        <div class=\"progress-indicator\"></div>\n    </div>\n}\n\n<button [ngClass]=\"cssClass()\" type=\"button\">\n    <span [ngClass]=\"uploadIconClass()\"></span>\n    \n    @if(uploadText())\n    {\n        <span [ngClass]=\"uploadTextClass()\">{{uploadText() | localize}}</span>\n    }\n</button>"]}

package/es2022/src/modules/file/directive/fileInput/fileInput.directive.js

@@ -0,0 +1,154 @@
+import { __decorate, __metadata } from "tslib";
+import { booleanAttribute, Directive, effect, ElementRef, input, output, Renderer2 } from '@angular/core';
+import { BindThis, isString } from '@jscrpt/common';
+import * as i0 from "@angular/core";
+/**
+ * Directive that allows better communication with input file
+ */
+export class FileInputDirective {
+    //######################### constructors #########################
+    constructor(element, renderer) {
+        this.element = element;
+        //######################### public properties - inputs #########################
+        /**
+         * Indication whether is multiple files selection enabled
+         */
+        this.multiple = input(false, { transform: booleanAttribute });
+        /**
+         * Indication whether read file content, working only when `multiple` is not set (for single file)
+         */
+        this.readContent = input(false, { transform: booleanAttribute });
+        /**
+         * Indication whether content of file is binary and it will be read as ArrayBuffer instead of string
+         */
+        this.binaryContent = input(false, { transform: booleanAttribute });
+        /**
+         * Text encoding of read string file content
+         */
+        this.textEncoding = input();
+        //######################### public properties - outputs #########################
+        /**
+         * Occurs when file changes and `binaryContent` is not set and `readContent` is set
+         */
+        this.stringContentChange = output();
+        /**
+         * Occurs when file changes and `binaryContent` is set and `readContent` is set
+         */
+        this.arrayBufferContentChange = output();
+        /**
+         * Occurs when selected file changes, occurs only when `multiple` is not set
+         */
+        this.fileChange = output();
+        /**
+         * Occurs when selected files changes, occurs only when `multiple` is set
+         */
+        this.filesChange = output();
+        /**
+         * Occurs when selected file changes, occurs only when `multiple` is not set, contains name of selected file
+         */
+        this.fileName = output();
+        /**
+         * Occurs when selected files changes, occurs only when `multiple` is set, contains names of selected files
+         */
+        this.filesNames = output();
+        this.changeListenerUnlisten = renderer.listen(element.nativeElement, 'change', this.handleFileChange);
+        effect(() => renderer.setProperty(element.nativeElement, 'multiple', this.multiple()));
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy() {
+        this.changeListenerUnlisten();
+    }
+    //######################### public methods #########################
+    /**
+     * Clears selection of file/files
+     */
+    clearFile() {
+        this.element.nativeElement.value = '';
+        this.fileChange.emit(null);
+        this.fileName.emit(null);
+        this.filesChange.emit(null);
+        this.filesNames.emit(null);
+        this.arrayBufferContentChange.emit(null);
+        this.stringContentChange.emit(null);
+    }
+    //######################### protected methods #########################
+    /**
+     * Handles changes in file input
+     */
+    handleFileChange(event) {
+        if (!event.target) {
+            throw new Error('FileOutputDirective: missing input file target!');
+        }
+        if (this.multiple()) {
+            const files = event.target.files;
+            const filesArray = [];
+            if (files) {
+                for (let x = 0; x < files.length; x++) {
+                    filesArray.push(files[x]);
+                }
+            }
+            this.filesChange.emit(filesArray);
+            this.filesNames.emit(filesArray.map(itm => itm.name));
+        }
+        else {
+            const file = event.target.files?.[0];
+            this.fileChange.emit(file);
+            this.fileName.emit(file?.name);
+        }
+        //read file contents
+        if (!this.multiple() && this.readContent()) {
+            const file = event.target.files?.[0];
+            //no file selected
+            if (!file) {
+                return;
+            }
+            const fileReader = new FileReader();
+            fileReader.onloadend = () => {
+                const result = fileReader.result;
+                if (!result) {
+                    this.stringContentChange.emit(null);
+                    this.arrayBufferContentChange.emit(null);
+                    return;
+                }
+                if (isString(result)) {
+                    this.stringContentChange.emit(result);
+                }
+                else {
+                    this.arrayBufferContentChange.emit(result);
+                }
+            };
+            if (this.binaryContent()) {
+                fileReader.readAsArrayBuffer(file);
+            }
+            else {
+                fileReader.readAsText(file, this.textEncoding());
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FileInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.1", type: FileInputDirective, isStandalone: true, selector: "input[type=file]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, readContent: { classPropertyName: "readContent", publicName: "readContent", isSignal: true, isRequired: false, transformFunction: null }, binaryContent: { classPropertyName: "binaryContent", publicName: "binaryContent", isSignal: true, isRequired: false, transformFunction: null }, textEncoding: { classPropertyName: "textEncoding", publicName: "textEncoding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stringContentChange: "stringContentChange", arrayBufferContentChange: "arrayBufferContentChange", fileChange: "fileChange", filesChange: "filesChange", fileName: "fileName", filesNames: "filesNames" }, exportAs: ["file"], ngImport: i0 }); }
+}
+__decorate([
+    BindThis,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], FileInputDirective.prototype, "clearFile", null);
+__decorate([
+    BindThis,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], FileInputDirective.prototype, "handleFileChange", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FileInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type=file]',
+                    exportAs: 'file',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { clearFile: [], handleFileChange: [] } });
+//# sourceMappingURL=fileInput.directive.js.map

package/es2022/src/modules/file/directive/fileInput/fileInput.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileInput.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/file/directive/fileInput/fileInput.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {booleanAttribute, Directive, effect, ElementRef, input, InputSignal, InputSignalWithTransform, OnDestroy, output, OutputEmitterRef, Renderer2} from '@angular/core';\nimport {BindThis, isString, NoopAction} from '@jscrpt/common';\n\n/**\n * Directive that allows better communication with input file\n */\n@Directive(\n{\n    selector: 'input[type=file]',\n    exportAs: 'file',\n    standalone: true,\n})\nexport class FileInputDirective implements OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Unlistener for input file change event\n     */\n    protected changeListenerUnlisten: NoopAction;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Indication whether is multiple files selection enabled\n     */\n    public multiple: InputSignalWithTransform<boolean, string|boolean> = input<boolean, boolean|string>(false, {transform: booleanAttribute});\n\n    /**\n     * Indication whether read file content, working only when `multiple` is not set (for single file)\n     */\n    public readContent: InputSignalWithTransform<boolean, string|boolean> = input<boolean, boolean|string>(false, {transform: booleanAttribute});\n\n    /**\n     * Indication whether content of file is binary and it will be read as ArrayBuffer instead of string\n     */\n    public binaryContent: InputSignalWithTransform<boolean, string|boolean> = input<boolean, boolean|string>(false, {transform: booleanAttribute});\n\n    /**\n     * Text encoding of read string file content\n     */\n    public textEncoding: InputSignal<string|undefined> = input();\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when file changes and `binaryContent` is not set and `readContent` is set\n     */\n    public stringContentChange: OutputEmitterRef<string|undefined|null> = output<string|undefined|null>();\n\n    /**\n     * Occurs when file changes and `binaryContent` is set and `readContent` is set\n     */\n    public arrayBufferContentChange: OutputEmitterRef<ArrayBuffer|undefined|null> = output<ArrayBuffer|undefined|null>();\n\n    /**\n     * Occurs when selected file changes, occurs only when `multiple` is not set\n     */\n    public fileChange: OutputEmitterRef<File|null|undefined> = output<File|undefined|null>();\n\n    /**\n     * Occurs when selected files changes, occurs only when `multiple` is set\n     */\n    public filesChange: OutputEmitterRef<File[]|null|undefined> = output<File[]|undefined|null>();\n\n    /**\n     * Occurs when selected file changes, occurs only when `multiple` is not set, contains name of selected file\n     */\n    public fileName: OutputEmitterRef<string|null|undefined> = output<string|undefined|null>();\n\n    /**\n     * Occurs when selected files changes, occurs only when `multiple` is set, contains names of selected files\n     */\n    public filesNames: OutputEmitterRef<string[]|null|undefined> = output<string[]|undefined|null>();\n\n    //######################### constructors #########################\n    constructor(protected element: ElementRef<HTMLInputElement>,\n                renderer: Renderer2,)\n    {\n        this.changeListenerUnlisten = renderer.listen(element.nativeElement, 'change', this.handleFileChange);\n\n        effect(() => renderer.setProperty(element.nativeElement, 'multiple', this.multiple()));\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * @inheritdoc\n     */\n    public ngOnDestroy(): void\n    {\n        this.changeListenerUnlisten();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Clears selection of file/files\n     */\n    @BindThis\n    public clearFile(): void\n    {\n        this.element.nativeElement.value = '';\n        this.fileChange.emit(null);\n        this.fileName.emit(null);\n        this.filesChange.emit(null);\n        this.filesNames.emit(null);\n        this.arrayBufferContentChange.emit(null);\n        this.stringContentChange.emit(null);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Handles changes in file input\n     */\n    @BindThis\n    protected handleFileChange(event: MouseEvent): void\n    {\n        if(!event.target)\n        {\n            throw new Error('FileOutputDirective: missing input file target!');\n        }\n\n        if(this.multiple())\n        {\n            const files = (event.target as HTMLInputElement).files;\n            const filesArray: File[] = [];\n\n            if(files)\n            {\n                for(let x = 0; x < files.length; x++)\n                {\n                    filesArray.push(files[x]);\n                }\n            }\n\n            this.filesChange.emit(filesArray);\n            this.filesNames.emit(filesArray.map(itm => itm.name));\n        }\n        else\n        {\n            const file = (event.target as HTMLInputElement).files?.[0];\n\n            this.fileChange.emit(file);\n            this.fileName.emit(file?.name);\n        }\n\n        //read file contents\n        if(!this.multiple() && this.readContent())\n        {\n            const file = (event.target as HTMLInputElement).files?.[0];\n\n            //no file selected\n            if(!file)\n            {\n                return;\n            }\n\n            const fileReader = new FileReader();\n    \n            fileReader.onloadend = () =>\n            {\n                const result = fileReader.result;\n\n                if(!result)\n                {\n                    this.stringContentChange.emit(null);\n                    this.arrayBufferContentChange.emit(null);\n\n                    return;\n                }\n\n                if(isString(result))\n                {\n                    this.stringContentChange.emit(result);\n                }\n                else\n                {\n                    this.arrayBufferContentChange.emit(result);\n                }\n            };\n    \n            if(this.binaryContent())\n            {\n                fileReader.readAsArrayBuffer(file);\n            }\n            else\n            {\n                fileReader.readAsText(file, this.textEncoding());\n            }\n        }\n    }\n}"]}