@net7/components 4.0.1 → 4.1.0

package/fesm2020/net7-components.mjs

@@ -752,6 +752,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
+//---------------------------
+class FileSelectorComponent {
+    onFileSelected(eventTarget) {
+        if (!this.emit)
+            return;
+        const input = eventTarget;
+        const iterableFiles = Array.from(input.files);
+        Promise
+            .all(iterableFiles.map((file) => this.toBase64(file)))
+            .then((base64list) => {
+            this.emit('change', { target: eventTarget, files: input.files, base64: base64list });
+        });
+    }
+    /** Obtain base64 string for upload and storage */
+    toBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onerror = (err) => reject(err);
+            reader.onload = () => resolve(reader.result);
+            reader.readAsDataURL(file);
+        });
+    }
+}
+FileSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileSelectorComponent, selector: "n7-file-selector", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<ng-container *ngIf=\"data\">\n    <!-- HIDDEN NATIVE INPUT ELEMENT -->\n    <input type=\"file\"\n           class=\"file-input\"\n           [accept]=\"data.accept\"\n           [multiple]=\"data.multiple\"\n           (change)=\"onFileSelected($event.target)\"\n           [ngStyle]=\"{'display': 'none'}\"\n           #fileUpload>\n    \n    <!-- CAPTURES THE CLICKS ON THE INNER CONTENT -->\n    <div class=\"n7-file-selector\"\n         (click)=\"fileUpload.click()\">\n        <ng-content>\n            <!-- UI ELEMENTS FOR IMAGE UPLOAD -->\n        </ng-content>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-file-selector', template: "<ng-container *ngIf=\"data\">\n    <!-- HIDDEN NATIVE INPUT ELEMENT -->\n    <input type=\"file\"\n           class=\"file-input\"\n           [accept]=\"data.accept\"\n           [multiple]=\"data.multiple\"\n           (change)=\"onFileSelected($event.target)\"\n           [ngStyle]=\"{'display': 'none'}\"\n           #fileUpload>\n    \n    <!-- CAPTURES THE CLICKS ON THE INNER CONTENT -->\n    <div class=\"n7-file-selector\"\n         (click)=\"fileUpload.click()\">\n        <ng-content>\n            <!-- UI ELEMENTS FOR IMAGE UPLOAD -->\n        </ng-content>\n    </div>\n</ng-container>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class InputSelectComponent {
     onChange(inputPayload, value) {
@@ -1425,12 +1459,22 @@ class InputTextComponent {
             return;
         this.emit('change', { inputPayload, value });
     }
+    onBlur() {
+        if (!this.emit)
+            return;
+        this.emit('blur');
+    }
+    onFocus() {
+        if (!this.emit)
+            return;
+        this.emit('focus');
+    }
 }
 InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-text__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n               class=\"n7-input-text__text\"\n               [ngClass]=\"input.classes\"\n               [type]=\"input.type ? input.type : 'text'\"\n               [attr.name]=\"input.name\"\n               [value]=\"input.value || null\"\n               [attr.placeholder]=\"input.placeholder\"\n               [attr.autocomplete]=\"input.autocomplete\"\n               [disabled]=\"input.disabled\"\n               [required]=\"input.required\"\n               [attr.max]=\"input.max\"\n               [attr.min]=\"input.min\"\n               [attr.maxlength]=\"input.maxlength\"\n               [attr.minlength]=\"input.minlength\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n              class=\"n7-input-text__icon {{input.icon || ''}}\"\n              (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-text__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n               class=\"n7-input-text__text\"\n               [ngClass]=\"input.classes\"\n               [type]=\"input.type ? input.type : 'text'\"\n               [attr.name]=\"input.name\"\n               [value]=\"input.value || null\"\n               [attr.placeholder]=\"input.placeholder\"\n               [attr.autocomplete]=\"input.autocomplete\"\n               [disabled]=\"input.disabled\"\n               [required]=\"input.required\"\n               [attr.max]=\"input.max\"\n               [attr.min]=\"input.min\"\n               [attr.maxlength]=\"input.maxlength\"\n               [attr.minlength]=\"input.minlength\"\n               (focus)=\"onFocus()\"\n               (blur)=\"onBlur()\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n              class=\"n7-input-text__icon {{input.icon || ''}}\"\n              (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-text__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n               class=\"n7-input-text__text\"\n               [ngClass]=\"input.classes\"\n               [type]=\"input.type ? input.type : 'text'\"\n               [attr.name]=\"input.name\"\n               [value]=\"input.value || null\"\n               [attr.placeholder]=\"input.placeholder\"\n               [attr.autocomplete]=\"input.autocomplete\"\n               [disabled]=\"input.disabled\"\n               [required]=\"input.required\"\n               [attr.max]=\"input.max\"\n               [attr.min]=\"input.min\"\n               [attr.maxlength]=\"input.maxlength\"\n               [attr.minlength]=\"input.minlength\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n              class=\"n7-input-text__icon {{input.icon || ''}}\"\n              (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-text__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n               class=\"n7-input-text__text\"\n               [ngClass]=\"input.classes\"\n               [type]=\"input.type ? input.type : 'text'\"\n               [attr.name]=\"input.name\"\n               [value]=\"input.value || null\"\n               [attr.placeholder]=\"input.placeholder\"\n               [attr.autocomplete]=\"input.autocomplete\"\n               [disabled]=\"input.disabled\"\n               [required]=\"input.required\"\n               [attr.max]=\"input.max\"\n               [attr.min]=\"input.min\"\n               [attr.maxlength]=\"input.maxlength\"\n               [attr.minlength]=\"input.minlength\"\n               (focus)=\"onFocus()\"\n               (blur)=\"onBlur()\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n              class=\"n7-input-text__icon {{input.icon || ''}}\"\n              (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1903,6 +1947,7 @@ const COMPONENTS = [
     FacetComponent,
     FacetHeaderComponent,
     FacetYearRangeComponent,
+    FileSelectorComponent,
     FooterComponent,
     HeaderComponent,
     HeroComponent,
@@ -1953,6 +1998,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FacetComponent,
         FacetHeaderComponent,
         FacetYearRangeComponent,
+        FileSelectorComponent,
         FooterComponent,
         HeaderComponent,
         HeroComponent,
@@ -1998,6 +2044,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FacetComponent,
         FacetHeaderComponent,
         FacetYearRangeComponent,
+        FileSelectorComponent,
         FooterComponent,
         HeaderComponent,
         HeroComponent,
@@ -3633,6 +3680,11 @@ const FACET_MOCK = {
         }]
 };
 
+const FILE_SELECTOR_MOCK = {
+    accept: 'image/*',
+    classes: 'file-selector-wrapper'
+};
+
 const FOOTER_MOCK = {
     columns: [
         {
@@ -5378,5 +5430,5 @@ const WIZARD_MOCK = {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BUTTON_MOCK, BreadcrumbsComponent, BubbleChartComponent, ButtonComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, ICON_MOCK, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, IconComponent, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
+export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BUTTON_MOCK, BreadcrumbsComponent, BubbleChartComponent, ButtonComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FILE_SELECTOR_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FileSelectorComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, ICON_MOCK, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, IconComponent, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
 //# sourceMappingURL=net7-components.mjs.map