@indigina/ui-kit 1.1.446 → 1.1.448
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.
|
@@ -4235,7 +4235,6 @@ class KitNavigationMenuComponent {
|
|
|
4235
4235
|
this.KitSvgIconType = KitSvgIconType;
|
|
4236
4236
|
this.KitTooltipPosition = KitTooltipPosition;
|
|
4237
4237
|
this.isAbsoluteLink = isAbsoluteLink;
|
|
4238
|
-
this.setExpandedStateOnRouterChange();
|
|
4239
4238
|
}
|
|
4240
4239
|
ngOnInit() {
|
|
4241
4240
|
this.setExpandedStateOnRouterChange();
|
|
@@ -4268,29 +4267,16 @@ class KitNavigationMenuComponent {
|
|
|
4268
4267
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef)).subscribe((event) => this.updateNavigationState(this.menuItems(), event.url));
|
|
4269
4268
|
}
|
|
4270
4269
|
updateNavigationState(items, url) {
|
|
4271
|
-
const
|
|
4272
|
-
|
|
4273
|
-
if (!item.link) {
|
|
4274
|
-
return false;
|
|
4275
|
-
}
|
|
4276
|
-
if (item.link === rootPath) {
|
|
4277
|
-
return url === rootPath;
|
|
4278
|
-
}
|
|
4279
|
-
if (!(url === item.link || url.startsWith(item.link))) {
|
|
4280
|
-
return false;
|
|
4281
|
-
}
|
|
4282
|
-
if (!item.queryParams || Object.keys(item.queryParams).length === 0) {
|
|
4283
|
-
return true;
|
|
4284
|
-
}
|
|
4285
|
-
const currentQueryParams = this.router.parseUrl(url).queryParams;
|
|
4286
|
-
return Object.keys(item.queryParams).every(key => currentQueryParams[key] === item.queryParams?.[key]);
|
|
4287
|
-
};
|
|
4270
|
+
const currentPath = this.getPathname(url);
|
|
4271
|
+
const currentQueryParams = this.router.parseUrl(url).queryParams;
|
|
4288
4272
|
items.forEach(item => {
|
|
4289
|
-
|
|
4273
|
+
const itemMatches = this.isItemMatch(item, currentPath, currentQueryParams);
|
|
4274
|
+
if (item.items?.length) {
|
|
4290
4275
|
this.updateNavigationState(item.items, url);
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
item.active =
|
|
4276
|
+
const hasActiveChild = item.items.some(child => child.active);
|
|
4277
|
+
const hasExpandedChild = item.items.some(child => child.expanded);
|
|
4278
|
+
item.active = hasActiveChild || itemMatches;
|
|
4279
|
+
item.expanded = hasExpandedChild || hasActiveChild || itemMatches;
|
|
4294
4280
|
if (item.expanded) {
|
|
4295
4281
|
this.selectedItem.set(item);
|
|
4296
4282
|
this.selectedAppsItems.set(null);
|
|
@@ -4299,7 +4285,7 @@ class KitNavigationMenuComponent {
|
|
|
4299
4285
|
}
|
|
4300
4286
|
else {
|
|
4301
4287
|
item.expanded = false;
|
|
4302
|
-
item.active =
|
|
4288
|
+
item.active = itemMatches;
|
|
4303
4289
|
if (item.active) {
|
|
4304
4290
|
this.selectedItem.set(item);
|
|
4305
4291
|
this.selectedAppsItems.set(null);
|
|
@@ -4309,6 +4295,44 @@ class KitNavigationMenuComponent {
|
|
|
4309
4295
|
});
|
|
4310
4296
|
this.menuItems.set([...items]);
|
|
4311
4297
|
}
|
|
4298
|
+
isItemMatch(item, currentPath, currentQueryParams) {
|
|
4299
|
+
if (item.link) {
|
|
4300
|
+
return this.isLinkMatch(item, currentPath, currentQueryParams);
|
|
4301
|
+
}
|
|
4302
|
+
return this.isGroupPathMatch(item, currentPath);
|
|
4303
|
+
}
|
|
4304
|
+
isGroupPathMatch(item, currentPath) {
|
|
4305
|
+
if (!item.items?.length) {
|
|
4306
|
+
return false;
|
|
4307
|
+
}
|
|
4308
|
+
return item.items.some(child => {
|
|
4309
|
+
if (child.link) {
|
|
4310
|
+
return this.isSameOrChildPath(this.getPathname(child.link), currentPath);
|
|
4311
|
+
}
|
|
4312
|
+
return this.isGroupPathMatch(child, currentPath);
|
|
4313
|
+
});
|
|
4314
|
+
}
|
|
4315
|
+
isLinkMatch(item, currentPath, currentQueryParams) {
|
|
4316
|
+
const rootPath = '/';
|
|
4317
|
+
if (!item.link) {
|
|
4318
|
+
return false;
|
|
4319
|
+
}
|
|
4320
|
+
const itemPath = this.getPathname(item.link);
|
|
4321
|
+
if (itemPath === rootPath) {
|
|
4322
|
+
return currentPath === rootPath;
|
|
4323
|
+
}
|
|
4324
|
+
if (!this.isSameOrChildPath(currentPath, itemPath)) {
|
|
4325
|
+
return false;
|
|
4326
|
+
}
|
|
4327
|
+
if (!item.queryParams || Object.keys(item.queryParams).length === 0) {
|
|
4328
|
+
return true;
|
|
4329
|
+
}
|
|
4330
|
+
return Object.keys(item.queryParams).every(key => currentQueryParams[key] === item.queryParams?.[key]);
|
|
4331
|
+
}
|
|
4332
|
+
getPathname(url) {
|
|
4333
|
+
const segments = this.router.parseUrl(url).root.children.primary?.segments ?? [];
|
|
4334
|
+
return segments.length ? `/${segments.map(segment => segment.path).join('/')}` : '/';
|
|
4335
|
+
}
|
|
4312
4336
|
collapseAllItems(items) {
|
|
4313
4337
|
this.kitNavigationMenuService.setCollapsedState(true);
|
|
4314
4338
|
items.forEach(item => item.expanded = false);
|
|
@@ -4322,6 +4346,9 @@ class KitNavigationMenuComponent {
|
|
|
4322
4346
|
updateMenuState() {
|
|
4323
4347
|
this.kitNavigationMenuService.setSelectedState(!!this.selectedItem()?.items, !!this.selectedAppsItems());
|
|
4324
4348
|
}
|
|
4349
|
+
isSameOrChildPath(currentPath, targetPath) {
|
|
4350
|
+
return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
|
|
4351
|
+
}
|
|
4325
4352
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4326
4353
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitNavigationMenuComponent, isStandalone: true, selector: "kit-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed()\">\n <div class=\"main-panel\">\n @if (appsMenuItems().length > 1) {\n <button class=\"app-btn\"\n [class.active]=\"selectedAppsItems() && !collapsed()\"\n (click)=\"onAppsMenuButtonClick()\">\n <kit-svg-icon class=\"app-btn-icon\"\n [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n ></kit-svg-icon>\n </button>\n }\n <div class=\"nav-wrap\">\n <div class=\"nav-list\">\n @for (item of menuItems(); track $index) {\n @if (item.items?.length) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n @if (item.link) {\n @if (isAbsoluteLink(item.link)) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n target=\"_blank\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [href]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n [routerLink]=\"item.link\"\n [queryParams]=\"item.queryParams\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n\n @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n <kit-navigation-menu-submenu class=\"sub-panel\"\n [@widthExpandCollapseAnimation]\n [menuItem]=\"selectedItem()\"\n [appsMenuItems]=\"selectedAppsItems()\"\n [logoPath]=\"logoPath\"\n (logoClicked)=\"handleLogoClick()\"\n ></kit-navigation-menu-submenu>\n }\n\n <ng-template #linkIconTemplate let-item>\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
4327
4354
|
expandCollapseAnimation('width'),
|
|
@@ -4339,7 +4366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
4339
4366
|
NgClass,
|
|
4340
4367
|
NgTemplateOutlet,
|
|
4341
4368
|
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed()\">\n <div class=\"main-panel\">\n @if (appsMenuItems().length > 1) {\n <button class=\"app-btn\"\n [class.active]=\"selectedAppsItems() && !collapsed()\"\n (click)=\"onAppsMenuButtonClick()\">\n <kit-svg-icon class=\"app-btn-icon\"\n [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n ></kit-svg-icon>\n </button>\n }\n <div class=\"nav-wrap\">\n <div class=\"nav-list\">\n @for (item of menuItems(); track $index) {\n @if (item.items?.length) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n @if (item.link) {\n @if (isAbsoluteLink(item.link)) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n target=\"_blank\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [href]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n [routerLink]=\"item.link\"\n [queryParams]=\"item.queryParams\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n\n @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n <kit-navigation-menu-submenu class=\"sub-panel\"\n [@widthExpandCollapseAnimation]\n [menuItem]=\"selectedItem()\"\n [appsMenuItems]=\"selectedAppsItems()\"\n [logoPath]=\"logoPath\"\n (logoClicked)=\"handleLogoClick()\"\n ></kit-navigation-menu-submenu>\n }\n\n <ng-template #linkIconTemplate let-item>\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
4342
|
-
}],
|
|
4369
|
+
}], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }, { type: i0.Output, args: ["menuItemsChange"] }], appsMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsMenuItems", required: false }] }], logoPath: [{
|
|
4343
4370
|
type: Input
|
|
4344
4371
|
}] } });
|
|
4345
4372
|
|
|
@@ -6254,9 +6281,10 @@ class KitFileCardMessagesComponent {
|
|
|
6254
6281
|
* Defines a value to use as "Download" button label
|
|
6255
6282
|
*/
|
|
6256
6283
|
this.downloadButtonLabel = 'Download';
|
|
6284
|
+
this.fileSize = input('File Size', ...(ngDevMode ? [{ debugName: "fileSize" }] : /* istanbul ignore next */ []));
|
|
6257
6285
|
}
|
|
6258
6286
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileCardMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: KitFileCardMessagesComponent, isStandalone: true, selector: "kit-file-card-custom-messages", inputs: { createDate: { classPropertyName: "createDate", publicName: "createDate", isSignal: false, isRequired: false, transformFunction: null }, createdBy: { classPropertyName: "createdBy", publicName: "createdBy", isSignal: false, isRequired: false, transformFunction: null }, viewButtonLabel: { classPropertyName: "viewButtonLabel", publicName: "viewButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, downloadButtonLabel: { classPropertyName: "downloadButtonLabel", publicName: "downloadButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6260
6288
|
}
|
|
6261
6289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileCardMessagesComponent, decorators: [{
|
|
6262
6290
|
type: Component,
|
|
@@ -6273,7 +6301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6273
6301
|
type: Input
|
|
6274
6302
|
}], downloadButtonLabel: [{
|
|
6275
6303
|
type: Input
|
|
6276
|
-
}] } });
|
|
6304
|
+
}], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }] } });
|
|
6277
6305
|
|
|
6278
6306
|
var KitFileCardFileType;
|
|
6279
6307
|
(function (KitFileCardFileType) {
|
|
@@ -6357,6 +6385,7 @@ class KitFileCardComponent {
|
|
|
6357
6385
|
* Defines a value that will be used as a card name
|
|
6358
6386
|
*/
|
|
6359
6387
|
this.name = '';
|
|
6388
|
+
this.fileSize = input(...(ngDevMode ? [undefined, { debugName: "fileSize" }] : /* istanbul ignore next */ []));
|
|
6360
6389
|
/**
|
|
6361
6390
|
* An action which is emitted when view button clicked
|
|
6362
6391
|
*/
|
|
@@ -6393,7 +6422,7 @@ class KitFileCardComponent {
|
|
|
6393
6422
|
return browserViewableFileTypes.includes(fileType);
|
|
6394
6423
|
}
|
|
6395
6424
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6396
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFileCardComponent, isStandalone: true, selector: "kit-file-card", inputs: { title: "title", type: "type", label: "label", fileType: "fileType", date: "date", name: "name" }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title }}</div>\n <div class=\"card-type\">{{ label }}</div>\n </div>\n <div class=\"kit-file-card-content\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"getFileIconByExtension(fileType)\">\n </kit-svg-icon>\n <div class=\"card-main\">\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createDate ?? createDateLabel }}</div>\n <div class=\"item-value\">{{ date | date: dateFormat : 'UTC' }}</div>\n </div>\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createdBy ?? createdByLabel }}</div>\n <div class=\"item-value\">{{ name }}</div>\n </div>\n </div>\n </div>\n <div class=\"kit-file-card-action\">\n @if (hasViewFileButton(fileType)) {\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.viewButtonLabel ?? viewButtonLabel\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\"\n ></kit-button>\n }\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.downloadButtonLabel ?? downloadButtonLabel\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\"\n ></kit-button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".kit-file-card{padding:25px;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-header{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card .card-title{font-size:16px;font-weight:400}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;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-content{display:flex;gap:24px;padding:17px 0}.kit-file-card .card-icon{width:78px;height:100px}.kit-file-card .card-main{display:flex;flex-direction:column;gap:12px}.kit-file-card .card-main-item{line-height:22px}.kit-file-card .card-main .item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card .card-main .item-value{font-size:16px}.kit-file-card-action{display:flex;gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card-action .action-button{flex:1}.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)}\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: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFileCardComponent, isStandalone: true, selector: "kit-file-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: false, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title }}</div>\n <div class=\"card-type\">{{ label }}</div>\n </div>\n <div class=\"kit-file-card-content\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"getFileIconByExtension(fileType)\">\n </kit-svg-icon>\n <div class=\"card-main\">\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createDate ?? createDateLabel }}</div>\n <div class=\"item-value\">{{ date | date: dateFormat : 'UTC' }}</div>\n </div>\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createdBy ?? createdByLabel }}</div>\n <div class=\"item-value\">{{ name }}</div>\n </div>\n @if (fileSize()) {\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.fileSize ?? 'File Size' }}</div>\n <div class=\"item-value\">{{ fileSize() }}</div>\n </div>\n }\n </div>\n </div>\n <div class=\"kit-file-card-action\">\n @if (hasViewFileButton(fileType)) {\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.viewButtonLabel ?? viewButtonLabel\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\"\n ></kit-button>\n }\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.downloadButtonLabel ?? downloadButtonLabel\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\"\n ></kit-button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".kit-file-card{padding:25px;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-header{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card .card-title{font-size:16px;font-weight:400}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;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-content{display:flex;align-items:center;gap:24px;padding:17px 0}.kit-file-card .card-icon{width:78px;height:100px}.kit-file-card .card-main{display:flex;flex-direction:column;gap:12px}.kit-file-card .card-main-item{line-height:22px}.kit-file-card .card-main .item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card .card-main .item-value{font-size:16px}.kit-file-card-action{display:flex;gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card-action .action-button{flex:1}.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)}\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: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6397
6426
|
}
|
|
6398
6427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileCardComponent, decorators: [{
|
|
6399
6428
|
type: Component,
|
|
@@ -6402,7 +6431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6402
6431
|
KitSvgIconComponent,
|
|
6403
6432
|
DatePipe,
|
|
6404
6433
|
NgClass,
|
|
6405
|
-
], template: "<div class=\"kit-file-card\"\n [ngClass]=\"type\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title }}</div>\n <div class=\"card-type\">{{ label }}</div>\n </div>\n <div class=\"kit-file-card-content\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"getFileIconByExtension(fileType)\">\n </kit-svg-icon>\n <div class=\"card-main\">\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createDate ?? createDateLabel }}</div>\n <div class=\"item-value\">{{ date | date: dateFormat : 'UTC' }}</div>\n </div>\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createdBy ?? createdByLabel }}</div>\n <div class=\"item-value\">{{ name }}</div>\n </div>\n </div>\n </div>\n <div class=\"kit-file-card-action\">\n @if (hasViewFileButton(fileType)) {\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.viewButtonLabel ?? viewButtonLabel\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\"\n ></kit-button>\n }\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.downloadButtonLabel ?? downloadButtonLabel\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\"\n ></kit-button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".kit-file-card{padding:25px;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-header{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card .card-title{font-size:16px;font-weight:400}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;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-content{display:flex;gap:24px;padding:17px 0}.kit-file-card .card-icon{width:78px;height:100px}.kit-file-card .card-main{display:flex;flex-direction:column;gap:12px}.kit-file-card .card-main-item{line-height:22px}.kit-file-card .card-main .item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card .card-main .item-value{font-size:16px}.kit-file-card-action{display:flex;gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card-action .action-button{flex:1}.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)}\n"] }]
|
|
6434
|
+
], template: "<div class=\"kit-file-card\"\n [ngClass]=\"type\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title }}</div>\n <div class=\"card-type\">{{ label }}</div>\n </div>\n <div class=\"kit-file-card-content\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"getFileIconByExtension(fileType)\">\n </kit-svg-icon>\n <div class=\"card-main\">\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createDate ?? createDateLabel }}</div>\n <div class=\"item-value\">{{ date | date: dateFormat : 'UTC' }}</div>\n </div>\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createdBy ?? createdByLabel }}</div>\n <div class=\"item-value\">{{ name }}</div>\n </div>\n @if (fileSize()) {\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.fileSize ?? 'File Size' }}</div>\n <div class=\"item-value\">{{ fileSize() }}</div>\n </div>\n }\n </div>\n </div>\n <div class=\"kit-file-card-action\">\n @if (hasViewFileButton(fileType)) {\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.viewButtonLabel ?? viewButtonLabel\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\"\n ></kit-button>\n }\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.downloadButtonLabel ?? downloadButtonLabel\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\"\n ></kit-button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".kit-file-card{padding:25px;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-header{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card .card-title{font-size:16px;font-weight:400}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;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-content{display:flex;align-items:center;gap:24px;padding:17px 0}.kit-file-card .card-icon{width:78px;height:100px}.kit-file-card .card-main{display:flex;flex-direction:column;gap:12px}.kit-file-card .card-main-item{line-height:22px}.kit-file-card .card-main .item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card .card-main .item-value{font-size:16px}.kit-file-card-action{display:flex;gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card-action .action-button{flex:1}.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)}\n"] }]
|
|
6406
6435
|
}], propDecorators: { title: [{
|
|
6407
6436
|
type: Input
|
|
6408
6437
|
}], type: [{
|
|
@@ -6415,7 +6444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6415
6444
|
type: Input
|
|
6416
6445
|
}], name: [{
|
|
6417
6446
|
type: Input
|
|
6418
|
-
}], viewButtonClicked: [{
|
|
6447
|
+
}], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], viewButtonClicked: [{
|
|
6419
6448
|
type: Output
|
|
6420
6449
|
}], downloadButtonClicked: [{
|
|
6421
6450
|
type: Output
|