@indigina/ui-kit 1.1.267 → 1.1.269
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/fesm2022/indigina-ui-kit.mjs +27 -10
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +5 -4
- package/package.json +1 -1
|
@@ -5332,12 +5332,14 @@ var KitFileCardFileType;
|
|
|
5332
5332
|
KitFileCardFileType["PNG"] = ".png";
|
|
5333
5333
|
KitFileCardFileType["GIF"] = ".gif";
|
|
5334
5334
|
KitFileCardFileType["BMP"] = ".bmp";
|
|
5335
|
+
KitFileCardFileType["XML"] = ".xml";
|
|
5335
5336
|
})(KitFileCardFileType || (KitFileCardFileType = {}));
|
|
5336
5337
|
var KitFileCardFileTypeGroup;
|
|
5337
5338
|
(function (KitFileCardFileTypeGroup) {
|
|
5338
5339
|
KitFileCardFileTypeGroup["EXCEL"] = "excel";
|
|
5339
5340
|
KitFileCardFileTypeGroup["WORD"] = "word";
|
|
5340
5341
|
KitFileCardFileTypeGroup["PDF"] = "pdf";
|
|
5342
|
+
KitFileCardFileTypeGroup["XML"] = "xml";
|
|
5341
5343
|
KitFileCardFileTypeGroup["IMAGE"] = "image";
|
|
5342
5344
|
})(KitFileCardFileTypeGroup || (KitFileCardFileTypeGroup = {}));
|
|
5343
5345
|
const fileTypeGroupMap = {
|
|
@@ -5358,6 +5360,9 @@ const fileTypeGroupMap = {
|
|
|
5358
5360
|
[KitFileCardFileTypeGroup.PDF]: [
|
|
5359
5361
|
KitFileCardFileType.PDF,
|
|
5360
5362
|
],
|
|
5363
|
+
[KitFileCardFileTypeGroup.XML]: [
|
|
5364
|
+
KitFileCardFileType.XML,
|
|
5365
|
+
],
|
|
5361
5366
|
[KitFileCardFileTypeGroup.IMAGE]: [
|
|
5362
5367
|
KitFileCardFileType.TIFF,
|
|
5363
5368
|
KitFileCardFileType.JPG,
|
|
@@ -9257,9 +9262,9 @@ class KitCardDetailsComponent {
|
|
|
9257
9262
|
this.destroyRef = inject(DestroyRef);
|
|
9258
9263
|
this.cardData$ = input.required(...(ngDevMode ? [{ debugName: "cardData$" }] : []));
|
|
9259
9264
|
this.pageSize = input.required(...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
9265
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
9260
9266
|
this.dataStateChanged = output();
|
|
9261
9267
|
this.cardClicked = output();
|
|
9262
|
-
this.searchValueChanged = output();
|
|
9263
9268
|
this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
|
|
9264
9269
|
this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : []));
|
|
9265
9270
|
this.kitSvgIcon = KitSvgIcon;
|
|
@@ -9273,6 +9278,7 @@ class KitCardDetailsComponent {
|
|
|
9273
9278
|
skip: 0,
|
|
9274
9279
|
take: 0,
|
|
9275
9280
|
}, ...(ngDevMode ? [{ debugName: "dataState" }] : []));
|
|
9281
|
+
this.isLoadingMore = true;
|
|
9276
9282
|
}
|
|
9277
9283
|
ngOnInit() {
|
|
9278
9284
|
this.dataState.update(state => ({
|
|
@@ -9284,6 +9290,7 @@ class KitCardDetailsComponent {
|
|
|
9284
9290
|
this.initStateFromUrl();
|
|
9285
9291
|
}
|
|
9286
9292
|
loadMoreData() {
|
|
9293
|
+
this.isLoadingMore = true;
|
|
9287
9294
|
this.dataState.update(state => ({
|
|
9288
9295
|
...state,
|
|
9289
9296
|
skip: this.cardData().length,
|
|
@@ -9292,9 +9299,9 @@ class KitCardDetailsComponent {
|
|
|
9292
9299
|
this.updateData();
|
|
9293
9300
|
}
|
|
9294
9301
|
onCardClick(id) {
|
|
9295
|
-
this.dataState.update(state => ({ ...state, activeId: id }));
|
|
9302
|
+
this.dataState.update(state => ({ ...state, activeId: id.toString() }));
|
|
9296
9303
|
this.setStateToUrl(this.dataState());
|
|
9297
|
-
this.cardClicked.emit({ id });
|
|
9304
|
+
this.cardClicked.emit({ id: id.toString() });
|
|
9298
9305
|
}
|
|
9299
9306
|
initSearchSubscription() {
|
|
9300
9307
|
this.kitTextboxComponent().changed.pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef)).subscribe(searchValue => {
|
|
@@ -9327,11 +9334,20 @@ class KitCardDetailsComponent {
|
|
|
9327
9334
|
const { activeId } = this.getStateFromUrl();
|
|
9328
9335
|
let handledInitialActiveId = false;
|
|
9329
9336
|
this.cardData$().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
|
|
9330
|
-
this.
|
|
9331
|
-
|
|
9332
|
-
|
|
9333
|
-
|
|
9334
|
-
|
|
9337
|
+
if (this.isLoadingMore) {
|
|
9338
|
+
this.cardData.set([
|
|
9339
|
+
...this.cardData(),
|
|
9340
|
+
...data.results.data,
|
|
9341
|
+
]);
|
|
9342
|
+
this.isLoadingMore = false;
|
|
9343
|
+
}
|
|
9344
|
+
else {
|
|
9345
|
+
this.cardData.set(data.results.data);
|
|
9346
|
+
}
|
|
9347
|
+
if (!handledInitialActiveId
|
|
9348
|
+
&& activeId
|
|
9349
|
+
&& !this.dataState().activeId
|
|
9350
|
+
&& this.cardData().some(item => item.id.toString() === activeId)) {
|
|
9335
9351
|
this.onCardClick(activeId);
|
|
9336
9352
|
requestAnimationFrame(() => {
|
|
9337
9353
|
this.scrollToCardById(activeId);
|
|
@@ -9375,7 +9391,7 @@ class KitCardDetailsComponent {
|
|
|
9375
9391
|
});
|
|
9376
9392
|
}
|
|
9377
9393
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked"
|
|
9394
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\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 [disabled]=\"isLoading()\"\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 (cards.results.data?.length === 0) {\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.id)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (cards.results.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 <ng-content select=\"[details]\"/>\n </div>\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .title{display:block;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 25px)}.kit-card-details .left-panel{width:30%}.kit-card-details .left-panel .textbox-wrapper{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 .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{flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px}\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"], outputs: ["blured", "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 }); }
|
|
9379
9395
|
}
|
|
9380
9396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
|
|
9381
9397
|
type: Component,
|
|
@@ -9387,7 +9403,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
9387
9403
|
TranslatePipe,
|
|
9388
9404
|
KitTextboxComponent,
|
|
9389
9405
|
NgTemplateOutlet,
|
|
9390
|
-
|
|
9406
|
+
KitEntityTitleComponent,
|
|
9407
|
+
], template: "<div class=\"kit-card-details\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\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 [disabled]=\"isLoading()\"\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 (cards.results.data?.length === 0) {\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.id)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (cards.results.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 <ng-content select=\"[details]\"/>\n </div>\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .title{display:block;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 25px)}.kit-card-details .left-panel{width:30%}.kit-card-details .left-panel .textbox-wrapper{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 .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{flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px}\n"] }]
|
|
9391
9408
|
}] });
|
|
9392
9409
|
|
|
9393
9410
|
// KitButton
|