@indigina/ui-kit 1.1.637 → 1.1.638
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.
|
@@ -645,7 +645,12 @@ var KitTooltipPosition;
|
|
|
645
645
|
|
|
646
646
|
class KitTooltipDirective extends TooltipDirective {
|
|
647
647
|
constructor() {
|
|
648
|
-
effect(() =>
|
|
648
|
+
effect(() => {
|
|
649
|
+
this.showOn = this.getShowOption();
|
|
650
|
+
if (!this.kitTooltipVisible()) {
|
|
651
|
+
this.hide();
|
|
652
|
+
}
|
|
653
|
+
});
|
|
649
654
|
super(inject(ElementRef), inject(NgZone), inject(Renderer2), inject(PopupService), inject(TooltipSettings), inject(TooltipSettings));
|
|
650
655
|
this.kitTooltipPosition = input(KitTooltipPosition.BOTTOM, /* @ts-ignore */
|
|
651
656
|
...(ngDevMode ? [{ debugName: "kitTooltipPosition" }] : /* istanbul ignore next */ []));
|
|
@@ -8509,7 +8514,7 @@ class KitTimelineCardComponent {
|
|
|
8509
8514
|
this.kitTooltipPosition = KitTooltipPosition;
|
|
8510
8515
|
}
|
|
8511
8516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTimelineCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8512
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTimelineCardComponent, isStandalone: true, selector: "kit-timeline-card", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track $index) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;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);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;fill:var(--ui-kit-color-grey-14)}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTimelineCardComponent, isStandalone: true, selector: "kit-timeline-card", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track $index) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;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);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px;overflow-wrap:anywhere}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;fill:var(--ui-kit-color-grey-14)}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8513
8518
|
}
|
|
8514
8519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTimelineCardComponent, decorators: [{
|
|
8515
8520
|
type: Component,
|
|
@@ -8517,7 +8522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
8517
8522
|
KitSvgIconComponent,
|
|
8518
8523
|
NgClass,
|
|
8519
8524
|
KitTooltipDirective,
|
|
8520
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track $index) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;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);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;fill:var(--ui-kit-color-grey-14)}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
8525
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n <div class=\"kit-timeline-card {{ item.theme }}-theme\">\n <div class=\"card-header\">\n @if (item.icon) {\n <div class=\"card-icon-wrapper\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n </div>\n }\n <div class=\"card-info\">\n <div class=\"card-info-top\">\n <div class=\"card-title\">{{ item.title }}</div>\n @if (item?.textBadge) {\n <div class=\"card-badge text-badge\">{{ item.textBadge }}</div>\n }\n @if (item?.countBadge) {\n <div class=\"card-badge count-badge\">{{ item.countBadge }}</div>\n }\n </div>\n <div class=\"card-info-bottom\">{{ item.subTitle }}</div>\n </div>\n </div>\n @if (item?.transportationType) {\n <div class=\"card-main\">\n <div class=\"card-route\"\n [ngClass]=\"item.transportationType\">\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-original\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.originalPort\">\n {{ item?.originalPort }}\n </div>\n <kit-svg-icon class=\"card-route-icon\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-destination\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.destinationPort\">\n {{ item?.destinationPort }}\n </div>\n <div class=\"card-route-label\">by</div>\n <div kitTooltip\n kitTooltipFilter=\".card-route-item\"\n class=\"card-route-item card-route-type\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"item?.transitMode\">\n {{ item?.transitMode }}\n </div>\n </div>\n </div>\n }\n <div class=\"card-footer\">\n @for (date of item.date; track $index) {\n <div class=\"card-date\">\n <div class=\"card-date-top\">\n <kit-svg-icon class=\"card-date-icon\"\n [icon]=\"kitSvgIcon.CALENDAR\"\n ></kit-svg-icon>\n <div class=\"card-date-label\">{{ date.label }}</div>\n </div>\n <div class=\"card-date-value\">{{ date.value }}</div>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".kit-timeline-card{display:flex;flex-direction:column;gap:15px;padding:25px;width:323px;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);box-sizing:border-box}.kit-timeline-card.success-theme,.kit-timeline-card.warning-theme,.kit-timeline-card.danger-theme{border-width:2px}.kit-timeline-card.success-theme{border-color:var(--ui-kit-color-green-1)}.kit-timeline-card.warning-theme{border-color:var(--ui-kit-color-orange)}.kit-timeline-card.danger-theme{border-color:var(--ui-kit-color-red-1)}.kit-timeline-card .card-header{display:flex;align-items:center;gap:12px}.kit-timeline-card .card-icon{display:block;width:18px;height:18px}.kit-timeline-card .card-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-timeline-card .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-timeline-card .card-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%}.kit-timeline-card .card-info{flex:1}.kit-timeline-card .card-info-top{display:flex;align-items:center}.kit-timeline-card .card-info-bottom{font-size:14px;font-weight:400;line-height:20px;overflow-wrap:anywhere}.kit-timeline-card .card-title{flex:1;font-size:16px;font-weight:600;line-height:22px}.kit-timeline-card .card-badge{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;font-weight:500}.kit-timeline-card .text-badge{height:20px;border:1px solid;border-radius:4px}.kit-timeline-card .count-badge{height:24px;color:var(--ui-kit-color-white);border-radius:16px}.kit-timeline-card .card-route{display:flex;align-items:center;padding-bottom:7px}.kit-timeline-card .card-route-item{padding:0 8px;height:20px;font-size:12px;font-weight:500;line-height:20px;border-radius:4px;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-timeline-card .card-route-icon{display:block;margin:0 3px;width:16px;height:16px;fill:var(--ui-kit-color-grey-14)}.kit-timeline-card .card-route-original,.kit-timeline-card .card-route-destination{color:var(--ui-kit-color-grey-14);border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-white)}.kit-timeline-card .card-route-label{margin:0 7px;color:var(--ui-kit-color-grey-14);font-size:13px;font-weight:400}.kit-timeline-card .card-route-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-16)}.kit-timeline-card .card-footer{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-timeline-card .card-date{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;line-height:20px}.kit-timeline-card .card-date-top{display:flex;align-items:center;gap:3px}.kit-timeline-card .card-date-label{color:var(--ui-kit-color-grey-14);font-size:12px;font-weight:500}.kit-timeline-card .card-date-icon{display:block;width:18px;height:18px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-timeline-card .card-date-value{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:600;line-height:20px}.kit-timeline-card.purple-theme .card-icon.fill{fill:var(--ui-kit-color-purple);stroke:none}.kit-timeline-card.purple-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-icon-wrapper{background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .text-badge{color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.purple-theme .count-badge{background:var(--ui-kit-color-purple)}.kit-timeline-card.purple-theme .card-route.departure .card-route-original,.kit-timeline-card.purple-theme .card-route.arrival .card-route-destination,.kit-timeline-card.purple-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background:var(--ui-kit-color-purple-1)}.kit-timeline-card.green-theme .card-icon.fill{fill:var(--ui-kit-color-green-3);stroke:none}.kit-timeline-card.green-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-icon-wrapper{background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .text-badge{color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.green-theme .count-badge{background:var(--ui-kit-color-green-3)}.kit-timeline-card.green-theme .card-route.departure .card-route-original,.kit-timeline-card.green-theme .card-route.arrival .card-route-destination,.kit-timeline-card.green-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-3);border-color:var(--ui-kit-color-green-3);background:var(--ui-kit-color-green-4)}.kit-timeline-card.blue-theme .card-icon.fill{fill:var(--ui-kit-color-blue);stroke:none}.kit-timeline-card.blue-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-icon-wrapper{background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .text-badge{color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.blue-theme .count-badge{background:var(--ui-kit-color-blue)}.kit-timeline-card.blue-theme .card-route.departure .card-route-original,.kit-timeline-card.blue-theme .card-route.arrival .card-route-destination,.kit-timeline-card.blue-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background:var(--ui-kit-color-blue-1)}.kit-timeline-card.grey-theme .card-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-timeline-card.grey-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-icon-wrapper{background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .text-badge{color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.grey-theme .count-badge{background:var(--ui-kit-color-grey-10)}.kit-timeline-card.grey-theme .card-route.departure .card-route-original,.kit-timeline-card.grey-theme .card-route.arrival .card-route-destination,.kit-timeline-card.grey-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-grey-16)}.kit-timeline-card.teal-theme .card-icon.fill{fill:var(--ui-kit-color-teal);stroke:none}.kit-timeline-card.teal-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-icon-wrapper{background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .text-badge{color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.teal-theme .count-badge{background:var(--ui-kit-color-teal)}.kit-timeline-card.teal-theme .card-route.departure .card-route-original,.kit-timeline-card.teal-theme .card-route.arrival .card-route-destination,.kit-timeline-card.teal-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background:var(--ui-kit-color-teal-1)}.kit-timeline-card.pink-theme .card-icon.fill{fill:var(--ui-kit-color-pink);stroke:none}.kit-timeline-card.pink-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-icon-wrapper{background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .text-badge{color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.pink-theme .count-badge{background:var(--ui-kit-color-pink)}.kit-timeline-card.pink-theme .card-route.departure .card-route-original,.kit-timeline-card.pink-theme .card-route.arrival .card-route-destination,.kit-timeline-card.pink-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background:var(--ui-kit-color-pink-1)}.kit-timeline-card.success-theme .card-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-timeline-card.success-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-icon-wrapper{background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .text-badge{color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.success-theme .count-badge{background:var(--ui-kit-color-green-1)}.kit-timeline-card.success-theme .card-route.departure .card-route-original,.kit-timeline-card.success-theme .card-route.arrival .card-route-destination,.kit-timeline-card.success-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background:var(--ui-kit-color-green-5)}.kit-timeline-card.warning-theme .card-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-timeline-card.warning-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-icon-wrapper{background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .text-badge{color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.warning-theme .count-badge{background:var(--ui-kit-color-orange)}.kit-timeline-card.warning-theme .card-route.departure .card-route-original,.kit-timeline-card.warning-theme .card-route.arrival .card-route-destination,.kit-timeline-card.warning-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-timeline-card.danger-theme .card-icon.fill{fill:var(--ui-kit-color-red-1);stroke:none}.kit-timeline-card.danger-theme .card-icon.stroke{fill:none;stroke:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-icon-wrapper{background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .card-date:nth-child(n+2):last-child .card-date-icon{fill:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .text-badge{color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}.kit-timeline-card.danger-theme .count-badge{background:var(--ui-kit-color-red-1)}.kit-timeline-card.danger-theme .card-route.departure .card-route-original,.kit-timeline-card.danger-theme .card-route.arrival .card-route-destination,.kit-timeline-card.danger-theme .card-route.confirmed .card-route-original{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background:var(--ui-kit-color-red-3)}\n"] }]
|
|
8521
8526
|
}], propDecorators: { item: [{
|
|
8522
8527
|
type: Input
|
|
8523
8528
|
}] } });
|
|
@@ -15479,19 +15484,19 @@ class KitFilterCheckboxComponent {
|
|
|
15479
15484
|
this.selectedValues = signal([], /* @ts-ignore */
|
|
15480
15485
|
...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
|
|
15481
15486
|
this.groupedItems = computed(() => {
|
|
15482
|
-
const groupedItems =
|
|
15487
|
+
const groupedItems = new Map();
|
|
15483
15488
|
this.items().forEach(item => {
|
|
15484
15489
|
const itemKey = this.translateService.instant(this.buildTranslateKey(item.title));
|
|
15485
|
-
if (!groupedItems
|
|
15486
|
-
groupedItems
|
|
15490
|
+
if (!groupedItems.has(itemKey)) {
|
|
15491
|
+
groupedItems.set(itemKey, {
|
|
15487
15492
|
title: item.title,
|
|
15488
15493
|
value: [],
|
|
15489
15494
|
checked: item.checked,
|
|
15490
|
-
};
|
|
15495
|
+
});
|
|
15491
15496
|
}
|
|
15492
|
-
groupedItems
|
|
15497
|
+
groupedItems.get(itemKey)?.value.push(item.value);
|
|
15493
15498
|
});
|
|
15494
|
-
return
|
|
15499
|
+
return Array.from(groupedItems.values());
|
|
15495
15500
|
}, /* @ts-ignore */
|
|
15496
15501
|
...(ngDevMode ? [{ debugName: "groupedItems" }] : /* istanbul ignore next */ []));
|
|
15497
15502
|
this.visibleItems = computed(() => {
|
|
@@ -15656,7 +15661,7 @@ class KitFilterCheckboxComponent {
|
|
|
15656
15661
|
this.isContentOverflowing.set(!!element && element.scrollHeight > element.clientHeight);
|
|
15657
15662
|
}
|
|
15658
15663
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterItems", first: true, predicate: ["filterItems"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <
|
|
15664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterItems", first: true, predicate: ["filterItems"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <span class=\"kit-filter-checkbox-single-item\">{{ 'kit.filters.all' | translate }}</span>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipVisible]=\"!isPopupOpen\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\"\n [hidden]=\"!isContentOverflowing() && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n\n <div #filterItems\n class=\"filter-items\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [ngModel]=\"allSelected()\"\n (changed)=\"toggleAll($event)\">\n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ 'kit.filters.all' | translate }}</div>\n } @else {\n @for (item of displayedValues.slice(1); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n }\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .filter-items{padding-left:2px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "iconType", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15660
15665
|
}
|
|
15661
15666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
|
|
15662
15667
|
type: Component,
|
|
@@ -15668,7 +15673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
15668
15673
|
FormsModule,
|
|
15669
15674
|
KitPopupComponent,
|
|
15670
15675
|
KitTextboxComponent,
|
|
15671
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <
|
|
15676
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly && (filter().removable ?? true)\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (allSelected()) {\n <span class=\"kit-filter-checkbox-single-item\">{{ 'kit.filters.all' | translate }}</span>\n } @else if (displayedValues.length > 1) {\n <div class=\"kit-filter-checkbox-tooltip\"\n kitTooltip\n kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipVisible]=\"!isPopupOpen\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n </div>\n } @else {\n <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [closePopupOnCancel]=\"false\"\n (applyAction)=\"applyFilter()\"\n (cancelAction)=\"clearAllFilters()\"\n (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\"\n [hidden]=\"!isContentOverflowing() && !searchTerm()\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"searchTerm.set($event)\"\n ></kit-textbox>\n </div>\n\n <div #filterItems\n class=\"filter-items\">\n @if (!searchTerm()) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"'kit.filters.all' | translate\"\n [ngModel]=\"allSelected()\"\n (changed)=\"toggleAll($event)\">\n </kit-checkbox>\n }\n\n @for (item of visibleItems(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange($event, item.value)\"\n ></kit-checkbox>\n }\n\n @if (!visibleItems().length) {\n {{ ('kit.filters.noDataFound' | translate) }}\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @if (allSelected()) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ 'kit.filters.all' | translate }}</div>\n } @else {\n @for (item of displayedValues.slice(1); track item) {\n <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n }\n }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .filter-items{padding-left:2px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
|
|
15672
15677
|
}], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], guidField: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidField", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], filterItems: [{ type: i0.ViewChild, args: ['filterItems', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
|
|
15673
15678
|
|
|
15674
15679
|
class KitFilterCustomInputComponent {
|