@indigina/ui-kit 1.1.91 → 1.1.93
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.
- package/assets/icons/cross.svg +2 -3
- package/assets/icons/filter.svg +3 -0
- package/assets/icons/plus.svg +2 -3
- package/esm2022/lib/components/kit-button/kit-button.component.mjs +9 -3
- package/esm2022/lib/components/kit-card/kit-card.component.mjs +2 -2
- package/esm2022/lib/components/kit-cta-panel-action/kit-cta-panel-action.component.mjs +1 -1
- package/esm2022/lib/components/kit-datepicker/kit-datepicker.component.mjs +2 -2
- package/esm2022/lib/components/kit-daterange/kit-daterange.component.mjs +2 -2
- package/esm2022/lib/components/kit-datetimepicker/kit-datetimepicker.component.mjs +2 -2
- package/esm2022/lib/components/kit-file-card/kit-file-card.component.mjs +1 -1
- package/esm2022/lib/components/kit-file-upload/kit-file-upload.component.mjs +1 -1
- package/esm2022/lib/components/kit-pill/kit-pill.component.mjs +38 -6
- package/esm2022/lib/components/kit-pill/kit-pill.const.mjs +6 -0
- package/esm2022/lib/components/kit-popup/kit-popup.component.mjs +27 -16
- package/esm2022/lib/components/kit-profile-menu/kit-profile-menu.component.mjs +16 -8
- package/esm2022/lib/components/kit-scroll-navigation/kit-scroll-navigation.component.mjs +1 -1
- package/esm2022/lib/components/kit-search-bar/kit-search-bar.component.mjs +1 -1
- package/esm2022/lib/components/kit-svg-icon/kit-svg-icon.const.mjs +2 -1
- package/esm2022/lib/components/kit-svg-sprite/kit-svg-sprite.component.mjs +3 -3
- package/esm2022/lib/components/kit-switch/kit-switch.component.mjs +2 -2
- package/esm2022/public-api.mjs +2 -5
- package/fesm2022/indigina-ui-kit.mjs +97 -155
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-button/kit-button.component.d.ts +5 -1
- package/lib/components/kit-pill/kit-pill.component.d.ts +32 -3
- package/lib/components/kit-pill/kit-pill.const.d.ts +4 -0
- package/lib/components/kit-popup/kit-popup.component.d.ts +8 -7
- package/lib/components/kit-profile-menu/kit-profile-menu.component.d.ts +1 -1
- package/lib/components/kit-svg-icon/kit-svg-icon.const.d.ts +2 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -4
- package/esm2022/lib/components/kit-pill/kit-pill.module.mjs +0 -28
- package/esm2022/lib/components/kit-popup/kit-popup.directive.mjs +0 -37
- package/esm2022/lib/components/kit-popup/kit-popup.module.mjs +0 -33
- package/esm2022/lib/components/kit-profile-menu/kit-profile-menu.module.mjs +0 -39
- package/lib/components/kit-pill/kit-pill.module.d.ts +0 -9
- package/lib/components/kit-popup/kit-popup.directive.d.ts +0 -14
- package/lib/components/kit-popup/kit-popup.module.d.ts +0 -10
- package/lib/components/kit-profile-menu/kit-profile-menu.module.d.ts +0 -12
|
@@ -94,7 +94,7 @@ export class KitDatetimepickerComponent {
|
|
|
94
94
|
provide: NG_VALUE_ACCESSOR,
|
|
95
95
|
useExisting: forwardRef(() => KitDatetimepickerComponent),
|
|
96
96
|
multi: true,
|
|
97
|
-
}], viewQueries: [{ propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;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-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;width:auto;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-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-datetimepicker-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}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: i1.DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }, { kind: "component", type: i1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i3.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i4.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
97
|
+
}], viewQueries: [{ propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{fill:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;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-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;width:auto;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-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-datetimepicker-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}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: i1.DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }, { kind: "component", type: i1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i3.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i4.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitDatetimepickerComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
@@ -102,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
102
102
|
provide: NG_VALUE_ACCESSOR,
|
|
103
103
|
useExisting: forwardRef(() => KitDatetimepickerComponent),
|
|
104
104
|
multi: true,
|
|
105
|
-
}], template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{stroke:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;fill:transparent;stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{stroke:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{stroke:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{stroke:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;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-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;width:auto;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-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-datetimepicker-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}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"] }]
|
|
105
|
+
}], template: "<div class=\"kit-datetimepicker\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"$any(datetimepicker)\"\n ></kit-input-label>\n }\n <div class=\"datetimepicker-wrap\">\n <kendo-datetimepicker #datetimepicker\n calendarType=\"classic\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [disabled]=\"disabled\"\n [popupSettings]=\"datetimepickerPopupSettings\"\n [value]=\"defaultDate\"\n [min]=\"min\"\n [max]=\"max\"\n [focusedDate]=\"defaultDate\"\n (valueChange)=\"onValueChange($event)\"\n (blur)=\"onBlur()\">\n <kendo-datetimepicker-messages [accept]=\"applyButtonText\"\n [cancel]=\"cancelButtonText\"\n [now]=\"nowButtonText\"\n ></kendo-datetimepicker-messages>\n </kendo-datetimepicker>\n <button class=\"toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"onPopupToggle()\">\n <kit-svg-icon class=\"button-icon\"\n [icon]=\"icon\"\n ></kit-svg-icon>\n </button>\n </div>\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n }\n</div>\n", styles: [".kit-datetimepicker .label{display:block;margin-bottom:4px}.kit-datetimepicker .datetimepicker-wrap{position:relative}.kit-datetimepicker:hover .k-datetimepicker{border-color:var(--ui-kit-color-hover)}.kit-datetimepicker .k-datetimepicker{height:40px;width:100%;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-datetimepicker .k-datetimepicker.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-datetimepicker .k-datetimepicker.k-focus+.toggle-btn .button-icon{fill:var(--ui-kit-color-main)}.kit-datetimepicker .k-dateinput{box-shadow:none}.kit-datetimepicker .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-datetimepicker .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-datetimepicker .toggle-btn{position:absolute;top:0;right:0;padding:0 12px 0 8px;height:100%;border:none;background:none;cursor:pointer;z-index:1}.kit-datetimepicker .toggle-btn .button-icon{display:block;width:16px;height:16px;stroke:none;fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker .toggle-btn:hover .button-icon{fill:var(--ui-kit-color-hover)}.kit-datetimepicker.disabled .k-datetimepicker{border-color:var(--ui-kit-color-grey-12)}.kit-datetimepicker.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-datetimepicker.disabled .toggle-btn{cursor:default}.kit-datetimepicker.disabled .toggle-btn .button-icon{fill:var(--ui-kit-color-grey-12)}.kit-datetimepicker.invalid .k-datetimepicker{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .toggle-btn{cursor:default}.kit-datetimepicker.invalid .toggle-btn .button-icon{fill:var(--ui-kit-color-red-1)}.kit-datetimepicker.invalid .k-dateinput{border-color:var(--ui-kit-color-red-1)}.kit-datetimepicker .k-input-button{display:none}.kit-datetimepicker-popup.k-popup{margin-top:10px;padding:8px;width:296px;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-datetimepicker-popup.k-popup .k-datetime-buttongroup{margin-bottom:10px;padding:0}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button-group{gap:10px;width:auto}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button{padding:0 11px;height:46px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;border-bottom:2px solid transparent;border-radius:0;background:var(--ui-kit-color-white);transition:none}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button.k-active{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-buttongroup .k-button:hover{color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-datetime-wrap{width:280px}.kit-datetimepicker-popup.k-popup .k-datetime-time-wrap,.kit-datetimepicker-popup.k-popup .k-datetime-calendar-wrap{flex-basis:280px}.kit-datetimepicker-popup.k-popup .k-calendar-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-calendar-table{display:flex;flex-direction:column;gap:6px;padding:3px 8px}.kit-datetimepicker-popup.k-popup .k-calendar-title{padding:6px 8px;color:var(--ui-kit-color-grey-10);font-weight:400;line-height:20px;border-radius:4px;border:none}.kit-datetimepicker-popup.k-popup .k-calendar-title:hover{background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today{display:flex;align-items:center;padding:0 8px;color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-today:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next{padding:0;width:32px;height:32px;color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:before,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-calendar-nav-prev:hover,.kit-datetimepicker-popup.k-popup .k-calendar-nav-next:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-link{padding:0;width:54px;height:24px;color:var(--ui-kit-color-grey-10);border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-view{margin:0;padding:10px 0;gap:32px;width:auto;box-sizing:border-box}.kit-datetimepicker-popup.k-popup .k-calendar-tr{display:flex;gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-tbody{display:flex;flex-direction:column;row-gap:16px}.kit-datetimepicker-popup.k-popup .k-calendar-th{width:24px;height:22px;color:var(--ui-kit-color-main);font-size:14px;text-transform:capitalize}.kit-datetimepicker-popup.k-popup .k-calendar-td{width:auto;height:auto;border-radius:6px}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-today .k-link{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-other-month .k-link{color:var(--ui-kit-color-grey-12)}.kit-datetimepicker-popup.k-popup .k-calendar-td.k-focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-td:hover .k-link{border:none;background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-calendar-td:focus .k-link{box-shadow:none}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-link{width:24px}.kit-datetimepicker-popup.k-popup .k-calendar-monthview .k-calendar-tbody{row-gap:6px}.kit-datetimepicker-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-datetimepicker-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}.kit-datetimepicker-popup.k-popup .k-timeselector{height:100%}.kit-datetimepicker-popup.k-popup .k-time-header{padding:0 0 10px;color:var(--ui-kit-color-grey-10);font-size:14px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-time-header .k-title,.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{padding:6px 8px;font-weight:400;line-height:20px}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now{color:var(--ui-kit-color-grey-10)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover{color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-time-header .k-time-now:hover:before{opacity:0}.kit-datetimepicker-popup.k-popup .k-time-list-container{justify-content:center;padding:10px 0;gap:20px}.kit-datetimepicker-popup.k-popup .k-reset{display:flex;flex-direction:column;align-items:center;width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper{flex-grow:0;padding:0;height:208px;min-width:auto}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:before,.kit-datetimepicker-popup.k-popup .k-time-list-wrapper:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list-wrapper .k-title{display:flex;align-items:center;justify-content:flex-end;color:var(--ui-kit-color-main);font-size:14px;font-weight:400;height:24px}.kit-datetimepicker-popup.k-popup .k-time-list:before,.kit-datetimepicker-popup.k-popup .k-time-list:after{display:none}.kit-datetimepicker-popup.k-popup .k-time-list .k-item{display:flex;align-items:center;justify-content:center;padding:5px 0;height:24px;width:38px;color:var(--ui-kit-color-grey-12);font-size:16px;font-weight:400}.kit-datetimepicker-popup.k-popup .k-time-list .k-item[aria-selected=true]{padding:10px 0;color:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-time-highlight{top:50%;height:34px;border-color:var(--ui-kit-color-grey-12);transform:none}.kit-datetimepicker-popup.k-popup .k-time-separator{top:16px;color:var(--ui-kit-color-grey-10);font-size:16px}.kit-datetimepicker-popup.k-popup .k-actions{margin:0;padding:10px 0 0;flex-direction:row-reverse;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-datetimepicker-popup.k-popup .k-actions .k-button{flex:none;padding:0 19px;height:32px;font-size:14px;font-weight:400;border-radius:6px;border:1px solid var(--ui-kit-color-grey-11);transition:none}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept{border-color:transparent;background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:hover{background:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:active{background:var(--ui-kit-color-main)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-accept:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel{background:var(--ui-kit-color-white)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-datetimepicker-popup.k-popup .k-actions .k-button.k-time-cancel:active{border-color:var(--ui-kit-color-grey-11)}\n"] }]
|
|
106
106
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
107
107
|
type: Input
|
|
108
108
|
}], placeholder: [{
|
|
@@ -65,7 +65,7 @@ export class KitFileCardComponent {
|
|
|
65
65
|
return browserViewableFileTypes.includes(fileType);
|
|
66
66
|
}
|
|
67
67
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitFileCardComponent, selector: "kit-file-card", inputs: { title: "title", type: "type", label: "label", fileType: "fileType", date: "date", name: "name" }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title }}</div>\n <div class=\"card-type\">{{ label }}</div>\n </div>\n <div class=\"kit-file-card-content\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"getFileIconByExtension(fileType)\">\n </kit-svg-icon>\n <div class=\"card-main\">\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createDate ?? createDateLabel }}</div>\n <div class=\"item-value\">{{ date | date: dateFormat }}</div>\n </div>\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createdBy ?? createdByLabel }}</div>\n <div class=\"item-value\">{{ name }}</div>\n </div>\n </div>\n </div>\n <div class=\"kit-file-card-action\">\n @if (hasViewFileButton(fileType)) {\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.viewButtonLabel ?? viewButtonLabel\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\"\n ></kit-button>\n }\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.downloadButtonLabel ?? downloadButtonLabel\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\"\n ></kit-button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".kit-file-card{padding:25px;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card-header{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card .card-title{font-size:16px;font-weight:400}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card-content{display:flex;gap:24px;padding:17px 0}.kit-file-card .card-icon{width:78px;height:100px}.kit-file-card .card-main{display:flex;flex-direction:column;gap:12px}.kit-file-card .card-main-item{line-height:22px}.kit-file-card .card-main .item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card .card-main .item-value{font-size:16px}.kit-file-card-action{display:flex;gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card-action .action-button{flex:1}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.invoice .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.packing-list .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.airwaybill .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.booking .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.custom-clearance .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.fumigation .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.housebill .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.msds .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitFileCardComponent, selector: "kit-file-card", inputs: { title: "title", type: "type", label: "label", fileType: "fileType", date: "date", name: "name" }, outputs: { viewButtonClicked: "viewButtonClicked", downloadButtonClicked: "downloadButtonClicked" }, queries: [{ propertyName: "customMessages", first: true, predicate: KitFileCardMessagesComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-file-card\"\n [ngClass]=\"type\">\n <div class=\"kit-file-card-header\">\n <div class=\"card-title\">{{ title }}</div>\n <div class=\"card-type\">{{ label }}</div>\n </div>\n <div class=\"kit-file-card-content\">\n <kit-svg-icon class=\"card-icon\"\n [icon]=\"getFileIconByExtension(fileType)\">\n </kit-svg-icon>\n <div class=\"card-main\">\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createDate ?? createDateLabel }}</div>\n <div class=\"item-value\">{{ date | date: dateFormat }}</div>\n </div>\n <div class=\"card-main-item\">\n <div class=\"item-label\">{{ customMessages?.createdBy ?? createdByLabel }}</div>\n <div class=\"item-value\">{{ name }}</div>\n </div>\n </div>\n </div>\n <div class=\"kit-file-card-action\">\n @if (hasViewFileButton(fileType)) {\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.viewButtonLabel ?? viewButtonLabel\"\n [icon]=\"kitSvgIcon.EYE\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"viewButtonClicked.emit()\"\n ></kit-button>\n }\n <kit-button class=\"action-button\"\n [label]=\"customMessages?.downloadButtonLabel ?? downloadButtonLabel\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"downloadButtonClicked.emit()\"\n ></kit-button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".kit-file-card{padding:25px;color:var(--ui-kit-color-grey-10);border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-file-card-header{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-file-card .card-title{font-size:16px;font-weight:400}.kit-file-card .card-type{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:0 8px;height:20px;font-size:12px;font-weight:500;color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);border-radius:4px}.kit-file-card-content{display:flex;gap:24px;padding:17px 0}.kit-file-card .card-icon{width:78px;height:100px}.kit-file-card .card-main{display:flex;flex-direction:column;gap:12px}.kit-file-card .card-main-item{line-height:22px}.kit-file-card .card-main .item-label{color:var(--ui-kit-color-grey-14);font-size:13px}.kit-file-card .card-main .item-value{font-size:16px}.kit-file-card-action{display:flex;gap:15px;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}.kit-file-card-action .action-button{flex:1}.kit-file-card .action-button ::ng-deep .k-button{width:100%}.kit-file-card.invoice .card-type{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-file-card.packing-list .card-type{color:var(--ui-kit-color-purple);border-color:var(--ui-kit-color-purple);background-color:var(--ui-kit-color-purple-1)}.kit-file-card.airwaybill .card-type{color:var(--ui-kit-color-teal);border-color:var(--ui-kit-color-teal);background-color:var(--ui-kit-color-teal-1)}.kit-file-card.booking .card-type{color:var(--ui-kit-color-orange-2);border-color:var(--ui-kit-color-orange-2);background-color:var(--ui-kit-color-orange-3)}.kit-file-card.custom-clearance .card-type{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);background-color:var(--ui-kit-color-green-4)}.kit-file-card.fumigation .card-type{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-16)}.kit-file-card.housebill .card-type{color:var(--ui-kit-color-red-1);border-color:var(--ui-kit-color-red-1);background-color:var(--ui-kit-color-red-3)}.kit-file-card.msds .card-type{color:var(--ui-kit-color-pink);border-color:var(--ui-kit-color-pink);background-color:var(--ui-kit-color-pink-1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
69
|
}
|
|
70
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitFileCardComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
@@ -63,7 +63,7 @@ export class KitFileUploadComponent {
|
|
|
63
63
|
return files;
|
|
64
64
|
}
|
|
65
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KitFileUploadComponent, selector: "kit-file-upload", inputs: { saveUrl: "saveUrl", files: "files", selectFilesLabel: "selectFilesLabel", dropzoneLabel: "dropzoneLabel", restrictions: "restrictions", restrictionsErrorMessages: "restrictionsErrorMessages", hasActionButton: "hasActionButton", actionButtonLabel: "actionButtonLabel" }, outputs: { fileDownloaded: "fileDownloaded", filesSelected: "filesSelected", actionButtonClicked: "actionButtonClicked" }, ngImport: i0, template: "<div class=\"kit-file-upload\">\n <kendo-upload [saveUrl]=\"saveUrl\"\n [withCredentials]=\"false\"\n [restrictions]=\"restrictions\"\n [autoUpload]=\"false\"\n [(ngModel)]=\"files\"\n (select)=\"onFilesSelect($event.files)\">\n <kendo-upload-messages [select]=\"selectFilesLabel\"\n [dropFilesHere]=\"dropzoneLabel\"\n ></kendo-upload-messages>\n\n <ng-template kendoUploadFileTemplate let-files>\n <ng-container *ngIf=\"getTypedFiles(files); let files\">\n <ng-container *ngFor=\"let file of files\">\n <div class=\"file-info\">\n <div class=\"file-name\" [title]=\"file.name\">\n {{ file.name }}\n </div>\n\n <div *ngFor=\"let error of file.validationErrors\" class=\"file-validation-message\">\n {{ getValidationError(error) }}\n </div>\n </div>\n <button *ngIf=\"!file.validationErrors\" class=\"download-button\">\n <kit-svg-icon class=\"download-button-icon\"\n [icon]=\"KitSvgIcon.DOWNLOAD\"\n (click)=\"onFileDownload(file)\"\n ></kit-svg-icon>\n </button>\n </ng-container>\n </ng-container>\n </ng-template>\n </kendo-upload>\n\n <div *ngIf=\"hasActionButton\" class=\"kit-file-upload-action\">\n <kit-button [label]=\"actionButtonLabel\"\n [icon]=\"KitSvgIcon.DOWNLOAD\"\n [iconType]=\"KitSvgIconType.STROKE\"\n [kind]=\"KitButtonKind.SMALL\"\n (clicked)=\"onActionButtonClick()\"\n ></kit-button>\n </div>\n</div>\n", styles: [".kit-file-upload .k-upload{display:flex;flex-direction:column;gap:8px;border:none}.kit-file-upload .k-upload .k-upload-button{position:relative;padding:0;display:flex;align-items:center;min-width:initial;gap:6px;color:var(--ui-kit-color-main);font-weight:500;font-size:14px;border:none;background:none}.kit-file-upload .k-upload .k-upload-button:focus{box-shadow:none}.kit-file-upload .k-upload .k-upload-button:hover .k-button-text{text-decoration:underline}.kit-file-upload .k-upload .k-upload-button:after{content:\"\\e11e\";display:inline-block;position:static;opacity:1;line-height:1;font-size:16px;font-family:WebComponentsIcons,sans-serif}.kit-file-upload .k-upload .k-dropzone{padding:12px 10px;border:2px dashed transparent;background:none}.kit-file-upload .k-upload .k-dropzone.k-hover{border-color:var(--ui-kit-color-main);background:none}.kit-file-upload .k-upload .k-upload-status{display:none}.kit-file-upload .k-upload .k-upload-status+.k-dropzone-hint{display:block}.kit-file-upload .k-upload .k-upload-files{display:flex;flex-direction:column;gap:8px;max-height:initial;border:none}.kit-file-upload .k-upload .k-upload-files .k-file{align-items:center;padding:10px;border:none;background:var(--ui-kit-color-grey-8)}.kit-file-upload .k-upload .k-upload-files .k-file.k-focus{box-shadow:none}.kit-file-upload .k-upload .file-info{flex:1;min-width:0}.kit-file-upload .k-upload .file-name{color:var(--ui-kit-color-cobalt-darkest);font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kit-file-upload .k-upload .file-validation-message{color:var(--ui-kit-color-red);font-size:12px}.kit-file-upload .k-upload .download-button{margin-left:10px;padding:0;border:none;background:none;cursor:pointer}.kit-file-upload .k-upload .download-button:hover .download-button-icon{stroke:var(--ui-kit-color-main)}.kit-file-upload .k-upload .download-button-icon{display:block;width:24px;height:24px;stroke:var(--ui-kit-color-grey-7);fill:none}.kit-file-upload .k-upload .k-actions{display:none}.kit-file-upload-action{display:flex;justify-content:flex-end;margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "showFileList", "tabIndex", "actionsLayout"], outputs: ["cancel", "clear", "complete", "error", "pause", "resume", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { kind: "directive", type: i2.FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]" }, { kind: "component", type: i2.CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
66
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KitFileUploadComponent, selector: "kit-file-upload", inputs: { saveUrl: "saveUrl", files: "files", selectFilesLabel: "selectFilesLabel", dropzoneLabel: "dropzoneLabel", restrictions: "restrictions", restrictionsErrorMessages: "restrictionsErrorMessages", hasActionButton: "hasActionButton", actionButtonLabel: "actionButtonLabel" }, outputs: { fileDownloaded: "fileDownloaded", filesSelected: "filesSelected", actionButtonClicked: "actionButtonClicked" }, ngImport: i0, template: "<div class=\"kit-file-upload\">\n <kendo-upload [saveUrl]=\"saveUrl\"\n [withCredentials]=\"false\"\n [restrictions]=\"restrictions\"\n [autoUpload]=\"false\"\n [(ngModel)]=\"files\"\n (select)=\"onFilesSelect($event.files)\">\n <kendo-upload-messages [select]=\"selectFilesLabel\"\n [dropFilesHere]=\"dropzoneLabel\"\n ></kendo-upload-messages>\n\n <ng-template kendoUploadFileTemplate let-files>\n <ng-container *ngIf=\"getTypedFiles(files); let files\">\n <ng-container *ngFor=\"let file of files\">\n <div class=\"file-info\">\n <div class=\"file-name\" [title]=\"file.name\">\n {{ file.name }}\n </div>\n\n <div *ngFor=\"let error of file.validationErrors\" class=\"file-validation-message\">\n {{ getValidationError(error) }}\n </div>\n </div>\n <button *ngIf=\"!file.validationErrors\" class=\"download-button\">\n <kit-svg-icon class=\"download-button-icon\"\n [icon]=\"KitSvgIcon.DOWNLOAD\"\n (click)=\"onFileDownload(file)\"\n ></kit-svg-icon>\n </button>\n </ng-container>\n </ng-container>\n </ng-template>\n </kendo-upload>\n\n <div *ngIf=\"hasActionButton\" class=\"kit-file-upload-action\">\n <kit-button [label]=\"actionButtonLabel\"\n [icon]=\"KitSvgIcon.DOWNLOAD\"\n [iconType]=\"KitSvgIconType.STROKE\"\n [kind]=\"KitButtonKind.SMALL\"\n (clicked)=\"onActionButtonClick()\"\n ></kit-button>\n </div>\n</div>\n", styles: [".kit-file-upload .k-upload{display:flex;flex-direction:column;gap:8px;border:none}.kit-file-upload .k-upload .k-upload-button{position:relative;padding:0;display:flex;align-items:center;min-width:initial;gap:6px;color:var(--ui-kit-color-main);font-weight:500;font-size:14px;border:none;background:none}.kit-file-upload .k-upload .k-upload-button:focus{box-shadow:none}.kit-file-upload .k-upload .k-upload-button:hover .k-button-text{text-decoration:underline}.kit-file-upload .k-upload .k-upload-button:after{content:\"\\e11e\";display:inline-block;position:static;opacity:1;line-height:1;font-size:16px;font-family:WebComponentsIcons,sans-serif}.kit-file-upload .k-upload .k-dropzone{padding:12px 10px;border:2px dashed transparent;background:none}.kit-file-upload .k-upload .k-dropzone.k-hover{border-color:var(--ui-kit-color-main);background:none}.kit-file-upload .k-upload .k-upload-status{display:none}.kit-file-upload .k-upload .k-upload-status+.k-dropzone-hint{display:block}.kit-file-upload .k-upload .k-upload-files{display:flex;flex-direction:column;gap:8px;max-height:initial;border:none}.kit-file-upload .k-upload .k-upload-files .k-file{align-items:center;padding:10px;border:none;background:var(--ui-kit-color-grey-8)}.kit-file-upload .k-upload .k-upload-files .k-file.k-focus{box-shadow:none}.kit-file-upload .k-upload .file-info{flex:1;min-width:0}.kit-file-upload .k-upload .file-name{color:var(--ui-kit-color-cobalt-darkest);font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kit-file-upload .k-upload .file-validation-message{color:var(--ui-kit-color-red);font-size:12px}.kit-file-upload .k-upload .download-button{margin-left:10px;padding:0;border:none;background:none;cursor:pointer}.kit-file-upload .k-upload .download-button:hover .download-button-icon{stroke:var(--ui-kit-color-main)}.kit-file-upload .k-upload .download-button-icon{display:block;width:24px;height:24px;stroke:var(--ui-kit-color-grey-7);fill:none}.kit-file-upload .k-upload .k-actions{display:none}.kit-file-upload-action{display:flex;justify-content:flex-end;margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "showFileList", "tabIndex", "actionsLayout"], outputs: ["cancel", "clear", "complete", "error", "pause", "resume", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { kind: "directive", type: i2.FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]" }, { kind: "component", type: i2.CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
67
67
|
}
|
|
68
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitFileUploadComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
@@ -1,16 +1,39 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
|
|
2
|
-
import { KitSvgIcon } from '../kit-svg-icon/kit-svg-icon.const';
|
|
2
|
+
import { KitSvgIcon, KitSvgIconType } from '../kit-svg-icon/kit-svg-icon.const';
|
|
3
|
+
import { KitSvgIconModule } from '../kit-svg-icon/kit-svg-icon.module';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
import { KitPillType } from './kit-pill.const';
|
|
3
6
|
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "
|
|
5
|
-
import * as i2 from "
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
import * as i2 from "../kit-svg-icon/kit-svg-icon.component";
|
|
6
9
|
export class KitPillComponent {
|
|
7
10
|
constructor() {
|
|
11
|
+
/**
|
|
12
|
+
* Defines if the pill will be removable. If set to true pill renders a remove button
|
|
13
|
+
*/
|
|
8
14
|
this.removable = false;
|
|
15
|
+
/**
|
|
16
|
+
* Defines if the pill will be selectable
|
|
17
|
+
*/
|
|
9
18
|
this.selectable = false;
|
|
19
|
+
/**
|
|
20
|
+
* Defines the selected state of the pill
|
|
21
|
+
*/
|
|
10
22
|
this.selected = false;
|
|
23
|
+
/**
|
|
24
|
+
* Defines the pill type
|
|
25
|
+
*/
|
|
26
|
+
this.type = KitPillType.DEFAULT;
|
|
27
|
+
/**
|
|
28
|
+
* An action which is emitted when the pill is clicked
|
|
29
|
+
*/
|
|
11
30
|
this.clicked = new EventEmitter();
|
|
31
|
+
/**
|
|
32
|
+
* An action which is emitted when the close button is clicked
|
|
33
|
+
*/
|
|
12
34
|
this.removed = new EventEmitter();
|
|
13
35
|
this.closeIcon = KitSvgIcon.CROSS;
|
|
36
|
+
this.kitSvgIconType = KitSvgIconType;
|
|
14
37
|
}
|
|
15
38
|
onComponentClick() {
|
|
16
39
|
if (!this.selectable) {
|
|
@@ -19,17 +42,26 @@ export class KitPillComponent {
|
|
|
19
42
|
this.clicked.emit(!this.selected);
|
|
20
43
|
}
|
|
21
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: "removable", selectable: "selectable", selected: "selected", type: "type", icon: "icon", iconType: "iconType" }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill {{ type }}\"\n [class.selectable]=\"selectable\"\n [class.selected]=\"selected\">\n @if (icon) {\n <kit-svg-icon class=\"kit-pill-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <div class=\"kit-pill-content\">\n <ng-content\n ></ng-content>\n </div>\n @if (removable) {\n <button class=\"kit-pill-remove\"\n (click)=\"removed.emit()\">\n <kit-svg-icon class=\"remove-icon\"\n [icon]=\"closeIcon\"\n ></kit-svg-icon>\n </button>\n }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default{border-style:solid}.kit-pill.dashed{border-style:dashed}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
46
|
}
|
|
24
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitPillComponent, decorators: [{
|
|
25
48
|
type: Component,
|
|
26
|
-
args: [{ selector: 'kit-pill',
|
|
49
|
+
args: [{ selector: 'kit-pill', standalone: true, imports: [
|
|
50
|
+
CommonModule,
|
|
51
|
+
KitSvgIconModule,
|
|
52
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill {{ type }}\"\n [class.selectable]=\"selectable\"\n [class.selected]=\"selected\">\n @if (icon) {\n <kit-svg-icon class=\"kit-pill-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <div class=\"kit-pill-content\">\n <ng-content\n ></ng-content>\n </div>\n @if (removable) {\n <button class=\"kit-pill-remove\"\n (click)=\"removed.emit()\">\n <kit-svg-icon class=\"remove-icon\"\n [icon]=\"closeIcon\"\n ></kit-svg-icon>\n </button>\n }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default{border-style:solid}.kit-pill.dashed{border-style:dashed}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
|
|
27
53
|
}], propDecorators: { removable: [{
|
|
28
54
|
type: Input
|
|
29
55
|
}], selectable: [{
|
|
30
56
|
type: Input
|
|
31
57
|
}], selected: [{
|
|
32
58
|
type: Input
|
|
59
|
+
}], type: [{
|
|
60
|
+
type: Input
|
|
61
|
+
}], icon: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], iconType: [{
|
|
64
|
+
type: Input
|
|
33
65
|
}], clicked: [{
|
|
34
66
|
type: Output
|
|
35
67
|
}], removed: [{
|
|
@@ -38,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
38
70
|
type: HostListener,
|
|
39
71
|
args: ['click']
|
|
40
72
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
73
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LXBpbGwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9raXQtcGlsbC9raXQtcGlsbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1waWxsL2tpdC1waWxsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlHLE9BQU8sRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDaEYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7OztBQWEvQyxNQUFNLE9BQU8sZ0JBQWdCO0lBWDdCO1FBWUU7O1dBRUc7UUFDTSxjQUFTLEdBQVksS0FBSyxDQUFDO1FBRXBDOztXQUVHO1FBQ00sZUFBVSxHQUFZLEtBQUssQ0FBQztRQUVyQzs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkM7O1dBRUc7UUFDTSxTQUFJLEdBQWdCLFdBQVcsQ0FBQyxPQUFPLENBQUM7UUFZakQ7O1dBRUc7UUFDTyxZQUFPLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUFFdkU7O1dBRUc7UUFDTyxZQUFPLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFeEQsY0FBUyxHQUFlLFVBQVUsQ0FBQyxLQUFLLENBQUM7UUFDekMsbUJBQWMsR0FBMEIsY0FBYyxDQUFDO0tBVWpFO0lBUEMsZ0JBQWdCO1FBQ2QsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNyQixPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7OEdBbkRVLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLHVUQ2pCN0IsOG1CQXNCQSwrdUNEWkksWUFBWSw0SEFDWixnQkFBZ0I7OzJGQU1QLGdCQUFnQjtrQkFYNUIsU0FBUzsrQkFDRSxVQUFVLGNBQ1IsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osZ0JBQWdCO3FCQUNqQixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTTs4QkFNdEMsU0FBUztzQkFBakIsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtJLE9BQU87c0JBQWhCLE1BQU07Z0JBS0csT0FBTztzQkFBaEIsTUFBTTtnQkFNUCxnQkFBZ0I7c0JBRGYsWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEtpdFN2Z0ljb24sIEtpdFN2Z0ljb25UeXBlIH0gZnJvbSAnLi4va2l0LXN2Zy1pY29uL2tpdC1zdmctaWNvbi5jb25zdCc7XG5pbXBvcnQgeyBLaXRTdmdJY29uTW9kdWxlIH0gZnJvbSAnLi4va2l0LXN2Zy1pY29uL2tpdC1zdmctaWNvbi5tb2R1bGUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEtpdFBpbGxUeXBlIH0gZnJvbSAnLi9raXQtcGlsbC5jb25zdCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpdC1waWxsJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBLaXRTdmdJY29uTW9kdWxlLFxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4va2l0LXBpbGwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9raXQtcGlsbC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgS2l0UGlsbENvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBEZWZpbmVzIGlmIHRoZSBwaWxsIHdpbGwgYmUgcmVtb3ZhYmxlLiBJZiBzZXQgdG8gdHJ1ZSBwaWxsIHJlbmRlcnMgYSByZW1vdmUgYnV0dG9uXG4gICAqL1xuICBASW5wdXQoKSByZW1vdmFibGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogRGVmaW5lcyBpZiB0aGUgcGlsbCB3aWxsIGJlIHNlbGVjdGFibGVcbiAgICovXG4gIEBJbnB1dCgpIHNlbGVjdGFibGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogRGVmaW5lcyB0aGUgc2VsZWN0ZWQgc3RhdGUgb2YgdGhlIHBpbGxcbiAgICovXG4gIEBJbnB1dCgpIHNlbGVjdGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgdGhlIHBpbGwgdHlwZVxuICAgKi9cbiAgQElucHV0KCkgdHlwZTogS2l0UGlsbFR5cGUgPSBLaXRQaWxsVHlwZS5ERUZBVUxUO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSBpY29uIHdoaWNoIHdpbGwgYmUgdXNlZCBpbiBhIHBpbGwgd2l0aCBpY29uXG4gICAqL1xuICBASW5wdXQoKSBpY29uPzogS2l0U3ZnSWNvbjtcblxuICAvKipcbiAgICogRGVmaW5lcyB0aGUgaWNvbiB0eXBlXG4gICAqL1xuICBASW5wdXQoKSBpY29uVHlwZT86IEtpdFN2Z0ljb25UeXBlO1xuXG4gIC8qKlxuICAgKiBBbiBhY3Rpb24gd2hpY2ggaXMgZW1pdHRlZCB3aGVuIHRoZSBwaWxsIGlzIGNsaWNrZWRcbiAgICovXG4gIEBPdXRwdXQoKSBjbGlja2VkOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgLyoqXG4gICAqIEFuIGFjdGlvbiB3aGljaCBpcyBlbWl0dGVkIHdoZW4gdGhlIGNsb3NlIGJ1dHRvbiBpcyBjbGlja2VkXG4gICAqL1xuICBAT3V0cHV0KCkgcmVtb3ZlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIHJlYWRvbmx5IGNsb3NlSWNvbjogS2l0U3ZnSWNvbiA9IEtpdFN2Z0ljb24uQ1JPU1M7XG4gIHJlYWRvbmx5IGtpdFN2Z0ljb25UeXBlOiB0eXBlb2YgS2l0U3ZnSWNvblR5cGUgPSBLaXRTdmdJY29uVHlwZTtcblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIG9uQ29tcG9uZW50Q2xpY2soKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnNlbGVjdGFibGUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLmNsaWNrZWQuZW1pdCghdGhpcy5zZWxlY3RlZCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJraXQtcGlsbCB7eyB0eXBlIH19XCJcbiAgICAgW2NsYXNzLnNlbGVjdGFibGVdPVwic2VsZWN0YWJsZVwiXG4gICAgIFtjbGFzcy5zZWxlY3RlZF09XCJzZWxlY3RlZFwiPlxuICBAaWYgKGljb24pIHtcbiAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwia2l0LXBpbGwtaWNvblwiXG4gICAgICAgICAgICAgICAgICBbaWNvbl09XCJpY29uXCJcbiAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cImljb25UeXBlID8/IGtpdFN2Z0ljb25UeXBlLkZJTExcIlxuICAgID48L2tpdC1zdmctaWNvbj5cbiAgfVxuICA8ZGl2IGNsYXNzPVwia2l0LXBpbGwtY29udGVudFwiPlxuICAgIDxuZy1jb250ZW50XG4gICAgPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIEBpZiAocmVtb3ZhYmxlKSB7XG4gICAgPGJ1dHRvbiBjbGFzcz1cImtpdC1waWxsLXJlbW92ZVwiXG4gICAgICAgICAgICAoY2xpY2spPVwicmVtb3ZlZC5lbWl0KClcIj5cbiAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJyZW1vdmUtaWNvblwiXG4gICAgICAgICAgICAgICAgICAgIFtpY29uXT1cImNsb3NlSWNvblwiXG4gICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgPC9idXR0b24+XG4gIH1cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var KitPillType;
|
|
2
|
+
(function (KitPillType) {
|
|
3
|
+
KitPillType["DEFAULT"] = "default";
|
|
4
|
+
KitPillType["DASHED"] = "dashed";
|
|
5
|
+
})(KitPillType || (KitPillType = {}));
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LXBpbGwuY29uc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1waWxsL2tpdC1waWxsLmNvbnN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLFdBR1g7QUFIRCxXQUFZLFdBQVc7SUFDckIsa0NBQW1CLENBQUE7SUFDbkIsZ0NBQWlCLENBQUE7QUFDbkIsQ0FBQyxFQUhXLFdBQVcsS0FBWCxXQUFXLFFBR3RCIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGVudW0gS2l0UGlsbFR5cGUge1xuICBERUZBVUxUID0gJ2RlZmF1bHQnLFxuICBEQVNIRUQgPSAnZGFzaGVkJyxcbn1cbiJdfQ==
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, signal, } from '@angular/core';
|
|
2
2
|
import { KitPopupAlignHorizontal, KitPopupAlignVertical } from './kit-popup.model';
|
|
3
|
+
import { PopupModule } from '@progress/kendo-angular-popup';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "@progress/kendo-angular-popup";
|
|
5
6
|
export class KitPopupComponent {
|
|
@@ -21,7 +22,7 @@ export class KitPopupComponent {
|
|
|
21
22
|
* Defines the horizontal position of the popup
|
|
22
23
|
*/
|
|
23
24
|
this.popupHorizontalAlign = KitPopupAlignHorizontal.LEFT;
|
|
24
|
-
this.
|
|
25
|
+
this.visible = signal(false);
|
|
25
26
|
this.anchorAlign = {
|
|
26
27
|
horizontal: this.anchorHorizontalAlign,
|
|
27
28
|
vertical: KitPopupAlignVertical.BOTTOM,
|
|
@@ -31,32 +32,42 @@ export class KitPopupComponent {
|
|
|
31
32
|
vertical: KitPopupAlignVertical.TOP,
|
|
32
33
|
};
|
|
33
34
|
}
|
|
34
|
-
ngOnInit() {
|
|
35
|
-
this.anchorAlign.horizontal = this.anchorHorizontalAlign;
|
|
36
|
-
this.popupAlign.horizontal = this.popupHorizontalAlign;
|
|
37
|
-
}
|
|
38
35
|
documentClick(event) {
|
|
39
36
|
if (!this.closeOnOutsideClick) {
|
|
40
37
|
return;
|
|
41
38
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
this.closePopup();
|
|
45
|
-
element.classList.remove('popup-active');
|
|
39
|
+
if (!this.elementRef?.nativeElement.contains(event.target) && !this.anchorElement.contains(event.target)) {
|
|
40
|
+
this.hide();
|
|
46
41
|
}
|
|
47
42
|
}
|
|
48
|
-
|
|
49
|
-
this.
|
|
43
|
+
ngOnInit() {
|
|
44
|
+
this.anchorAlign.horizontal = this.anchorHorizontalAlign;
|
|
45
|
+
this.popupAlign.horizontal = this.popupHorizontalAlign;
|
|
46
|
+
}
|
|
47
|
+
get anchorElement() {
|
|
48
|
+
return this.anchor instanceof ElementRef && this.anchor.nativeElement || this.anchor;
|
|
49
|
+
}
|
|
50
|
+
toggle() {
|
|
51
|
+
if (!this.visible()) {
|
|
52
|
+
this.visible.set(true);
|
|
53
|
+
this.anchorElement.classList.add('popup-active');
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
this.hide();
|
|
57
|
+
}
|
|
50
58
|
}
|
|
51
|
-
|
|
52
|
-
this.
|
|
59
|
+
hide() {
|
|
60
|
+
this.anchorElement.classList.remove('popup-active');
|
|
61
|
+
this.visible.set(false);
|
|
53
62
|
}
|
|
54
63
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitPopupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
55
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitPopupComponent, selector: "kit-popup", inputs: { anchor: "anchor", closeOnOutsideClick: "closeOnOutsideClick", anchorHorizontalAlign: "anchorHorizontalAlign", popupHorizontalAlign: "popupHorizontalAlign" }, host: { listeners: { "document:click": "documentClick($event)" } }, ngImport: i0, template: "@if (
|
|
64
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: "anchor", closeOnOutsideClick: "closeOnOutsideClick", anchorHorizontalAlign: "anchorHorizontalAlign", popupHorizontalAlign: "popupHorizontalAlign" }, host: { listeners: { "document:click": "documentClick($event)" } }, ngImport: i0, template: "@if (visible()) {\n <kendo-popup class=\"kit-popup\"\n [anchor]=\"anchor\"\n [popupAlign]=\"popupAlign\"\n [anchorAlign]=\"anchorAlign\">\n <ng-content\n ></ng-content>\n </kendo-popup>\n}\n", styles: ["::ng-deep .kit-popup .k-popup{margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}\n"], dependencies: [{ kind: "ngmodule", type: PopupModule }, { kind: "component", type: i1.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
56
65
|
}
|
|
57
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitPopupComponent, decorators: [{
|
|
58
67
|
type: Component,
|
|
59
|
-
args: [{ selector: 'kit-popup',
|
|
68
|
+
args: [{ selector: 'kit-popup', standalone: true, imports: [
|
|
69
|
+
PopupModule,
|
|
70
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n <kendo-popup class=\"kit-popup\"\n [anchor]=\"anchor\"\n [popupAlign]=\"popupAlign\"\n [anchorAlign]=\"anchorAlign\">\n <ng-content\n ></ng-content>\n </kendo-popup>\n}\n", styles: ["::ng-deep .kit-popup .k-popup{margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}\n"] }]
|
|
60
71
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { anchor: [{
|
|
61
72
|
type: Input
|
|
62
73
|
}], closeOnOutsideClick: [{
|
|
@@ -69,4 +80,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
69
80
|
type: HostListener,
|
|
70
81
|
args: ['document:click', ['$event']]
|
|
71
82
|
}] } });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
83
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LXBvcHVwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMva2l0LXBvcHVwL2tpdC1wb3B1cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1wb3B1cC9raXQtcG9wdXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBaUIsdUJBQXVCLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNsRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sK0JBQStCLENBQUM7OztBQVk1RCxNQUFNLE9BQU8saUJBQWlCO0lBK0I1QixZQUNVLFVBQXNCO1FBQXRCLGVBQVUsR0FBVixVQUFVLENBQVk7UUEvQmhDOztXQUVHO1FBQ00sV0FBTSxHQUFvQyxJQUFJLENBQUM7UUFFeEQ7O1dBRUc7UUFDTSx3QkFBbUIsR0FBWSxJQUFJLENBQUM7UUFFN0M7O1dBRUc7UUFDTSwwQkFBcUIsR0FBNEIsdUJBQXVCLENBQUMsSUFBSSxDQUFDO1FBRXZGOztXQUVHO1FBQ00seUJBQW9CLEdBQTRCLHVCQUF1QixDQUFDLElBQUksQ0FBQztRQUU3RSxZQUFPLEdBQTRCLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqRCxnQkFBVyxHQUFrQjtZQUNwQyxVQUFVLEVBQUUsSUFBSSxDQUFDLHFCQUFxQjtZQUN0QyxRQUFRLEVBQUUscUJBQXFCLENBQUMsTUFBTTtTQUN2QyxDQUFDO1FBQ08sZUFBVSxHQUFrQjtZQUNuQyxVQUFVLEVBQUUsSUFBSSxDQUFDLG9CQUFvQjtZQUNyQyxRQUFRLEVBQUUscUJBQXFCLENBQUMsR0FBRztTQUNwQyxDQUFDO0lBS0YsQ0FBQztJQUdELGFBQWEsQ0FBQyxLQUFZO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUM5QixPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQVEsS0FBSyxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDaEgsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2QsQ0FBQztJQUNILENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDO1FBQ3pELElBQUksQ0FBQyxVQUFVLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQztJQUN6RCxDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsTUFBTSxZQUFZLFVBQVUsSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3ZGLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNuRCxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDSCxDQUFDO0lBRUQsSUFBSTtRQUNGLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNwRCxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDOzhHQXBFVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixpVEN2QjlCLGtQQVNBLGlRRFFJLFdBQVc7OzJGQU1GLGlCQUFpQjtrQkFWN0IsU0FBUzsrQkFDRSxXQUFXLGNBQ1QsSUFBSSxXQUNQO3dCQUNQLFdBQVc7cUJBQ1osbUJBR2dCLHVCQUF1QixDQUFDLE1BQU07K0VBTXRDLE1BQU07c0JBQWQsS0FBSztnQkFLRyxtQkFBbUI7c0JBQTNCLEtBQUs7Z0JBS0cscUJBQXFCO3NCQUE3QixLQUFLO2dCQUtHLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFrQk4sYUFBYTtzQkFEWixZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBzaWduYWwsXG4gIFdyaXRhYmxlU2lnbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEtpdFBvcHVwQWxpZ24sIEtpdFBvcHVwQWxpZ25Ib3Jpem9udGFsLCBLaXRQb3B1cEFsaWduVmVydGljYWwgfSBmcm9tICcuL2tpdC1wb3B1cC5tb2RlbCc7XG5pbXBvcnQgeyBQb3B1cE1vZHVsZSB9IGZyb20gJ0Bwcm9ncmVzcy9rZW5kby1hbmd1bGFyLXBvcHVwJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LXBvcHVwJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1xuICAgIFBvcHVwTW9kdWxlLFxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4va2l0LXBvcHVwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2tpdC1wb3B1cC5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBLaXRQb3B1cENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIC8qKlxuICAgKiBTcGVjaWZpZXMgdGhlIGVsZW1lbnQgdGhhdCB3aWxsIGJlIHVzZWQgYXMgYW4gYW5jaG9yLiBUaGUgUG9wdXAgb3BlbnMgbmV4dCB0byB0aGF0IGVsZW1lbnRcbiAgICovXG4gIEBJbnB1dCgpIGFuY2hvcjogRWxlbWVudFJlZiB8IEhUTUxFbGVtZW50IHwgbnVsbCA9IG51bGw7XG5cbiAgLyoqXG4gICAqIERlZmluZXMgd2hldGhlciB0byBjbG9zZSBwb3B1cCB3aGVuIHRoZSB1c2VyIGNsaWNrcyBvdXRzaWRlIGl0cyBib3VuZGFyaWVzXG4gICAqL1xuICBASW5wdXQoKSBjbG9zZU9uT3V0c2lkZUNsaWNrOiBib29sZWFuID0gdHJ1ZTtcblxuICAvKipcbiAgICogRGVmaW5lcyB0aGUgaG9yaXpvbnRhbCBwb3NpdGlvbiBvZiB0aGUgYW5jaG9yIGVsZW1lbnRcbiAgICovXG4gIEBJbnB1dCgpIGFuY2hvckhvcml6b250YWxBbGlnbjogS2l0UG9wdXBBbGlnbkhvcml6b250YWwgPSBLaXRQb3B1cEFsaWduSG9yaXpvbnRhbC5MRUZUO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSBob3Jpem9udGFsIHBvc2l0aW9uIG9mIHRoZSBwb3B1cFxuICAgKi9cbiAgQElucHV0KCkgcG9wdXBIb3Jpem9udGFsQWxpZ246IEtpdFBvcHVwQWxpZ25Ib3Jpem9udGFsID0gS2l0UG9wdXBBbGlnbkhvcml6b250YWwuTEVGVDtcblxuICByZWFkb25seSB2aXNpYmxlOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPiA9IHNpZ25hbChmYWxzZSk7XG4gIHJlYWRvbmx5IGFuY2hvckFsaWduOiBLaXRQb3B1cEFsaWduID0ge1xuICAgIGhvcml6b250YWw6IHRoaXMuYW5jaG9ySG9yaXpvbnRhbEFsaWduLFxuICAgIHZlcnRpY2FsOiBLaXRQb3B1cEFsaWduVmVydGljYWwuQk9UVE9NLFxuICB9O1xuICByZWFkb25seSBwb3B1cEFsaWduOiBLaXRQb3B1cEFsaWduID0ge1xuICAgIGhvcml6b250YWw6IHRoaXMucG9wdXBIb3Jpem9udGFsQWxpZ24sXG4gICAgdmVydGljYWw6IEtpdFBvcHVwQWxpZ25WZXJ0aWNhbC5UT1AsXG4gIH07XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICApIHtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmNsaWNrJywgWyckZXZlbnQnXSlcbiAgZG9jdW1lbnRDbGljayhldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGlmICghdGhpcy5lbGVtZW50UmVmPy5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiYgIXRoaXMuYW5jaG9yRWxlbWVudC5jb250YWlucyg8Tm9kZT4gZXZlbnQudGFyZ2V0KSkge1xuICAgICAgdGhpcy5oaWRlKCk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5hbmNob3JBbGlnbi5ob3Jpem9udGFsID0gdGhpcy5hbmNob3JIb3Jpem9udGFsQWxpZ247XG4gICAgdGhpcy5wb3B1cEFsaWduLmhvcml6b250YWwgPSB0aGlzLnBvcHVwSG9yaXpvbnRhbEFsaWduO1xuICB9XG5cbiAgZ2V0IGFuY2hvckVsZW1lbnQoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmFuY2hvciBpbnN0YW5jZW9mIEVsZW1lbnRSZWYgJiYgdGhpcy5hbmNob3IubmF0aXZlRWxlbWVudCB8fCB0aGlzLmFuY2hvcjtcbiAgfVxuXG4gIHRvZ2dsZSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMudmlzaWJsZSgpKSB7XG4gICAgICB0aGlzLnZpc2libGUuc2V0KHRydWUpO1xuICAgICAgdGhpcy5hbmNob3JFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ3BvcHVwLWFjdGl2ZScpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmhpZGUoKTtcbiAgICB9XG4gIH1cblxuICBoaWRlKCk6IHZvaWQge1xuICAgIHRoaXMuYW5jaG9yRWxlbWVudC5jbGFzc0xpc3QucmVtb3ZlKCdwb3B1cC1hY3RpdmUnKTtcbiAgICB0aGlzLnZpc2libGUuc2V0KGZhbHNlKTtcbiAgfVxufVxuIiwiQGlmICh2aXNpYmxlKCkpIHtcbiAgPGtlbmRvLXBvcHVwIGNsYXNzPVwia2l0LXBvcHVwXCJcbiAgICAgICAgICAgICAgIFthbmNob3JdPVwiYW5jaG9yXCJcbiAgICAgICAgICAgICAgIFtwb3B1cEFsaWduXT1cInBvcHVwQWxpZ25cIlxuICAgICAgICAgICAgICAgW2FuY2hvckFsaWduXT1cImFuY2hvckFsaWduXCI+XG4gICAgPG5nLWNvbnRlbnRcbiAgICA+PC9uZy1jb250ZW50PlxuICA8L2tlbmRvLXBvcHVwPlxufVxuIl19
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
|
|
2
2
|
import { KitAvatarSize } from '../kit-avatar/kit-avatar.const';
|
|
3
3
|
import { KitSvgIcon, KitSvgIconType } from '../kit-svg-icon/kit-svg-icon.const';
|
|
4
|
+
import { KitPopupComponent } from '../kit-popup/kit-popup.component';
|
|
4
5
|
import { KitPopupAlignHorizontal } from '../kit-popup/kit-popup.model';
|
|
6
|
+
import { KitAvatarModule } from '../kit-avatar/kit-avatar.module';
|
|
7
|
+
import { KitSvgIconModule } from '../kit-svg-icon/kit-svg-icon.module';
|
|
8
|
+
import { RouterLink } from '@angular/router';
|
|
9
|
+
import { CommonModule } from '@angular/common';
|
|
5
10
|
import * as i0 from "@angular/core";
|
|
6
11
|
import * as i1 from "@angular/common";
|
|
7
12
|
import * as i2 from "../kit-avatar/kit-avatar.component";
|
|
8
|
-
import * as i3 from "../kit-
|
|
9
|
-
import * as i4 from "../kit-popup/kit-popup.directive";
|
|
10
|
-
import * as i5 from "../kit-svg-icon/kit-svg-icon.component";
|
|
11
|
-
import * as i6 from "@angular/router";
|
|
13
|
+
import * as i3 from "../kit-svg-icon/kit-svg-icon.component";
|
|
12
14
|
export class KitProfileMenuComponent {
|
|
13
15
|
constructor() {
|
|
14
16
|
/**
|
|
@@ -22,14 +24,20 @@ export class KitProfileMenuComponent {
|
|
|
22
24
|
}
|
|
23
25
|
onClick(item) {
|
|
24
26
|
item?.action && item.action();
|
|
25
|
-
this.userMenu.
|
|
27
|
+
this.userMenu.hide();
|
|
26
28
|
}
|
|
27
29
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitProfileMenuComponent, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n (click)=\"userMenu.toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: i2.KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "closeOnOutsideClick", "anchorHorizontalAlign", "popupHorizontalAlign"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
29
31
|
}
|
|
30
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
|
|
31
33
|
type: Component,
|
|
32
|
-
args: [{ selector: 'kit-profile-menu',
|
|
34
|
+
args: [{ selector: 'kit-profile-menu', standalone: true, imports: [
|
|
35
|
+
CommonModule,
|
|
36
|
+
KitAvatarModule,
|
|
37
|
+
KitPopupComponent,
|
|
38
|
+
KitSvgIconModule,
|
|
39
|
+
RouterLink,
|
|
40
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n (click)=\"userMenu.toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}\n"] }]
|
|
33
41
|
}], propDecorators: { menuItems: [{
|
|
34
42
|
type: Input
|
|
35
43
|
}], userName: [{
|
|
@@ -42,4 +50,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
42
50
|
type: ViewChild,
|
|
43
51
|
args: ['userMenu']
|
|
44
52
|
}] } });
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1wcm9maWxlLW1lbnUva2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1wcm9maWxlLW1lbnUva2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQy9ELE9BQU8sRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFFaEYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDdkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBZ0IvQyxNQUFNLE9BQU8sdUJBQXVCO0lBZHBDO1FBZUU7O1dBRUc7UUFDTSxjQUFTLEdBQXlCLEVBQUUsQ0FBQztRQW1CckMsa0JBQWEsR0FBeUIsYUFBYSxDQUFDO1FBQ3BELGVBQVUsR0FBc0IsVUFBVSxDQUFDO1FBQzNDLDRCQUF1QixHQUFtQyx1QkFBdUIsQ0FBQztRQUNsRixtQkFBYyxHQUEwQixjQUFjLENBQUM7S0FNakU7SUFKQyxPQUFPLENBQUMsSUFBd0I7UUFDOUIsSUFBSSxFQUFFLE1BQU0sSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDOUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN2QixDQUFDOzhHQS9CVSx1QkFBdUI7a0dBQXZCLHVCQUF1QiwwU0N6QnBDLDIyREFzREEsbzJDRHZDSSxZQUFZLDRIQUNaLGVBQWUsaUpBQ2YsaUJBQWlCLGlKQUNqQixnQkFBZ0IsNklBQ2hCLFVBQVU7OzJGQU1ELHVCQUF1QjtrQkFkbkMsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osZUFBZTt3QkFDZixpQkFBaUI7d0JBQ2pCLGdCQUFnQjt3QkFDaEIsVUFBVTtxQkFDWCxtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTTs4QkFNdEMsU0FBUztzQkFBakIsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0csY0FBYztzQkFBdEIsS0FBSztnQkFFaUIsUUFBUTtzQkFBOUIsU0FBUzt1QkFBQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0QXZhdGFyU2l6ZSB9IGZyb20gJy4uL2tpdC1hdmF0YXIva2l0LWF2YXRhci5jb25zdCc7XG5pbXBvcnQgeyBLaXRTdmdJY29uLCBLaXRTdmdJY29uVHlwZSB9IGZyb20gJy4uL2tpdC1zdmctaWNvbi9raXQtc3ZnLWljb24uY29uc3QnO1xuaW1wb3J0IHsgS2l0UHJvZmlsZU1lbnVJdGVtIH0gZnJvbSAnLi4va2l0LXByb2ZpbGUtbWVudS9raXQtcHJvZmlsZS1tZW51Lm1vZGVsJztcbmltcG9ydCB7IEtpdFBvcHVwQ29tcG9uZW50IH0gZnJvbSAnLi4va2l0LXBvcHVwL2tpdC1wb3B1cC5jb21wb25lbnQnO1xuaW1wb3J0IHsgS2l0UG9wdXBBbGlnbkhvcml6b250YWwgfSBmcm9tICcuLi9raXQtcG9wdXAva2l0LXBvcHVwLm1vZGVsJztcbmltcG9ydCB7IEtpdEF2YXRhck1vZHVsZSB9IGZyb20gJy4uL2tpdC1hdmF0YXIva2l0LWF2YXRhci5tb2R1bGUnO1xuaW1wb3J0IHsgS2l0U3ZnSWNvbk1vZHVsZSB9IGZyb20gJy4uL2tpdC1zdmctaWNvbi9raXQtc3ZnLWljb24ubW9kdWxlJztcbmltcG9ydCB7IFJvdXRlckxpbmsgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LXByb2ZpbGUtbWVudScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgS2l0QXZhdGFyTW9kdWxlLFxuICAgIEtpdFBvcHVwQ29tcG9uZW50LFxuICAgIEtpdFN2Z0ljb25Nb2R1bGUsXG4gICAgUm91dGVyTGluayxcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1wcm9maWxlLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4va2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBLaXRQcm9maWxlTWVudUNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBEZWZpbmVzIGEgbGlzdCBvZiBtZW51IGl0ZW1zXG4gICAqL1xuICBASW5wdXQoKSBtZW51SXRlbXM6IEtpdFByb2ZpbGVNZW51SXRlbVtdID0gW107XG5cbiAgLyoqXG4gICAqIERlZmluZXMgdXNlcm5hbWUgdGhhdCBnb2luZyB0byBiZSBkaXNwbGF5ZWQgbmV4dCB0byBhdmF0YXIgYW5kIHVzZWQgaW4gYXZhdGFyIGFzIGluaXRpYWxzXG4gICAqL1xuICBASW5wdXQoKSB1c2VyTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogRGVmaW5lcyBjb21wYW55IG5hbWUgdGhhdCBnb2luZyB0byBiZSBkaXNwbGF5ZWQgbmV4dCB0byBhdmF0YXJcbiAgICovXG4gIEBJbnB1dCgpIGNvbXBhbnlOYW1lPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSBpbWFnZSBzb3VyY2Ugb2YgdGhlIGF2YXRhclxuICAgKi9cbiAgQElucHV0KCkgYXZhdGFySW1hZ2VTcmM/OiBzdHJpbmc7XG5cbiAgQFZpZXdDaGlsZCgndXNlck1lbnUnKSB1c2VyTWVudSE6IEtpdFBvcHVwQ29tcG9uZW50O1xuXG4gIHJlYWRvbmx5IEtpdEF2YXRhclNpemU6IHR5cGVvZiBLaXRBdmF0YXJTaXplID0gS2l0QXZhdGFyU2l6ZTtcbiAgcmVhZG9ubHkgS2l0U3ZnSWNvbjogdHlwZW9mIEtpdFN2Z0ljb24gPSBLaXRTdmdJY29uO1xuICByZWFkb25seSBLaXRQb3B1cEFsaWduSG9yaXpvbnRhbDogdHlwZW9mIEtpdFBvcHVwQWxpZ25Ib3Jpem9udGFsID0gS2l0UG9wdXBBbGlnbkhvcml6b250YWw7XG4gIHJlYWRvbmx5IEtpdFN2Z0ljb25UeXBlOiB0eXBlb2YgS2l0U3ZnSWNvblR5cGUgPSBLaXRTdmdJY29uVHlwZTtcblxuICBvbkNsaWNrKGl0ZW06IEtpdFByb2ZpbGVNZW51SXRlbSk6IHZvaWQge1xuICAgIGl0ZW0/LmFjdGlvbiAmJiBpdGVtLmFjdGlvbigpO1xuICAgIHRoaXMudXNlck1lbnUuaGlkZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicHJvZmlsZS1tZW51XCI+XG4gIDxidXR0b24gI21lbnVCdXR0b25cbiAgICAgICAgICBjbGFzcz1cIm1lbnUtYnV0dG9uXCJcbiAgICAgICAgICAoY2xpY2spPVwidXNlck1lbnUudG9nZ2xlKClcIj5cbiAgICA8a2l0LWF2YXRhciBbc2l6ZV09XCJLaXRBdmF0YXJTaXplLkxBUkdFXCJcbiAgICAgICAgICAgICAgICBbbmFtZV09XCJ1c2VyTmFtZVwiXG4gICAgICAgICAgICAgICAgW2ltYWdlU3JjXT1cImF2YXRhckltYWdlU3JjXCJcbiAgICA+PC9raXQtYXZhdGFyPlxuICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJtZW51LWJ1dHRvbi1pY29uXCJcbiAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0FSRVRfRE9XTlwiXG4gICAgPjwva2l0LXN2Zy1pY29uPlxuICA8L2J1dHRvbj5cblxuICA8a2l0LXBvcHVwICN1c2VyTWVudVxuICAgICAgICAgICAgIGNsYXNzPVwibWVudS1wb3B1cFwiXG4gICAgICAgICAgICAgW2FuY2hvcl09XCJtZW51QnV0dG9uXCJcbiAgICAgICAgICAgICBbYW5jaG9ySG9yaXpvbnRhbEFsaWduXT1cIktpdFBvcHVwQWxpZ25Ib3Jpem9udGFsLlJJR0hUXCJcbiAgICAgICAgICAgICBbcG9wdXBIb3Jpem9udGFsQWxpZ25dPVwiS2l0UG9wdXBBbGlnbkhvcml6b250YWwuUklHSFRcIj5cbiAgICA8ZGl2IGNsYXNzPVwicG9wdXAtY29udGVudFwiPlxuICAgICAgPGRpdiBjbGFzcz1cInBvcHVwLWhlYWRlclwiPlxuICAgICAgICA8a2l0LWF2YXRhciBjbGFzcz1cInBvcHVwLWhlYWRlci1hdmF0YXJcIlxuICAgICAgICAgICAgICAgICAgICBbbmFtZV09XCJ1c2VyTmFtZVwiXG4gICAgICAgICAgICAgICAgICAgIFtzaXplXT1cIktpdEF2YXRhclNpemUuTEFSR0VcIlxuICAgICAgICAgICAgICAgICAgICBbaW1hZ2VTcmNdPVwiYXZhdGFySW1hZ2VTcmNcIlxuICAgICAgICA+PC9raXQtYXZhdGFyPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicG9wdXAtaGVhZGVyLWRldGFpbHNcIj5cbiAgICAgICAgICBAaWYgKHVzZXJOYW1lKSB7XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicG9wdXAtaGVhZGVyLW5hbWVcIj57eyB1c2VyTmFtZSB9fTwvZGl2PlxuICAgICAgICAgIH1cbiAgICAgICAgICBAaWYgKGNvbXBhbnlOYW1lKSB7XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicG9wdXAtaGVhZGVyLWNvbXBhbnlcIj57eyBjb21wYW55TmFtZSB9fTwvZGl2PlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwb3B1cC1tZW51XCI+XG4gICAgICAgIEBmb3IgKGl0ZW0gb2YgbWVudUl0ZW1zOyB0cmFjayBpdGVtKSB7XG4gICAgICAgICAgPGEgY2xhc3M9XCJtZW51LWl0ZW1cIlxuICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW0uY3NzQ2xhc3NcIlxuICAgICAgICAgICAgIFtyb3V0ZXJMaW5rXT1cIml0ZW0ubGlua1wiXG4gICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xpY2soaXRlbSlcIj5cbiAgICAgICAgICAgIEBpZiAoaXRlbS5pY29uKSB7XG4gICAgICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJtZW51LWl0ZW0taWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiaXRlbS5pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJpdGVtPy5pY29uVHlwZSA/PyBLaXRTdmdJY29uVHlwZS5GSUxMXCJcbiAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtZW51LWl0ZW0tdGV4dFwiPnt7IGl0ZW0udGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgPC9hPlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9raXQtcG9wdXA+XG48L2Rpdj5cblxuIl19
|
|
@@ -55,7 +55,7 @@ export class KitScrollNavigationComponent {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
58
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitScrollNavigationComponent, selector: "kit-scroll-navigation", queries: [{ propertyName: "items", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n @for (item of items; track item) {\n <kit-button class=\"nav-item\"\n [class.active]=\"activeSectionIndex() === $index\"\n [label]=\"item.title\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.SMALL\"\n (clicked)=\"scrollToSection($index)\"\n ></kit-button>\n @if (!$last) {\n <kit-svg-icon class=\"nav-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n }\n }\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of items; track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n ></ng-container>\n }\n </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation .nav-icon{width:16px;height:16px;stroke:var(--ui-kit-color-grey-10);fill:none}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass"], outputs: ["clicked"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
58
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitScrollNavigationComponent, selector: "kit-scroll-navigation", queries: [{ propertyName: "items", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n @for (item of items; track item) {\n <kit-button class=\"nav-item\"\n [class.active]=\"activeSectionIndex() === $index\"\n [label]=\"item.title\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.SMALL\"\n (clicked)=\"scrollToSection($index)\"\n ></kit-button>\n @if (!$last) {\n <kit-svg-icon class=\"nav-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n }\n }\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of items; track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n ></ng-container>\n }\n </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation .nav-icon{width:16px;height:16px;stroke:var(--ui-kit-color-grey-10);fill:none}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
59
59
|
}
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
|
|
61
61
|
type: Component,
|