suis 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, forwardRef, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild, forwardRef, } from '@angular/core';
|
|
2
2
|
import { NgIf } from '@angular/common';
|
|
3
3
|
import { SuisInputBase } from '../../shared/classes/suis-input.base';
|
|
4
4
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -7,6 +7,10 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
export class SuisInputImageComponent extends SuisInputBase {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
10
|
+
/**
|
|
11
|
+
* Emits value on FileList upload.
|
|
12
|
+
*/
|
|
13
|
+
this.uploaded = new EventEmitter();
|
|
10
14
|
/** @internal */
|
|
11
15
|
this.value = null;
|
|
12
16
|
/** @internal */
|
|
@@ -15,12 +19,12 @@ export class SuisInputImageComponent extends SuisInputBase {
|
|
|
15
19
|
writeValue(obj) {
|
|
16
20
|
if (typeof obj === 'string')
|
|
17
21
|
this.imageUrl = obj;
|
|
22
|
+
this.cdRef.markForCheck();
|
|
18
23
|
}
|
|
19
24
|
onChange(event) {
|
|
20
25
|
const target = event.target;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
this.changed.emit(this.value);
|
|
26
|
+
if (target.files)
|
|
27
|
+
this.uploaded.emit(target.files);
|
|
24
28
|
this.cdRef.markForCheck();
|
|
25
29
|
}
|
|
26
30
|
onRemove() {
|
|
@@ -32,13 +36,13 @@ export class SuisInputImageComponent extends SuisInputBase {
|
|
|
32
36
|
this.cdRef.markForCheck();
|
|
33
37
|
}
|
|
34
38
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", providers: [
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", outputs: { uploaded: "uploaded" }, providers: [
|
|
36
40
|
{
|
|
37
41
|
provide: NG_VALUE_ACCESSOR,
|
|
38
42
|
multi: true,
|
|
39
43
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
40
44
|
},
|
|
41
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain
|
|
45
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
42
46
|
}
|
|
43
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
44
48
|
type: Component,
|
|
@@ -48,9 +52,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
48
52
|
multi: true,
|
|
49
53
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
50
54
|
},
|
|
51
|
-
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain
|
|
55
|
+
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"] }]
|
|
52
56
|
}], propDecorators: { fileInput: [{
|
|
53
57
|
type: ViewChild,
|
|
54
58
|
args: ['input']
|
|
59
|
+
}], uploaded: [{
|
|
60
|
+
type: Output
|
|
55
61
|
}] } });
|
|
56
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1pbnB1dC1pbWFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtaW5wdXQtaW1hZ2Uvc3Vpcy1pbnB1dC1pbWFnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtaW5wdXQtaW1hZ2Uvc3Vpcy1pbnB1dC1pbWFnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLE1BQU0sRUFDTixTQUFTLEVBQ1QsVUFBVSxHQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDckUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7O0FBaUJyRSxNQUFNLE9BQU8sdUJBQXdCLFNBQVEsYUFBYTtJQWYxRDs7UUFtQkU7O1dBRUc7UUFDTyxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztRQUVsRCxnQkFBZ0I7UUFDaEIsVUFBSyxHQUFvQixJQUFJLENBQUM7UUFFOUIsZ0JBQWdCO1FBQ2hCLGFBQVEsR0FBa0IsSUFBSSxDQUFDO0tBcUJoQztJQW5CVSxVQUFVLENBQUMsR0FBc0I7UUFDeEMsSUFBSSxPQUFPLEdBQUcsS0FBSyxRQUFRO1lBQUUsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUM7UUFDakQsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQVk7UUFDbkIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQTBCLENBQUM7UUFDaEQsSUFBSSxNQUFNLENBQUMsS0FBSztZQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDckIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7UUFDbEIsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLGFBQWtDLENBQUEsQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQy9ELElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzNCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM5QixJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzVCLENBQUM7K0dBakNVLHVCQUF1QjttR0FBdkIsdUJBQXVCLGtHQVJ2QjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLEtBQUssRUFBRSxJQUFJO2dCQUNYLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsdUJBQXVCLENBQUM7YUFDdkQ7U0FDRixxSkMzQkgsaXVCQTJCQSxzakREVlksSUFBSSw2RkFBRSxpQkFBaUI7OzRGQVl0Qix1QkFBdUI7a0JBZm5DLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxpQkFBaUIsQ0FBQyxtQkFHakIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixLQUFLLEVBQUUsSUFBSTs0QkFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx3QkFBd0IsQ0FBQzt5QkFDdkQ7cUJBQ0Y7OEJBSW1CLFNBQVM7c0JBQTVCLFNBQVM7dUJBQUMsT0FBTztnQkFLUixRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZCxcbiAgZm9yd2FyZFJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNJbnB1dEJhc2UgfSBmcm9tICcuLi8uLi9zaGFyZWQvY2xhc3Nlcy9zdWlzLWlucHV0LmJhc2UnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTdWlzSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL3N1aXMtaWNvbi9zdWlzLWljb24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3Vpcy1pbnB1dC1pbWFnZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmLCBTdWlzSWNvbkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9zdWlzLWlucHV0LWltYWdlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3Vpcy1pbnB1dC1pbWFnZS5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFN1aXNJbnB1dEltYWdlQ29tcG9uZW50KSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTdWlzSW5wdXRJbWFnZUNvbXBvbmVudCBleHRlbmRzIFN1aXNJbnB1dEJhc2Uge1xuICAvKiogQGludGVybmFsICovXG4gIEBWaWV3Q2hpbGQoJ2lucHV0JykgZmlsZUlucHV0PzogRWxlbWVudFJlZjtcblxuICAvKipcbiAgICogRW1pdHMgdmFsdWUgb24gRmlsZUxpc3QgdXBsb2FkLlxuICAgKi9cbiAgQE91dHB1dCgpIHVwbG9hZGVkID0gbmV3IEV2ZW50RW1pdHRlcjxGaWxlTGlzdD4oKTtcblxuICAvKiogQGludGVybmFsICovXG4gIHZhbHVlOiBGaWxlTGlzdCB8IG51bGwgPSBudWxsO1xuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgaW1hZ2VVcmw6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuXG4gIG92ZXJyaWRlIHdyaXRlVmFsdWUob2JqOiBGb3JtRGF0YSB8IHN0cmluZyk6IHZvaWQge1xuICAgIGlmICh0eXBlb2Ygb2JqID09PSAnc3RyaW5nJykgdGhpcy5pbWFnZVVybCA9IG9iajtcbiAgICB0aGlzLmNkUmVmLm1hcmtGb3JDaGVjaygpO1xuICB9XG5cbiAgb25DaGFuZ2UoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgaWYgKHRhcmdldC5maWxlcykgdGhpcy51cGxvYWRlZC5lbWl0KHRhcmdldC5maWxlcyk7XG4gICAgdGhpcy5jZFJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIG9uUmVtb3ZlKCk6IHZvaWQge1xuICAgIHRoaXMuaW1hZ2VVcmwgPSBudWxsO1xuICAgIHRoaXMudmFsdWUgPSBudWxsO1xuICAgICh0aGlzLmZpbGVJbnB1dD8ubmF0aXZlRWxlbWVudCBhcyBIVE1MSW5wdXRFbGVtZW50KS52YWx1ZSA9ICcnO1xuICAgIHRoaXMuX29uQ2hhbmdlKHRoaXMudmFsdWUpO1xuICAgIHRoaXMuY2hhbmdlZC5lbWl0KHRoaXMudmFsdWUpO1xuICAgIHRoaXMuY2RSZWYubWFya0ZvckNoZWNrKCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJzdWlzLWlucHV0LWltYWdlXCJcbiAgW2NsYXNzLnN1aXMtaW5wdXQtaW1hZ2UtLWludmFsaWRdPVwiaW52YWxpZFwiXG4gIFtjbGFzcy5zdWlzLWlucHV0LWltYWdlLS1yZWFkb25seV09XCJyZWFkb25seVwiXG4+XG4gIDxmaWd1cmUgKm5nSWY9XCJpbWFnZVVybFwiIGNsYXNzPVwic3Vpcy1pbnB1dC1pbWFnZV9fcHJldmlld1wiPlxuICAgIDxpbWcgW3NyY109XCJpbWFnZVVybFwiIGFsdD1cIlVwbG9hZGVkIGltYWdlXCIgLz5cbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwib25SZW1vdmUoKVwiIFtkaXNhYmxlZF09XCJyZWFkb25seVwiPlxuICAgICAgPHN1aXMtaWNvblxuICAgICAgICB0eXBlPVwidGltZXNcIlxuICAgICAgICBjb2xvcj1cImRhbmdlclwiXG4gICAgICAgIHNpemU9XCJtZFwiXG4gICAgICAgIFtmaWxsZWRdPVwidHJ1ZVwiXG4gICAgICA+PC9zdWlzLWljb24+XG4gICAgPC9idXR0b24+XG4gIDwvZmlndXJlPlxuICA8aW5wdXRcbiAgICAjaW5wdXRcbiAgICB0eXBlPVwiZmlsZVwiXG4gICAgY2xhc3M9XCJzdWlzLWlucHV0LWltYWdlX19pbnB1dFwiXG4gICAgW2F0dHIuaWRdPVwiaWRcIlxuICAgIFthdHRyLm5hbWVdPVwibmFtZVwiXG4gICAgW2Rpc2FibGVkXT1cInJlYWRvbmx5XCJcbiAgICAoaW5wdXQpPVwib25DaGFuZ2UoJGV2ZW50KVwiXG4gICAgKGZvY3VzKT1cIm9uVG91Y2goKVwiXG4gIC8+XG48L2Rpdj5cbiJdfQ==
|
package/fesm2022/suis.mjs
CHANGED
|
@@ -995,6 +995,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
995
995
|
class SuisInputImageComponent extends SuisInputBase {
|
|
996
996
|
constructor() {
|
|
997
997
|
super(...arguments);
|
|
998
|
+
/**
|
|
999
|
+
* Emits value on FileList upload.
|
|
1000
|
+
*/
|
|
1001
|
+
this.uploaded = new EventEmitter();
|
|
998
1002
|
/** @internal */
|
|
999
1003
|
this.value = null;
|
|
1000
1004
|
/** @internal */
|
|
@@ -1003,12 +1007,12 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1003
1007
|
writeValue(obj) {
|
|
1004
1008
|
if (typeof obj === 'string')
|
|
1005
1009
|
this.imageUrl = obj;
|
|
1010
|
+
this.cdRef.markForCheck();
|
|
1006
1011
|
}
|
|
1007
1012
|
onChange(event) {
|
|
1008
1013
|
const target = event.target;
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
this.changed.emit(this.value);
|
|
1014
|
+
if (target.files)
|
|
1015
|
+
this.uploaded.emit(target.files);
|
|
1012
1016
|
this.cdRef.markForCheck();
|
|
1013
1017
|
}
|
|
1014
1018
|
onRemove() {
|
|
@@ -1020,13 +1024,13 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1020
1024
|
this.cdRef.markForCheck();
|
|
1021
1025
|
}
|
|
1022
1026
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", providers: [
|
|
1027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", outputs: { uploaded: "uploaded" }, providers: [
|
|
1024
1028
|
{
|
|
1025
1029
|
provide: NG_VALUE_ACCESSOR,
|
|
1026
1030
|
multi: true,
|
|
1027
1031
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1028
1032
|
},
|
|
1029
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain
|
|
1033
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1030
1034
|
}
|
|
1031
1035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
1032
1036
|
type: Component,
|
|
@@ -1036,10 +1040,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1036
1040
|
multi: true,
|
|
1037
1041
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1038
1042
|
},
|
|
1039
|
-
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain
|
|
1043
|
+
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"] }]
|
|
1040
1044
|
}], propDecorators: { fileInput: [{
|
|
1041
1045
|
type: ViewChild,
|
|
1042
1046
|
args: ['input']
|
|
1047
|
+
}], uploaded: [{
|
|
1048
|
+
type: Output
|
|
1043
1049
|
}] } });
|
|
1044
1050
|
|
|
1045
1051
|
class SuisInputNumberComponent extends SuisInputBase {
|