design-angular-kit 20.0.0 → 20.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.
- package/README.md +2 -2
- package/fesm2022/design-angular-kit.mjs +32 -11
- package/fesm2022/design-angular-kit.mjs.map +1 -1
- package/index.d.ts +45 -24
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -66,8 +66,8 @@ Scegli la versione corrispondente alla tua versione Angular:
|
|
|
66
66
|
| Angular | Design Angular kit | Branch | Documentazione |
|
|
67
67
|
| ------- | ------------------ | ------ | ---------------------------------------------------------------------------------- |
|
|
68
68
|
| 20+ | v20.0.0 + | main | [link](https://italia.github.io/design-angular-kit/design-angular-kit#) |
|
|
69
|
-
| 19+ | v19.0.0 + | v19 | [link](https://design-angular-kit-git-
|
|
70
|
-
| 18+ | v18.0.0 + | v18 | [link](https://design-angular-kit-git-
|
|
69
|
+
| 19+ | v19.0.0 + | v19 | [link](https://design-angular-kit-git-v19-dip-trasformazione-digitale.vercel.app/) |
|
|
70
|
+
| 18+ | v18.0.0 + | v18 | [link](https://design-angular-kit-git-v18-dip-trasformazione-digitale.vercel.app/) |
|
|
71
71
|
|
|
72
72
|
⚠️ Le versioni precendenti non sono più manutenute.
|
|
73
73
|
|
|
@@ -1684,6 +1684,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
1684
1684
|
class ItCardComponent extends ItAbstractComponent {
|
|
1685
1685
|
constructor() {
|
|
1686
1686
|
super(...arguments);
|
|
1687
|
+
/**
|
|
1688
|
+
* To add border
|
|
1689
|
+
* @default true
|
|
1690
|
+
*/
|
|
1691
|
+
this.border = true;
|
|
1687
1692
|
/**
|
|
1688
1693
|
* Custom card class
|
|
1689
1694
|
* @default ''
|
|
@@ -1694,41 +1699,54 @@ class ItCardComponent extends ItAbstractComponent {
|
|
|
1694
1699
|
* @default ''
|
|
1695
1700
|
*/
|
|
1696
1701
|
this.bodyClass = '';
|
|
1702
|
+
/**
|
|
1703
|
+
* Shadow type
|
|
1704
|
+
* @default 'sm'
|
|
1705
|
+
*/
|
|
1706
|
+
this.shadow = 'sm';
|
|
1697
1707
|
}
|
|
1698
1708
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1699
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1709
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", 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 }); }
|
|
1700
1710
|
}
|
|
1701
1711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItCardComponent, decorators: [{
|
|
1702
1712
|
type: Component,
|
|
1703
|
-
args: [{ selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n <ng-content select=\"[beforeBody]\"></ng-content>\n
|
|
1704
|
-
}], propDecorators: {
|
|
1713
|
+
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"] }]
|
|
1714
|
+
}], propDecorators: { inline: [{
|
|
1705
1715
|
type: Input,
|
|
1706
1716
|
args: [{ transform: inputToBoolean }]
|
|
1707
|
-
}],
|
|
1717
|
+
}], mini: [{
|
|
1708
1718
|
type: Input,
|
|
1709
1719
|
args: [{ transform: inputToBoolean }]
|
|
1710
|
-
}],
|
|
1720
|
+
}], border: [{
|
|
1721
|
+
type: Input,
|
|
1722
|
+
args: [{ transform: inputToBoolean }]
|
|
1723
|
+
}], banner: [{
|
|
1724
|
+
type: Input,
|
|
1725
|
+
args: [{ transform: inputToBoolean }]
|
|
1726
|
+
}], profile: [{
|
|
1711
1727
|
type: Input,
|
|
1712
1728
|
args: [{ transform: inputToBoolean }]
|
|
1713
1729
|
}], rounded: [{
|
|
1714
1730
|
type: Input,
|
|
1715
1731
|
args: [{ transform: inputToBoolean }]
|
|
1716
|
-
}],
|
|
1732
|
+
}], reverse: [{
|
|
1717
1733
|
type: Input,
|
|
1718
1734
|
args: [{ transform: inputToBoolean }]
|
|
1719
|
-
}],
|
|
1735
|
+
}], fullHeight: [{
|
|
1720
1736
|
type: Input,
|
|
1721
1737
|
args: [{ transform: inputToBoolean }]
|
|
1722
|
-
}],
|
|
1738
|
+
}], hasImage: [{
|
|
1723
1739
|
type: Input,
|
|
1724
1740
|
args: [{ transform: inputToBoolean }]
|
|
1725
|
-
}],
|
|
1741
|
+
}], borderTop: [{
|
|
1726
1742
|
type: Input,
|
|
1727
1743
|
args: [{ transform: inputToBoolean }]
|
|
1728
1744
|
}], cardClass: [{
|
|
1729
1745
|
type: Input
|
|
1730
1746
|
}], bodyClass: [{
|
|
1731
1747
|
type: Input
|
|
1748
|
+
}], shadow: [{
|
|
1749
|
+
type: Input
|
|
1732
1750
|
}] } });
|
|
1733
1751
|
|
|
1734
1752
|
/**
|
|
@@ -5061,16 +5079,19 @@ class ItUploadFileListComponent extends ItAbstractComponent {
|
|
|
5061
5079
|
return ItFileUtils.getFileSizeString(file);
|
|
5062
5080
|
}
|
|
5063
5081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadFileListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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"] }] }); }
|
|
5082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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"] }] }); }
|
|
5065
5083
|
}
|
|
5066
5084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ItUploadFileListComponent, decorators: [{
|
|
5067
5085
|
type: Component,
|
|
5068
|
-
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" }]
|
|
5086
|
+
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" }]
|
|
5069
5087
|
}], propDecorators: { fileList: [{
|
|
5070
5088
|
type: Input,
|
|
5071
5089
|
args: [{ required: true }]
|
|
5072
5090
|
}], accept: [{
|
|
5073
5091
|
type: Input
|
|
5092
|
+
}], label: [{
|
|
5093
|
+
type: Input,
|
|
5094
|
+
args: [{ required: false }]
|
|
5074
5095
|
}], multiple: [{
|
|
5075
5096
|
type: Input,
|
|
5076
5097
|
args: [{ transform: inputToBoolean }]
|