@indigina/ui-kit 1.1.542 → 1.1.544
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.
|
@@ -2281,7 +2281,7 @@ class KitCodeEditorAdapterService {
|
|
|
2281
2281
|
bracketPairs: true,
|
|
2282
2282
|
indentation: true,
|
|
2283
2283
|
},
|
|
2284
|
-
|
|
2284
|
+
useShadowDOM: false,
|
|
2285
2285
|
quickSuggestions: false,
|
|
2286
2286
|
suggestOnTriggerCharacters: false,
|
|
2287
2287
|
wordBasedSuggestions: 'off',
|
|
@@ -2299,6 +2299,7 @@ class KitCodeEditorAdapterService {
|
|
|
2299
2299
|
placeholder: options.placeholder,
|
|
2300
2300
|
occurrencesHighlight: 'off',
|
|
2301
2301
|
});
|
|
2302
|
+
this.addCustomClipboardPasteAction(editorInstance);
|
|
2302
2303
|
const isFindWidgetVisible = this.createFindWidgetVisibilityResolver(container);
|
|
2303
2304
|
return {
|
|
2304
2305
|
getMode: () => KitCodeEditorMode.SINGLE,
|
|
@@ -2399,7 +2400,7 @@ class KitCodeEditorAdapterService {
|
|
|
2399
2400
|
bracketPairs: true,
|
|
2400
2401
|
indentation: true,
|
|
2401
2402
|
},
|
|
2402
|
-
|
|
2403
|
+
useShadowDOM: false,
|
|
2403
2404
|
quickSuggestions: false,
|
|
2404
2405
|
suggestOnTriggerCharacters: false,
|
|
2405
2406
|
renderValidationDecorations: 'on',
|
|
@@ -2408,6 +2409,7 @@ class KitCodeEditorAdapterService {
|
|
|
2408
2409
|
},
|
|
2409
2410
|
occurrencesHighlight: 'off',
|
|
2410
2411
|
});
|
|
2412
|
+
this.addCustomClipboardPasteAction(editorInstance);
|
|
2411
2413
|
return {
|
|
2412
2414
|
getMode: () => KitCodeEditorMode.DIFF,
|
|
2413
2415
|
setValue: (value) => {
|
|
@@ -2497,6 +2499,33 @@ class KitCodeEditorAdapterService {
|
|
|
2497
2499
|
await action.run();
|
|
2498
2500
|
return true;
|
|
2499
2501
|
}
|
|
2502
|
+
addCustomClipboardPasteAction(editorInstance) {
|
|
2503
|
+
editorInstance.addAction({
|
|
2504
|
+
id: 'custom-clipboard-paste',
|
|
2505
|
+
label: 'Paste',
|
|
2506
|
+
contextMenuGroupId: '9_cutcopypaste',
|
|
2507
|
+
contextMenuOrder: 3,
|
|
2508
|
+
run: async (editorWidget) => {
|
|
2509
|
+
try {
|
|
2510
|
+
const text = await navigator.clipboard.readText();
|
|
2511
|
+
const model = editorWidget.getModel();
|
|
2512
|
+
const selection = editorWidget.getSelection();
|
|
2513
|
+
if (model && selection) {
|
|
2514
|
+
editorWidget.executeEdits('custom-paste-source', [{
|
|
2515
|
+
range: selection,
|
|
2516
|
+
text,
|
|
2517
|
+
forceMoveMarkers: true,
|
|
2518
|
+
}]);
|
|
2519
|
+
editorWidget.pushUndoStop();
|
|
2520
|
+
editorWidget.focus();
|
|
2521
|
+
}
|
|
2522
|
+
}
|
|
2523
|
+
catch (err) {
|
|
2524
|
+
console.error('Browser blocked clipboard access or paste failed: ', err);
|
|
2525
|
+
}
|
|
2526
|
+
},
|
|
2527
|
+
});
|
|
2528
|
+
}
|
|
2500
2529
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCodeEditorAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2501
2530
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCodeEditorAdapterService }); }
|
|
2502
2531
|
}
|
|
@@ -3146,7 +3175,7 @@ class KitCodeEditorComponent {
|
|
|
3146
3175
|
KitCodeEditorAdapterService,
|
|
3147
3176
|
KitCodeEditorFormatterService,
|
|
3148
3177
|
KitCodeEditorLanguageRegistryService,
|
|
3149
|
-
], viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-code-editor\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"kit-code-editor-label\"\n [text]=\"label()\" />\n }\n\n <div class=\"kit-code-editor-main\">\n @if (showToolbar()) {\n <div class=\"kit-code-editor-toolbar\">\n @if (showFormatAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.format' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.MAGIC_WAND\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onFormatClicked()\" />\n }\n\n @if (showFindAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.find' | translate\"\n [active]=\"isFindWidgetOpened()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onFindClicked()\" />\n }\n\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.lines' | translate\"\n [active]=\"localShowLineNumbers()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.NUMBER_LIST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onToggleLineNumbersClicked()\" />\n\n @if (isDiffMode()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.discard' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.ROTATE_LEFT\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onDiscardDiffClicked()\" />\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.accept' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onAcceptDiffClicked()\" />\n }\n </div>\n }\n\n @if (toolbarMessage()) {\n <div class=\"kit-code-editor-toolbar-message\">\n {{ toolbarMessage() | translate }}\n </div>\n }\n\n <div class=\"kit-code-editor-input\"\n [style.height]=\"getEditorHeight()\"\n [class.disabled]=\"disabled()\">\n @if (!initializationError()) {\n <div #editorContainer\n class=\"kit-code-editor-container\"\n (focusout)=\"onEditorBlur()\"\n ></div>\n } @else {\n <div class=\"kit-code-editor-error\">{{ initializationError() | translate }}</div>\n }\n </div>\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-code-editor{display:block}.kit-code-editor.invalid .kit-code-editor-main{border-color:var(--ui-kit-color-red-1)}.kit-code-editor-label{display:block;margin-bottom:4px}.kit-code-editor-main{padding:15px;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white)}.kit-code-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.kit-code-editor-toolbar-message{margin-bottom:8px;color:var(--ui-kit-color-red-1);font-size:14px;line-height:1.4}.kit-code-editor-input{box-sizing:content-box;border:1px solid var(--ui-kit-color-grey-11)}.kit-code-editor-input.disabled{background:var(--ui-kit-color-grey-13);border-color:var(--ui-kit-color-grey-11)}.kit-code-editor-container{position:relative;width:100%;height:100%}.kit-code-editor-error{padding:8px 12px;color:var(--ui-kit-color-red-1);font-size:12px;line-height:1.4;background:var(--ui-kit-color-red-2)}.kit-code-editor .find-widget>.button.codicon-widget-close{box-sizing:content-box}.kit-code-editor .context-view{margin-bottom:5px}.kit-code-editor .context-view .hover-contents{white-space:nowrap!important}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3178
|
+
], viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-code-editor\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"kit-code-editor-label\"\n [text]=\"label()\" />\n }\n\n <div class=\"kit-code-editor-main\">\n @if (showToolbar()) {\n <div class=\"kit-code-editor-toolbar\">\n @if (showFormatAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.format' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.MAGIC_WAND\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onFormatClicked()\" />\n }\n\n @if (showFindAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.find' | translate\"\n [active]=\"isFindWidgetOpened()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onFindClicked()\" />\n }\n\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.lines' | translate\"\n [active]=\"localShowLineNumbers()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.NUMBER_LIST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onToggleLineNumbersClicked()\" />\n\n @if (isDiffMode()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.discard' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.ROTATE_LEFT\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onDiscardDiffClicked()\" />\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.accept' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onAcceptDiffClicked()\" />\n }\n </div>\n }\n\n @if (toolbarMessage()) {\n <div class=\"kit-code-editor-toolbar-message\">\n {{ toolbarMessage() | translate }}\n </div>\n }\n\n <div class=\"kit-code-editor-input\"\n [style.height]=\"getEditorHeight()\"\n [class.disabled]=\"disabled()\">\n @if (!initializationError()) {\n <div #editorContainer\n class=\"kit-code-editor-container\"\n (focusout)=\"onEditorBlur()\"\n ></div>\n } @else {\n <div class=\"kit-code-editor-error\">{{ initializationError() | translate }}</div>\n }\n </div>\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-code-editor{display:block}.kit-code-editor.invalid .kit-code-editor-main{border-color:var(--ui-kit-color-red-1)}.kit-code-editor-label{display:block;margin-bottom:4px}.kit-code-editor-main{padding:15px;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white)}.kit-code-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.kit-code-editor-toolbar-message{margin-bottom:8px;color:var(--ui-kit-color-red-1);font-size:14px;line-height:1.4}.kit-code-editor-input{box-sizing:content-box;border:1px solid var(--ui-kit-color-grey-11)}.kit-code-editor-input.disabled{background:var(--ui-kit-color-grey-13);border-color:var(--ui-kit-color-grey-11)}.kit-code-editor-container{position:relative;width:100%;height:100%}.kit-code-editor-error{padding:8px 12px;color:var(--ui-kit-color-red-1);font-size:12px;line-height:1.4;background:var(--ui-kit-color-red-2)}.kit-code-editor .find-widget>.button.codicon-widget-close{box-sizing:content-box}.kit-code-editor .context-view{margin-bottom:5px}.kit-code-editor .context-view .hover-contents{white-space:nowrap!important}.context-view.monaco-component{background:var(--ui-kit-color-white)}.context-view.monaco-component .action-item:has([aria-label=Paste])+.action-item:has([aria-label=Paste]){display:none}.context-view.monaco-component .action-item.diabled{max-height:1px;background-color:var(--ui-kit-color-grey-11);margin:5px 25px}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3150
3179
|
}
|
|
3151
3180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCodeEditorComponent, decorators: [{
|
|
3152
3181
|
type: Component,
|
|
@@ -3164,7 +3193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
3164
3193
|
KitFormLabelComponent,
|
|
3165
3194
|
TranslatePipe,
|
|
3166
3195
|
KitFormMessageComponent,
|
|
3167
|
-
], template: "<div class=\"kit-code-editor\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"kit-code-editor-label\"\n [text]=\"label()\" />\n }\n\n <div class=\"kit-code-editor-main\">\n @if (showToolbar()) {\n <div class=\"kit-code-editor-toolbar\">\n @if (showFormatAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.format' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.MAGIC_WAND\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onFormatClicked()\" />\n }\n\n @if (showFindAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.find' | translate\"\n [active]=\"isFindWidgetOpened()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onFindClicked()\" />\n }\n\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.lines' | translate\"\n [active]=\"localShowLineNumbers()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.NUMBER_LIST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onToggleLineNumbersClicked()\" />\n\n @if (isDiffMode()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.discard' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.ROTATE_LEFT\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onDiscardDiffClicked()\" />\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.accept' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onAcceptDiffClicked()\" />\n }\n </div>\n }\n\n @if (toolbarMessage()) {\n <div class=\"kit-code-editor-toolbar-message\">\n {{ toolbarMessage() | translate }}\n </div>\n }\n\n <div class=\"kit-code-editor-input\"\n [style.height]=\"getEditorHeight()\"\n [class.disabled]=\"disabled()\">\n @if (!initializationError()) {\n <div #editorContainer\n class=\"kit-code-editor-container\"\n (focusout)=\"onEditorBlur()\"\n ></div>\n } @else {\n <div class=\"kit-code-editor-error\">{{ initializationError() | translate }}</div>\n }\n </div>\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-code-editor{display:block}.kit-code-editor.invalid .kit-code-editor-main{border-color:var(--ui-kit-color-red-1)}.kit-code-editor-label{display:block;margin-bottom:4px}.kit-code-editor-main{padding:15px;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white)}.kit-code-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.kit-code-editor-toolbar-message{margin-bottom:8px;color:var(--ui-kit-color-red-1);font-size:14px;line-height:1.4}.kit-code-editor-input{box-sizing:content-box;border:1px solid var(--ui-kit-color-grey-11)}.kit-code-editor-input.disabled{background:var(--ui-kit-color-grey-13);border-color:var(--ui-kit-color-grey-11)}.kit-code-editor-container{position:relative;width:100%;height:100%}.kit-code-editor-error{padding:8px 12px;color:var(--ui-kit-color-red-1);font-size:12px;line-height:1.4;background:var(--ui-kit-color-red-2)}.kit-code-editor .find-widget>.button.codicon-widget-close{box-sizing:content-box}.kit-code-editor .context-view{margin-bottom:5px}.kit-code-editor .context-view .hover-contents{white-space:nowrap!important}\n"] }]
|
|
3196
|
+
], template: "<div class=\"kit-code-editor\"\n [class.invalid]=\"invalid()\">\n @if (label()) {\n <kit-form-label class=\"kit-code-editor-label\"\n [text]=\"label()\" />\n }\n\n <div class=\"kit-code-editor-main\">\n @if (showToolbar()) {\n <div class=\"kit-code-editor-toolbar\">\n @if (showFormatAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.format' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.MAGIC_WAND\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onFormatClicked()\" />\n }\n\n @if (showFindAction()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.find' | translate\"\n [active]=\"isFindWidgetOpened()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onFindClicked()\" />\n }\n\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.lines' | translate\"\n [active]=\"localShowLineNumbers()\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.NUMBER_LIST\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onToggleLineNumbersClicked()\" />\n\n @if (isDiffMode()) {\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.discard' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.ROTATE_LEFT\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onDiscardDiffClicked()\" />\n <kit-button class=\"kit-code-editor-toolbar-button\"\n [label]=\"'kit.codeEditor.accept' | translate\"\n [disabled]=\"disabled()\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"onAcceptDiffClicked()\" />\n }\n </div>\n }\n\n @if (toolbarMessage()) {\n <div class=\"kit-code-editor-toolbar-message\">\n {{ toolbarMessage() | translate }}\n </div>\n }\n\n <div class=\"kit-code-editor-input\"\n [style.height]=\"getEditorHeight()\"\n [class.disabled]=\"disabled()\">\n @if (!initializationError()) {\n <div #editorContainer\n class=\"kit-code-editor-container\"\n (focusout)=\"onEditorBlur()\"\n ></div>\n } @else {\n <div class=\"kit-code-editor-error\">{{ initializationError() | translate }}</div>\n }\n </div>\n </div>\n\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-code-editor{display:block}.kit-code-editor.invalid .kit-code-editor-main{border-color:var(--ui-kit-color-red-1)}.kit-code-editor-label{display:block;margin-bottom:4px}.kit-code-editor-main{padding:15px;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white)}.kit-code-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.kit-code-editor-toolbar-message{margin-bottom:8px;color:var(--ui-kit-color-red-1);font-size:14px;line-height:1.4}.kit-code-editor-input{box-sizing:content-box;border:1px solid var(--ui-kit-color-grey-11)}.kit-code-editor-input.disabled{background:var(--ui-kit-color-grey-13);border-color:var(--ui-kit-color-grey-11)}.kit-code-editor-container{position:relative;width:100%;height:100%}.kit-code-editor-error{padding:8px 12px;color:var(--ui-kit-color-red-1);font-size:12px;line-height:1.4;background:var(--ui-kit-color-red-2)}.kit-code-editor .find-widget>.button.codicon-widget-close{box-sizing:content-box}.kit-code-editor .context-view{margin-bottom:5px}.kit-code-editor .context-view .hover-contents{white-space:nowrap!important}.context-view.monaco-component{background:var(--ui-kit-color-white)}.context-view.monaco-component .action-item:has([aria-label=Paste])+.action-item:has([aria-label=Paste]){display:none}.context-view.monaco-component .action-item.diabled{max-height:1px;background-color:var(--ui-kit-color-grey-11);margin:5px 25px}\n"] }]
|
|
3168
3197
|
}], ctorParameters: () => [], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], originalValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "originalValue", required: false }] }, { type: i0.Output, args: ["originalValueChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], showLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLineNumbers", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showFormatAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormatAction", required: false }] }], showFindAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFindAction", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], editorReady: [{ type: i0.Output, args: ["editorReady"] }], contentChanged: [{ type: i0.Output, args: ["contentChanged"] }], formatFailed: [{ type: i0.Output, args: ["formatFailed"] }], findFailed: [{ type: i0.Output, args: ["findFailed"] }], diffAccepted: [{ type: i0.Output, args: ["diffAccepted"] }], diffDiscarded: [{ type: i0.Output, args: ["diffDiscarded"] }], editorContainer: [{ type: i0.ViewChild, args: ['editorContainer', { isSignal: true }] }] } });
|
|
3169
3198
|
|
|
3170
3199
|
var KitTextLabelState;
|
|
@@ -6613,33 +6642,20 @@ class KitCardComponent {
|
|
|
6613
6642
|
/**
|
|
6614
6643
|
* Defines card data
|
|
6615
6644
|
*/
|
|
6616
|
-
this.data = null;
|
|
6645
|
+
this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
6617
6646
|
/**
|
|
6618
6647
|
* Defines card color theme
|
|
6619
6648
|
*/
|
|
6620
|
-
this.theme = KitCardTheme.DEFAULT;
|
|
6621
|
-
/**
|
|
6622
|
-
* Defines whether the items list will be expanded
|
|
6623
|
-
*/
|
|
6624
|
-
this.itemsExpanded = false;
|
|
6625
|
-
this.hideToggle = false;
|
|
6649
|
+
this.theme = input(KitCardTheme.DEFAULT, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
6626
6650
|
/**
|
|
6627
6651
|
* An action which is emitted when action button clicked
|
|
6628
6652
|
*/
|
|
6629
|
-
this.buttonClicked =
|
|
6630
|
-
/**
|
|
6631
|
-
* An action which is emitted when toggle button clicked
|
|
6632
|
-
*/
|
|
6633
|
-
this.toggleClicked = new EventEmitter();
|
|
6653
|
+
this.buttonClicked = output();
|
|
6634
6654
|
this.KitSvgIcon = KitSvgIcon;
|
|
6635
6655
|
this.KitButtonType = KitButtonType;
|
|
6636
6656
|
this.KitButtonKind = KitButtonKind;
|
|
6637
6657
|
this.KitTooltipPosition = KitTooltipPosition;
|
|
6638
6658
|
}
|
|
6639
|
-
toggleList() {
|
|
6640
|
-
this.itemsExpanded = !this.itemsExpanded;
|
|
6641
|
-
this.toggleClicked.emit(this.itemsExpanded);
|
|
6642
|
-
}
|
|
6643
6659
|
openItemLink(item) {
|
|
6644
6660
|
if (!item.disabled && item.link.length) {
|
|
6645
6661
|
this.router.navigate(item.link, {
|
|
@@ -6652,58 +6668,18 @@ class KitCardComponent {
|
|
|
6652
6668
|
}
|
|
6653
6669
|
}
|
|
6654
6670
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6655
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded", hideToggle: "hideToggle" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1 && !hideToggle) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.buttonDisabled ? null : data.link\"\n [queryParams]=\"data.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
6656
|
-
trigger('expandCollapse', [
|
|
6657
|
-
state('true', style({ height: '*' })),
|
|
6658
|
-
state('false', style({
|
|
6659
|
-
height: '18px',
|
|
6660
|
-
minHeight: '18px',
|
|
6661
|
-
})),
|
|
6662
|
-
transition('true => false', [
|
|
6663
|
-
animate('0.2s ease-out'),
|
|
6664
|
-
]),
|
|
6665
|
-
transition('false => true', [
|
|
6666
|
-
animate('0.2s ease-in'),
|
|
6667
|
-
]),
|
|
6668
|
-
]),
|
|
6669
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6671
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "@if (data(); as card) {\n <div class=\"kit-card {{ theme() }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"card.titleIcon\"\n [ngClass]=\"card.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ card.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ card.count }}</div>\n <div class=\"card-label\">{{ card.label }}</div>\n @if (card.items; as items) {\n @if (items.length) {\n <div class=\"card-items\">\n @for (item of items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"card.buttonDisabled ? null : (card.link ?? null)\"\n [queryParams]=\"card.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"card.buttonLabel\"\n [disabled]=\"card.buttonDisabled ?? false\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6670
6672
|
}
|
|
6671
6673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardComponent, decorators: [{
|
|
6672
6674
|
type: Component,
|
|
6673
|
-
args: [{ selector: 'kit-card', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6674
|
-
trigger('expandCollapse', [
|
|
6675
|
-
state('true', style({ height: '*' })),
|
|
6676
|
-
state('false', style({
|
|
6677
|
-
height: '18px',
|
|
6678
|
-
minHeight: '18px',
|
|
6679
|
-
})),
|
|
6680
|
-
transition('true => false', [
|
|
6681
|
-
animate('0.2s ease-out'),
|
|
6682
|
-
]),
|
|
6683
|
-
transition('false => true', [
|
|
6684
|
-
animate('0.2s ease-in'),
|
|
6685
|
-
]),
|
|
6686
|
-
]),
|
|
6687
|
-
], imports: [
|
|
6675
|
+
args: [{ selector: 'kit-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6688
6676
|
KitSvgIconComponent,
|
|
6689
6677
|
KitButtonComponent,
|
|
6690
6678
|
RouterLink,
|
|
6691
6679
|
KitTooltipDirective,
|
|
6692
6680
|
NgClass,
|
|
6693
|
-
], template: "@if (data) {\n <div class=\"kit-card {{ theme }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"data.titleIcon\"\n [ngClass]=\"data?.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ data.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ data.count }}</div>\n <div class=\"card-label\">{{ data.label }}</div>\n @if (data.items?.length) {\n <div class=\"card-items\"\n [@expandCollapse]=\"itemsExpanded\">\n @for (item of data.items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n @if (data.items?.length > 1 && !hideToggle) {\n <button class=\"toggle-btn\"\n (click)=\"toggleList()\">\n @if (itemsExpanded) {\n <span class=\"toggle-btn-label\">Show less</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_UP\"\n ></kit-svg-icon>\n } @else {\n <span class=\"toggle-btn-label\">Show more</span>\n <kit-svg-icon class=\"toggle-btn-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n }\n </button>\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"data.buttonDisabled ? null : data.link\"\n [queryParams]=\"data.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"data.buttonLabel\"\n [disabled]=\"data.buttonDisabled\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"] }]
|
|
6694
|
-
}], propDecorators: { data: [{
|
|
6695
|
-
type: Input
|
|
6696
|
-
}], theme: [{
|
|
6697
|
-
type: Input
|
|
6698
|
-
}], itemsExpanded: [{
|
|
6699
|
-
type: Input
|
|
6700
|
-
}], hideToggle: [{
|
|
6701
|
-
type: Input
|
|
6702
|
-
}], buttonClicked: [{
|
|
6703
|
-
type: Output
|
|
6704
|
-
}], toggleClicked: [{
|
|
6705
|
-
type: Output
|
|
6706
|
-
}] } });
|
|
6681
|
+
], template: "@if (data(); as card) {\n <div class=\"kit-card {{ theme() }}-theme\">\n <div class=\"kit-card-head\">\n <kit-svg-icon class=\"head-icon\"\n [icon]=\"card.titleIcon\"\n [ngClass]=\"card.titleIconType\"\n ></kit-svg-icon>\n <div class=\"head-title\">{{ card.title }}</div>\n </div>\n <div class=\"kit-card-content\">\n <div class=\"card-count\">{{ card.count }}</div>\n <div class=\"card-label\">{{ card.label }}</div>\n @if (card.items; as items) {\n @if (items.length) {\n <div class=\"card-items\">\n @for (item of items; track item) {\n <a class=\"card-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"openItemLink(item)\">\n <div class=\"card-item-count\">{{ item.count ?? '' }}</div>\n <div class=\"card-item-text\">{{ item.label }}</div>\n @if (item.tooltip) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".card-item-icon\"\n class=\"card-item-icon\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.tooltip\"\n [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n ></kit-svg-icon>\n } @else if (item.icon) {\n <kit-svg-icon class=\"card-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item.iconType\"\n ></kit-svg-icon>\n }\n </a>\n }\n </div>\n }\n }\n </div>\n <div class=\"kit-card-action\">\n <a [routerLink]=\"card.buttonDisabled ? null : (card.link ?? null)\"\n [queryParams]=\"card.navigationExtras?.queryParams\">\n <kit-button class=\"action-button\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.MEDIUM\"\n [label]=\"card.buttonLabel\"\n [disabled]=\"card.buttonDisabled ?? false\"\n (clicked)=\"buttonClicked.emit()\"\n ></kit-button>\n </a>\n </div>\n </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover:not(.disabled){color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item{cursor:pointer}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item{cursor:pointer}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item{cursor:pointer}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item{cursor:pointer}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item{cursor:pointer}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item{cursor:pointer}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item{cursor:pointer}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover:not(.disabled) .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}\n"] }]
|
|
6682
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
|
|
6707
6683
|
|
|
6708
6684
|
var KitStatusLabelColor;
|
|
6709
6685
|
(function (KitStatusLabelColor) {
|