@dropi/ui-components 1.0.12 → 1.0.13
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.
- package/README.md +55 -36
- package/dist/README.md +58 -38
- package/dist/components-source/accordion/accordion-item/accordion-item.component.d.ts +31 -0
- package/dist/components-source/accordion/accordion.component.d.ts +26 -0
- package/dist/components-source/alert/alert.component.d.ts +32 -0
- package/dist/components-source/alert-modal/alert-modal.component.d.ts +78 -0
- package/dist/components-source/alert-validation/alert-validation.component.d.ts +21 -0
- package/dist/components-source/badge/badge.component.d.ts +12 -0
- package/dist/components-source/beta-tag/beta-tag.component.d.ts +5 -0
- package/dist/components-source/breadcrumb/breadcrumb.component.d.ts +11 -0
- package/dist/components-source/card-product/card-product.component.d.ts +204 -0
- package/dist/components-source/card-section/card-section.component.d.ts +31 -0
- package/dist/components-source/checkbox-selection-list/checkbox-selection-list.component.d.ts +26 -0
- package/dist/components-source/city-selector/city-selector.component.d.ts +17 -0
- package/dist/components-source/color-picker/color-picker.component.d.ts +73 -0
- package/dist/components-source/confirm-dialog/confirm-dialog.component.d.ts +10 -0
- package/dist/components-source/country-flags/country-flags.component.d.ts +12 -0
- package/dist/components-source/date-picker/date-picker.component.d.ts +27 -0
- package/dist/components-source/date-picker-range/date-picker-range.component.d.ts +26 -0
- package/dist/components-source/dropi-avatars/dropi-avatars.component.d.ts +11 -0
- package/dist/components-source/dropi-badge/dropi-badge.component.d.ts +29 -0
- package/dist/components-source/dropi-banner-external/dropi-banner-external.component.d.ts +19 -0
- package/dist/components-source/dropi-breadcrumb/dropi-breadcrumb.component.d.ts +22 -0
- package/dist/components-source/dropi-card-checkbox/dropi-card-checkbox.component.d.ts +20 -0
- package/dist/components-source/dropi-carousel/dropi-carousel.component.d.ts +52 -0
- package/dist/components-source/dropi-checkbox/dropi-checkbox.component.d.ts +11 -0
- package/dist/components-source/dropi-chips/dropi-chips.component.d.ts +17 -0
- package/dist/components-source/dropi-country-selector/countries.data.d.ts +6 -0
- package/dist/components-source/dropi-country-selector/dropi-country-selector.component.d.ts +90 -0
- package/dist/components-source/dropi-drawer/dropi-drawer.component.d.ts +20 -0
- package/dist/components-source/dropi-dropdown/dropi-dropdown.component.d.ts +20 -0
- package/dist/components-source/dropi-favorite-button/dropi-favorite-button.component.d.ts +12 -0
- package/dist/components-source/dropi-file-upload/card-view/card-view.component.d.ts +19 -0
- package/dist/components-source/dropi-file-upload/drop-zone/drop-zone.component.d.ts +38 -0
- package/dist/components-source/dropi-file-upload/dropi-file-upload.component.d.ts +18 -0
- package/dist/components-source/dropi-file-upload/file-list/file-list.component.d.ts +39 -0
- package/dist/components-source/dropi-file-upload/grid-view/grid-view.component.d.ts +15 -0
- package/dist/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.d.ts +20 -0
- package/dist/components-source/dropi-image-overlay/dropi-image-overlay.component.d.ts +8 -0
- package/dist/components-source/dropi-languages-selector/dropi-languages-selector.component.d.ts +18 -0
- package/dist/components-source/dropi-logo/dropi-logo.component.d.ts +12 -0
- package/dist/components-source/dropi-modal/dropi-modal.component.d.ts +34 -0
- package/dist/components-source/dropi-modal/p-template.directive.d.ts +9 -0
- package/dist/components-source/dropi-navbar/dropi-navbar.component.d.ts +20 -0
- package/dist/components-source/dropi-paginator/dropi-paginator.component.d.ts +21 -0
- package/dist/components-source/dropi-phone-input/dropi-phone-input.component.d.ts +55 -0
- package/dist/components-source/dropi-radio-button/dropi-radio-button.component.d.ts +17 -0
- package/dist/components-source/dropi-search/dropi-search.component.d.ts +40 -0
- package/dist/components-source/dropi-select/dropi-select.component.d.ts +34 -0
- package/dist/components-source/dropi-skeleton/dropi-skeleton.component.d.ts +14 -0
- package/dist/components-source/dropi-steps/dropi-steps.component.d.ts +64 -0
- package/dist/components-source/dropi-switch/dropi-switch.component.d.ts +11 -0
- package/dist/components-source/dropi-table/dropi-table.component.d.ts +82 -0
- package/dist/components-source/dropi-tag/dropi-tag.component.d.ts +15 -0
- package/dist/components-source/dropi-text-area/dropi-text-area.component.d.ts +14 -0
- package/dist/components-source/dropi-tooltip/dropi-tooltip.component.d.ts +28 -0
- package/dist/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component.d.ts +16 -0
- package/dist/components-source/empty/empty.component.d.ts +9 -0
- package/dist/components-source/empty-state/empty-state.component.d.ts +17 -0
- package/dist/components-source/file-upload-progress-bar/file-upload-progress-bar.component.d.ts +30 -0
- package/dist/components-source/index.d.ts +85 -0
- package/dist/components-source/input/input.component.d.ts +33 -0
- package/dist/components-source/lottie-loader/lottie-loader.component.d.ts +9 -0
- package/dist/components-source/otp-send-code/otp-send-code.component.d.ts +83 -0
- package/dist/components-source/radio-selection-list/radio-selection-list.component.d.ts +30 -0
- package/dist/components-source/read-more/read-more.component.d.ts +60 -0
- package/dist/components-source/sidebar/sidebar.component.d.ts +27 -0
- package/dist/components-source/simple-stepper/simple-stepper.component.d.ts +21 -0
- package/dist/components-source/spinner/spinner.component.d.ts +9 -0
- package/dist/components-source/tabs/tabs.component.d.ts +27 -0
- package/dist/components-source/tag-type-product/tag-type-product.component.d.ts +5 -0
- package/dist/components-source/toast/toast.component.d.ts +21 -0
- package/dist/components-source/toggle/input-toggle.component.d.ts +11 -0
- package/dist/components-source/tooltip/tooltip.component.d.ts +15 -0
- package/dist/components-source/vertical-steps/vertical-steps.component.d.ts +27 -0
- package/dist/esm2022/components-source/accordion/accordion-item/accordion-item.component.mjs +51 -0
- package/dist/esm2022/components-source/accordion/accordion.component.mjs +46 -0
- package/dist/esm2022/components-source/alert/alert.component.mjs +114 -0
- package/dist/esm2022/components-source/alert-modal/alert-modal.component.mjs +247 -0
- package/dist/esm2022/components-source/alert-validation/alert-validation.component.mjs +53 -0
- package/dist/esm2022/components-source/badge/badge.component.mjs +23 -0
- package/dist/esm2022/components-source/beta-tag/beta-tag.component.mjs +11 -0
- package/dist/esm2022/components-source/breadcrumb/breadcrumb.component.mjs +26 -0
- package/dist/esm2022/components-source/card-product/card-product.component.mjs +534 -0
- package/dist/esm2022/components-source/card-section/card-section.component.mjs +91 -0
- package/dist/esm2022/components-source/checkbox-selection-list/checkbox-selection-list.component.mjs +79 -0
- package/dist/esm2022/components-source/city-selector/city-selector.component.mjs +53 -0
- package/dist/esm2022/components-source/color-picker/color-picker.component.mjs +320 -0
- package/dist/esm2022/components-source/confirm-dialog/confirm-dialog.component.mjs +27 -0
- package/dist/esm2022/components-source/country-flags/country-flags.component.mjs +27 -0
- package/dist/esm2022/components-source/date-picker/date-picker.component.mjs +73 -0
- package/dist/esm2022/components-source/date-picker-range/date-picker-range.component.mjs +67 -0
- package/dist/esm2022/components-source/dropi-avatars/dropi-avatars.component.mjs +31 -0
- package/dist/esm2022/components-source/dropi-badge/dropi-badge.component.mjs +45 -0
- package/dist/esm2022/components-source/dropi-banner-external/dropi-banner-external.component.mjs +39 -0
- package/dist/esm2022/components-source/dropi-breadcrumb/dropi-breadcrumb.component.mjs +45 -0
- package/dist/esm2022/components-source/dropi-card-checkbox/dropi-card-checkbox.component.mjs +53 -0
- package/dist/esm2022/components-source/dropi-carousel/dropi-carousel.component.mjs +243 -0
- package/dist/esm2022/components-source/dropi-checkbox/dropi-checkbox.component.mjs +31 -0
- package/dist/esm2022/components-source/dropi-chips/dropi-chips.component.mjs +38 -0
- package/dist/esm2022/components-source/dropi-country-selector/countries.data.mjs +254 -0
- package/dist/esm2022/components-source/dropi-country-selector/dropi-country-selector.component.mjs +183 -0
- package/dist/esm2022/components-source/dropi-drawer/dropi-drawer.component.mjs +69 -0
- package/dist/esm2022/components-source/dropi-dropdown/dropi-dropdown.component.mjs +59 -0
- package/dist/esm2022/components-source/dropi-favorite-button/dropi-favorite-button.component.mjs +33 -0
- package/dist/esm2022/components-source/dropi-file-upload/card-view/card-view.component.mjs +47 -0
- package/dist/esm2022/components-source/dropi-file-upload/drop-zone/drop-zone.component.mjs +115 -0
- package/dist/esm2022/components-source/dropi-file-upload/dropi-file-upload.component.mjs +66 -0
- package/dist/esm2022/components-source/dropi-file-upload/file-list/file-list.component.mjs +95 -0
- package/dist/esm2022/components-source/dropi-file-upload/grid-view/grid-view.component.mjs +37 -0
- package/dist/esm2022/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.mjs +59 -0
- package/dist/esm2022/components-source/dropi-image-overlay/dropi-image-overlay.component.mjs +31 -0
- package/dist/esm2022/components-source/dropi-languages-selector/dropi-languages-selector.component.mjs +38 -0
- package/dist/esm2022/components-source/dropi-logo/dropi-logo.component.mjs +27 -0
- package/dist/esm2022/components-source/dropi-modal/dropi-modal.component.mjs +92 -0
- package/dist/esm2022/components-source/dropi-modal/p-template.directive.mjs +22 -0
- package/dist/esm2022/components-source/dropi-navbar/dropi-navbar.component.mjs +51 -0
- package/dist/esm2022/components-source/dropi-paginator/dropi-paginator.component.mjs +89 -0
- package/dist/esm2022/components-source/dropi-phone-input/dropi-phone-input.component.mjs +155 -0
- package/dist/esm2022/components-source/dropi-radio-button/dropi-radio-button.component.mjs +48 -0
- package/dist/esm2022/components-source/dropi-search/dropi-search.component.mjs +104 -0
- package/dist/esm2022/components-source/dropi-select/dropi-select.component.mjs +96 -0
- package/dist/esm2022/components-source/dropi-skeleton/dropi-skeleton.component.mjs +39 -0
- package/dist/esm2022/components-source/dropi-steps/dropi-steps.component.mjs +97 -0
- package/dist/esm2022/components-source/dropi-switch/dropi-switch.component.mjs +22 -0
- package/dist/esm2022/components-source/dropi-table/dropi-table.component.mjs +333 -0
- package/dist/esm2022/components-source/dropi-tag/dropi-tag.component.mjs +36 -0
- package/dist/esm2022/components-source/dropi-text-area/dropi-text-area.component.mjs +53 -0
- package/dist/esm2022/components-source/dropi-tooltip/dropi-tooltip.component.mjs +78 -0
- package/dist/esm2022/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component.mjs +46 -0
- package/dist/esm2022/components-source/empty/empty.component.mjs +18 -0
- package/dist/esm2022/components-source/empty-state/empty-state.component.mjs +62 -0
- package/dist/esm2022/components-source/file-upload-progress-bar/file-upload-progress-bar.component.mjs +91 -0
- package/dist/esm2022/components-source/index.mjs +107 -0
- package/dist/esm2022/components-source/input/input.component.mjs +104 -0
- package/dist/esm2022/components-source/lottie-loader/lottie-loader.component.mjs +25 -0
- package/dist/esm2022/components-source/otp-send-code/otp-send-code.component.mjs +201 -0
- package/dist/esm2022/components-source/radio-selection-list/radio-selection-list.component.mjs +89 -0
- package/dist/esm2022/components-source/read-more/read-more.component.mjs +91 -0
- package/dist/esm2022/components-source/sidebar/sidebar.component.mjs +88 -0
- package/dist/esm2022/components-source/simple-stepper/simple-stepper.component.mjs +60 -0
- package/dist/esm2022/components-source/spinner/spinner.component.mjs +19 -0
- package/dist/esm2022/components-source/tabs/tabs.component.mjs +83 -0
- package/dist/esm2022/components-source/tag-type-product/tag-type-product.component.mjs +11 -0
- package/dist/esm2022/components-source/toast/toast.component.mjs +47 -0
- package/dist/esm2022/components-source/toggle/input-toggle.component.mjs +36 -0
- package/dist/esm2022/components-source/tooltip/tooltip.component.mjs +34 -0
- package/dist/esm2022/components-source/vertical-steps/vertical-steps.component.mjs +75 -0
- package/dist/esm2022/lib/elements-registry.mjs +343 -2
- package/dist/esm2022/utilities/interfaces/ui/dropi-table.interface.mjs +2 -0
- package/dist/esm2022/utilities/interfaces/ui/input-interface.mjs +2 -0
- package/dist/esm2022/utilities/interfaces/ui/select-interface.mjs +2 -0
- package/dist/esm2022/utilities/interfaces/ui/selection-list-interface.mjs +2 -0
- package/dist/esm2022/utilities/interfaces/ui/upload.model.mjs +5 -0
- package/dist/fesm2022/dropi-ui-components.mjs +5913 -2
- package/dist/fesm2022/dropi-ui-components.mjs.map +1 -1
- package/dist/utilities/interfaces/ui/dropi-table.interface.d.ts +45 -0
- package/dist/utilities/interfaces/ui/input-interface.d.ts +33 -0
- package/dist/utilities/interfaces/ui/select-interface.d.ts +8 -0
- package/dist/utilities/interfaces/ui/selection-list-interface.d.ts +24 -0
- package/dist/utilities/interfaces/ui/upload.model.d.ts +30 -0
- package/package.json +18 -6
- package/src/components-source/alert/alert.component.ts +12 -129
- package/src/components-source/alert-modal/alert-modal.component.ts +84 -114
- package/src/components-source/alert-validation/alert-validation.component.html +8 -0
- package/src/components-source/alert-validation/alert-validation.component.scss +225 -0
- package/src/components-source/alert-validation/alert-validation.component.ts +43 -0
- package/src/components-source/beta-tag/beta-tag.component.html +1 -0
- package/src/components-source/beta-tag/beta-tag.component.scss +26 -0
- package/src/components-source/beta-tag/beta-tag.component.ts +11 -0
- package/src/components-source/breadcrumb/breadcrumb.component.html +13 -5
- package/src/components-source/breadcrumb/breadcrumb.component.scss +8 -1
- package/src/components-source/breadcrumb/breadcrumb.component.spec.ts +26 -26
- package/src/components-source/breadcrumb/breadcrumb.component.ts +10 -12
- package/src/components-source/card-product/card-product.component.spec.ts +9 -9
- package/src/components-source/card-product/card-product.component.stories.ts +2 -2
- package/src/components-source/card-product/card-product.component.ts +294 -818
- package/src/components-source/card-section/card-section.component.html +7 -7
- package/src/components-source/card-section/card-section.component.ts +41 -15
- package/src/components-source/checkbox-selection-list/checkbox-selection-list.component.ts +42 -179
- package/src/components-source/city-selector/city-selector.component.ts +37 -137
- package/src/components-source/confirm-dialog/confirm-dialog.component.html +26 -0
- package/src/components-source/confirm-dialog/confirm-dialog.component.scss +55 -0
- package/src/components-source/confirm-dialog/confirm-dialog.component.ts +22 -0
- package/src/components-source/country-flags/country-flags.component.ts +20 -12
- package/src/components-source/date-picker/date-picker.component.ts +32 -292
- package/src/components-source/date-picker-range/date-picker-range.component.html +15 -7
- package/src/components-source/date-picker-range/date-picker-range.component.ts +42 -235
- package/src/components-source/dropi-banner-external/dropi-banner-external.component.ts +24 -185
- package/src/components-source/dropi-breadcrumb/dropi-breadcrumb.component.html +21 -21
- package/src/components-source/dropi-breadcrumb/dropi-breadcrumb.component.spec.ts +9 -9
- package/src/components-source/dropi-breadcrumb/dropi-breadcrumb.component.ts +41 -23
- package/src/components-source/dropi-breadcrumb/dropi-breadcrumb.stories.ts +12 -12
- package/src/components-source/dropi-chips/dropi-chips.component.ts +22 -87
- package/src/components-source/dropi-country-selector/countries.data.ts +256 -236
- package/src/components-source/dropi-country-selector/dropi-country-selector.component.ts +37 -25
- package/src/components-source/dropi-drawer/dropi-drawer.component.ts +91 -78
- package/src/components-source/dropi-dropdown/dropi-dropdown.component.ts +44 -47
- package/src/components-source/dropi-file-upload/card-view/card-view.component.ts +33 -53
- package/src/components-source/dropi-file-upload/drop-zone/drop-zone.component.ts +52 -123
- package/src/components-source/dropi-file-upload/dropi-file-upload.component.ts +38 -294
- package/src/components-source/dropi-file-upload/file-list/file-list.component.ts +62 -43
- package/src/components-source/dropi-file-upload/grid-view/grid-view.component.ts +23 -22
- package/src/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.scss +6 -2
- package/src/components-source/dropi-image-overlay/dropi-image-overlay.component.ts +16 -71
- package/src/components-source/dropi-modal/dropi-modal.component.ts +56 -372
- package/src/components-source/dropi-navbar/dropi-navbar.component.ts +17 -17
- package/src/components-source/dropi-paginator/dropi-paginator.component.html +18 -7
- package/src/components-source/dropi-paginator/dropi-paginator.component.ts +40 -32
- package/src/components-source/dropi-phone-input/dropi-phone-input.component.html +78 -79
- package/src/components-source/dropi-phone-input/dropi-phone-input.component.ts +29 -85
- package/src/components-source/dropi-search/dropi-search.component.ts +59 -222
- package/src/components-source/dropi-select/dropi-select.component.html +82 -131
- package/src/components-source/dropi-select/dropi-select.component.ts +60 -423
- package/src/components-source/dropi-table/dropi-table.component.html +40 -23
- package/src/components-source/dropi-table/dropi-table.component.ts +130 -374
- package/src/components-source/dropi-tag/dropi-tag.component.ts +20 -90
- package/src/components-source/dropi-text-area/dropi-text-area.component.ts +22 -48
- package/src/components-source/dropi-tooltip/dropi-tooltip.component.ts +40 -129
- package/src/components-source/empty/empty.component.html +3 -0
- package/src/components-source/empty/empty.component.scss +0 -0
- package/src/components-source/empty/empty.component.ts +16 -0
- package/src/components-source/empty-state/empty-state.component.ts +47 -19
- package/src/components-source/index.ts +82 -37
- package/src/components-source/input/input.component.html +79 -63
- package/src/components-source/input/input.component.ts +51 -97
- package/src/components-source/lottie-loader/lottie-loader.component.ts +13 -16
- package/src/components-source/otp-send-code/otp-send-code.component.ts +60 -528
- package/src/components-source/radio-selection-list/radio-selection-list.component.ts +36 -97
- package/src/components-source/sidebar/sidebar.component.spec.ts +11 -11
- package/src/components-source/sidebar/sidebar.component.stories.ts +3 -3
- package/src/components-source/sidebar/sidebar.component.ts +51 -47
- package/src/components-source/simple-stepper/simple-stepper.component.ts +20 -35
- package/src/components-source/spinner/spinner.component.html +6 -0
- package/src/components-source/spinner/spinner.component.scss +15 -0
- package/src/components-source/spinner/spinner.component.ts +17 -0
- package/src/components-source/tabs/tabs.component.spec.ts +8 -8
- package/src/components-source/tabs/tabs.component.stories.ts +5 -5
- package/src/components-source/tabs/tabs.component.ts +41 -83
- package/src/components-source/toast/toast.component.ts +40 -46
- package/src/components-source/toggle/input-toggle.component.html +34 -0
- package/src/components-source/toggle/input-toggle.component.scss +0 -0
- package/src/components-source/toggle/input-toggle.component.ts +27 -0
- package/src/components-source/toggle/inputToggleConfig.ts +11 -0
- package/src/components-source/tooltip/tooltip.component.html +22 -11
- package/src/components-source/tooltip/tooltip.component.ts +28 -13
- package/src/components-source/vertical-steps/vertical-steps.component.ts +16 -78
- package/src/lib/elements-registry.ts +413 -1
- package/src/lib/router-stub.ts +7 -0
- package/src/libreria work space.code-workspace +11 -8
- package/src/utilities/interfaces/ui/dropi-table.interface.ts +60 -0
- package/src/utilities/interfaces/ui/input-interface.ts +34 -0
- package/src/utilities/interfaces/ui/select-interface.ts +8 -0
- package/src/utilities/interfaces/ui/selection-list-interface.ts +15 -0
- package/src/utilities/interfaces/ui/upload.model.ts +41 -0
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, NgZone, Output, Inject, CUSTOM_ELEMENTS_SCHEMA, } from "@angular/core";
|
|
2
|
+
import { CommonModule } from "@angular/common";
|
|
3
|
+
import { TranslateModule } from "@ngx-translate/core";
|
|
4
|
+
import { DropZoneComponent } from "./drop-zone/drop-zone.component";
|
|
5
|
+
import { FileListComponent } from "./file-list/file-list.component";
|
|
6
|
+
import { AlertComponent } from "../alert/alert.component";
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@angular/common";
|
|
9
|
+
import * as i2 from "@ngx-translate/core";
|
|
10
|
+
export class DropiFileUploadComponent {
|
|
11
|
+
zone;
|
|
12
|
+
params = {
|
|
13
|
+
title: "",
|
|
14
|
+
label: "",
|
|
15
|
+
previewType: "card",
|
|
16
|
+
multiple: false,
|
|
17
|
+
maxFiles: 1,
|
|
18
|
+
maxFileSizeMB: 10,
|
|
19
|
+
accept: [],
|
|
20
|
+
compress: false,
|
|
21
|
+
maxHeight: 1000,
|
|
22
|
+
maxWidth: 1000,
|
|
23
|
+
path: "",
|
|
24
|
+
onlyView: false,
|
|
25
|
+
viewDragAndDrop: false,
|
|
26
|
+
textButton: "Seleccionar Imagen",
|
|
27
|
+
textDropZone: "Drop or upload an image here",
|
|
28
|
+
};
|
|
29
|
+
uploadedUrlsChange = new EventEmitter();
|
|
30
|
+
dragOver = false;
|
|
31
|
+
selectedFiles = [];
|
|
32
|
+
error = false;
|
|
33
|
+
errorMessage = "";
|
|
34
|
+
constructor(zone) {
|
|
35
|
+
this.zone = zone;
|
|
36
|
+
}
|
|
37
|
+
onFilesAdded($event) {
|
|
38
|
+
this.handleFiles($event);
|
|
39
|
+
}
|
|
40
|
+
handleFiles(files) {
|
|
41
|
+
// Implementación básica para build
|
|
42
|
+
}
|
|
43
|
+
onFileAction(event) {
|
|
44
|
+
// Implementación básica para build
|
|
45
|
+
}
|
|
46
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiFileUploadComponent, deps: [{ token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiFileUploadComponent, isStandalone: true, selector: "app-dropi-file-upload", inputs: { params: "params" }, outputs: { uploadedUrlsChange: "uploadedUrlsChange" }, ngImport: i0, template: "<div class=\"upload-container\">\n <!--Encabezado -->\n <div class=\"upload-header\">\n <div class=\"title text\">{{ params.title | translate }}</div>\n <div class=\"label text\">{{ params.label | translate }}</div>\n </div>\n\n <app-alert\n *ngIf=\"error\"\n [message]=\"errorMessage | translate\"\n type=\"default\"\n state=\"error\"\n [dismissable]=\"true\"\n [showButton]=\"false\"\n (onClose)=\"error = false\"\n ></app-alert>\n <!--Zona de arrastre -->\n <app-drop-zone\n *ngIf=\"selectedFiles.length < params.maxFiles\"\n [hidden]=\"params.previewType === 'grid' && (!params.viewDragAndDrop || selectedFiles.length > 0)\"\n [accept]=\"params.accept\"\n [multiple]=\"params.multiple\"\n [compress]=\"params.compress\"\n [maxHeight]=\"params.maxHeight\"\n [maxWidth]=\"params.maxWidth\"\n [maxFileSizeMB]=\"params.maxFileSizeMB\"\n [textButton]=\"params.textButton || 'Seleccionar Imagen'\"\n [textFileUpload]=\"params.textDropZone || 'Drop or upload an image here'\"\n (addFiles)=\"onFilesAdded($event)\"\n ></app-drop-zone>\n\n\n <!--Listado de archivos -->\n <app-file-list\n [onlyView]=\"params.onlyView\"\n [maxFiles]=\"params.maxFiles\"\n [files]=\"selectedFiles\"\n (action)=\"onFileAction($event)\"\n [previewType]=\"params.previewType\"\n [addButton]=\"!params.viewDragAndDrop\"\n ></app-file-list>\n</div>\n", styles: [".upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%;margin:var(--Size-3, 12px)}.upload-header{gap:var(--Size-1);display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs);font-style:normal;line-height:150%}.upload-header .title{font-weight:500}.upload-header .label{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DropZoneComponent, selector: "app-drop-zone", inputs: ["multiple", "accept", "maxFiles", "maxFileSizeMB", "title", "label", "viewDragAndDrop", "compress", "maxHeight", "maxWidth", "textButton", "textFileUpload"], outputs: ["addFiles"] }, { kind: "component", type: FileListComponent, selector: "app-file-list", inputs: ["files", "onlyView", "previewType", "maxFiles", "addButton"], outputs: ["action"] }] });
|
|
48
|
+
}
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiFileUploadComponent, decorators: [{
|
|
50
|
+
type: Component,
|
|
51
|
+
args: [{ selector: "app-dropi-file-upload", standalone: true, imports: [
|
|
52
|
+
CommonModule,
|
|
53
|
+
TranslateModule,
|
|
54
|
+
DropZoneComponent,
|
|
55
|
+
FileListComponent,
|
|
56
|
+
AlertComponent,
|
|
57
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"upload-container\">\n <!--Encabezado -->\n <div class=\"upload-header\">\n <div class=\"title text\">{{ params.title | translate }}</div>\n <div class=\"label text\">{{ params.label | translate }}</div>\n </div>\n\n <app-alert\n *ngIf=\"error\"\n [message]=\"errorMessage | translate\"\n type=\"default\"\n state=\"error\"\n [dismissable]=\"true\"\n [showButton]=\"false\"\n (onClose)=\"error = false\"\n ></app-alert>\n <!--Zona de arrastre -->\n <app-drop-zone\n *ngIf=\"selectedFiles.length < params.maxFiles\"\n [hidden]=\"params.previewType === 'grid' && (!params.viewDragAndDrop || selectedFiles.length > 0)\"\n [accept]=\"params.accept\"\n [multiple]=\"params.multiple\"\n [compress]=\"params.compress\"\n [maxHeight]=\"params.maxHeight\"\n [maxWidth]=\"params.maxWidth\"\n [maxFileSizeMB]=\"params.maxFileSizeMB\"\n [textButton]=\"params.textButton || 'Seleccionar Imagen'\"\n [textFileUpload]=\"params.textDropZone || 'Drop or upload an image here'\"\n (addFiles)=\"onFilesAdded($event)\"\n ></app-drop-zone>\n\n\n <!--Listado de archivos -->\n <app-file-list\n [onlyView]=\"params.onlyView\"\n [maxFiles]=\"params.maxFiles\"\n [files]=\"selectedFiles\"\n (action)=\"onFileAction($event)\"\n [previewType]=\"params.previewType\"\n [addButton]=\"!params.viewDragAndDrop\"\n ></app-file-list>\n</div>\n", styles: [".upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%;margin:var(--Size-3, 12px)}.upload-header{gap:var(--Size-1);display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs);font-style:normal;line-height:150%}.upload-header .title{font-weight:500}.upload-header .label{font-weight:400}\n"] }]
|
|
58
|
+
}], ctorParameters: () => [{ type: i0.NgZone, decorators: [{
|
|
59
|
+
type: Inject,
|
|
60
|
+
args: [NgZone]
|
|
61
|
+
}] }], propDecorators: { params: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], uploadedUrlsChange: [{
|
|
64
|
+
type: Output
|
|
65
|
+
}] } });
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktZmlsZS11cGxvYWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMtc291cmNlL2Ryb3BpLWZpbGUtdXBsb2FkL2Ryb3BpLWZpbGUtdXBsb2FkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1maWxlLXVwbG9hZC9kcm9waS1maWxlLXVwbG9hZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLE1BQU0sRUFDTixNQUFNLEVBQ04sc0JBQXNCLEdBQ3ZCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFNcEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7O0FBZ0IxRCxNQUFNLE9BQU8sd0JBQXdCO0lBeUJVO0lBeEJwQyxNQUFNLEdBQWlCO1FBQzlCLEtBQUssRUFBRSxFQUFFO1FBQ1QsS0FBSyxFQUFFLEVBQUU7UUFDVCxXQUFXLEVBQUUsTUFBTTtRQUNuQixRQUFRLEVBQUUsS0FBSztRQUNmLFFBQVEsRUFBRSxDQUFDO1FBQ1gsYUFBYSxFQUFFLEVBQUU7UUFDakIsTUFBTSxFQUFFLEVBQUU7UUFDVixRQUFRLEVBQUUsS0FBSztRQUNmLFNBQVMsRUFBRSxJQUFJO1FBQ2YsUUFBUSxFQUFFLElBQUk7UUFDZCxJQUFJLEVBQUUsRUFBRTtRQUNSLFFBQVEsRUFBRSxLQUFLO1FBQ2YsZUFBZSxFQUFFLEtBQUs7UUFDdEIsVUFBVSxFQUFFLG9CQUFvQjtRQUNoQyxZQUFZLEVBQUUsOEJBQThCO0tBQzdDLENBQUM7SUFDUSxrQkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBWSxDQUFDO0lBRTVELFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsYUFBYSxHQUFlLEVBQUUsQ0FBQztJQUMvQixLQUFLLEdBQVksS0FBSyxDQUFDO0lBQ3ZCLFlBQVksR0FBVyxFQUFFLENBQUM7SUFFMUIsWUFBNkMsSUFBWTtRQUFaLFNBQUksR0FBSixJQUFJLENBQVE7SUFBRyxDQUFDO0lBRTdELFlBQVksQ0FBQyxNQUFXO1FBQ3RCLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLG1DQUFtQztJQUNyQyxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsbUNBQW1DO0lBQ3JDLENBQUM7d0dBckNVLHdCQUF3QixrQkF5QmYsTUFBTTs0RkF6QmYsd0JBQXdCLHNLQ2xDckMsdTRDQTBDQSxrZURsQkksWUFBWSxrSUFDWixlQUFlLDRGQUNmLGlCQUFpQix3UEFDakIsaUJBQWlCOzs0RkFPUix3QkFBd0I7a0JBZHBDLFNBQVM7K0JBQ0UsdUJBQXVCLGNBQ3JCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsaUJBQWlCO3dCQUNqQixpQkFBaUI7d0JBQ2pCLGNBQWM7cUJBQ2YsV0FDUSxDQUFDLHNCQUFzQixDQUFDOzswQkE2QnBCLE1BQU07MkJBQUMsTUFBTTt5Q0F4QmpCLE1BQU07c0JBQWQsS0FBSztnQkFpQkksa0JBQWtCO3NCQUEzQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBOZ1pvbmUsXG4gIE91dHB1dCxcbiAgSW5qZWN0LFxuICBDVVNUT01fRUxFTUVOVFNfU0NIRU1BLFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSBcIkBuZ3gtdHJhbnNsYXRlL2NvcmVcIjtcbmltcG9ydCB7IERyb3Bab25lQ29tcG9uZW50IH0gZnJvbSBcIi4vZHJvcC16b25lL2Ryb3Atem9uZS5jb21wb25lbnRcIjtcbmltcG9ydCB7XG4gIEZpbGVJdGVtLFxuICBVcGxvYWRGaWxlU3RhdGUsXG4gIFVwbG9hZFBhcmFtcyxcbn0gZnJvbSBcIi4uLy4uL3V0aWxpdGllcy9pbnRlcmZhY2VzL3VpL3VwbG9hZC5tb2RlbFwiO1xuaW1wb3J0IHsgRmlsZUxpc3RDb21wb25lbnQgfSBmcm9tIFwiLi9maWxlLWxpc3QvZmlsZS1saXN0LmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgQWxlcnRDb21wb25lbnQgfSBmcm9tIFwiLi4vYWxlcnQvYWxlcnQuY29tcG9uZW50XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhcHAtZHJvcGktZmlsZS11cGxvYWRcIixcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBUcmFuc2xhdGVNb2R1bGUsXG4gICAgRHJvcFpvbmVDb21wb25lbnQsXG4gICAgRmlsZUxpc3RDb21wb25lbnQsXG4gICAgQWxlcnRDb21wb25lbnQsXG4gIF0sXG4gIHNjaGVtYXM6IFtDVVNUT01fRUxFTUVOVFNfU0NIRU1BXSxcbiAgdGVtcGxhdGVVcmw6IFwiLi9kcm9waS1maWxlLXVwbG9hZC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vZHJvcGktZmlsZS11cGxvYWQuY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpRmlsZVVwbG9hZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHBhcmFtczogVXBsb2FkUGFyYW1zID0ge1xuICAgIHRpdGxlOiBcIlwiLFxuICAgIGxhYmVsOiBcIlwiLFxuICAgIHByZXZpZXdUeXBlOiBcImNhcmRcIixcbiAgICBtdWx0aXBsZTogZmFsc2UsXG4gICAgbWF4RmlsZXM6IDEsXG4gICAgbWF4RmlsZVNpemVNQjogMTAsXG4gICAgYWNjZXB0OiBbXSxcbiAgICBjb21wcmVzczogZmFsc2UsXG4gICAgbWF4SGVpZ2h0OiAxMDAwLFxuICAgIG1heFdpZHRoOiAxMDAwLFxuICAgIHBhdGg6IFwiXCIsXG4gICAgb25seVZpZXc6IGZhbHNlLFxuICAgIHZpZXdEcmFnQW5kRHJvcDogZmFsc2UsXG4gICAgdGV4dEJ1dHRvbjogXCJTZWxlY2Npb25hciBJbWFnZW5cIixcbiAgICB0ZXh0RHJvcFpvbmU6IFwiRHJvcCBvciB1cGxvYWQgYW4gaW1hZ2UgaGVyZVwiLFxuICB9O1xuICBAT3V0cHV0KCkgdXBsb2FkZWRVcmxzQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmdbXT4oKTtcblxuICBkcmFnT3ZlciA9IGZhbHNlO1xuICBzZWxlY3RlZEZpbGVzOiBGaWxlSXRlbVtdID0gW107XG4gIGVycm9yOiBib29sZWFuID0gZmFsc2U7XG4gIGVycm9yTWVzc2FnZTogc3RyaW5nID0gXCJcIjtcblxuICBjb25zdHJ1Y3RvcihASW5qZWN0KE5nWm9uZSkgcHJpdmF0ZSByZWFkb25seSB6b25lOiBOZ1pvbmUpIHt9XG5cbiAgb25GaWxlc0FkZGVkKCRldmVudDogYW55KSB7XG4gICAgdGhpcy5oYW5kbGVGaWxlcygkZXZlbnQpO1xuICB9XG5cbiAgaGFuZGxlRmlsZXMoZmlsZXM6IEZpbGVbXSk6IHZvaWQge1xuICAgIC8vIEltcGxlbWVudGFjacOzbiBiw6FzaWNhIHBhcmEgYnVpbGRcbiAgfVxuXG4gIG9uRmlsZUFjdGlvbihldmVudDogYW55KSB7XG4gICAgLy8gSW1wbGVtZW50YWNpw7NuIGLDoXNpY2EgcGFyYSBidWlsZFxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidXBsb2FkLWNvbnRhaW5lclwiPlxuICA8IS0tRW5jYWJlemFkbyAtLT5cbiAgPGRpdiBjbGFzcz1cInVwbG9hZC1oZWFkZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwidGl0bGUgdGV4dFwiPnt7IHBhcmFtcy50aXRsZSB8IHRyYW5zbGF0ZSB9fTwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJsYWJlbCB0ZXh0XCI+e3sgcGFyYW1zLmxhYmVsIHwgdHJhbnNsYXRlIH19PC9kaXY+XG4gIDwvZGl2PlxuXG4gICAgPGFwcC1hbGVydFxuICAgICpuZ0lmPVwiZXJyb3JcIlxuICAgIFttZXNzYWdlXT1cImVycm9yTWVzc2FnZSB8IHRyYW5zbGF0ZVwiXG4gICAgdHlwZT1cImRlZmF1bHRcIlxuICAgIHN0YXRlPVwiZXJyb3JcIlxuICAgIFtkaXNtaXNzYWJsZV09XCJ0cnVlXCJcbiAgICBbc2hvd0J1dHRvbl09XCJmYWxzZVwiXG4gICAgKG9uQ2xvc2UpPVwiZXJyb3IgPSBmYWxzZVwiXG4gID48L2FwcC1hbGVydD5cbiAgPCEtLVpvbmEgZGUgYXJyYXN0cmUgLS0+XG4gIDxhcHAtZHJvcC16b25lXG4gICAgKm5nSWY9XCJzZWxlY3RlZEZpbGVzLmxlbmd0aCA8IHBhcmFtcy5tYXhGaWxlc1wiXG4gICAgW2hpZGRlbl09XCJwYXJhbXMucHJldmlld1R5cGUgPT09ICdncmlkJyAmJiAoIXBhcmFtcy52aWV3RHJhZ0FuZERyb3AgfHwgc2VsZWN0ZWRGaWxlcy5sZW5ndGggPiAwKVwiXG4gICAgW2FjY2VwdF09XCJwYXJhbXMuYWNjZXB0XCJcbiAgICBbbXVsdGlwbGVdPVwicGFyYW1zLm11bHRpcGxlXCJcbiAgICBbY29tcHJlc3NdPVwicGFyYW1zLmNvbXByZXNzXCJcbiAgICBbbWF4SGVpZ2h0XT1cInBhcmFtcy5tYXhIZWlnaHRcIlxuICAgIFttYXhXaWR0aF09XCJwYXJhbXMubWF4V2lkdGhcIlxuICAgIFttYXhGaWxlU2l6ZU1CXT1cInBhcmFtcy5tYXhGaWxlU2l6ZU1CXCJcbiAgICBbdGV4dEJ1dHRvbl09XCJwYXJhbXMudGV4dEJ1dHRvbiB8fCAnU2VsZWNjaW9uYXIgSW1hZ2VuJ1wiXG4gICAgW3RleHRGaWxlVXBsb2FkXT1cInBhcmFtcy50ZXh0RHJvcFpvbmUgfHwgJ0Ryb3Agb3IgdXBsb2FkIGFuIGltYWdlIGhlcmUnXCJcbiAgICAoYWRkRmlsZXMpPVwib25GaWxlc0FkZGVkKCRldmVudClcIlxuICA+PC9hcHAtZHJvcC16b25lPlxuXG5cbiAgPCEtLUxpc3RhZG8gZGUgYXJjaGl2b3MgLS0+XG4gIDxhcHAtZmlsZS1saXN0XG4gICAgW29ubHlWaWV3XT1cInBhcmFtcy5vbmx5Vmlld1wiXG4gICAgW21heEZpbGVzXT1cInBhcmFtcy5tYXhGaWxlc1wiXG4gICAgW2ZpbGVzXT1cInNlbGVjdGVkRmlsZXNcIlxuICAgIChhY3Rpb24pPVwib25GaWxlQWN0aW9uKCRldmVudClcIlxuICAgIFtwcmV2aWV3VHlwZV09XCJwYXJhbXMucHJldmlld1R5cGVcIlxuICAgIFthZGRCdXR0b25dPVwiIXBhcmFtcy52aWV3RHJhZ0FuZERyb3BcIlxuICA+PC9hcHAtZmlsZS1saXN0PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, Inject, } from "@angular/core";
|
|
2
|
+
import { CommonModule } from "@angular/common";
|
|
3
|
+
import { CardViewComponent } from "../card-view/card-view.component";
|
|
4
|
+
import { GridViewComponent } from "../grid-view/grid-view.component";
|
|
5
|
+
import { TranslateModule } from "@ngx-translate/core";
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
import * as i2 from "@ngx-translate/core";
|
|
9
|
+
export class FileListComponent {
|
|
10
|
+
uploadFileService;
|
|
11
|
+
files = [];
|
|
12
|
+
onlyView = false;
|
|
13
|
+
previewType = "card";
|
|
14
|
+
maxFiles = 1;
|
|
15
|
+
addButton = true;
|
|
16
|
+
action = new EventEmitter();
|
|
17
|
+
cardFiles = [];
|
|
18
|
+
gridFiles = [];
|
|
19
|
+
viewImageToDelete = false;
|
|
20
|
+
imageTodelete = null;
|
|
21
|
+
imageCopyValue = null;
|
|
22
|
+
imageCopyValueGrid = null; // Fix for grid delete
|
|
23
|
+
constructor(uploadFileService) {
|
|
24
|
+
this.uploadFileService = uploadFileService;
|
|
25
|
+
}
|
|
26
|
+
ngOnChanges(changes) {
|
|
27
|
+
if (changes["files"]) {
|
|
28
|
+
this.updateFileViews();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
updateFileViews() {
|
|
32
|
+
this.cardFiles = [];
|
|
33
|
+
this.gridFiles = [];
|
|
34
|
+
this.files.forEach((file) => {
|
|
35
|
+
if (file.typeView === "card") {
|
|
36
|
+
this.cardFiles.push(file);
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
this.gridFiles.push(file);
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
onChildAction(event) {
|
|
43
|
+
this.action.emit(event);
|
|
44
|
+
}
|
|
45
|
+
onChildGridAction(event) {
|
|
46
|
+
this.imageTodelete = { ...event.file, state: "confirm-delete" };
|
|
47
|
+
this.viewImageToDelete = true;
|
|
48
|
+
this.imageCopyValueGrid = event.file;
|
|
49
|
+
}
|
|
50
|
+
onDeleteCardAction(event) {
|
|
51
|
+
if (event.type == "confirm-delete") {
|
|
52
|
+
this.action.emit({
|
|
53
|
+
type: "confirm-delete",
|
|
54
|
+
file: this.imageCopyValueGrid || event.file,
|
|
55
|
+
});
|
|
56
|
+
this.viewImageToDelete = false;
|
|
57
|
+
this.imageCopyValueGrid = null;
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
this.imageTodelete = null;
|
|
61
|
+
this.viewImageToDelete = false;
|
|
62
|
+
this.imageCopyValueGrid = null;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
addImage() {
|
|
66
|
+
this.uploadFileService?.triggerInput();
|
|
67
|
+
}
|
|
68
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListComponent, deps: [{ token: "UploadFileService" }], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileListComponent, isStandalone: true, selector: "app-file-list", inputs: { files: "files", onlyView: "onlyView", previewType: "previewType", maxFiles: "maxFiles", addButton: "addButton" }, outputs: { action: "action" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"files-container\">\n <div class=\"grid-list\">\n <ng-container *ngIf=\"!viewImageToDelete\">\n <app-grid-view\n *ngFor=\"let fileItem of gridFiles\"\n [fileItem]=\"fileItem\"\n (action)=\"onChildGridAction($event)\"\n ></app-grid-view>\n </ng-container>\n\n <app-card-view\n *ngIf=\"viewImageToDelete\"\n style=\"width: 100%\"\n [fileItem]=\"imageTodelete\"\n [onlyView]=\"onlyView\"\n (action)=\"onDeleteCardAction($event)\"\n ></app-card-view>\n <div\n (click)=\"addImage()\"\n *ngIf=\"(gridFiles.length != 0 || (previewType == 'grid' && addButton)) && gridFiles.length < maxFiles && !viewImageToDelete\"\n class=\"add-img\"\n >\n <div class=\"icon\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z\"\n fill=\"#32394D\"\n />\n </svg>\n </div>\n <div class=\"text\">\n {{ 'add' | translate }}\n </div>\n </div>\n </div>\n <div class=\"card-list\">\n <app-card-view\n *ngFor=\"let fileItem of cardFiles\"\n style=\"width: 100%\"\n [fileItem]=\"fileItem\"\n [onlyView]=\"onlyView\"\n (action)=\"onChildAction($event)\"\n ></app-card-view>\n </div>\n</div>\n", styles: [".grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.files-container{display:flex;flex-direction:column;gap:var(--Size-3)}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3);align-self:stretch;width:100%}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa)}.add-img:hover{cursor:pointer;transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-600, #475066);text-align:center;font-size:12px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardViewComponent, selector: "app-card-view", inputs: ["fileItem", "onlyView"], outputs: ["action"] }, { kind: "component", type: GridViewComponent, selector: "app-grid-view", inputs: ["fileItem"], outputs: ["action"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
70
|
+
}
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListComponent, decorators: [{
|
|
72
|
+
type: Component,
|
|
73
|
+
args: [{ selector: "app-file-list", standalone: true, imports: [
|
|
74
|
+
CommonModule,
|
|
75
|
+
CardViewComponent,
|
|
76
|
+
GridViewComponent,
|
|
77
|
+
TranslateModule,
|
|
78
|
+
], template: "<div class=\"files-container\">\n <div class=\"grid-list\">\n <ng-container *ngIf=\"!viewImageToDelete\">\n <app-grid-view\n *ngFor=\"let fileItem of gridFiles\"\n [fileItem]=\"fileItem\"\n (action)=\"onChildGridAction($event)\"\n ></app-grid-view>\n </ng-container>\n\n <app-card-view\n *ngIf=\"viewImageToDelete\"\n style=\"width: 100%\"\n [fileItem]=\"imageTodelete\"\n [onlyView]=\"onlyView\"\n (action)=\"onDeleteCardAction($event)\"\n ></app-card-view>\n <div\n (click)=\"addImage()\"\n *ngIf=\"(gridFiles.length != 0 || (previewType == 'grid' && addButton)) && gridFiles.length < maxFiles && !viewImageToDelete\"\n class=\"add-img\"\n >\n <div class=\"icon\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z\"\n fill=\"#32394D\"\n />\n </svg>\n </div>\n <div class=\"text\">\n {{ 'add' | translate }}\n </div>\n </div>\n </div>\n <div class=\"card-list\">\n <app-card-view\n *ngFor=\"let fileItem of cardFiles\"\n style=\"width: 100%\"\n [fileItem]=\"fileItem\"\n [onlyView]=\"onlyView\"\n (action)=\"onChildAction($event)\"\n ></app-card-view>\n </div>\n</div>\n", styles: [".grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.files-container{display:flex;flex-direction:column;gap:var(--Size-3)}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3);align-self:stretch;width:100%}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa)}.add-img:hover{cursor:pointer;transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-600, #475066);text-align:center;font-size:12px;font-style:normal;font-weight:400;line-height:150%}\n"] }]
|
|
79
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
80
|
+
type: Inject,
|
|
81
|
+
args: ["UploadFileService"]
|
|
82
|
+
}] }], propDecorators: { files: [{
|
|
83
|
+
type: Input
|
|
84
|
+
}], onlyView: [{
|
|
85
|
+
type: Input
|
|
86
|
+
}], previewType: [{
|
|
87
|
+
type: Input
|
|
88
|
+
}], maxFiles: [{
|
|
89
|
+
type: Input
|
|
90
|
+
}], addButton: [{
|
|
91
|
+
type: Input
|
|
92
|
+
}], action: [{
|
|
93
|
+
type: Output
|
|
94
|
+
}] } });
|
|
95
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1maWxlLXVwbG9hZC9maWxlLWxpc3QvZmlsZS1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1maWxlLXVwbG9hZC9maWxlLWxpc3QvZmlsZS1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEVBRU4sTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7Ozs7QUFjdEQsTUFBTSxPQUFPLGlCQUFpQjtJQWtCcUI7SUFqQnhDLEtBQUssR0FBZSxFQUFFLENBQUM7SUFDdkIsUUFBUSxHQUFZLEtBQUssQ0FBQztJQUMxQixXQUFXLEdBQW9CLE1BQU0sQ0FBQztJQUN0QyxRQUFRLEdBQVcsQ0FBQyxDQUFDO0lBQ3JCLFNBQVMsR0FBWSxJQUFJLENBQUM7SUFDekIsTUFBTSxHQUFHLElBQUksWUFBWSxFQUcvQixDQUFDO0lBRUUsU0FBUyxHQUFlLEVBQUUsQ0FBQztJQUMzQixTQUFTLEdBQWUsRUFBRSxDQUFDO0lBQ2xDLGlCQUFpQixHQUFZLEtBQUssQ0FBQztJQUNuQyxhQUFhLEdBQW9CLElBQUksQ0FBQztJQUN0QyxjQUFjLEdBQW9CLElBQUksQ0FBQztJQUN2QyxrQkFBa0IsR0FBb0IsSUFBSSxDQUFDLENBQUMsc0JBQXNCO0lBRWxFLFlBQWlELGlCQUFzQjtRQUF0QixzQkFBaUIsR0FBakIsaUJBQWlCLENBQUs7SUFBRyxDQUFDO0lBRTNFLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7UUFFcEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUMxQixJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssTUFBTSxFQUFFLENBQUM7Z0JBQzdCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUMxQixPQUFPO1lBQ1QsQ0FBQztZQUNELElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUdiO1FBQ0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUNELGlCQUFpQixDQUFDLEtBR2pCO1FBQ0MsSUFBSSxDQUFDLGFBQWEsR0FBRyxFQUFFLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUUsQ0FBQztRQUNoRSxJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDO1FBQzlCLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxLQUdsQjtRQUNDLElBQUksS0FBSyxDQUFDLElBQUksSUFBSSxnQkFBZ0IsRUFBRSxDQUFDO1lBQ25DLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDO2dCQUNmLElBQUksRUFBRSxnQkFBZ0I7Z0JBQ3RCLElBQUksRUFBRSxJQUFJLENBQUMsa0JBQWtCLElBQUksS0FBSyxDQUFDLElBQUk7YUFDNUMsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEtBQUssQ0FBQztZQUMvQixJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDO1FBQ2pDLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7WUFDMUIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEtBQUssQ0FBQztZQUMvQixJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDO1FBQ2pDLENBQUM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxZQUFZLEVBQUUsQ0FBQztJQUN6QyxDQUFDO3dHQTFFVSxpQkFBaUIsa0JBa0JSLG1CQUFtQjs0RkFsQjVCLGlCQUFpQix5UEMzQjlCLDRzRUFtREEsMDdCRGhDSSxZQUFZLGdRQUNaLGlCQUFpQixpSEFDakIsaUJBQWlCLG9HQUNqQixlQUFlOzs0RkFLTixpQkFBaUI7a0JBWjdCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLGlCQUFpQjt3QkFDakIsaUJBQWlCO3dCQUNqQixlQUFlO3FCQUNoQjs7MEJBc0JZLE1BQU07MkJBQUMsbUJBQW1CO3lDQWpCOUIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgSW5qZWN0LFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlsZUl0ZW0gfSBmcm9tIFwiLi4vLi4vLi4vdXRpbGl0aWVzL2ludGVyZmFjZXMvdWkvdXBsb2FkLm1vZGVsXCI7XG5pbXBvcnQgeyBDYXJkVmlld0NvbXBvbmVudCB9IGZyb20gXCIuLi9jYXJkLXZpZXcvY2FyZC12aWV3LmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgR3JpZFZpZXdDb21wb25lbnQgfSBmcm9tIFwiLi4vZ3JpZC12aWV3L2dyaWQtdmlldy5jb21wb25lbnRcIjtcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gXCJAbmd4LXRyYW5zbGF0ZS9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhcHAtZmlsZS1saXN0XCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgQ2FyZFZpZXdDb21wb25lbnQsXG4gICAgR3JpZFZpZXdDb21wb25lbnQsXG4gICAgVHJhbnNsYXRlTW9kdWxlLFxuICBdLFxuICB0ZW1wbGF0ZVVybDogXCIuL2ZpbGUtbGlzdC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vZmlsZS1saXN0LmNvbXBvbmVudC5zY3NzXCJdLFxufSlcbmV4cG9ydCBjbGFzcyBGaWxlTGlzdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGZpbGVzOiBGaWxlSXRlbVtdID0gW107XG4gIEBJbnB1dCgpIG9ubHlWaWV3OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHByZXZpZXdUeXBlOiBcImNhcmRcIiB8IFwiZ3JpZFwiID0gXCJjYXJkXCI7XG4gIEBJbnB1dCgpIG1heEZpbGVzOiBudW1iZXIgPSAxO1xuICBASW5wdXQoKSBhZGRCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xuICBAT3V0cHV0KCkgYWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjx7XG4gICAgZmlsZTogRmlsZUl0ZW07XG4gICAgdHlwZTogXCJkZWxldGVcIiB8IFwiY29uZmlybS1kZWxldGVcIiB8IFwiY2FuY2VsLWRlbGV0ZVwiO1xuICB9PigpO1xuXG4gIHB1YmxpYyBjYXJkRmlsZXM6IEZpbGVJdGVtW10gPSBbXTtcbiAgcHVibGljIGdyaWRGaWxlczogRmlsZUl0ZW1bXSA9IFtdO1xuICB2aWV3SW1hZ2VUb0RlbGV0ZTogYm9vbGVhbiA9IGZhbHNlO1xuICBpbWFnZVRvZGVsZXRlOiBGaWxlSXRlbSB8IG51bGwgPSBudWxsO1xuICBpbWFnZUNvcHlWYWx1ZTogRmlsZUl0ZW0gfCBudWxsID0gbnVsbDtcbiAgaW1hZ2VDb3B5VmFsdWVHcmlkOiBGaWxlSXRlbSB8IG51bGwgPSBudWxsOyAvLyBGaXggZm9yIGdyaWQgZGVsZXRlXG5cbiAgY29uc3RydWN0b3IoQEluamVjdChcIlVwbG9hZEZpbGVTZXJ2aWNlXCIpIHByaXZhdGUgdXBsb2FkRmlsZVNlcnZpY2U6IGFueSkge31cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXNbXCJmaWxlc1wiXSkge1xuICAgICAgdGhpcy51cGRhdGVGaWxlVmlld3MoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZUZpbGVWaWV3cygpIHtcbiAgICB0aGlzLmNhcmRGaWxlcyA9IFtdO1xuICAgIHRoaXMuZ3JpZEZpbGVzID0gW107XG5cbiAgICB0aGlzLmZpbGVzLmZvckVhY2goKGZpbGUpID0+IHtcbiAgICAgIGlmIChmaWxlLnR5cGVWaWV3ID09PSBcImNhcmRcIikge1xuICAgICAgICB0aGlzLmNhcmRGaWxlcy5wdXNoKGZpbGUpO1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG4gICAgICB0aGlzLmdyaWRGaWxlcy5wdXNoKGZpbGUpO1xuICAgIH0pO1xuICB9XG5cbiAgb25DaGlsZEFjdGlvbihldmVudDoge1xuICAgIGZpbGU6IEZpbGVJdGVtO1xuICAgIHR5cGU6IFwiZGVsZXRlXCIgfCBcImNvbmZpcm0tZGVsZXRlXCIgfCBcImNhbmNlbC1kZWxldGVcIjtcbiAgfSkge1xuICAgIHRoaXMuYWN0aW9uLmVtaXQoZXZlbnQpO1xuICB9XG4gIG9uQ2hpbGRHcmlkQWN0aW9uKGV2ZW50OiB7XG4gICAgZmlsZTogRmlsZUl0ZW07XG4gICAgdHlwZTogXCJkZWxldGVcIiB8IFwiY29uZmlybS1kZWxldGVcIiB8IFwiY2FuY2VsLWRlbGV0ZVwiO1xuICB9KSB7XG4gICAgdGhpcy5pbWFnZVRvZGVsZXRlID0geyAuLi5ldmVudC5maWxlLCBzdGF0ZTogXCJjb25maXJtLWRlbGV0ZVwiIH07XG4gICAgdGhpcy52aWV3SW1hZ2VUb0RlbGV0ZSA9IHRydWU7XG4gICAgdGhpcy5pbWFnZUNvcHlWYWx1ZUdyaWQgPSBldmVudC5maWxlO1xuICB9XG5cbiAgb25EZWxldGVDYXJkQWN0aW9uKGV2ZW50OiB7XG4gICAgZmlsZTogRmlsZUl0ZW07XG4gICAgdHlwZTogXCJkZWxldGVcIiB8IFwiY29uZmlybS1kZWxldGVcIiB8IFwiY2FuY2VsLWRlbGV0ZVwiO1xuICB9KSB7XG4gICAgaWYgKGV2ZW50LnR5cGUgPT0gXCJjb25maXJtLWRlbGV0ZVwiKSB7XG4gICAgICB0aGlzLmFjdGlvbi5lbWl0KHtcbiAgICAgICAgdHlwZTogXCJjb25maXJtLWRlbGV0ZVwiLFxuICAgICAgICBmaWxlOiB0aGlzLmltYWdlQ29weVZhbHVlR3JpZCB8fCBldmVudC5maWxlLFxuICAgICAgfSk7XG4gICAgICB0aGlzLnZpZXdJbWFnZVRvRGVsZXRlID0gZmFsc2U7XG4gICAgICB0aGlzLmltYWdlQ29weVZhbHVlR3JpZCA9IG51bGw7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuaW1hZ2VUb2RlbGV0ZSA9IG51bGw7XG4gICAgICB0aGlzLnZpZXdJbWFnZVRvRGVsZXRlID0gZmFsc2U7XG4gICAgICB0aGlzLmltYWdlQ29weVZhbHVlR3JpZCA9IG51bGw7XG4gICAgfVxuICB9XG5cbiAgYWRkSW1hZ2UoKSB7XG4gICAgdGhpcy51cGxvYWRGaWxlU2VydmljZT8udHJpZ2dlcklucHV0KCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJmaWxlcy1jb250YWluZXJcIj5cbiAgPGRpdiBjbGFzcz1cImdyaWQtbGlzdFwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhdmlld0ltYWdlVG9EZWxldGVcIj5cbiAgICAgIDxhcHAtZ3JpZC12aWV3XG4gICAgICAgICpuZ0Zvcj1cImxldCBmaWxlSXRlbSBvZiBncmlkRmlsZXNcIlxuICAgICAgICBbZmlsZUl0ZW1dPVwiZmlsZUl0ZW1cIlxuICAgICAgICAoYWN0aW9uKT1cIm9uQ2hpbGRHcmlkQWN0aW9uKCRldmVudClcIlxuICAgICAgPjwvYXBwLWdyaWQtdmlldz5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxhcHAtY2FyZC12aWV3XG4gICAgICAqbmdJZj1cInZpZXdJbWFnZVRvRGVsZXRlXCJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDEwMCVcIlxuICAgICAgW2ZpbGVJdGVtXT1cImltYWdlVG9kZWxldGVcIlxuICAgICAgW29ubHlWaWV3XT1cIm9ubHlWaWV3XCJcbiAgICAgIChhY3Rpb24pPVwib25EZWxldGVDYXJkQWN0aW9uKCRldmVudClcIlxuICAgID48L2FwcC1jYXJkLXZpZXc+XG4gICAgPGRpdlxuICAgICAgKGNsaWNrKT1cImFkZEltYWdlKClcIlxuICAgICAgKm5nSWY9XCIoZ3JpZEZpbGVzLmxlbmd0aCAhPSAwIHx8IChwcmV2aWV3VHlwZSA9PSAnZ3JpZCcgJiYgYWRkQnV0dG9uKSkgJiYgZ3JpZEZpbGVzLmxlbmd0aCA8IG1heEZpbGVzICYmICF2aWV3SW1hZ2VUb0RlbGV0ZVwiXG4gICAgICBjbGFzcz1cImFkZC1pbWdcIlxuICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJpY29uXCI+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICB3aWR0aD1cIjE0XCJcbiAgICAgICAgICBoZWlnaHQ9XCIxNFwiXG4gICAgICAgICAgdmlld0JveD1cIjAgMCAxNCAxNFwiXG4gICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICA+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGQ9XCJNOS43Nzc3NCA2LjQ0NDRINy41NTU1MVY0LjIyMjE4QzcuNTU1NTEgNC4wNzQ4NCA3LjQ5Njk4IDMuOTMzNTMgNy4zOTI4IDMuODI5MzRDNy4yODg2MSAzLjcyNTE2IDcuMTQ3MyAzLjY2NjYzIDYuOTk5OTYgMy42NjY2M0M2Ljg1MjYyIDMuNjY2NjMgNi43MTEzMSAzLjcyNTE2IDYuNjA3MTIgMy44MjkzNEM2LjUwMjk0IDMuOTMzNTMgNi40NDQ0IDQuMDc0ODQgNi40NDQ0IDQuMjIyMThWNi40NDQ0SDQuMjIyMThDNC4wNzQ4NCA2LjQ0NDQgMy45MzM1MyA2LjUwMjk0IDMuODI5MzQgNi42MDcxMkMzLjcyNTE2IDYuNzExMzEgMy42NjY2MyA2Ljg1MjYyIDMuNjY2NjMgNi45OTk5NkMzLjY2NjYzIDcuMTQ3MyAzLjcyNTE2IDcuMjg4NjEgMy44MjkzNCA3LjM5MjhDMy45MzM1MyA3LjQ5Njk4IDQuMDc0ODQgNy41NTU1MSA0LjIyMjE4IDcuNTU1NTFINi40NDQ0VjkuNzc3NzRDNi40NDQ0IDkuOTI1MDggNi41MDI5NCAxMC4wNjY0IDYuNjA3MTIgMTAuMTcwNkM2LjcxMTMxIDEwLjI3NDggNi44NTI2MiAxMC4zMzMzIDYuOTk5OTYgMTAuMzMzM0M3LjE0NzMgMTAuMzMzMyA3LjI4ODYxIDEwLjI3NDggNy4zOTI4IDEwLjE3MDZDNy40OTY5OCAxMC4wNjY0IDcuNTU1NTEgOS45MjUwOCA3LjU1NTUxIDkuNzc3NzRWNy41NTU1MUg5Ljc3Nzc0QzkuOTI1MDggNy41NTU1MSAxMC4wNjY0IDcuNDk2OTggMTAuMTcwNiA3LjM5MjhDMTAuMjc0OCA3LjI4ODYxIDEwLjMzMzMgNy4xNDczIDEwLjMzMzMgNi45OTk5NkMxMC4zMzMzIDYuODUyNjIgMTAuMjc0OCA2LjcxMTMxIDEwLjE3MDYgNi42MDcxMkMxMC4wNjY0IDYuNTAyOTQgOS45MjUwOCA2LjQ0NDQgOS43Nzc3NCA2LjQ0NDRaXCJcbiAgICAgICAgICAgIGZpbGw9XCIjMzIzOTREXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInRleHRcIj5cbiAgICAgICAge3sgJ2FkZCcgfCB0cmFuc2xhdGUgfX1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImNhcmQtbGlzdFwiPlxuICAgIDxhcHAtY2FyZC12aWV3XG4gICAgICAqbmdGb3I9XCJsZXQgZmlsZUl0ZW0gb2YgY2FyZEZpbGVzXCJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDEwMCVcIlxuICAgICAgW2ZpbGVJdGVtXT1cImZpbGVJdGVtXCJcbiAgICAgIFtvbmx5Vmlld109XCJvbmx5Vmlld1wiXG4gICAgICAoYWN0aW9uKT1cIm9uQ2hpbGRBY3Rpb24oJGV2ZW50KVwiXG4gICAgPjwvYXBwLWNhcmQtdmlldz5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
|
2
|
+
import { CommonModule } from "@angular/common";
|
|
3
|
+
import { IconComponent } from "../../icon/icon.component";
|
|
4
|
+
import { TranslateModule } from "@ngx-translate/core";
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@angular/common";
|
|
7
|
+
export class GridViewComponent {
|
|
8
|
+
fileItem;
|
|
9
|
+
action = new EventEmitter();
|
|
10
|
+
onDelete() {
|
|
11
|
+
this.action.emit({ file: this.fileItem, type: "delete" });
|
|
12
|
+
}
|
|
13
|
+
onSendClick(type) {
|
|
14
|
+
this.action.emit({ file: this.fileItem, type });
|
|
15
|
+
}
|
|
16
|
+
getFileTypeClass(file) {
|
|
17
|
+
if (!file)
|
|
18
|
+
return "file-default";
|
|
19
|
+
const type = file.type || "";
|
|
20
|
+
if (type.startsWith("image/"))
|
|
21
|
+
return "file-image";
|
|
22
|
+
if (type === "application/pdf")
|
|
23
|
+
return "file-pdf";
|
|
24
|
+
return "file-default";
|
|
25
|
+
}
|
|
26
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GridViewComponent, isStandalone: true, selector: "app-grid-view", inputs: { fileItem: "fileItem" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"img-view\" [ngClass]=\"[fileItem.state, getFileTypeClass(fileItem.file)]\">\n <!-- Imagen o \u00EDcono -->\n\n <div class=\"preview-wrapper\">\n <div class=\"preview-container\">\n <img\n [ngClass]=\"fileItem.state\"\n class=\"preview\"\n [src]=\"fileItem?.previewUrl || './assets/utils/template-no-image.png'\"\n alt=\"preview\"\n />\n </div>\n\n <ng-container *ngIf=\"fileItem.state === 'complete'\">\n <div class=\"overlay-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_5064_216)\">\n <path\n d=\"M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z\"\n fill=\"#0ABB87\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_5064_216\">\n <rect width=\"12\" height=\"12\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n </ng-container>\n\n <div\n (click)=\"onSendClick('confirm-delete')\"\n *ngIf=\"fileItem.state !== 'confirm-delete'\"\n class=\"delete\"\n >\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z\"\n fill=\"white\"\n />\n <path\n d=\"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M22.25 10.4445H20.0972C19.936 9.66072 19.5096 8.95651 18.8897 8.45052C18.2699 7.94453 17.4945 7.6677 16.6944 7.66669H15.3055C14.5054 7.6677 13.73 7.94453 13.1102 8.45052C12.4904 8.95651 12.0639 9.66072 11.9027 10.4445H9.74996C9.56578 10.4445 9.38914 10.5176 9.25891 10.6479C9.12868 10.7781 9.05551 10.9547 9.05551 11.1389C9.05551 11.3231 9.12868 11.4997 9.25891 11.63C9.38914 11.7602 9.56578 11.8334 9.74996 11.8334H10.4444V20.8611C10.4455 21.7817 10.8117 22.6642 11.4626 23.3151C12.1135 23.9661 12.9961 24.3323 13.9166 24.3334H18.0833C19.0038 24.3323 19.8864 23.9661 20.5373 23.3151C21.1882 22.6642 21.5544 21.7817 21.5555 20.8611V11.8334H22.25C22.4341 11.8334 22.6108 11.7602 22.741 11.63C22.8712 11.4997 22.9444 11.3231 22.9444 11.1389C22.9444 10.9547 22.8712 10.7781 22.741 10.6479C22.6108 10.5176 22.4341 10.4445 22.25 10.4445ZM15.3055 9.05558H16.6944C17.1251 9.0561 17.5452 9.18986 17.8969 9.43852C18.2486 9.68718 18.5148 10.0386 18.659 10.4445H13.3409C13.4851 10.0386 13.7513 9.68718 14.103 9.43852C14.4547 9.18986 14.8748 9.0561 15.3055 9.05558ZM20.1666 20.8611C20.1666 21.4137 19.9471 21.9436 19.5564 22.3343C19.1657 22.725 18.6358 22.9445 18.0833 22.9445H13.9166C13.3641 22.9445 12.8342 22.725 12.4435 22.3343C12.0528 21.9436 11.8333 21.4137 11.8333 20.8611V11.8334H20.1666V20.8611Z\"\n fill=\"#DE6061\"\n />\n <path\n d=\"M14.6111 20.1662C14.7953 20.1662 14.9719 20.0931 15.1022 19.9628C15.2324 19.8326 15.3056 19.656 15.3056 19.4718V15.3051C15.3056 15.121 15.2324 14.9443 15.1022 14.8141C14.9719 14.6839 14.7953 14.6107 14.6111 14.6107C14.4269 14.6107 14.2503 14.6839 14.1201 14.8141C13.9898 14.9443 13.9167 15.121 13.9167 15.3051V19.4718C13.9167 19.656 13.9898 19.8326 14.1201 19.9628C14.2503 20.0931 14.4269 20.1662 14.6111 20.1662Z\"\n fill=\"#DE6061\"\n />\n <path\n d=\"M17.3888 20.1662C17.573 20.1662 17.7496 20.0931 17.8799 19.9628C18.0101 19.8326 18.0833 19.656 18.0833 19.4718V15.3051C18.0833 15.121 18.0101 14.9443 17.8799 14.8141C17.7496 14.6839 17.573 14.6107 17.3888 14.6107C17.2046 14.6107 17.028 14.6839 16.8978 14.8141C16.7675 14.9443 16.6944 15.121 16.6944 15.3051V19.4718C16.6944 19.656 16.7675 19.8326 16.8978 19.9628C17.028 20.0931 17.2046 20.1662 17.3888 20.1662Z\"\n fill=\"#DE6061\"\n />\n </svg>\n </div>\n </div>\n\n <div class=\"progress-bar-container\" *ngIf=\"fileItem.state === 'uploading'\">\n <div class=\"progress-bar\" [style.width.%]=\"fileItem.progress\"></div>\n </div>\n</div>\n", styles: [".preview-wrapper{position:relative;display:inline-block}.preview-wrapper .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.preview-wrapper .preview.uploading{filter:blur(2px)}.preview-wrapper .preview-container{border-radius:var(--Border-2);overflow:hidden;width:100%;height:100%}.preview-wrapper .overlay-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--White, #fff)}.preview-wrapper .delete{position:absolute;top:-12px;right:-9px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--White, #fff)}.preview-wrapper .delete:hover{cursor:pointer;transform:scale(1.1)}.img-view{display:flex;width:88px;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view .preview-wrapper{width:88px;height:88px}.img-view .overlay-icon{width:24px;height:24px;padding:6px}.img-view .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.img-view .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500);transition:width .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }] });
|
|
28
|
+
}
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridViewComponent, decorators: [{
|
|
30
|
+
type: Component,
|
|
31
|
+
args: [{ selector: "app-grid-view", standalone: true, imports: [CommonModule, IconComponent, TranslateModule], template: "<div class=\"img-view\" [ngClass]=\"[fileItem.state, getFileTypeClass(fileItem.file)]\">\n <!-- Imagen o \u00EDcono -->\n\n <div class=\"preview-wrapper\">\n <div class=\"preview-container\">\n <img\n [ngClass]=\"fileItem.state\"\n class=\"preview\"\n [src]=\"fileItem?.previewUrl || './assets/utils/template-no-image.png'\"\n alt=\"preview\"\n />\n </div>\n\n <ng-container *ngIf=\"fileItem.state === 'complete'\">\n <div class=\"overlay-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_5064_216)\">\n <path\n d=\"M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z\"\n fill=\"#0ABB87\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_5064_216\">\n <rect width=\"12\" height=\"12\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n </ng-container>\n\n <div\n (click)=\"onSendClick('confirm-delete')\"\n *ngIf=\"fileItem.state !== 'confirm-delete'\"\n class=\"delete\"\n >\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z\"\n fill=\"white\"\n />\n <path\n d=\"M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M22.25 10.4445H20.0972C19.936 9.66072 19.5096 8.95651 18.8897 8.45052C18.2699 7.94453 17.4945 7.6677 16.6944 7.66669H15.3055C14.5054 7.6677 13.73 7.94453 13.1102 8.45052C12.4904 8.95651 12.0639 9.66072 11.9027 10.4445H9.74996C9.56578 10.4445 9.38914 10.5176 9.25891 10.6479C9.12868 10.7781 9.05551 10.9547 9.05551 11.1389C9.05551 11.3231 9.12868 11.4997 9.25891 11.63C9.38914 11.7602 9.56578 11.8334 9.74996 11.8334H10.4444V20.8611C10.4455 21.7817 10.8117 22.6642 11.4626 23.3151C12.1135 23.9661 12.9961 24.3323 13.9166 24.3334H18.0833C19.0038 24.3323 19.8864 23.9661 20.5373 23.3151C21.1882 22.6642 21.5544 21.7817 21.5555 20.8611V11.8334H22.25C22.4341 11.8334 22.6108 11.7602 22.741 11.63C22.8712 11.4997 22.9444 11.3231 22.9444 11.1389C22.9444 10.9547 22.8712 10.7781 22.741 10.6479C22.6108 10.5176 22.4341 10.4445 22.25 10.4445ZM15.3055 9.05558H16.6944C17.1251 9.0561 17.5452 9.18986 17.8969 9.43852C18.2486 9.68718 18.5148 10.0386 18.659 10.4445H13.3409C13.4851 10.0386 13.7513 9.68718 14.103 9.43852C14.4547 9.18986 14.8748 9.0561 15.3055 9.05558ZM20.1666 20.8611C20.1666 21.4137 19.9471 21.9436 19.5564 22.3343C19.1657 22.725 18.6358 22.9445 18.0833 22.9445H13.9166C13.3641 22.9445 12.8342 22.725 12.4435 22.3343C12.0528 21.9436 11.8333 21.4137 11.8333 20.8611V11.8334H20.1666V20.8611Z\"\n fill=\"#DE6061\"\n />\n <path\n d=\"M14.6111 20.1662C14.7953 20.1662 14.9719 20.0931 15.1022 19.9628C15.2324 19.8326 15.3056 19.656 15.3056 19.4718V15.3051C15.3056 15.121 15.2324 14.9443 15.1022 14.8141C14.9719 14.6839 14.7953 14.6107 14.6111 14.6107C14.4269 14.6107 14.2503 14.6839 14.1201 14.8141C13.9898 14.9443 13.9167 15.121 13.9167 15.3051V19.4718C13.9167 19.656 13.9898 19.8326 14.1201 19.9628C14.2503 20.0931 14.4269 20.1662 14.6111 20.1662Z\"\n fill=\"#DE6061\"\n />\n <path\n d=\"M17.3888 20.1662C17.573 20.1662 17.7496 20.0931 17.8799 19.9628C18.0101 19.8326 18.0833 19.656 18.0833 19.4718V15.3051C18.0833 15.121 18.0101 14.9443 17.8799 14.8141C17.7496 14.6839 17.573 14.6107 17.3888 14.6107C17.2046 14.6107 17.028 14.6839 16.8978 14.8141C16.7675 14.9443 16.6944 15.121 16.6944 15.3051V19.4718C16.6944 19.656 16.7675 19.8326 16.8978 19.9628C17.028 20.0931 17.2046 20.1662 17.3888 20.1662Z\"\n fill=\"#DE6061\"\n />\n </svg>\n </div>\n </div>\n\n <div class=\"progress-bar-container\" *ngIf=\"fileItem.state === 'uploading'\">\n <div class=\"progress-bar\" [style.width.%]=\"fileItem.progress\"></div>\n </div>\n</div>\n", styles: [".preview-wrapper{position:relative;display:inline-block}.preview-wrapper .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.preview-wrapper .preview.uploading{filter:blur(2px)}.preview-wrapper .preview-container{border-radius:var(--Border-2);overflow:hidden;width:100%;height:100%}.preview-wrapper .overlay-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--White, #fff)}.preview-wrapper .delete{position:absolute;top:-12px;right:-9px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--White, #fff)}.preview-wrapper .delete:hover{cursor:pointer;transform:scale(1.1)}.img-view{display:flex;width:88px;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view .preview-wrapper{width:88px;height:88px}.img-view .overlay-icon{width:24px;height:24px;padding:6px}.img-view .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.img-view .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500);transition:width .3s ease}\n"] }]
|
|
32
|
+
}], propDecorators: { fileItem: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}], action: [{
|
|
35
|
+
type: Output
|
|
36
|
+
}] } });
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1maWxlLXVwbG9hZC9ncmlkLXZpZXcvZ3JpZC12aWV3LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1maWxlLXVwbG9hZC9ncmlkLXZpZXcvZ3JpZC12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQVN0RCxNQUFNLE9BQU8saUJBQWlCO0lBQ25CLFFBQVEsQ0FBWTtJQUNuQixNQUFNLEdBQUcsSUFBSSxZQUFZLEVBRy9CLENBQUM7SUFFTCxRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRUQsV0FBVyxDQUFDLElBQW1EO1FBQzdELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsSUFBUztRQUN4QixJQUFJLENBQUMsSUFBSTtZQUFFLE9BQU8sY0FBYyxDQUFDO1FBQ2pDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLElBQUksRUFBRSxDQUFDO1FBQzdCLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUM7WUFBRSxPQUFPLFlBQVksQ0FBQztRQUNuRCxJQUFJLElBQUksS0FBSyxpQkFBaUI7WUFBRSxPQUFPLFVBQVUsQ0FBQztRQUNsRCxPQUFPLGNBQWMsQ0FBQztJQUN4QixDQUFDO3dHQXJCVSxpQkFBaUI7NEZBQWpCLGlCQUFpQiwwSUNiOUIsbzNLQTZFQSw0ekNEcEVZLFlBQVksZ09BQWlCLGVBQWU7OzRGQUkzQyxpQkFBaUI7a0JBUDdCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsZUFBZSxDQUFDOzhCQUs5QyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IEZpbGVJdGVtIH0gZnJvbSBcIi4uLy4uLy4uL3V0aWxpdGllcy9pbnRlcmZhY2VzL3VpL3VwbG9hZC5tb2RlbFwiO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gXCIuLi8uLi9pY29uL2ljb24uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tIFwiQG5neC10cmFuc2xhdGUvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXBwLWdyaWQtdmlld1wiLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50LCBUcmFuc2xhdGVNb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogXCIuL2dyaWQtdmlldy5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vZ3JpZC12aWV3LmNvbXBvbmVudC5zY3NzXCJdLFxufSlcbmV4cG9ydCBjbGFzcyBHcmlkVmlld0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGZpbGVJdGVtITogRmlsZUl0ZW07XG4gIEBPdXRwdXQoKSBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPHtcbiAgICBmaWxlOiBGaWxlSXRlbTtcbiAgICB0eXBlOiBcImRlbGV0ZVwiIHwgXCJjb25maXJtLWRlbGV0ZVwiIHwgXCJjYW5jZWwtZGVsZXRlXCI7XG4gIH0+KCk7XG5cbiAgb25EZWxldGUoKTogdm9pZCB7XG4gICAgdGhpcy5hY3Rpb24uZW1pdCh7IGZpbGU6IHRoaXMuZmlsZUl0ZW0sIHR5cGU6IFwiZGVsZXRlXCIgfSk7XG4gIH1cblxuICBvblNlbmRDbGljayh0eXBlOiBcImRlbGV0ZVwiIHwgXCJjb25maXJtLWRlbGV0ZVwiIHwgXCJjYW5jZWwtZGVsZXRlXCIpOiB2b2lkIHtcbiAgICB0aGlzLmFjdGlvbi5lbWl0KHsgZmlsZTogdGhpcy5maWxlSXRlbSwgdHlwZSB9KTtcbiAgfVxuXG4gIGdldEZpbGVUeXBlQ2xhc3MoZmlsZTogYW55KTogc3RyaW5nIHtcbiAgICBpZiAoIWZpbGUpIHJldHVybiBcImZpbGUtZGVmYXVsdFwiO1xuICAgIGNvbnN0IHR5cGUgPSBmaWxlLnR5cGUgfHwgXCJcIjtcbiAgICBpZiAodHlwZS5zdGFydHNXaXRoKFwiaW1hZ2UvXCIpKSByZXR1cm4gXCJmaWxlLWltYWdlXCI7XG4gICAgaWYgKHR5cGUgPT09IFwiYXBwbGljYXRpb24vcGRmXCIpIHJldHVybiBcImZpbGUtcGRmXCI7XG4gICAgcmV0dXJuIFwiZmlsZS1kZWZhdWx0XCI7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJpbWctdmlld1wiIFtuZ0NsYXNzXT1cIltmaWxlSXRlbS5zdGF0ZSwgZ2V0RmlsZVR5cGVDbGFzcyhmaWxlSXRlbS5maWxlKV1cIj5cbiAgPCEtLSBJbWFnZW4gbyDDrWNvbm8gLS0+XG5cbiAgPGRpdiBjbGFzcz1cInByZXZpZXctd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJwcmV2aWV3LWNvbnRhaW5lclwiPlxuICAgICAgPGltZ1xuICAgICAgW25nQ2xhc3NdPVwiZmlsZUl0ZW0uc3RhdGVcIlxuICAgICAgY2xhc3M9XCJwcmV2aWV3XCJcbiAgICAgIFtzcmNdPVwiZmlsZUl0ZW0/LnByZXZpZXdVcmwgfHwgJy4vYXNzZXRzL3V0aWxzL3RlbXBsYXRlLW5vLWltYWdlLnBuZydcIlxuICAgICAgYWx0PVwicHJldmlld1wiXG4gICAgLz5cbiAgPC9kaXY+XG5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmlsZUl0ZW0uc3RhdGUgPT09ICdjb21wbGV0ZSdcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVybGF5LWljb25cIj5cbiAgICAgICAgPHN2Z1xuICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICAgIHdpZHRoPVwiMTJcIlxuICAgICAgICAgIGhlaWdodD1cIjEyXCJcbiAgICAgICAgICB2aWV3Qm94PVwiMCAwIDEyIDEyXCJcbiAgICAgICAgICBmaWxsPVwibm9uZVwiXG4gICAgICAgID5cbiAgICAgICAgICA8ZyBjbGlwLXBhdGg9XCJ1cmwoI2NsaXAwXzUwNjRfMjE2KVwiPlxuICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgZD1cIk0xMS4xNTk0IDIuMjE1NUw0LjI0OTkyIDkuMTI0NUM0LjIwMzQ3IDkuMTcxMTQgNC4xNDgyNiA5LjIwODE1IDQuMDg3NDcgOS4yMzM0QzQuMDI2NjggOS4yNTg2NSAzLjk2MTUgOS4yNzE2NSAzLjg5NTY3IDkuMjcxNjVDMy44Mjk4NSA5LjI3MTY1IDMuNzY0NjcgOS4yNTg2NSAzLjcwMzg4IDkuMjMzNEMzLjY0MzA4IDkuMjA4MTUgMy41ODc4OCA5LjE3MTE0IDMuNTQxNDIgOS4xMjQ1TDAuODY5NDIzIDYuNDVDMC44MjI5NjkgNi40MDMzNyAwLjc2Nzc2MiA2LjM2NjM2IDAuNzA2OTcgNi4zNDExMUMwLjY0NjE3OSA2LjMxNTg2IDAuNTgxIDYuMzAyODYgMC41MTUxNzMgNi4zMDI4NkMwLjQ0OTM0NiA2LjMwMjg2IDAuMzg0MTY3IDYuMzE1ODYgMC4zMjMzNzYgNi4zNDExMUMwLjI2MjU4NSA2LjM2NjM2IDAuMjA3Mzc4IDYuNDAzMzcgMC4xNjA5MjMgNi40NUMwLjExNDI4NSA2LjQ5NjQ2IDAuMDc3Mjc4NyA2LjU1MTY3IDAuMDUyMDI3OCA2LjYxMjQ2QzAuMDI2Nzc3IDYuNjczMjUgMC4wMTM3Nzg3IDYuNzM4NDMgMC4wMTM3Nzg3IDYuODA0MjVDMC4wMTM3Nzg3IDYuODcwMDggMC4wMjY3NzcgNi45MzUyNiAwLjA1MjAyNzggNi45OTYwNUMwLjA3NzI3ODcgNy4wNTY4NCAwLjExNDI4NSA3LjExMjA1IDAuMTYwOTIzIDcuMTU4NUwyLjgzMzkyIDkuODMxQzMuMTE1OSAxMC4xMTI1IDMuNDk4MDIgMTAuMjcwNSAzLjg5NjQyIDEwLjI3MDVDNC4yOTQ4MiAxMC4yNzA1IDQuNjc2OTUgMTAuMTEyNSA0Ljk1ODkyIDkuODMxTDExLjg2NzkgMi45MjM1QzExLjkxNDUgMi44NzcwNiAxMS45NTE0IDIuODIxODggMTEuOTc2NiAyLjc2MTE0QzEyLjAwMTggMi43MDAzOSAxMi4wMTQ4IDIuNjM1MjcgMTIuMDE0OCAyLjU2OTVDMTIuMDE0OCAyLjUwMzc0IDEyLjAwMTggMi40Mzg2MiAxMS45NzY2IDIuMzc3ODdDMTEuOTUxNCAyLjMxNzEzIDExLjkxNDUgMi4yNjE5NSAxMS44Njc5IDIuMjE1NUMxMS44MjE1IDIuMTY4ODcgMTEuNzY2MyAyLjEzMTg2IDExLjcwNTUgMi4xMDY2MUMxMS42NDQ3IDIuMDgxMzYgMTEuNTc5NSAyLjA2ODM2IDExLjUxMzcgMi4wNjgzNkMxMS40NDc4IDIuMDY4MzYgMTEuMzgyNyAyLjA4MTM2IDExLjMyMTkgMi4xMDY2MUMxMS4yNjExIDIuMTMxODYgMTEuMjA1OSAyLjE2ODg3IDExLjE1OTQgMi4yMTU1WlwiXG4gICAgICAgICAgICAgIGZpbGw9XCIjMEFCQjg3XCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9nPlxuICAgICAgICAgIDxkZWZzPlxuICAgICAgICAgICAgPGNsaXBQYXRoIGlkPVwiY2xpcDBfNTA2NF8yMTZcIj5cbiAgICAgICAgICAgICAgPHJlY3Qgd2lkdGg9XCIxMlwiIGhlaWdodD1cIjEyXCIgZmlsbD1cIndoaXRlXCIgLz5cbiAgICAgICAgICAgIDwvY2xpcFBhdGg+XG4gICAgICAgICAgPC9kZWZzPlxuICAgICAgICA8L3N2Zz5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPGRpdlxuICAgICAgKGNsaWNrKT1cIm9uU2VuZENsaWNrKCdjb25maXJtLWRlbGV0ZScpXCJcbiAgICAgICpuZ0lmPVwiZmlsZUl0ZW0uc3RhdGUgIT09ICdjb25maXJtLWRlbGV0ZSdcIlxuICAgICAgY2xhc3M9XCJkZWxldGVcIlxuICAgID5cbiAgICAgIDxzdmdcbiAgICAgICAgd2lkdGg9XCIzMlwiXG4gICAgICAgIGhlaWdodD1cIjMyXCJcbiAgICAgICAgdmlld0JveD1cIjAgMCAzMiAzMlwiXG4gICAgICAgIGZpbGw9XCJub25lXCJcbiAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgICA+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk04IDAuNUgyNEMyOC4xNDIxIDAuNSAzMS41IDMuODU3ODYgMzEuNSA4VjI0QzMxLjUgMjguMTQyMSAyOC4xNDIxIDMxLjUgMjQgMzEuNUg4QzMuODU3ODYgMzEuNSAwLjUgMjguMTQyMSAwLjUgMjRWOEMwLjUgMy44NTc4NiAzLjg1Nzg2IDAuNSA4IDAuNVpcIlxuICAgICAgICAgIGZpbGw9XCJ3aGl0ZVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxwYXRoXG4gICAgICAgICAgZD1cIk04IDAuNUgyNEMyOC4xNDIxIDAuNSAzMS41IDMuODU3ODYgMzEuNSA4VjI0QzMxLjUgMjguMTQyMSAyOC4xNDIxIDMxLjUgMjQgMzEuNUg4QzMuODU3ODYgMzEuNSAwLjUgMjguMTQyMSAwLjUgMjRWOEMwLjUgMy44NTc4NiAzLjg1Nzg2IDAuNSA4IDAuNVpcIlxuICAgICAgICAgIHN0cm9rZT1cIiNGN0Y4RkFcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMjIuMjUgMTAuNDQ0NUgyMC4wOTcyQzE5LjkzNiA5LjY2MDcyIDE5LjUwOTYgOC45NTY1MSAxOC44ODk3IDguNDUwNTJDMTguMjY5OSA3Ljk0NDUzIDE3LjQ5NDUgNy42Njc3IDE2LjY5NDQgNy42NjY2OUgxNS4zMDU1QzE0LjUwNTQgNy42Njc3IDEzLjczIDcuOTQ0NTMgMTMuMTEwMiA4LjQ1MDUyQzEyLjQ5MDQgOC45NTY1MSAxMi4wNjM5IDkuNjYwNzIgMTEuOTAyNyAxMC40NDQ1SDkuNzQ5OTZDOS41NjU3OCAxMC40NDQ1IDkuMzg5MTQgMTAuNTE3NiA5LjI1ODkxIDEwLjY0NzlDOS4xMjg2OCAxMC43NzgxIDkuMDU1NTEgMTAuOTU0NyA5LjA1NTUxIDExLjEzODlDOS4wNTU1MSAxMS4zMjMxIDkuMTI4NjggMTEuNDk5NyA5LjI1ODkxIDExLjYzQzkuMzg5MTQgMTEuNzYwMiA5LjU2NTc4IDExLjgzMzQgOS43NDk5NiAxMS44MzM0SDEwLjQ0NDRWMjAuODYxMUMxMC40NDU1IDIxLjc4MTcgMTAuODExNyAyMi42NjQyIDExLjQ2MjYgMjMuMzE1MUMxMi4xMTM1IDIzLjk2NjEgMTIuOTk2MSAyNC4zMzIzIDEzLjkxNjYgMjQuMzMzNEgxOC4wODMzQzE5LjAwMzggMjQuMzMyMyAxOS44ODY0IDIzLjk2NjEgMjAuNTM3MyAyMy4zMTUxQzIxLjE4ODIgMjIuNjY0MiAyMS41NTQ0IDIxLjc4MTcgMjEuNTU1NSAyMC44NjExVjExLjgzMzRIMjIuMjVDMjIuNDM0MSAxMS44MzM0IDIyLjYxMDggMTEuNzYwMiAyMi43NDEgMTEuNjNDMjIuODcxMiAxMS40OTk3IDIyLjk0NDQgMTEuMzIzMSAyMi45NDQ0IDExLjEzODlDMjIuOTQ0NCAxMC45NTQ3IDIyLjg3MTIgMTAuNzc4MSAyMi43NDEgMTAuNjQ3OUMyMi42MTA4IDEwLjUxNzYgMjIuNDM0MSAxMC40NDQ1IDIyLjI1IDEwLjQ0NDVaTTE1LjMwNTUgOS4wNTU1OEgxNi42OTQ0QzE3LjEyNTEgOS4wNTYxIDE3LjU0NTIgOS4xODk4NiAxNy44OTY5IDkuNDM4NTJDMTguMjQ4NiA5LjY4NzE4IDE4LjUxNDggMTAuMDM4NiAxOC42NTkgMTAuNDQ0NUgxMy4zNDA5QzEzLjQ4NTEgMTAuMDM4NiAxMy43NTEzIDkuNjg3MTggMTQuMTAzIDkuNDM4NTJDMTQuNDU0NyA5LjE4OTg2IDE0Ljg3NDggOS4wNTYxIDE1LjMwNTUgOS4wNTU1OFpNMjAuMTY2NiAyMC44NjExQzIwLjE2NjYgMjEuNDEzNyAxOS45NDcxIDIxLjk0MzYgMTkuNTU2NCAyMi4zMzQzQzE5LjE2NTcgMjIuNzI1IDE4LjYzNTggMjIuOTQ0NSAxOC4wODMzIDIyLjk0NDVIMTMuOTE2NkMxMy4zNjQxIDIyLjk0NDUgMTIuODM0MiAyMi43MjUgMTIuNDQzNSAyMi4zMzQzQzEyLjA1MjggMjEuOTQzNiAxMS44MzMzIDIxLjQxMzcgMTEuODMzMyAyMC44NjExVjExLjgzMzRIMjAuMTY2NlYyMC44NjExWlwiXG4gICAgICAgICAgZmlsbD1cIiNERTYwNjFcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMTQuNjExMSAyMC4xNjYyQzE0Ljc5NTMgMjAuMTY2MiAxNC45NzE5IDIwLjA5MzEgMTUuMTAyMiAxOS45NjI4QzE1LjIzMjQgMTkuODMyNiAxNS4zMDU2IDE5LjY1NiAxNS4zMDU2IDE5LjQ3MThWMTUuMzA1MUMxNS4zMDU2IDE1LjEyMSAxNS4yMzI0IDE0Ljk0NDMgMTUuMTAyMiAxNC44MTQxQzE0Ljk3MTkgMTQuNjgzOSAxNC43OTUzIDE0LjYxMDcgMTQuNjExMSAxNC42MTA3QzE0LjQyNjkgMTQuNjEwNyAxNC4yNTAzIDE0LjY4MzkgMTQuMTIwMSAxNC44MTQxQzEzLjk4OTggMTQuOTQ0MyAxMy45MTY3IDE1LjEyMSAxMy45MTY3IDE1LjMwNTFWMTkuNDcxOEMxMy45MTY3IDE5LjY1NiAxMy45ODk4IDE5LjgzMjYgMTQuMTIwMSAxOS45NjI4QzE0LjI1MDMgMjAuMDkzMSAxNC40MjY5IDIwLjE2NjIgMTQuNjExMSAyMC4xNjYyWlwiXG4gICAgICAgICAgZmlsbD1cIiNERTYwNjFcIlxuICAgICAgICAvPlxuICAgICAgICA8cGF0aFxuICAgICAgICAgIGQ9XCJNMTcuMzg4OCAyMC4xNjYyQzE3LjU3MyAyMC4xNjYyIDE3Ljc0OTYgMjAuMDkzMSAxNy44Nzk5IDE5Ljk2MjhDMTguMDEwMSAxOS44MzI2IDE4LjA4MzMgMTkuNjU2IDE4LjA4MzMgMTkuNDcxOFYxNS4zMDUxQzE4LjA4MzMgMTUuMTIxIDE4LjAxMDEgMTQuOTQ0MyAxNy44Nzk5IDE0LjgxNDFDMTcuNzQ5NiAxNC42ODM5IDE3LjU3MyAxNC42MTA3IDE3LjM4ODggMTQuNjEwN0MxNy4yMDQ2IDE0LjYxMDcgMTcuMDI4IDE0LjY4MzkgMTYuODk3OCAxNC44MTQxQzE2Ljc2NzUgMTQuOTQ0MyAxNi42OTQ0IDE1LjEyMSAxNi42OTQ0IDE1LjMwNTFWMTkuNDcxOEMxNi42OTQ0IDE5LjY1NiAxNi43Njc1IDE5LjgzMjYgMTYuODk3OCAxOS45NjI4QzE3LjAyOCAyMC4wOTMxIDE3LjIwNDYgMjAuMTY2MiAxNy4zODg4IDIwLjE2NjJaXCJcbiAgICAgICAgICBmaWxsPVwiI0RFNjA2MVwiXG4gICAgICAgIC8+XG4gICAgICA8L3N2Zz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWJhci1jb250YWluZXJcIiAqbmdJZj1cImZpbGVJdGVtLnN0YXRlID09PSAndXBsb2FkaW5nJ1wiPlxuICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1iYXJcIiBbc3R5bGUud2lkdGguJV09XCJmaWxlSXRlbS5wcm9ncmVzc1wiPjwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
package/dist/esm2022/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.mjs
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { IconComponent } from '../icon/icon.component';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
export class DropiIlustrationIconComponent {
|
|
7
|
+
type = 'dropi';
|
|
8
|
+
state = 'default';
|
|
9
|
+
stateInsignia = 'verified';
|
|
10
|
+
tagProduct = false;
|
|
11
|
+
iconPath = null;
|
|
12
|
+
get imageSrc() {
|
|
13
|
+
return `assets/icons/ilustration/${this.state}.svg`;
|
|
14
|
+
}
|
|
15
|
+
onImageError(event) {
|
|
16
|
+
const target = event.target;
|
|
17
|
+
target.src = 'assets/icons/ilustration/default.svg';
|
|
18
|
+
}
|
|
19
|
+
getIconName(state) {
|
|
20
|
+
const map = {
|
|
21
|
+
success: 'Check-circle',
|
|
22
|
+
error: 'Cross-circle',
|
|
23
|
+
info: 'Info',
|
|
24
|
+
warning: 'Info', // mismo icono para warning e info
|
|
25
|
+
};
|
|
26
|
+
return map[state] || 'Info';
|
|
27
|
+
}
|
|
28
|
+
insigniaIcons = {
|
|
29
|
+
verified: 'assets/icons/ilustration/verified-new.svg',
|
|
30
|
+
premium: 'assets/icons/ilustration/premium-new.svg',
|
|
31
|
+
exclusive: 'assets/icons/ilustration/exclusive.svg',
|
|
32
|
+
};
|
|
33
|
+
ngOnChanges(changes) {
|
|
34
|
+
if (this.type === 'insignia') {
|
|
35
|
+
const icon = this.insigniaIcons[this.stateInsignia];
|
|
36
|
+
if (icon) {
|
|
37
|
+
this.iconPath = icon;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
this.iconPath = null;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiIlustrationIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiIlustrationIconComponent, isStandalone: true, selector: "dropi-ilustration-icon", inputs: { type: "type", state: "state", stateInsignia: "stateInsignia", tagProduct: "tagProduct" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropi-ilustration\">\n <ng-container *ngIf=\"type === 'dropi'\">\n <figure class=\"dropi-ilustration__image\">\n <img [src]=\"imageSrc\" [alt]=\"state\" (error)=\"onImageError($event)\" />\n </figure>\n </ng-container>\n\n <ng-container *ngIf=\"type === 'mb'\">\n <figure class=\"dropi-ilustration__image-mb\" [ngClass]=\"[state]\">\n <app-icon\n *ngIf=\"state === 'success' || state === 'error' || state === 'info' || state === 'warning'\"\n [name]=\"getIconName(state)\"\n width=\"24px\"\n height=\"24px\"\n color=\"Neutral-White\"\n ></app-icon>\n </figure>\n </ng-container>\n\n <ng-container *ngIf=\"type === 'insignia'\">\n <figure\n [ngClass]=\"{\n 'dropi-ilustration-insignia-tag': tagProduct,\n 'dropi-ilustration-insignia': !tagProduct\n }\"\n >\n <img [src]=\"iconPath\" alt=\"insignia\" />\n <p\n class=\"dropi-ilustration-insignia-tag__tag dropi-ilustration-insignia-tag__tag--{{\n stateInsignia\n }}\"\n *ngIf=\"tagProduct\"\n >\n <span class=\"Caption-S\">{{ stateInsignia }}</span>\n </p>\n </figure>\n </ng-container>\n</div>\n", styles: [".dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500)}.dropi-ilustration__image-mb.warning{background-size:contain;border-radius:0}.dropi-ilustration-insignia{margin:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:28px;width:auto}.dropi-ilustration-insignia-tag__tag{border-radius:32px;color:var(--Neutral-White);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.dropi-ilustration-insignia-tag__tag span{color:var(--Neutral-White);padding:4px 8px 4px 18px}.dropi-ilustration-insignia-tag__tag--verified{background:linear-gradient(90deg,#ffc10d 41.3%,#ff6102 112.32%)}.dropi-ilustration-insignia-tag__tag--premium{background:linear-gradient(90deg,#ff6102 56.52%,#ffc10d 107.25%)}.dropi-ilustration-insignia-tag__tag--exclusive{background:linear-gradient(90deg,var(--Gray-900, #0e111a) 26.09%,#ff6102 116.67%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
|
|
46
|
+
}
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiIlustrationIconComponent, decorators: [{
|
|
48
|
+
type: Component,
|
|
49
|
+
args: [{ selector: 'dropi-ilustration-icon', standalone: true, imports: [CommonModule, IconComponent], template: "<div class=\"dropi-ilustration\">\n <ng-container *ngIf=\"type === 'dropi'\">\n <figure class=\"dropi-ilustration__image\">\n <img [src]=\"imageSrc\" [alt]=\"state\" (error)=\"onImageError($event)\" />\n </figure>\n </ng-container>\n\n <ng-container *ngIf=\"type === 'mb'\">\n <figure class=\"dropi-ilustration__image-mb\" [ngClass]=\"[state]\">\n <app-icon\n *ngIf=\"state === 'success' || state === 'error' || state === 'info' || state === 'warning'\"\n [name]=\"getIconName(state)\"\n width=\"24px\"\n height=\"24px\"\n color=\"Neutral-White\"\n ></app-icon>\n </figure>\n </ng-container>\n\n <ng-container *ngIf=\"type === 'insignia'\">\n <figure\n [ngClass]=\"{\n 'dropi-ilustration-insignia-tag': tagProduct,\n 'dropi-ilustration-insignia': !tagProduct\n }\"\n >\n <img [src]=\"iconPath\" alt=\"insignia\" />\n <p\n class=\"dropi-ilustration-insignia-tag__tag dropi-ilustration-insignia-tag__tag--{{\n stateInsignia\n }}\"\n *ngIf=\"tagProduct\"\n >\n <span class=\"Caption-S\">{{ stateInsignia }}</span>\n </p>\n </figure>\n </ng-container>\n</div>\n", styles: [".dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500)}.dropi-ilustration__image-mb.warning{background-size:contain;border-radius:0}.dropi-ilustration-insignia{margin:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:28px;width:auto}.dropi-ilustration-insignia-tag__tag{border-radius:32px;color:var(--Neutral-White);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.dropi-ilustration-insignia-tag__tag span{color:var(--Neutral-White);padding:4px 8px 4px 18px}.dropi-ilustration-insignia-tag__tag--verified{background:linear-gradient(90deg,#ffc10d 41.3%,#ff6102 112.32%)}.dropi-ilustration-insignia-tag__tag--premium{background:linear-gradient(90deg,#ff6102 56.52%,#ffc10d 107.25%)}.dropi-ilustration-insignia-tag__tag--exclusive{background:linear-gradient(90deg,var(--Gray-900, #0e111a) 26.09%,#ff6102 116.67%)}\n"] }]
|
|
50
|
+
}], propDecorators: { type: [{
|
|
51
|
+
type: Input
|
|
52
|
+
}], state: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}], stateInsignia: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], tagProduct: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}] } });
|
|
59
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktaWx1c3RyYXRpb24taWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvZHJvcGktaWx1c3RyYXRpb24taWNvbi9kcm9waS1pbHVzdHJhdGlvbi1pY29uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1pbHVzdHJhdGlvbi1pY29uL2Ryb3BpLWlsdXN0cmF0aW9uLWljb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQXFCdkQsTUFBTSxPQUFPLDZCQUE2QjtJQUMvQixJQUFJLEdBQW9CLE9BQU8sQ0FBQztJQUNoQyxLQUFLLEdBQXFCLFNBQVMsQ0FBQztJQUNwQyxhQUFhLEdBQWtCLFVBQVUsQ0FBQztJQUMxQyxVQUFVLEdBQVksS0FBSyxDQUFDO0lBRTlCLFFBQVEsR0FBa0IsSUFBSSxDQUFDO0lBRXRDLElBQUksUUFBUTtRQUNWLE9BQU8sNEJBQTRCLElBQUksQ0FBQyxLQUFLLE1BQU0sQ0FBQztJQUN0RCxDQUFDO0lBQ0QsWUFBWSxDQUFDLEtBQVk7UUFDdkIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQTBCLENBQUM7UUFDaEQsTUFBTSxDQUFDLEdBQUcsR0FBRyxzQ0FBc0MsQ0FBQztJQUN0RCxDQUFDO0lBQ0QsV0FBVyxDQUFDLEtBQXVCO1FBQ2pDLE1BQU0sR0FBRyxHQUFHO1lBQ1YsT0FBTyxFQUFFLGNBQWM7WUFDdkIsS0FBSyxFQUFFLGNBQWM7WUFDckIsSUFBSSxFQUFFLE1BQU07WUFDWixPQUFPLEVBQUUsTUFBTSxFQUFFLGtDQUFrQztTQUNwRCxDQUFDO1FBQ0YsT0FBTyxHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksTUFBTSxDQUFDO0lBQzlCLENBQUM7SUFFZ0IsYUFBYSxHQUFrQztRQUM5RCxRQUFRLEVBQUUsMkNBQTJDO1FBQ3JELE9BQU8sRUFBRSwwQ0FBMEM7UUFDbkQsU0FBUyxFQUFFLHdDQUF3QztLQUNwRCxDQUFDO0lBRUYsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxVQUFVLEVBQUUsQ0FBQztZQUM3QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUNwRCxJQUFJLElBQUksRUFBRSxDQUFDO2dCQUNULElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ3ZCLENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztZQUN2QixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7d0dBeENVLDZCQUE2Qjs0RkFBN0IsNkJBQTZCLDJNQ3ZCMUMsaXNDQXNDQSw0d0NEbkJZLFlBQVksaU9BQUUsYUFBYTs7NEZBSTFCLDZCQUE2QjtrQkFQekMsU0FBUzsrQkFDRSx3QkFBd0IsY0FDdEIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGFBQWEsQ0FBQzs4QkFLN0IsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuXG50eXBlIElsdXN0cmF0aW9uVHlwZSA9ICdkcm9waScgfCAnbWInIHwgJ2luc2lnbmlhJztcbnR5cGUgSWx1c3RyYXRpb25TdGF0ZSA9XG4gIHwgJ3N1Y2Nlc3MnXG4gIHwgJ2Vycm9yJ1xuICB8ICd3YXJuaW5nJ1xuICB8ICdpbmZvJ1xuICB8ICdkZWZhdWx0J1xuICB8ICdsb2FkaW5nJ1xuICB8ICdzb3JyeSdcbiAgfCAnbG92ZSc7XG50eXBlIEluc2lnbmlhU3RhdGUgPSAndmVyaWZpZWQnIHwgJ3ByZW1pdW0nIHwgJ2V4Y2x1c2l2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Ryb3BpLWlsdXN0cmF0aW9uLWljb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3BpLWlsdXN0cmF0aW9uLWljb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9waS1pbHVzdHJhdGlvbi1pY29uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpSWx1c3RyYXRpb25JY29uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdHlwZTogSWx1c3RyYXRpb25UeXBlID0gJ2Ryb3BpJztcbiAgQElucHV0KCkgc3RhdGU6IElsdXN0cmF0aW9uU3RhdGUgPSAnZGVmYXVsdCc7XG4gIEBJbnB1dCgpIHN0YXRlSW5zaWduaWE6IEluc2lnbmlhU3RhdGUgPSAndmVyaWZpZWQnO1xuICBASW5wdXQoKSB0YWdQcm9kdWN0OiBib29sZWFuID0gZmFsc2U7XG5cbiAgcHVibGljIGljb25QYXRoOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcblxuICBnZXQgaW1hZ2VTcmMoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYGFzc2V0cy9pY29ucy9pbHVzdHJhdGlvbi8ke3RoaXMuc3RhdGV9LnN2Z2A7XG4gIH1cbiAgb25JbWFnZUVycm9yKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MSW1hZ2VFbGVtZW50O1xuICAgIHRhcmdldC5zcmMgPSAnYXNzZXRzL2ljb25zL2lsdXN0cmF0aW9uL2RlZmF1bHQuc3ZnJztcbiAgfVxuICBnZXRJY29uTmFtZShzdGF0ZTogSWx1c3RyYXRpb25TdGF0ZSk6IHN0cmluZyB7XG4gICAgY29uc3QgbWFwID0ge1xuICAgICAgc3VjY2VzczogJ0NoZWNrLWNpcmNsZScsXG4gICAgICBlcnJvcjogJ0Nyb3NzLWNpcmNsZScsXG4gICAgICBpbmZvOiAnSW5mbycsXG4gICAgICB3YXJuaW5nOiAnSW5mbycsIC8vIG1pc21vIGljb25vIHBhcmEgd2FybmluZyBlIGluZm9cbiAgICB9O1xuICAgIHJldHVybiBtYXBbc3RhdGVdIHx8ICdJbmZvJztcbiAgfVxuXG4gIHByaXZhdGUgcmVhZG9ubHkgaW5zaWduaWFJY29uczogUmVjb3JkPEluc2lnbmlhU3RhdGUsIHN0cmluZz4gPSB7XG4gICAgdmVyaWZpZWQ6ICdhc3NldHMvaWNvbnMvaWx1c3RyYXRpb24vdmVyaWZpZWQtbmV3LnN2ZycsXG4gICAgcHJlbWl1bTogJ2Fzc2V0cy9pY29ucy9pbHVzdHJhdGlvbi9wcmVtaXVtLW5ldy5zdmcnLFxuICAgIGV4Y2x1c2l2ZTogJ2Fzc2V0cy9pY29ucy9pbHVzdHJhdGlvbi9leGNsdXNpdmUuc3ZnJyxcbiAgfTtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKHRoaXMudHlwZSA9PT0gJ2luc2lnbmlhJykge1xuICAgICAgY29uc3QgaWNvbiA9IHRoaXMuaW5zaWduaWFJY29uc1t0aGlzLnN0YXRlSW5zaWduaWFdO1xuICAgICAgaWYgKGljb24pIHtcbiAgICAgICAgdGhpcy5pY29uUGF0aCA9IGljb247XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmljb25QYXRoID0gbnVsbDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJkcm9waS1pbHVzdHJhdGlvblwiPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidHlwZSA9PT0gJ2Ryb3BpJ1wiPlxuICAgIDxmaWd1cmUgY2xhc3M9XCJkcm9waS1pbHVzdHJhdGlvbl9faW1hZ2VcIj5cbiAgICAgIDxpbWcgW3NyY109XCJpbWFnZVNyY1wiIFthbHRdPVwic3RhdGVcIiAoZXJyb3IpPVwib25JbWFnZUVycm9yKCRldmVudClcIiAvPlxuICAgIDwvZmlndXJlPlxuICA8L25nLWNvbnRhaW5lcj5cblxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidHlwZSA9PT0gJ21iJ1wiPlxuICAgIDxmaWd1cmUgY2xhc3M9XCJkcm9waS1pbHVzdHJhdGlvbl9faW1hZ2UtbWJcIiBbbmdDbGFzc109XCJbc3RhdGVdXCI+XG4gICAgICA8YXBwLWljb25cbiAgICAgICAgKm5nSWY9XCJzdGF0ZSA9PT0gJ3N1Y2Nlc3MnIHx8IHN0YXRlID09PSAnZXJyb3InIHx8IHN0YXRlID09PSAnaW5mbycgfHwgc3RhdGUgPT09ICd3YXJuaW5nJ1wiXG4gICAgICAgIFtuYW1lXT1cImdldEljb25OYW1lKHN0YXRlKVwiXG4gICAgICAgIHdpZHRoPVwiMjRweFwiXG4gICAgICAgIGhlaWdodD1cIjI0cHhcIlxuICAgICAgICBjb2xvcj1cIk5ldXRyYWwtV2hpdGVcIlxuICAgICAgPjwvYXBwLWljb24+XG4gICAgPC9maWd1cmU+XG4gIDwvbmctY29udGFpbmVyPlxuXG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJ0eXBlID09PSAnaW5zaWduaWEnXCI+XG4gICAgPGZpZ3VyZVxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnZHJvcGktaWx1c3RyYXRpb24taW5zaWduaWEtdGFnJzogdGFnUHJvZHVjdCxcbiAgICAgICAgJ2Ryb3BpLWlsdXN0cmF0aW9uLWluc2lnbmlhJzogIXRhZ1Byb2R1Y3RcbiAgICAgIH1cIlxuICAgID5cbiAgICAgIDxpbWcgW3NyY109XCJpY29uUGF0aFwiIGFsdD1cImluc2lnbmlhXCIgLz5cbiAgICAgIDxwXG4gICAgICAgIGNsYXNzPVwiZHJvcGktaWx1c3RyYXRpb24taW5zaWduaWEtdGFnX190YWcgZHJvcGktaWx1c3RyYXRpb24taW5zaWduaWEtdGFnX190YWctLXt7XG4gICAgICAgICAgc3RhdGVJbnNpZ25pYVxuICAgICAgICB9fVwiXG4gICAgICAgICpuZ0lmPVwidGFnUHJvZHVjdFwiXG4gICAgICA+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiQ2FwdGlvbi1TXCI+e3sgc3RhdGVJbnNpZ25pYSB9fTwvc3Bhbj5cbiAgICAgIDwvcD5cbiAgICA8L2ZpZ3VyZT5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Component, Inject, CUSTOM_ELEMENTS_SCHEMA, } from "@angular/core";
|
|
2
|
+
import { CommonModule } from "@angular/common";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
export class DropiImageOverlayComponent {
|
|
6
|
+
imageOverlayService;
|
|
7
|
+
settingsService;
|
|
8
|
+
constructor(imageOverlayService, settingsService) {
|
|
9
|
+
this.imageOverlayService = imageOverlayService;
|
|
10
|
+
this.settingsService = settingsService;
|
|
11
|
+
}
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiImageOverlayComponent, deps: [{ token: "ImageOverlayService" }, { token: "SettingsService" }], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiImageOverlayComponent, isStandalone: true, selector: "app-dropi-image-overlay", ngImport: i0, template: '<div *ngIf="settingsService.brand$ | async">Overlay</div>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiImageOverlayComponent, decorators: [{
|
|
16
|
+
type: Component,
|
|
17
|
+
args: [{
|
|
18
|
+
selector: "app-dropi-image-overlay",
|
|
19
|
+
standalone: true,
|
|
20
|
+
imports: [CommonModule],
|
|
21
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
22
|
+
template: '<div *ngIf="settingsService.brand$ | async">Overlay</div>',
|
|
23
|
+
}]
|
|
24
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
25
|
+
type: Inject,
|
|
26
|
+
args: ["ImageOverlayService"]
|
|
27
|
+
}] }, { type: undefined, decorators: [{
|
|
28
|
+
type: Inject,
|
|
29
|
+
args: ["SettingsService"]
|
|
30
|
+
}] }] });
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktaW1hZ2Utb3ZlcmxheS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvZHJvcGktaW1hZ2Utb3ZlcmxheS9kcm9waS1pbWFnZS1vdmVybGF5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULE1BQU0sRUFDTixzQkFBc0IsR0FDdkIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFTL0MsTUFBTSxPQUFPLDBCQUEwQjtJQUVhO0lBQ2Q7SUFGcEMsWUFDa0QsbUJBQXdCLEVBQ3RDLGVBQW9CO1FBRE4sd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFLO1FBQ3RDLG9CQUFlLEdBQWYsZUFBZSxDQUFLO0lBQ3JELENBQUM7d0dBSk8sMEJBQTBCLGtCQUUzQixxQkFBcUIsYUFDckIsaUJBQWlCOzRGQUhoQiwwQkFBMEIsbUZBRjNCLDJEQUEyRCwyREFGM0QsWUFBWTs7NEZBSVgsMEJBQTBCO2tCQVB0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLE9BQU8sRUFBRSxDQUFDLHNCQUFzQixDQUFDO29CQUNqQyxRQUFRLEVBQUUsMkRBQTJEO2lCQUN0RTs7MEJBR0ksTUFBTTsyQkFBQyxxQkFBcUI7OzBCQUM1QixNQUFNOzJCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEluamVjdCxcbiAgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcImFwcC1kcm9waS1pbWFnZS1vdmVybGF5XCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBzY2hlbWFzOiBbQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQV0sXG4gIHRlbXBsYXRlOiAnPGRpdiAqbmdJZj1cInNldHRpbmdzU2VydmljZS5icmFuZCQgfCBhc3luY1wiPk92ZXJsYXk8L2Rpdj4nLFxufSlcbmV4cG9ydCBjbGFzcyBEcm9waUltYWdlT3ZlcmxheUNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBJbmplY3QoXCJJbWFnZU92ZXJsYXlTZXJ2aWNlXCIpIHByaXZhdGUgcmVhZG9ubHkgaW1hZ2VPdmVybGF5U2VydmljZTogYW55LFxuICAgIEBJbmplY3QoXCJTZXR0aW5nc1NlcnZpY2VcIikgcHVibGljIHNldHRpbmdzU2VydmljZTogYW55LFxuICApIHt9XG59XG4iXX0=
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { CountryFlagsComponent } from '../country-flags/country-flags.component';
|
|
4
|
+
import { IconComponent } from '../icon/icon.component';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@angular/common";
|
|
7
|
+
export class DropiLanguagesSelectorComponent {
|
|
8
|
+
languages = [];
|
|
9
|
+
selectedLang;
|
|
10
|
+
languageChange = new EventEmitter();
|
|
11
|
+
dropdownOpen = false;
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
if (!this.selectedLang && this.languages.length > 0) {
|
|
14
|
+
this.selectedLang = this.languages[0];
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
toggleDropdown() {
|
|
18
|
+
this.dropdownOpen = !this.dropdownOpen;
|
|
19
|
+
}
|
|
20
|
+
selectLanguage(lang) {
|
|
21
|
+
this.selectedLang = lang;
|
|
22
|
+
this.languageChange.emit(lang);
|
|
23
|
+
this.dropdownOpen = false;
|
|
24
|
+
}
|
|
25
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiLanguagesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiLanguagesSelectorComponent, isStandalone: true, selector: "dropi-languages-selector", inputs: { languages: "languages", selectedLang: "selectedLang" }, outputs: { languageChange: "languageChange" }, ngImport: i0, template: "<div class=\"custom-dropdown\" [class.open]=\"dropdownOpen\">\n <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n <app-country-flags [country]=\"selectedLang.flag\" [style]=\"'rectangle'\"></app-country-flags>\n <span class=\"Body-S-Regular\">{{ selectedLang.label }}</span>\n <app-icon name=\"Caret-down\" width=\"16px\" height=\"16px\" color=\"Gray-Gray-500\"></app-icon>\n </div>\n <ul [ngClass]=\"{ 'dropdown-options': true, 'dropdown-open': dropdownOpen }\">\n <li\n *ngFor=\"let lang of languages\"\n (click)=\"selectLanguage(lang)\"\n [class.active]=\"lang.code === selectedLang.code\"\n >\n <app-country-flags [country]=\"lang.flag\" [style]=\"'rectangle'\"></app-country-flags>\n <span class=\"Body-S-Regular\">{{ lang.label }}</span>\n </li>\n </ul>\n</div>\n", styles: [".custom-dropdown{position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:999;top:20px;right:70px}@media screen and (max-width: 720px){.custom-dropdown{top:10px;right:10px}}.custom-dropdown.open app-icon{transform:rotate(180deg)}.custom-dropdown .selected-option{display:flex;height:38px;padding:var(--Size-2) var(--Size-3);align-items:center;gap:var(--Size-2);border-radius:4px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White)}.custom-dropdown .selected-option .arrow{margin-left:auto}@media screen and (max-width: 720px){.custom-dropdown .selected-option span{display:none}}.custom-dropdown .dropdown-options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:6px;margin-top:4px;z-index:1000;max-height:200px;overflow-y:auto;padding:0;height:0;opacity:0;visibility:hidden;interpolate-size:allow-keywords;transition:all .3s ease-in-out;will-change:auto}.custom-dropdown .dropdown-options.dropdown-open{height:auto;opacity:1;visibility:visible}.custom-dropdown .dropdown-options li{list-style:none;padding:8px 12px;display:flex;align-items:center;cursor:pointer}.custom-dropdown .dropdown-options li:hover,.custom-dropdown .dropdown-options li.active{background:#f5f5f5}.custom-dropdown .dropdown-options span{margin-left:8px}@media screen and (max-width: 720px){.custom-dropdown .dropdown-options span{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CountryFlagsComponent, selector: "app-country-flags", inputs: ["country", "width", "height", "style"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
|
|
27
|
+
}
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiLanguagesSelectorComponent, decorators: [{
|
|
29
|
+
type: Component,
|
|
30
|
+
args: [{ selector: 'dropi-languages-selector', standalone: true, imports: [CommonModule, CountryFlagsComponent, IconComponent], template: "<div class=\"custom-dropdown\" [class.open]=\"dropdownOpen\">\n <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n <app-country-flags [country]=\"selectedLang.flag\" [style]=\"'rectangle'\"></app-country-flags>\n <span class=\"Body-S-Regular\">{{ selectedLang.label }}</span>\n <app-icon name=\"Caret-down\" width=\"16px\" height=\"16px\" color=\"Gray-Gray-500\"></app-icon>\n </div>\n <ul [ngClass]=\"{ 'dropdown-options': true, 'dropdown-open': dropdownOpen }\">\n <li\n *ngFor=\"let lang of languages\"\n (click)=\"selectLanguage(lang)\"\n [class.active]=\"lang.code === selectedLang.code\"\n >\n <app-country-flags [country]=\"lang.flag\" [style]=\"'rectangle'\"></app-country-flags>\n <span class=\"Body-S-Regular\">{{ lang.label }}</span>\n </li>\n </ul>\n</div>\n", styles: [".custom-dropdown{position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:999;top:20px;right:70px}@media screen and (max-width: 720px){.custom-dropdown{top:10px;right:10px}}.custom-dropdown.open app-icon{transform:rotate(180deg)}.custom-dropdown .selected-option{display:flex;height:38px;padding:var(--Size-2) var(--Size-3);align-items:center;gap:var(--Size-2);border-radius:4px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White)}.custom-dropdown .selected-option .arrow{margin-left:auto}@media screen and (max-width: 720px){.custom-dropdown .selected-option span{display:none}}.custom-dropdown .dropdown-options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:6px;margin-top:4px;z-index:1000;max-height:200px;overflow-y:auto;padding:0;height:0;opacity:0;visibility:hidden;interpolate-size:allow-keywords;transition:all .3s ease-in-out;will-change:auto}.custom-dropdown .dropdown-options.dropdown-open{height:auto;opacity:1;visibility:visible}.custom-dropdown .dropdown-options li{list-style:none;padding:8px 12px;display:flex;align-items:center;cursor:pointer}.custom-dropdown .dropdown-options li:hover,.custom-dropdown .dropdown-options li.active{background:#f5f5f5}.custom-dropdown .dropdown-options span{margin-left:8px}@media screen and (max-width: 720px){.custom-dropdown .dropdown-options span{display:none}}\n"] }]
|
|
31
|
+
}], propDecorators: { languages: [{
|
|
32
|
+
type: Input
|
|
33
|
+
}], selectedLang: [{
|
|
34
|
+
type: Input
|
|
35
|
+
}], languageChange: [{
|
|
36
|
+
type: Output
|
|
37
|
+
}] } });
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktbGFuZ3VhZ2VzLXNlbGVjdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1sYW5ndWFnZXMtc2VsZWN0b3IvZHJvcGktbGFuZ3VhZ2VzLXNlbGVjdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1sYW5ndWFnZXMtc2VsZWN0b3IvZHJvcGktbGFuZ3VhZ2VzLXNlbGVjdG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBZXZELE1BQU0sT0FBTywrQkFBK0I7SUFDakMsU0FBUyxHQUFxQixFQUFFLENBQUM7SUFDakMsWUFBWSxDQUFpQjtJQUM1QixjQUFjLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7SUFFOUQsWUFBWSxHQUFHLEtBQUssQ0FBQztJQUVyQixRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDcEQsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3hDLENBQUM7SUFDSCxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQ3pDLENBQUM7SUFFRCxjQUFjLENBQUMsSUFBb0I7UUFDakMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDekIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDL0IsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDNUIsQ0FBQzt3R0FyQlUsK0JBQStCOzRGQUEvQiwrQkFBK0IscU1DbEI1QywrekJBaUJBLDA3Q0RIWSxZQUFZLDBQQUFFLHFCQUFxQiwrR0FBRSxhQUFhOzs0RkFJakQsK0JBQStCO2tCQVAzQyxTQUFTOytCQUNFLDBCQUEwQixjQUN4QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUscUJBQXFCLEVBQUUsYUFBYSxDQUFDOzhCQUtwRCxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksY0FBYztzQkFBdkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb3VudHJ5RmxhZ3NDb21wb25lbnQgfSBmcm9tICcuLi9jb3VudHJ5LWZsYWdzL2NvdW50cnktZmxhZ3MuY29tcG9uZW50JztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcblxuZXhwb3J0IGludGVyZmFjZSBMYW5ndWFnZU9wdGlvbiB7XG4gIGNvZGU6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgZmxhZzogc3RyaW5nOyAvLyBydXRhIG8gY2xhc2UgcGFyYSBsYSBiYW5kZXJhXG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Ryb3BpLWxhbmd1YWdlcy1zZWxlY3RvcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIENvdW50cnlGbGFnc0NvbXBvbmVudCwgSWNvbkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9kcm9waS1sYW5ndWFnZXMtc2VsZWN0b3IuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9waS1sYW5ndWFnZXMtc2VsZWN0b3IuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGlMYW5ndWFnZXNTZWxlY3RvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGxhbmd1YWdlczogTGFuZ3VhZ2VPcHRpb25bXSA9IFtdO1xuICBASW5wdXQoKSBzZWxlY3RlZExhbmc6IExhbmd1YWdlT3B0aW9uO1xuICBAT3V0cHV0KCkgbGFuZ3VhZ2VDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPExhbmd1YWdlT3B0aW9uPigpO1xuXG4gIGRyb3Bkb3duT3BlbiA9IGZhbHNlO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICghdGhpcy5zZWxlY3RlZExhbmcgJiYgdGhpcy5sYW5ndWFnZXMubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy5zZWxlY3RlZExhbmcgPSB0aGlzLmxhbmd1YWdlc1swXTtcbiAgICB9XG4gIH1cblxuICB0b2dnbGVEcm9wZG93bigpOiB2b2lkIHtcbiAgICB0aGlzLmRyb3Bkb3duT3BlbiA9ICF0aGlzLmRyb3Bkb3duT3BlbjtcbiAgfVxuXG4gIHNlbGVjdExhbmd1YWdlKGxhbmc6IExhbmd1YWdlT3B0aW9uKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RlZExhbmcgPSBsYW5nO1xuICAgIHRoaXMubGFuZ3VhZ2VDaGFuZ2UuZW1pdChsYW5nKTtcbiAgICB0aGlzLmRyb3Bkb3duT3BlbiA9IGZhbHNlO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY3VzdG9tLWRyb3Bkb3duXCIgW2NsYXNzLm9wZW5dPVwiZHJvcGRvd25PcGVuXCI+XG4gIDxkaXYgY2xhc3M9XCJzZWxlY3RlZC1vcHRpb25cIiAoY2xpY2spPVwidG9nZ2xlRHJvcGRvd24oKVwiPlxuICAgIDxhcHAtY291bnRyeS1mbGFncyBbY291bnRyeV09XCJzZWxlY3RlZExhbmcuZmxhZ1wiIFtzdHlsZV09XCIncmVjdGFuZ2xlJ1wiPjwvYXBwLWNvdW50cnktZmxhZ3M+XG4gICAgPHNwYW4gY2xhc3M9XCJCb2R5LVMtUmVndWxhclwiPnt7IHNlbGVjdGVkTGFuZy5sYWJlbCB9fTwvc3Bhbj5cbiAgICA8YXBwLWljb24gbmFtZT1cIkNhcmV0LWRvd25cIiB3aWR0aD1cIjE2cHhcIiBoZWlnaHQ9XCIxNnB4XCIgY29sb3I9XCJHcmF5LUdyYXktNTAwXCI+PC9hcHAtaWNvbj5cbiAgPC9kaXY+XG4gIDx1bCBbbmdDbGFzc109XCJ7ICdkcm9wZG93bi1vcHRpb25zJzogdHJ1ZSwgJ2Ryb3Bkb3duLW9wZW4nOiBkcm9wZG93bk9wZW4gfVwiPlxuICAgIDxsaVxuICAgICAgKm5nRm9yPVwibGV0IGxhbmcgb2YgbGFuZ3VhZ2VzXCJcbiAgICAgIChjbGljayk9XCJzZWxlY3RMYW5ndWFnZShsYW5nKVwiXG4gICAgICBbY2xhc3MuYWN0aXZlXT1cImxhbmcuY29kZSA9PT0gc2VsZWN0ZWRMYW5nLmNvZGVcIlxuICAgID5cbiAgICAgIDxhcHAtY291bnRyeS1mbGFncyBbY291bnRyeV09XCJsYW5nLmZsYWdcIiBbc3R5bGVdPVwiJ3JlY3RhbmdsZSdcIj48L2FwcC1jb3VudHJ5LWZsYWdzPlxuICAgICAgPHNwYW4gY2xhc3M9XCJCb2R5LVMtUmVndWxhclwiPnt7IGxhbmcubGFiZWwgfX08L3NwYW4+XG4gICAgPC9saT5cbiAgPC91bD5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
export class DropiLogoComponent {
|
|
6
|
+
urlLogo;
|
|
7
|
+
size = 'large';
|
|
8
|
+
theme = 'light';
|
|
9
|
+
onImageError(event) {
|
|
10
|
+
const target = event.target;
|
|
11
|
+
target.src =
|
|
12
|
+
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22256%22%20height%3D%2284%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%2084%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%23holder%20text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2024px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20600%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Cg%20id%3D%22holder%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23E6EAF2%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.3em%22%3E256%20x%2084%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E';
|
|
13
|
+
}
|
|
14
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiLogoComponent, isStandalone: true, selector: "dropi-logo", inputs: { urlLogo: "urlLogo", size: "size", theme: "theme" }, ngImport: i0, template: "<figure class=\"dropi-logo\" [ngClass]=\"size\">\n <img [src]=\"urlLogo\" alt=\"Logo\" loading=\"lazy\" (error)=\"onImageError($event)\" />\n</figure>\n", styles: [".dropi-logo{margin:0}.dropi-logo.large{max-width:256px;max-height:84px;width:256px;height:84px}.dropi-logo.small{max-width:86px;max-height:81px;width:86px;height:81px}.dropi-logo img{object-fit:contain;max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
16
|
+
}
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiLogoComponent, decorators: [{
|
|
18
|
+
type: Component,
|
|
19
|
+
args: [{ selector: 'dropi-logo', standalone: true, imports: [CommonModule], template: "<figure class=\"dropi-logo\" [ngClass]=\"size\">\n <img [src]=\"urlLogo\" alt=\"Logo\" loading=\"lazy\" (error)=\"onImageError($event)\" />\n</figure>\n", styles: [".dropi-logo{margin:0}.dropi-logo.large{max-width:256px;max-height:84px;width:256px;height:84px}.dropi-logo.small{max-width:86px;max-height:81px;width:86px;height:81px}.dropi-logo img{object-fit:contain;max-width:100%;max-height:100%}\n"] }]
|
|
20
|
+
}], propDecorators: { urlLogo: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}], size: [{
|
|
23
|
+
type: Input
|
|
24
|
+
}], theme: [{
|
|
25
|
+
type: Input
|
|
26
|
+
}] } });
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGktbG9nby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy1zb3VyY2UvZHJvcGktbG9nby9kcm9waS1sb2dvLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLXNvdXJjZS9kcm9waS1sb2dvL2Ryb3BpLWxvZ28uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFZL0MsTUFBTSxPQUFPLGtCQUFrQjtJQUNwQixPQUFPLENBQVM7SUFDaEIsSUFBSSxHQUFhLE9BQU8sQ0FBQztJQUN6QixLQUFLLEdBQWMsT0FBTyxDQUFDO0lBRXBDLFlBQVksQ0FBQyxLQUFZO1FBQ3ZCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUEwQixDQUFDO1FBQ2hELE1BQU0sQ0FBQyxHQUFHO1lBQ1IsbXBDQUFtcEMsQ0FBQztJQUN4cEMsQ0FBQzt3R0FUVSxrQkFBa0I7NEZBQWxCLGtCQUFrQixvSUNiL0IsMkpBR0Esb1NETVksWUFBWTs7NEZBSVgsa0JBQWtCO2tCQVA5QixTQUFTOytCQUNFLFlBQVksY0FDVixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7OEJBS2QsT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG50eXBlIExvZ29UaGVtZSA9ICdkYXJrJyB8ICdsaWdodCc7XG50eXBlIExvZ29TaXplID0gJ3NtYWxsJyB8ICdsYXJnZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Ryb3BpLWxvZ28nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3BpLWxvZ28uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9waS1sb2dvLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIERyb3BpTG9nb0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHVybExvZ286IHN0cmluZztcbiAgQElucHV0KCkgc2l6ZTogTG9nb1NpemUgPSAnbGFyZ2UnO1xuICBASW5wdXQoKSB0aGVtZTogTG9nb1RoZW1lID0gJ2xpZ2h0JztcblxuICBvbkltYWdlRXJyb3IoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbWFnZUVsZW1lbnQ7XG4gICAgdGFyZ2V0LnNyYyA9XG4gICAgICAnZGF0YTppbWFnZS9zdmcreG1sO2NoYXJzZXQ9VVRGLTgsJTNDc3ZnJTIwd2lkdGglM0QlMjIyNTYlMjIlMjBoZWlnaHQlM0QlMjI4NCUyMiUyMHhtbG5zJTNEJTIyaHR0cCUzQSUyRiUyRnd3dy53My5vcmclMkYyMDAwJTJGc3ZnJTIyJTIwdmlld0JveCUzRCUyMjAlMjAwJTIwMjU2JTIwODQlMjIlMjBwcmVzZXJ2ZUFzcGVjdFJhdGlvJTNEJTIybm9uZSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RlZnMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzdHlsZSUyMHR5cGUlM0QlMjJ0ZXh0JTJGY3NzJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIzaG9sZGVyJTIwdGV4dCUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGZpbGwlM0ElMjAlMjNmZmZmZmYlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBmb250LWZhbWlseSUzQSUyMHNhbnMtc2VyaWYlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBmb250LXNpemUlM0ElMjAyNHB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZm9udC13ZWlnaHQlM0ElMjA2MDAlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZzdHlsZSUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRlZnMlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NnJTIwaWQlM0QlMjJob2xkZXIlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NyZWN0JTIwd2lkdGglM0QlMjIxMDAlMjUlMjIlMjBoZWlnaHQlM0QlMjIxMDAlMjUlMjIlMjBmaWxsJTNEJTIyJTIzRTZFQUYyJTIyJTNFJTNDJTJGcmVjdCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2clM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0N0ZXh0JTIwdGV4dC1hbmNob3IlM0QlMjJtaWRkbGUlMjIlMjB4JTNEJTIyNTAlMjUlMjIlMjB5JTNEJTIyNTAlMjUlMjIlMjBkeSUzRCUyMi4zZW0lMjIlM0UyNTYlMjB4JTIwODQlM0MlMkZ0ZXh0JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZyUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmclM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZzdmclM0UnO1xuICB9XG59XG4iLCI8ZmlndXJlIGNsYXNzPVwiZHJvcGktbG9nb1wiIFtuZ0NsYXNzXT1cInNpemVcIj5cbiAgPGltZyBbc3JjXT1cInVybExvZ29cIiBhbHQ9XCJMb2dvXCIgbG9hZGluZz1cImxhenlcIiAoZXJyb3IpPVwib25JbWFnZUVycm9yKCRldmVudClcIiAvPlxuPC9maWd1cmU+XG4iXX0=
|