@indigina/ui-kit 1.1.117 → 1.1.119
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.
|
@@ -4575,7 +4575,6 @@ class KitDatepickerComponent {
|
|
|
4575
4575
|
this.changed.emit(value);
|
|
4576
4576
|
this.defaultDate = value;
|
|
4577
4577
|
this.onChange(value);
|
|
4578
|
-
this.datepicker.toggle(false);
|
|
4579
4578
|
}
|
|
4580
4579
|
onPopupToggle() {
|
|
4581
4580
|
this.datepicker.focus();
|
|
@@ -4602,7 +4601,7 @@ class KitDatepickerComponent {
|
|
|
4602
4601
|
provide: NG_VALUE_ACCESSOR,
|
|
4603
4602
|
useExisting: forwardRef(() => KitDatepickerComponent),
|
|
4604
4603
|
multi: true,
|
|
4605
|
-
}], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-datepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto;width:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"], dependencies: [{ kind: "component", type: i2.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4604
|
+
}], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [(value)]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n [autoFill]=\"true\"\n [autofocus]=\"true\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-datepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto;width:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"], dependencies: [{ kind: "component", type: i2.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4606
4605
|
}
|
|
4607
4606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDatepickerComponent, decorators: [{
|
|
4608
4607
|
type: Component,
|
|
@@ -4610,7 +4609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
4610
4609
|
provide: NG_VALUE_ACCESSOR,
|
|
4611
4610
|
useExisting: forwardRef(() => KitDatepickerComponent),
|
|
4612
4611
|
multi: true,
|
|
4613
|
-
}], standalone: false, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [value]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-datepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto;width:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"] }]
|
|
4612
|
+
}], standalone: false, template: "<div class=\"kit-datepicker\"\n [class.disabled]=\"disabled\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datepicker)\"\n ></kit-input-label>\n }\n\n <div class=\"kit-datepicker-input\">\n <kendo-datepicker #datepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [format]=\"format\"\n [min]=\"min\"\n [max]=\"max\"\n [popupSettings]=\"datepickerPopupSettings\"\n [(value)]=\"defaultDate\"\n [focusedDate]=\"defaultDate\"\n [autoFill]=\"true\"\n [autofocus]=\"true\"\n (blur)=\"onBlur()\"\n (valueChange)=\"onValueChange($event)\"\n ></kendo-datepicker>\n <button class=\"toggle-btn\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"calendarIcon\"\n ></kit-svg-icon>\n </button>\n </div>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datepicker .label{display:block;margin-bottom:4px}.kit-datepicker-input{position:relative}.kit-datepicker .k-input-button{display:none}.kit-datepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:var(--ui-kit-color-grey-12);stroke:none}.kit-datepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datepicker:hover .k-datepicker{border-color:var(--ui-kit-color-hover)}.kit-datepicker .k-datepicker{height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);box-shadow:none}.kit-datepicker .k-datepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datepicker .k-datepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datepicker .k-input-inner{padding:0 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-datepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datepicker.disabled .k-datepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datepicker.disabled .toggle-btn{cursor:default}.kit-datepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup{margin-top:10px;padding:8px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:4px;border:none}.kit-datepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-nav-today{padding:2px 8px;color:var(--ui-kit-color-grey-10)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev,.kit-datepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datepicker-popup.k-popup .k-calendar-view{padding:10px 0 0;min-height:auto;width:auto}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td:focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datepicker-popup.k-popup .k-calendar-view .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-tr{display:flex;gap:16px}.kit-datepicker-popup.k-popup .k-calendar-view .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize;line-height:20px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-grey-10);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-white)}.kit-datepicker-popup.k-popup .k-calendar-monthview .k-calendar-td.k-selected .k-link{color:var(--ui-kit-color-white);border:none;background:var(--ui-kit-color-main);box-shadow:none}\n"] }]
|
|
4614
4613
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
|
|
4615
4614
|
type: Inject,
|
|
4616
4615
|
args: [DOCUMENT]
|
|
@@ -5039,7 +5038,7 @@ class KitShipmentCard {
|
|
|
5039
5038
|
this.timelineExpanded = true;
|
|
5040
5039
|
}
|
|
5041
5040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5043
5042
|
}
|
|
5044
5043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, decorators: [{
|
|
5045
5044
|
type: Component,
|
|
@@ -5050,7 +5049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5050
5049
|
NgClass,
|
|
5051
5050
|
NgTemplateOutlet,
|
|
5052
5051
|
KitTruncateTextComponent,
|
|
5053
|
-
], template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port
|
|
5052
|
+
], template: "<div class=\"kit-shipment-card\"\n [ngClass]=\"{ selected: selected() }\">\n <div class=\"kit-shipment-card-head\">\n <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n <kit-truncate-text>\n <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n </kit-truncate-text>\n </div>\n <div class=\"kit-shipment-card-content\">\n <div class=\"content-row\">\n <kit-svg-icon class=\"icon info\"\n [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row\">\n <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n [icon]=\"shipmentModeIcon\"/>\n <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n </div>\n\n <div class=\"content-row route\">\n <kit-pill class=\"route-origin-port\">\n <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n </kit-pill>\n <kit-svg-icon class=\"icon arrow\"\n [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n <kit-pill class=\"route-destination-port\">\n <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n </kit-pill>\n <span>by</span>\n <kit-pill class=\"route-mode\">\n <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n </kit-pill>\n </div>\n\n <div class=\"content-footer\">\n <div class=\"footer-buttons\">\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: timelineExpanded }\"\n [label]=\"data().timelineActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showTimeline($event)\"/>\n @if (containerItems.length) {\n <kit-button class=\"text-ellipsis\"\n [ngClass]=\"{ active: containersExpanded }\"\n [label]=\"data().containerActionBtnLabel\"\n [type]=\"kitButtonType.LINK\"\n (clicked)=\"showContainers($event)\"/>\n }\n </div>\n \n @if (timelineExpanded) {\n <div class=\"card-timeline-content\">\n @for (timelineItem of timelineItems; track $index) {\n <div class=\"timeline-row\">\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <kit-truncate-text>\n <span class=\"title\">{{ timelineItem.label }}: </span>\n {{ timelineItem.value }}\n </kit-truncate-text>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n @if (containersExpanded) {\n <div class=\"card-container-content\">\n @for (containerItem of containerItems; track $index) {\n <kit-truncate-text>\n <p class=\"container-item\">\n <span class=\"title\">{{ containerItem.value }} </span>\n {{ containerItem.label }}\n </p>\n </kit-truncate-text>\n }\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"] }]
|
|
5054
5053
|
}] });
|
|
5055
5054
|
|
|
5056
5055
|
class KitBreadcrumbsComponent {
|
|
@@ -5585,14 +5584,15 @@ class KitCollapsedListComponent {
|
|
|
5585
5584
|
}));
|
|
5586
5585
|
this.shouldShowDropdown = signal(true);
|
|
5587
5586
|
this.dropdownItems = signal([]);
|
|
5587
|
+
this.containerWidth = '100%';
|
|
5588
5588
|
this.kitSvgIcon = KitSvgIcon;
|
|
5589
5589
|
this.kitButtonType = KitButtonType;
|
|
5590
5590
|
this.kitButtonKind = KitButtonKind;
|
|
5591
5591
|
this.kitDropdownSize = KitDropdownSize;
|
|
5592
5592
|
this._selectedItem = signal(this.defaultSelectedItem());
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5593
|
+
this.dropdownSelectedItem = computed(() => {
|
|
5594
|
+
return this.dropdownItems().find(item => item.value === this._selectedItem().value) ?? this.defaultSelectedItem();
|
|
5595
|
+
});
|
|
5596
5596
|
}
|
|
5597
5597
|
get selectedItem() {
|
|
5598
5598
|
return this._selectedItem();
|
|
@@ -5605,15 +5605,17 @@ class KitCollapsedListComponent {
|
|
|
5605
5605
|
}
|
|
5606
5606
|
ngOnChanges({ itemList, gap }) {
|
|
5607
5607
|
if ((itemList && !itemList.isFirstChange()) || (gap && !gap.isFirstChange())) {
|
|
5608
|
-
this.resize(this.dropdownSelectedItem.text);
|
|
5608
|
+
this.resize(this.dropdownSelectedItem().text);
|
|
5609
5609
|
}
|
|
5610
5610
|
}
|
|
5611
5611
|
ngOnDestroy() {
|
|
5612
5612
|
this.resizeObserver?.disconnect();
|
|
5613
5613
|
}
|
|
5614
5614
|
setSelectedItem(item) {
|
|
5615
|
-
this.
|
|
5616
|
-
|
|
5615
|
+
if (item.text !== this.dropdownSelectedItem().text) {
|
|
5616
|
+
this._selectedItem.set(item);
|
|
5617
|
+
this.resize(item.text);
|
|
5618
|
+
}
|
|
5617
5619
|
}
|
|
5618
5620
|
selectionChange(item) {
|
|
5619
5621
|
this.setSelectedItem(item);
|
|
@@ -5624,16 +5626,28 @@ class KitCollapsedListComponent {
|
|
|
5624
5626
|
this.resizeObserver.observe(this.wrapper().nativeElement);
|
|
5625
5627
|
}
|
|
5626
5628
|
resize(dropdownText) {
|
|
5629
|
+
this.containerWidth = '100%';
|
|
5627
5630
|
const container = this.container().nativeElement;
|
|
5628
5631
|
const children = Array.from(container.children);
|
|
5629
5632
|
const availableWidth = this.wrapper().nativeElement.getBoundingClientRect().width;
|
|
5630
|
-
|
|
5631
|
-
if (isAvailableWidthExceeded) {
|
|
5632
|
-
|
|
5633
|
-
|
|
5634
|
-
|
|
5633
|
+
const { isAvailableWidthExceeded, exceededChildIndex } = this.checkOverflow(children, availableWidth);
|
|
5634
|
+
if (!isAvailableWidthExceeded) {
|
|
5635
|
+
this.shouldShowDropdown.set(false);
|
|
5636
|
+
this.dropdownItems.set([]);
|
|
5637
|
+
return;
|
|
5638
|
+
}
|
|
5639
|
+
this.dropdownItems.set(this.itemList().slice(exceededChildIndex));
|
|
5640
|
+
const dropdownWidth = this.getDropdownWidth(dropdownText);
|
|
5641
|
+
const newWidth = parseFloat((availableWidth - dropdownWidth).toFixed(4));
|
|
5642
|
+
const { exceededChildIndex: newExceededChildIndex, isAvailableWidthExceeded: isNewWidthExceeded } = this.checkOverflow(children.slice(0, exceededChildIndex), newWidth);
|
|
5643
|
+
if (isNewWidthExceeded) {
|
|
5644
|
+
this.shouldShowDropdown.set(true);
|
|
5645
|
+
this.dropdownItems.set(this.itemList().slice(newExceededChildIndex));
|
|
5646
|
+
this.containerWidth = `${newExceededChildIndex ? newWidth : 0}px`;
|
|
5647
|
+
return;
|
|
5635
5648
|
}
|
|
5636
|
-
this.shouldShowDropdown.set(
|
|
5649
|
+
this.shouldShowDropdown.set(true);
|
|
5650
|
+
this.containerWidth = `${newWidth}px`;
|
|
5637
5651
|
this.dropdownItems.set(this.itemList().slice(exceededChildIndex));
|
|
5638
5652
|
}
|
|
5639
5653
|
checkOverflow(children, availableWidth) {
|
|
@@ -5670,12 +5684,12 @@ class KitCollapsedListComponent {
|
|
|
5670
5684
|
span.textContent = text && this.dropdownItems().some(dropdownItem => dropdownItem.text === text)
|
|
5671
5685
|
? text : this.defaultSelectedItem().text;
|
|
5672
5686
|
}
|
|
5673
|
-
const width = clonedDropdown?.getBoundingClientRect().width ?? 0;
|
|
5687
|
+
const width = parseFloat(clonedDropdown?.getBoundingClientRect().width.toFixed(4)) ?? 0;
|
|
5674
5688
|
clonedDropdown?.remove();
|
|
5675
5689
|
return width;
|
|
5676
5690
|
}
|
|
5677
5691
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem.value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:100
|
|
5692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\"\n [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;overflow:hidden}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container .item.active ::ng-deep .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5679
5693
|
}
|
|
5680
5694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
|
|
5681
5695
|
type: Component,
|
|
@@ -5683,7 +5697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5683
5697
|
KitButtonModule,
|
|
5684
5698
|
KitDropdownModule,
|
|
5685
5699
|
NgTemplateOutlet,
|
|
5686
|
-
], template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem.value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:100
|
|
5700
|
+
], template: "<div #wrapper \n [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n [style.--kit-collapsed-list-gap.px]=\"gap()\">\n <div class=\"wrapper-inner\">\n <div\n #container\n class=\"element-container\"\n [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n @for (item of itemList(); track item.value) {\n <div class=\"item-wrapper\"\n (click)=\"selectionChange(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n </div>\n }\n </div>\n\n @if (shouldShowDropdown()) {\n <kit-dropdown #dropdown\n class=\"collapsed-list-dropdown\"\n [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n [items]=\"dropdownItems()\"\n [selectedItem]=\"dropdownSelectedItem()\"\n [disabled]=\"disableActions()\"\n [size]=\"kitDropdownSize.SMALL\"\n [popupSettings]=\"{ width: 'auto' }\"\n [isValuePrimitive]=\"false\"\n (selected)=\"selectionChange($event)\"/>\n }\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <kit-button class=\"item\"\n [class.active]=\"item.value === _selectedItem().value\"\n [label]=\"item.text\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;overflow:hidden}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container .item.active ::ng-deep .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"] }]
|
|
5687
5701
|
}] });
|
|
5688
5702
|
|
|
5689
5703
|
class KitScrollNavigationComponent {
|