@indigina/ui-kit 1.1.583 → 1.1.585

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.
@@ -5755,6 +5755,10 @@ const expandCollapseAnimation = (property) => trigger(`${property}ExpandCollapse
5755
5755
  const isAbsoluteLink = (link) => {
5756
5756
  return /^https?:\/\//.test(link);
5757
5757
  };
5758
+ const getNavigationMenuItemLink = (item, baseUrls) => {
5759
+ const baseUrl = item.baseUrlKey ? baseUrls[item.baseUrlKey] ?? '' : '';
5760
+ return `${baseUrl}${item.link ?? ''}`;
5761
+ };
5758
5762
 
5759
5763
  class KitNavigationMenuSubmenuComponent {
5760
5764
  constructor() {
@@ -5762,6 +5766,8 @@ class KitNavigationMenuSubmenuComponent {
5762
5766
  this.menuItem = null;
5763
5767
  this.appsMenuItems = null;
5764
5768
  this.logoPath = '';
5769
+ this.baseUrls = input({}, /* @ts-ignore */
5770
+ ...(ngDevMode ? [{ debugName: "baseUrls" }] : /* istanbul ignore next */ []));
5765
5771
  this.logoClicked = new EventEmitter();
5766
5772
  this.KitSvgIcon = KitSvgIcon;
5767
5773
  this.rootPath = '/';
@@ -5773,6 +5779,9 @@ class KitNavigationMenuSubmenuComponent {
5773
5779
  }
5774
5780
  item.expanded = !item.expanded;
5775
5781
  }
5782
+ getItemLink(item) {
5783
+ return getNavigationMenuItemLink(item, this.baseUrls());
5784
+ }
5776
5785
  isAppItemActive(url) {
5777
5786
  if (!url) {
5778
5787
  return false;
@@ -5785,7 +5794,7 @@ class KitNavigationMenuSubmenuComponent {
5785
5794
  return `${location?.origin}/` === url;
5786
5795
  }
5787
5796
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5788
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitNavigationMenuSubmenuComponent, isStandalone: true, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @if (isAbsoluteLink(child.link)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"child.link\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n [queryParams]=\"child.queryParams\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @if (isAbsoluteLink(subChild.link)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChild.link\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n [queryParams]=\"subChild.queryParams\">\n {{ subChild.title }}\n </a>\n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{fill:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$9.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
5797
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitNavigationMenuSubmenuComponent, isStandalone: true, selector: "kit-navigation-menu-submenu", inputs: { menuItem: { classPropertyName: "menuItem", publicName: "menuItem", isSignal: false, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: false, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null }, baseUrls: { classPropertyName: "baseUrls", publicName: "baseUrls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @let childLink = getItemLink(child);\n @if (isAbsoluteLink(childLink)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"childLink\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"childLink\"\n [queryParams]=\"child.queryParams\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @let subChildLink = getItemLink(subChild);\n @if (isAbsoluteLink(subChildLink)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChildLink\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChildLink\"\n [queryParams]=\"subChild.queryParams\">\n {{ subChild.title }}\n </a>\n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{fill:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$9.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
5789
5798
  expandCollapseAnimation('height'),
5790
5799
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5791
5800
  }
@@ -5796,14 +5805,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
5796
5805
  ], imports: [
5797
5806
  RouterModule,
5798
5807
  KitSvgIconComponent,
5799
- ], template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @if (isAbsoluteLink(child.link)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"child.link\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n [queryParams]=\"child.queryParams\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @if (isAbsoluteLink(subChild.link)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChild.link\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n [queryParams]=\"subChild.queryParams\">\n {{ subChild.title }}\n </a>\n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{fill:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"] }]
5808
+ ], template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @let childLink = getItemLink(child);\n @if (isAbsoluteLink(childLink)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"childLink\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"childLink\"\n [queryParams]=\"child.queryParams\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @let subChildLink = getItemLink(subChild);\n @if (isAbsoluteLink(subChildLink)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChildLink\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChildLink\"\n [queryParams]=\"subChild.queryParams\">\n {{ subChild.title }}\n </a>\n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{fill:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"] }]
5800
5809
  }], propDecorators: { menuItem: [{
5801
5810
  type: Input
5802
5811
  }], appsMenuItems: [{
5803
5812
  type: Input
5804
5813
  }], logoPath: [{
5805
5814
  type: Input
5806
- }], logoClicked: [{
5815
+ }], baseUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrls", required: false }] }], logoClicked: [{
5807
5816
  type: Output
5808
5817
  }] } });
5809
5818
 
@@ -5848,7 +5857,10 @@ class KitNavigationMenuComponent {
5848
5857
  */
5849
5858
  this.appsMenuItems = input([], /* @ts-ignore */
5850
5859
  ...(ngDevMode ? [{ debugName: "appsMenuItems" }] : /* istanbul ignore next */ []));
5851
- this.logoPath = '';
5860
+ this.baseUrls = input({}, /* @ts-ignore */
5861
+ ...(ngDevMode ? [{ debugName: "baseUrls" }] : /* istanbul ignore next */ []));
5862
+ this.logoPath = input('', /* @ts-ignore */
5863
+ ...(ngDevMode ? [{ debugName: "logoPath" }] : /* istanbul ignore next */ []));
5852
5864
  this.selectedItem = signal(null, /* @ts-ignore */
5853
5865
  ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
5854
5866
  this.selectedAppsItems = signal(null, /* @ts-ignore */
@@ -5869,6 +5881,9 @@ class KitNavigationMenuComponent {
5869
5881
  this.selectedItem.set(item);
5870
5882
  this.updateMenuState();
5871
5883
  }
5884
+ getItemLink(item) {
5885
+ return getNavigationMenuItemLink(item, this.baseUrls());
5886
+ }
5872
5887
  handleLogoClick() {
5873
5888
  this.collapseAllItems(this.menuItems());
5874
5889
  this.selectedAppsItems.set(null);
@@ -5973,7 +5988,7 @@ class KitNavigationMenuComponent {
5973
5988
  return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
5974
5989
  }
5975
5990
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5976
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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", "browserUrl", "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", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
5991
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, baseUrls: { classPropertyName: "baseUrls", publicName: "baseUrls", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: true, 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 @let link = getItemLink(item);\n @if (isAbsoluteLink(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]=\"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]=\"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 [baseUrls]=\"baseUrls()\"\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", "browserUrl", "routerLink"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath", "baseUrls"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
5977
5992
  expandCollapseAnimation('width'),
5978
5993
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5979
5994
  }
@@ -5988,10 +6003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
5988
6003
  KitTooltipDirective,
5989
6004
  NgClass,
5990
6005
  NgTemplateOutlet,
5991
- ], 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"] }]
5992
- }], 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: [{
5993
- type: Input
5994
- }] } });
6006
+ ], 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 @let link = getItemLink(item);\n @if (isAbsoluteLink(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]=\"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]=\"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 [baseUrls]=\"baseUrls()\"\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"] }]
6007
+ }], 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 }] }], baseUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrls", required: false }] }], logoPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoPath", required: false }] }] } });
5995
6008
 
5996
6009
  var KitBadgeTheme;
5997
6010
  (function (KitBadgeTheme) {
@@ -8783,7 +8796,7 @@ class KitFileCardComponent {
8783
8796
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8784
8797
  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: [
8785
8798
  DatePipe,
8786
- ], 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:grid;justify-content:space-between;grid-template-columns:minmax(0,max-content) minmax(0,max-content)}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-type{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:calc(100% - 18px)}\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 }); }
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:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr)}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-subtitle-label{min-width:0}.kit-file-card .card-type{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:calc(100% - 18px)}\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 }); }
8787
8800
  }
8788
8801
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFileCardComponent, decorators: [{
8789
8802
  type: Component,
@@ -8797,7 +8810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
8797
8810
  KitTruncateTextComponent,
8798
8811
  ], providers: [
8799
8812
  DatePipe,
8800
- ], 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:grid;justify-content:space-between;grid-template-columns:minmax(0,max-content) minmax(0,max-content)}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-type{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:calc(100% - 18px)}\n"] }]
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:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr)}.kit-file-card .card-subtitle:has(.card-subtitle-label){gap:10px}.kit-file-card .card-subtitle-label{min-width:0}.kit-file-card .card-type{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:calc(100% - 18px)}\n"] }]
8801
8814
  }], 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 }] }] } });
8802
8815
 
8803
8816
  var KitDataFieldState;
@@ -16573,6 +16586,8 @@ class KitSidebarComponent {
16573
16586
  ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
16574
16587
  this.hasSelectedClient = input(true, /* @ts-ignore */
16575
16588
  ...(ngDevMode ? [{ debugName: "hasSelectedClient" }] : /* istanbul ignore next */ []));
16589
+ this.baseUrls = input({}, /* @ts-ignore */
16590
+ ...(ngDevMode ? [{ debugName: "baseUrls" }] : /* istanbul ignore next */ []));
16576
16591
  this.menuItems$ = combineLatest([
16577
16592
  this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
16578
16593
  toObservable(this.menuItems),
@@ -16590,15 +16605,15 @@ class KitSidebarComponent {
16590
16605
  this.store.dispatch(new FetchUserApplications());
16591
16606
  }
16592
16607
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
16593
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSidebarComponent, isStandalone: true, selector: "kit-sidebar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, hasSelectedClient: { classPropertyName: "hasSelectedClient", publicName: "hasSelectedClient", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: ["menuItems", "appsMenuItems", "logoPath"], outputs: ["menuItemsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
16608
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSidebarComponent, isStandalone: true, selector: "kit-sidebar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, hasSelectedClient: { classPropertyName: "hasSelectedClient", publicName: "hasSelectedClient", isSignal: true, isRequired: false, transformFunction: null }, baseUrls: { classPropertyName: "baseUrls", publicName: "baseUrls", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n [baseUrls]=\"baseUrls()\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: ["menuItems", "appsMenuItems", "baseUrls", "logoPath"], outputs: ["menuItemsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
16594
16609
  }
16595
16610
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSidebarComponent, decorators: [{
16596
16611
  type: Component,
16597
16612
  args: [{ selector: 'kit-sidebar', imports: [
16598
16613
  KitNavigationMenuComponent,
16599
16614
  AsyncPipe,
16600
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"] }]
16601
- }], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], hasSelectedClient: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSelectedClient", required: false }] }] } });
16615
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n [baseUrls]=\"baseUrls()\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"] }]
16616
+ }], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], hasSelectedClient: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSelectedClient", required: false }] }], baseUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrls", required: false }] }] } });
16602
16617
 
16603
16618
  class KitTopBarUserComponent {
16604
16619
  constructor() {