@indigina/ui-kit 1.1.587 → 1.1.588
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.
|
@@ -1538,7 +1538,10 @@ class KitTruncateTextComponent {
|
|
|
1538
1538
|
if (this.isMultiline()) {
|
|
1539
1539
|
return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
|
|
1540
1540
|
}
|
|
1541
|
-
|
|
1541
|
+
const range = document.createRange();
|
|
1542
|
+
range.selectNodeContents(el);
|
|
1543
|
+
const textWidth = range.getBoundingClientRect().width;
|
|
1544
|
+
return textWidth > el.getBoundingClientRect().width;
|
|
1542
1545
|
}
|
|
1543
1546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTruncateTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1544
1547
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTruncateTextComponent, isStandalone: true, selector: "kit-truncate-text", inputs: { tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, innerHtml: { classPropertyName: "innerHtml", publicName: "innerHtml", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #anchor\n kendoTooltip\n class=\"kit-tooltip\"\n showOn=\"none\">\n <div #content\n class=\"truncate-text\"\n [class.truncate-text-multiline]=\"isMultiline()\"\n [style.-webkit-line-clamp]=\"isMultiline() ? lines() : null\">\n @if (innerHtml()) {\n <span [innerHTML]=\"innerHtml()\"></span>\n } @else {\n <ng-content/>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}:host .truncate-text-multiline{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipThemeColor", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -6916,14 +6919,14 @@ class KitStatusLabelComponent {
|
|
|
6916
6919
|
...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
|
|
6917
6920
|
}
|
|
6918
6921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6919
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitStatusLabelComponent, isStandalone: true, selector: "kit-status-label", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitStatusLabelComponent, isStandalone: true, selector: "kit-status-label", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1;box-sizing:border-box}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6920
6923
|
}
|
|
6921
6924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitStatusLabelComponent, decorators: [{
|
|
6922
6925
|
type: Component,
|
|
6923
6926
|
args: [{ selector: 'kit-status-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6924
6927
|
KitTruncateTextComponent,
|
|
6925
6928
|
NgClass,
|
|
6926
|
-
], template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
6929
|
+
], template: "<div class=\"kit-status-label\"\n [ngClass]=\"cssClasses()\">\n <kit-truncate-text [tooltipText]=\"tooltip()\">\n <ng-content></ng-content>\n </kit-truncate-text>\n</div>\n", styles: [".kit-status-label{display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;border-width:1px;border-style:solid;border-radius:4px;line-height:1;box-sizing:border-box}.kit-status-label.small{height:20px;font-size:12px}.kit-status-label.large{height:28px;font-size:16px}.kit-status-label.white{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-status-label.purple{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-status-label.teal{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-status-label.grey{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-status-label.orange{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-3)}.kit-status-label.green{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-status-label.blue{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-status-label.pink{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-status-label.red{color:var(--ui-kit-color-red-4);border-color:var(--ui-kit-color-red-4);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
6927
6930
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
|
|
6928
6931
|
|
|
6929
6932
|
class KitSelectableCardComponent {
|
|
@@ -8796,7 +8799,7 @@ class KitFileCardComponent {
|
|
|
8796
8799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8797
8800
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFileCardComponent, isStandalone: true, selector: "kit-file-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, showViewFileButton: { classPropertyName: "showViewFileButton", publicName: "showViewFileButton", isSignal: true, isRequired: false, transformFunction: null }, useUTCDateValues: { classPropertyName: "useUTCDateValues", publicName: "useUTCDateValues", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, providers: [
|
|
8798
8801
|
DatePipe,
|
|
8799
|
-
], queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type() ? [type(), size()] : [size()]\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title() }}</div>\n <div class=\"card-subtitle\">\n <div class=\"card-type\">\n <kit-truncate-text>{{ label() }}</kit-truncate-text>\n </div>\n @if (subTitle()) {\n <div class=\"card-subtitle-label\">\n <kit-status-label [color]=\"subTitleColor()\">\n {{ subTitle() }}\n </kit-status-label>\n </div>\n }\n </div>\n </div>\n\n <kit-svg-icon class=\"kit-file-card-icon\"\n [icon]=\"getFileIconByExtension(fileType())\" />\n\n <div class=\"kit-file-card-info\">\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n </div>\n @if (name()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ name() }}</div>\n </div>\n }\n @if (formattedFileSize()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n </div>\n }\n </div>\n\n <div class=\"kit-file-card-action\">\n @if (showViewFileButton() && hasViewFileButton(fileType())) {\n <kit-button class=\"action-button action-button-view\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\" />\n }\n <kit-button class=\"action-button\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\" />\n </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:
|
|
8802
|
+
], queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type() ? [type(), size()] : [size()]\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title() }}</div>\n <div class=\"card-subtitle\">\n <div class=\"card-type\">\n <kit-truncate-text>{{ label() }}</kit-truncate-text>\n </div>\n @if (subTitle()) {\n <div class=\"card-subtitle-label\">\n <kit-status-label [color]=\"subTitleColor()\">\n {{ subTitle() }}\n </kit-status-label>\n </div>\n }\n </div>\n </div>\n\n <kit-svg-icon class=\"kit-file-card-icon\"\n [icon]=\"getFileIconByExtension(fileType())\" />\n\n <div class=\"kit-file-card-info\">\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n </div>\n @if (name()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ name() }}</div>\n </div>\n }\n @if (formattedFileSize()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n </div>\n }\n </div>\n\n <div class=\"kit-file-card-action\">\n @if (showViewFileButton() && hasViewFileButton(fileType())) {\n <kit-button class=\"action-button action-button-view\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\" />\n }\n <kit-button class=\"action-button\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\" />\n </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;justify-content:space-between;min-width:0}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-subtitle-label{flex:0 1 auto;min-width:0}.kit-file-card .card-type{flex:0 999 auto;min-width:60px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;align-items:center;justify-content:flex-end;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 110px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .action-button-view{margin-right:15px;padding-right:15px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-file-card ::ng-deep .card-subtitle-label .kit-status-label{width:100%}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8800
8803
|
}
|
|
8801
8804
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFileCardComponent, decorators: [{
|
|
8802
8805
|
type: Component,
|
|
@@ -8810,7 +8813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
8810
8813
|
KitTruncateTextComponent,
|
|
8811
8814
|
], providers: [
|
|
8812
8815
|
DatePipe,
|
|
8813
|
-
], template: "<div class=\"kit-file-card\"\n [ngClass]=\"type() ? [type(), size()] : [size()]\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title() }}</div>\n <div class=\"card-subtitle\">\n <div class=\"card-type\">\n <kit-truncate-text>{{ label() }}</kit-truncate-text>\n </div>\n @if (subTitle()) {\n <div class=\"card-subtitle-label\">\n <kit-status-label [color]=\"subTitleColor()\">\n {{ subTitle() }}\n </kit-status-label>\n </div>\n }\n </div>\n </div>\n\n <kit-svg-icon class=\"kit-file-card-icon\"\n [icon]=\"getFileIconByExtension(fileType())\" />\n\n <div class=\"kit-file-card-info\">\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n </div>\n @if (name()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ name() }}</div>\n </div>\n }\n @if (formattedFileSize()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n </div>\n }\n </div>\n\n <div class=\"kit-file-card-action\">\n @if (showViewFileButton() && hasViewFileButton(fileType())) {\n <kit-button class=\"action-button action-button-view\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\" />\n }\n <kit-button class=\"action-button\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\" />\n </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:
|
|
8816
|
+
], template: "<div class=\"kit-file-card\"\n [ngClass]=\"type() ? [type(), size()] : [size()]\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title() }}</div>\n <div class=\"card-subtitle\">\n <div class=\"card-type\">\n <kit-truncate-text>{{ label() }}</kit-truncate-text>\n </div>\n @if (subTitle()) {\n <div class=\"card-subtitle-label\">\n <kit-status-label [color]=\"subTitleColor()\">\n {{ subTitle() }}\n </kit-status-label>\n </div>\n }\n </div>\n </div>\n\n <kit-svg-icon class=\"kit-file-card-icon\"\n [icon]=\"getFileIconByExtension(fileType())\" />\n\n <div class=\"kit-file-card-info\">\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createDate ?? \"kit.fileCard.createdDate\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ getFormattedDate() }}</div>\n </div>\n @if (name()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.createdBy ?? \"kit.fileCard.createdBy\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ name() }}</div>\n </div>\n }\n @if (formattedFileSize()) {\n <div class=\"info-item\">\n @if (size() === kitFileCardSize.LARGE) {\n <div class=\"info-item-label\">{{ customMessages()?.fileSize() ?? \"kit.fileCard.fileSize\" | translate }}</div>\n }\n <div class=\"info-item-value\">{{ formattedFileSize() }}</div>\n </div>\n }\n </div>\n\n <div class=\"kit-file-card-action\">\n @if (showViewFileButton() && hasViewFileButton(fileType())) {\n <kit-button class=\"action-button action-button-view\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.viewButtonLabel ?? 'kit.fileCard.view' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.viewButtonLabel, 'kit.fileCard.view')\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\" />\n }\n <kit-button class=\"action-button\"\n kitTooltip\n kitTooltipFilter=\".action-button\"\n [kitTooltipVisible]=\"size() === kitFileCardSize.SMALL\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"customMessages()?.downloadButtonLabel ?? 'kit.fileCard.download' | translate\"\n [label]=\"getActionButtonLabel(customMessages()?.downloadButtonLabel, 'kit.fileCard.download')\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.LARGE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\" />\n </div>\n</div>\n<ng-content></ng-content>\n", styles: [".kit-file-card{display:grid;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card .kit-file-card-header{display:flex;gap:10px;grid-area:header}.kit-file-card .card-title{font-weight:400}.kit-file-card .card-subtitle{display:flex;justify-content:space-between;min-width:0}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-subtitle-label{flex:0 1 auto;min-width:0}.kit-file-card .card-type{flex:0 999 auto;min-width:60px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card .kit-file-card-icon{display:flex;grid-area:icon}.kit-file-card .kit-file-card-info{grid-area:info;display:flex}.kit-file-card .kit-file-card-action{display:flex;align-items:center;justify-content:flex-end;grid-area:action}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.blue .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.purple .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.teal .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.orange .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.green .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.grey .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.red .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.pink .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}.kit-file-card.large{grid-template-columns:78px 1fr;grid-template-areas:\"header header\" \"icon info\" \"action action\";gap:17px 24px;padding:25px}.kit-file-card.large .kit-file-card-header{flex-direction:column;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .card-title{font-size:16px}.kit-file-card.large .kit-file-card-icon{width:78px;height:100px}.kit-file-card.large .kit-file-card-info{flex-direction:column;gap:12px}.kit-file-card.large .kit-file-card-info .info-item{line-height:22px}.kit-file-card.large .kit-file-card-info .info-item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card.large .kit-file-card-info .info-item-value{font-size:16px}.kit-file-card.large .kit-file-card-action{gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card.large .kit-file-card-action .action-button{flex:1}.kit-file-card.small{grid-template-columns:40px 1fr 110px;grid-template-areas:\"icon header action\" \"icon info action\";gap:10px 12px;padding:15px}.kit-file-card.small .kit-file-card-header{align-items:center}.kit-file-card.small .card-title{font-size:14px}.kit-file-card.small .kit-file-card-icon{width:40px;height:52px}.kit-file-card.small .kit-file-card-info .info-item{margin-right:10px;padding-right:10px;color:var(--ui-kit-color-grey-14);font-size:14px;border-right:1px solid var(--ui-kit-color-grey-12);line-height:20px}.kit-file-card.small .kit-file-card-info .info-item:last-child{margin:0;padding:0;border:none}.kit-file-card.small .action-button-view{margin-right:15px;padding-right:15px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-file-card ::ng-deep .card-subtitle-label .kit-status-label{width:100%}\n"] }]
|
|
8814
8817
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], showViewFileButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewFileButton", required: false }] }], useUTCDateValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "useUTCDateValues", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], subTitleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitleColor", required: false }] }], viewButtonClicked: [{ type: i0.Output, args: ["viewButtonClicked"] }], downloadButtonClicked: [{ type: i0.Output, args: ["downloadButtonClicked"] }], customMessages: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitFileCardMessagesComponent), { isSignal: true }] }] } });
|
|
8815
8818
|
|
|
8816
8819
|
var KitDataFieldState;
|