@indigina/ui-kit 1.1.335 → 1.1.337
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.
|
@@ -878,6 +878,7 @@ class KitTextboxActionsComponent {
|
|
|
878
878
|
this.formControl = new FormControl('');
|
|
879
879
|
this.validationErrors = signal([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
|
|
880
880
|
this.documentClickListener = null;
|
|
881
|
+
this.selectListener = null;
|
|
881
882
|
effect(() => {
|
|
882
883
|
const validators = this.validators();
|
|
883
884
|
this.formControl.setValidators(validators);
|
|
@@ -891,9 +892,11 @@ class KitTextboxActionsComponent {
|
|
|
891
892
|
const showActions = this.showActions();
|
|
892
893
|
if (showActions) {
|
|
893
894
|
this.addDocumentClickListener();
|
|
895
|
+
this.addSelectListener();
|
|
894
896
|
}
|
|
895
897
|
else {
|
|
896
898
|
this.removeDocumentClickListener();
|
|
899
|
+
this.removeSelectListener();
|
|
897
900
|
}
|
|
898
901
|
});
|
|
899
902
|
this.formControl.valueChanges.subscribe(() => {
|
|
@@ -905,6 +908,7 @@ class KitTextboxActionsComponent {
|
|
|
905
908
|
}
|
|
906
909
|
ngOnDestroy() {
|
|
907
910
|
this.removeDocumentClickListener();
|
|
911
|
+
this.removeSelectListener();
|
|
908
912
|
}
|
|
909
913
|
updateValidationErrors() {
|
|
910
914
|
this.validationErrors.set(this.kitFormErrors.getErrors(this.formControl));
|
|
@@ -944,6 +948,37 @@ class KitTextboxActionsComponent {
|
|
|
944
948
|
this.documentClickListener = null;
|
|
945
949
|
}
|
|
946
950
|
}
|
|
951
|
+
addSelectListener() {
|
|
952
|
+
if (this.selectListener) {
|
|
953
|
+
return;
|
|
954
|
+
}
|
|
955
|
+
this.selectListener = (event) => this.onTextSelect(event);
|
|
956
|
+
const textbox = this.elementRef.nativeElement.querySelector('.textbox');
|
|
957
|
+
const inputElement = textbox?.querySelector('input');
|
|
958
|
+
if (inputElement) {
|
|
959
|
+
inputElement.addEventListener('select', this.selectListener);
|
|
960
|
+
inputElement.addEventListener('mouseup', this.selectListener);
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
removeSelectListener() {
|
|
964
|
+
if (this.selectListener) {
|
|
965
|
+
const textbox = this.elementRef.nativeElement.querySelector('.textbox');
|
|
966
|
+
const inputElement = textbox?.querySelector('input');
|
|
967
|
+
if (inputElement) {
|
|
968
|
+
inputElement.removeEventListener('select', this.selectListener);
|
|
969
|
+
inputElement.removeEventListener('mouseup', this.selectListener);
|
|
970
|
+
}
|
|
971
|
+
this.selectListener = null;
|
|
972
|
+
}
|
|
973
|
+
}
|
|
974
|
+
onTextSelect(event) {
|
|
975
|
+
const inputElement = event.target;
|
|
976
|
+
const selectedText = inputElement.value.substring(inputElement.selectionStart || 0, inputElement.selectionEnd || 0);
|
|
977
|
+
if (selectedText.length > 0) {
|
|
978
|
+
this.isTextboxFocused.set(true);
|
|
979
|
+
this.formControl.markAsTouched();
|
|
980
|
+
}
|
|
981
|
+
}
|
|
947
982
|
documentClick(event) {
|
|
948
983
|
const target = event.target;
|
|
949
984
|
const textbox = this.elementRef.nativeElement.querySelector('.textbox');
|
|
@@ -10168,7 +10203,7 @@ class KitCardDetailsComponent {
|
|
|
10168
10203
|
el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
|
|
10169
10204
|
}
|
|
10170
10205
|
initSearchSubscription() {
|
|
10171
|
-
outputToObservable(this.kitTextboxComponent().changed).pipe(
|
|
10206
|
+
outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
|
|
10172
10207
|
this.cardData.set([]);
|
|
10173
10208
|
this.newCreatedCards.set([]);
|
|
10174
10209
|
this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
|
|
@@ -10276,7 +10311,7 @@ class KitCardDetailsComponent {
|
|
|
10276
10311
|
});
|
|
10277
10312
|
}
|
|
10278
10313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitCardDetailsComponent, isStandalone: true, selector: "kit-card-details", inputs: { cardData$: { classPropertyName: "cardData$", publicName: "cardData$", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked" }, queries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: ["headerActions"], descendants: true, isSignal: true }, { propertyName: "details", first: true, predicate: ["details"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n
|
|
10314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitCardDetailsComponent, isStandalone: true, selector: "kit-card-details", inputs: { cardData$: { classPropertyName: "cardData$", publicName: "cardData$", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked" }, queries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: ["headerActions"], descendants: true, isSignal: true }, { propertyName: "details", first: true, predicate: ["details"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n [placeholder]=\"'kit.search.placeholder' | translate\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @for (skeleton of [1, 2, 3]; track $index) {\n <kit-skeleton [width]=\"'100%'\" [height]=\"'200px'\"/>\n }\n } @else {\n @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\"/>\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (total() > cardData().length) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n <div class=\"details\">\n @if (showDetails) {\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n }\n </div>\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10280
10315
|
}
|
|
10281
10316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
|
|
10282
10317
|
type: Component,
|
|
@@ -10289,7 +10324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
10289
10324
|
KitTextboxComponent,
|
|
10290
10325
|
NgTemplateOutlet,
|
|
10291
10326
|
KitEntityTitleComponent,
|
|
10292
|
-
], template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n
|
|
10327
|
+
], template: "<div class=\"kit-card-details\">\n <div class=\"header\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\n <ng-container *ngTemplateOutlet=\"headerActions()\" />\n </div>\n\n <div class=\"content\">\n <div class=\"left-panel\">\n <div class=\"textbox-wrapper\">\n <kit-textbox class=\"search-textbox\"\n [placeholder]=\"'kit.search.placeholder' | translate\"\n [icon]=\"kitSvgIcon.SEARCH\"\n [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @for (skeleton of [1, 2, 3]; track $index) {\n <kit-skeleton [width]=\"'100%'\" [height]=\"'200px'\"/>\n }\n } @else {\n @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\"/>\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (total() > cardData().length) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n <div class=\"details\">\n @if (showDetails) {\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n }\n </div>\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"] }]
|
|
10293
10328
|
}], propDecorators: { cardData$: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardData$", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], dataStateChanged: [{ type: i0.Output, args: ["dataStateChanged"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], kitTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], cardElement: [{ type: i0.ContentChild, args: ['cardElement', { isSignal: true }] }], headerActions: [{ type: i0.ContentChild, args: ['headerActions', { isSignal: true }] }], details: [{ type: i0.ContentChild, args: ['details', { isSignal: true }] }] } });
|
|
10294
10329
|
|
|
10295
10330
|
class KitListComponent {
|