design-angular-kit 19.0.0 → 19.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1690,6 +1690,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
1690
1690
|
class ItCardComponent extends ItAbstractComponent {
|
|
1691
1691
|
constructor() {
|
|
1692
1692
|
super(...arguments);
|
|
1693
|
+
/**
|
|
1694
|
+
* To add border
|
|
1695
|
+
* @default true
|
|
1696
|
+
*/
|
|
1697
|
+
this.border = true;
|
|
1693
1698
|
/**
|
|
1694
1699
|
* Custom card class
|
|
1695
1700
|
* @default ''
|
|
@@ -1700,41 +1705,54 @@ class ItCardComponent extends ItAbstractComponent {
|
|
|
1700
1705
|
* @default ''
|
|
1701
1706
|
*/
|
|
1702
1707
|
this.bodyClass = '';
|
|
1708
|
+
/**
|
|
1709
|
+
* Shadow type
|
|
1710
|
+
* @default 'sm'
|
|
1711
|
+
*/
|
|
1712
|
+
this.shadow = 'sm';
|
|
1703
1713
|
}
|
|
1704
1714
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1705
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1715
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.7", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { inline: ["inline", "inline", inputToBoolean], mini: ["mini", "mini", inputToBoolean], border: ["border", "border", inputToBoolean], banner: ["banner", "banner", inputToBoolean], profile: ["profile", "profile", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], reverse: ["reverse", "reverse", inputToBoolean], fullHeight: ["fullHeight", "fullHeight", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], borderTop: ["borderTop", "borderTop", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass", shadow: "shadow" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n<article\n class=\"it-card rounded {{ cardClass }}\"\n [class.border]=\"border\"\n [class.rounded]=\"rounded\"\n [class.shadow-sm]=\"shadow === 'sm'\"\n [class.shadow-lg]=\"shadow === 'lg'\"\n [class.shadow]=\"shadow === 'normal'\"\n [class.it-card-image]=\"hasImage\"\n [class.it-card-height-full]=\"fullHeight\"\n [class.it-card-inline]=\"inline\"\n [class.it-card-inline-reverse]=\"reverse\"\n [class.it-card-inline-mini]=\"mini\"\n [class.it-card-banner]=\"banner\"\n [class.it-card-profile]=\"profile\"\n [class.it-card-border-top]=\"borderTop\"\n [class.it-card-border-top-secondary]=\"borderTop\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1706
1716
|
}
|
|
1707
1717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ItCardComponent, decorators: [{
|
|
1708
1718
|
type: Component,
|
|
1709
|
-
args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n
|
|
1710
|
-
}], propDecorators: {
|
|
1719
|
+
args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n<article\n class=\"it-card rounded {{ cardClass }}\"\n [class.border]=\"border\"\n [class.rounded]=\"rounded\"\n [class.shadow-sm]=\"shadow === 'sm'\"\n [class.shadow-lg]=\"shadow === 'lg'\"\n [class.shadow]=\"shadow === 'normal'\"\n [class.it-card-image]=\"hasImage\"\n [class.it-card-height-full]=\"fullHeight\"\n [class.it-card-inline]=\"inline\"\n [class.it-card-inline-reverse]=\"reverse\"\n [class.it-card-inline-mini]=\"mini\"\n [class.it-card-banner]=\"banner\"\n [class.it-card-profile]=\"profile\"\n [class.it-card-border-top]=\"borderTop\"\n [class.it-card-border-top-secondary]=\"borderTop\">\n <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n</article>\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
|
|
1720
|
+
}], propDecorators: { inline: [{
|
|
1711
1721
|
type: Input,
|
|
1712
1722
|
args: [{ transform: inputToBoolean }]
|
|
1713
|
-
}],
|
|
1723
|
+
}], mini: [{
|
|
1714
1724
|
type: Input,
|
|
1715
1725
|
args: [{ transform: inputToBoolean }]
|
|
1716
|
-
}],
|
|
1726
|
+
}], border: [{
|
|
1727
|
+
type: Input,
|
|
1728
|
+
args: [{ transform: inputToBoolean }]
|
|
1729
|
+
}], banner: [{
|
|
1730
|
+
type: Input,
|
|
1731
|
+
args: [{ transform: inputToBoolean }]
|
|
1732
|
+
}], profile: [{
|
|
1717
1733
|
type: Input,
|
|
1718
1734
|
args: [{ transform: inputToBoolean }]
|
|
1719
1735
|
}], rounded: [{
|
|
1720
1736
|
type: Input,
|
|
1721
1737
|
args: [{ transform: inputToBoolean }]
|
|
1722
|
-
}],
|
|
1738
|
+
}], reverse: [{
|
|
1723
1739
|
type: Input,
|
|
1724
1740
|
args: [{ transform: inputToBoolean }]
|
|
1725
|
-
}],
|
|
1741
|
+
}], fullHeight: [{
|
|
1726
1742
|
type: Input,
|
|
1727
1743
|
args: [{ transform: inputToBoolean }]
|
|
1728
|
-
}],
|
|
1744
|
+
}], hasImage: [{
|
|
1729
1745
|
type: Input,
|
|
1730
1746
|
args: [{ transform: inputToBoolean }]
|
|
1731
|
-
}],
|
|
1747
|
+
}], borderTop: [{
|
|
1732
1748
|
type: Input,
|
|
1733
1749
|
args: [{ transform: inputToBoolean }]
|
|
1734
1750
|
}], cardClass: [{
|
|
1735
1751
|
type: Input
|
|
1736
1752
|
}], bodyClass: [{
|
|
1737
1753
|
type: Input
|
|
1754
|
+
}], shadow: [{
|
|
1755
|
+
type: Input
|
|
1738
1756
|
}] } });
|
|
1739
1757
|
|
|
1740
1758
|
/**
|
|
@@ -5089,16 +5107,19 @@ class ItUploadFileListComponent extends ItAbstractComponent {
|
|
|
5089
5107
|
return ItFileUtils.getFileSizeString(file);
|
|
5090
5108
|
}
|
|
5091
5109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5092
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n <label [for]=\"id\">\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ 'it.form.upload' | translate }}</span>\n </label>\n}\n\n@if (fileList.length) {\n <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n @for (item of fileList; track item.id) {\n <li\n class=\"upload-file\"\n [class.error]=\"item.error\"\n [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n @if (images) {\n <div class=\"upload-image\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n } @else {\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n }\n <p [itTooltip]=\"item.tooltip\">\n <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n </p>\n @if (item.removable && (!item.progress || item.progress < 100)) {\n <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n <button type=\"button\" disabled>\n <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n <it-icon name=\"check\"></it-icon>\n </button>\n }\n @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n }\n </li>\n }\n </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
|
|
5110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ItUploadFileListComponent, isStandalone: true, selector: "it-upload-file-list", inputs: { fileList: "fileList", accept: "accept", label: "label", multiple: ["multiple", "multiple", inputToBoolean], images: ["images", "images", inputToBoolean], hideLoadButton: ["hideLoadButton", "hideLoadButton", inputToBoolean] }, outputs: { uploadFiles: "uploadFiles", deleteItem: "deleteItem" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hideLoadButton) {\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n <label [for]=\"id\">\n @if (label) {\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ label }}</span>\n } @else {\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ 'it.form.upload' | translate }}</span>\n }\n </label>\n}\n\n@if (fileList.length) {\n <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n @for (item of fileList; track item.id) {\n <li\n class=\"upload-file\"\n [class.error]=\"item.error\"\n [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n @if (images) {\n <div class=\"upload-image\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n } @else {\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n }\n <p [itTooltip]=\"item.tooltip\">\n <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n </p>\n @if (item.removable && (!item.progress || item.progress < 100)) {\n <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n <button type=\"button\" disabled>\n <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n <it-icon name=\"check\"></it-icon>\n </button>\n }\n @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n }\n </li>\n }\n </ul>\n}\n", dependencies: [{ kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: ItTooltipDirective, selector: "[itTooltip]", inputs: ["itTooltip", "tooltipPlacement", "tooltipHtml"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent", "insertedEvent"], exportAs: ["itTooltip"] }, { kind: "component", type: ItProgressBarComponent, selector: "it-progress-bar", inputs: ["value", "showLabel", "indeterminate", "color"] }] }); }
|
|
5093
5111
|
}
|
|
5094
5112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
|
|
5095
5113
|
type: Component,
|
|
5096
|
-
args: [{ selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n <label [for]=\"id\">\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ 'it.form.upload' | translate }}</span>\n </label>\n}\n\n@if (fileList.length) {\n <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n @for (item of fileList; track item.id) {\n <li\n class=\"upload-file\"\n [class.error]=\"item.error\"\n [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n @if (images) {\n <div class=\"upload-image\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n } @else {\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n }\n <p [itTooltip]=\"item.tooltip\">\n <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n </p>\n @if (item.removable && (!item.progress || item.progress < 100)) {\n <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n <button type=\"button\" disabled>\n <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n <it-icon name=\"check\"></it-icon>\n </button>\n }\n @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n }\n </li>\n }\n </ul>\n}\n" }]
|
|
5114
|
+
args: [{ selector: 'it-upload-file-list', imports: [ItIconComponent, TranslateModule, ItTooltipDirective, ItProgressBarComponent], template: "@if (!hideLoadButton) {\n <input type=\"file\" [id]=\"id\" class=\"upload\" [accept]=\"accept\" [multiple]=\"multiple\" (change)=\"onLoadFiles($event)\" />\n <label [for]=\"id\">\n @if (label) {\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ label }}</span>\n } @else {\n <it-icon name=\"upload\" size=\"sm\"></it-icon>\n <span>{{ 'it.form.upload' | translate }}</span>\n }\n </label>\n}\n\n@if (fileList.length) {\n <ul class=\"upload-file-list\" [class.upload-file-list-image]=\"images\">\n @for (item of fileList; track item.id) {\n <li\n class=\"upload-file\"\n [class.error]=\"item.error\"\n [class.uploading]=\"!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100\"\n [class.success]=\"!item.error && (!item.progress || item.progress >= 100)\">\n @if (images) {\n <div class=\"upload-image\">\n <img [attr.src]=\"previewImages.get(item.id)\" [alt]=\"item.file.name\" />\n </div>\n } @else {\n <it-icon name=\"file\" size=\"sm\" [color]=\"!item.error ? (item.progress ? 'secondary' : 'primary') : 'danger'\"></it-icon>\n }\n <p [itTooltip]=\"item.tooltip\">\n <span class=\"visually-hidden\">{{ 'it.form.uploaded-file' | translate: { name: item.file.name } }}</span>\n {{ item.file.name }} <span class=\"upload-file-weight\">{{ getFileSize(item.file) }}</span>\n </p>\n @if (item.removable && (!item.progress || item.progress < 100)) {\n <button type=\"button\" (click)=\"deleteItem.emit(item)\">\n <span class=\"visually-hidden\">{{ 'it.form.delete-file' | translate: { name: item.file.name } }}</span>\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n @if ((!item.removable && !item.progress) || (item.progress !== undefined && item.progress >= 100)) {\n <button type=\"button\" disabled>\n <span class=\"visually-hidden\">{{ 'it.form.upload-complete' | translate }}</span>\n <it-icon name=\"check\"></it-icon>\n </button>\n }\n @if (!item.error && item.progress !== undefined && item.progress > 0 && item.progress < 100) {\n <it-progress-bar [value]=\"item.progress!\"></it-progress-bar>\n }\n </li>\n }\n </ul>\n}\n" }]
|
|
5097
5115
|
}], propDecorators: { fileList: [{
|
|
5098
5116
|
type: Input,
|
|
5099
5117
|
args: [{ required: true }]
|
|
5100
5118
|
}], accept: [{
|
|
5101
5119
|
type: Input
|
|
5120
|
+
}], label: [{
|
|
5121
|
+
type: Input,
|
|
5122
|
+
args: [{ required: false }]
|
|
5102
5123
|
}], multiple: [{
|
|
5103
5124
|
type: Input,
|
|
5104
5125
|
args: [{ transform: inputToBoolean }]
|