raise-common-lib 0.0.80 → 0.0.82
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/bundles/raise-common-lib.umd.js +35 -20
- package/bundles/raise-common-lib.umd.js.map +1 -1
- package/bundles/raise-common-lib.umd.min.js +2 -2
- package/bundles/raise-common-lib.umd.min.js.map +1 -1
- package/esm2015/lib/common-grid/index.component.js +3 -1
- package/esm2015/lib/layout/drawer/index.component.js +6 -8
- package/esm2015/lib/layout/grid-box/index.component.js +5 -8
- package/esm2015/lib/layout/page-list/index.component.js +23 -3
- package/esm5/lib/common-grid/index.component.js +3 -1
- package/esm5/lib/layout/drawer/index.component.js +6 -8
- package/esm5/lib/layout/grid-box/index.component.js +5 -8
- package/esm5/lib/layout/page-list/index.component.js +23 -3
- package/fesm2015/raise-common-lib.js +32 -17
- package/fesm2015/raise-common-lib.js.map +1 -1
- package/fesm5/raise-common-lib.js +32 -17
- package/fesm5/raise-common-lib.js.map +1 -1
- package/lib/layout/grid-box/index.component.d.ts +1 -2
- package/lib/layout/page-list/index.component.d.ts +3 -0
- package/package.json +1 -1
- package/raise-common-lib.metadata.json +1 -1
- package/src/assets/style/reset/checkbox.scss +1 -1
- package/src/assets/style/reset/grid.scss +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { EventEmitter, Component, ChangeDetectorRef, ViewChild, Input, Output, HostBinding, ContentChild, Injectable, ɵɵdefineInjectable, ɵɵinject, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChildren, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
2
2
|
import { GridComponent, GridModule, PagerModule, GridAllModule, PageService, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
|
|
3
3
|
import { times, debounce } from 'lodash';
|
|
4
|
-
import { CarouselAllModule, ToolbarModule, TabModule } from '@syncfusion/ej2-angular-navigations';
|
|
5
4
|
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
|
|
5
|
+
import { CarouselAllModule, ToolbarModule, TabModule } from '@syncfusion/ej2-angular-navigations';
|
|
6
6
|
import { NavigationEnd, Router, ActivatedRoute, RouteReuseStrategy } from '@angular/router';
|
|
7
7
|
import { filter } from 'rxjs/operators';
|
|
8
8
|
import { Subject, BehaviorSubject } from 'rxjs';
|
|
@@ -129,6 +129,8 @@ class CommonGridComponent {
|
|
|
129
129
|
ngOnInit() {
|
|
130
130
|
if (this.hiddenLoaded)
|
|
131
131
|
this.className = "";
|
|
132
|
+
this.gridId =
|
|
133
|
+
this.gridId + Date.now() + "_" + Math.random().toString(36).slice(2, 5);
|
|
132
134
|
this.ref && this.ref.markForCheck();
|
|
133
135
|
}
|
|
134
136
|
/**
|
|
@@ -1147,6 +1149,7 @@ if (false) {
|
|
|
1147
1149
|
class RsPageListComponent {
|
|
1148
1150
|
constructor() {
|
|
1149
1151
|
this.customPageTitle = false;
|
|
1152
|
+
this.hideSearch = false;
|
|
1150
1153
|
this.isInner = false;
|
|
1151
1154
|
this.hasWholeToolbarSlot = false;
|
|
1152
1155
|
}
|
|
@@ -1172,7 +1175,15 @@ class RsPageListComponent {
|
|
|
1172
1175
|
* @return {?}
|
|
1173
1176
|
*/
|
|
1174
1177
|
onSeach() {
|
|
1175
|
-
this.gridContent
|
|
1178
|
+
if (this.gridContent) {
|
|
1179
|
+
this.gridContent.grid.search(this.searchValue);
|
|
1180
|
+
}
|
|
1181
|
+
else if (this.orignGrid) {
|
|
1182
|
+
this.orignGrid.search(this.searchValue);
|
|
1183
|
+
}
|
|
1184
|
+
else if (this.treeGrid) {
|
|
1185
|
+
this.treeGrid.search(this.searchValue);
|
|
1186
|
+
}
|
|
1176
1187
|
}
|
|
1177
1188
|
/**
|
|
1178
1189
|
* @return {?}
|
|
@@ -1184,27 +1195,36 @@ class RsPageListComponent {
|
|
|
1184
1195
|
RsPageListComponent.decorators = [
|
|
1185
1196
|
{ type: Component, args: [{
|
|
1186
1197
|
selector: "rs-page-list",
|
|
1187
|
-
template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n <ng-content select=\"[titleSlot]\"></ng-content>\r\n </ng-container>\r\n <ng-template #defaultTitle>\r\n <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n </ng-template>\r\n <div class=\"rs-sub-section\">\r\n <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-content-wrap\">\r\n <div class=\"rs-content-tab\">\r\n <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-toolbar-wrap\">\r\n <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n <div class=\"rs-search-input\">\r\n <ejs-textbox\r\n type=\"text\"\r\n class=\"e-input\"\r\n [(ngModel)]=\"searchValue\"\r\n (input)=\"onInput()\"\r\n placeholder=\"Search all fields\"\r\n [showClearButton]=\"true\"\r\n autocomplete=\"off\"\r\n ></ejs-textbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"rs-grid-wrap\">\r\n <ng-content select=\"[gridSlot]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
1198
|
+
template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n <ng-content select=\"[titleSlot]\"></ng-content>\r\n </ng-container>\r\n <ng-template #defaultTitle>\r\n <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n </ng-template>\r\n <div class=\"rs-sub-section\">\r\n <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-content-wrap\">\r\n <div class=\"rs-content-tab\">\r\n <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-toolbar-wrap\">\r\n <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n <ejs-textbox\r\n type=\"text\"\r\n class=\"e-input\"\r\n [(ngModel)]=\"searchValue\"\r\n (input)=\"onInput()\"\r\n placeholder=\"Search all fields\"\r\n [showClearButton]=\"true\"\r\n autocomplete=\"off\"\r\n ></ejs-textbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"rs-grid-wrap\">\r\n <ng-content select=\"[gridSlot]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
1188
1199
|
styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-sub-section{width:100%}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center;gap:4px}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
|
|
1189
1200
|
}] }
|
|
1190
1201
|
];
|
|
1191
1202
|
RsPageListComponent.propDecorators = {
|
|
1192
1203
|
gridContent: [{ type: ContentChild, args: [CommonGridComponent, { static: true },] }],
|
|
1204
|
+
orignGrid: [{ type: ContentChild, args: [GridComponent, { static: true },] }],
|
|
1205
|
+
treeGrid: [{ type: ContentChild, args: [TreeGridComponent, { static: true },] }],
|
|
1193
1206
|
wholeToolbarSlot: [{ type: ContentChild, args: ["wholeToolbarSlot", { static: true },] }],
|
|
1194
1207
|
pageTitle: [{ type: Input }],
|
|
1195
1208
|
customPageTitle: [{ type: Input }],
|
|
1209
|
+
hideSearch: [{ type: Input }],
|
|
1196
1210
|
isInner: [{ type: Input }]
|
|
1197
1211
|
};
|
|
1198
1212
|
if (false) {
|
|
1199
1213
|
/** @type {?} */
|
|
1200
1214
|
RsPageListComponent.prototype.gridContent;
|
|
1201
1215
|
/** @type {?} */
|
|
1216
|
+
RsPageListComponent.prototype.orignGrid;
|
|
1217
|
+
/** @type {?} */
|
|
1218
|
+
RsPageListComponent.prototype.treeGrid;
|
|
1219
|
+
/** @type {?} */
|
|
1202
1220
|
RsPageListComponent.prototype.wholeToolbarSlot;
|
|
1203
1221
|
/** @type {?} */
|
|
1204
1222
|
RsPageListComponent.prototype.pageTitle;
|
|
1205
1223
|
/** @type {?} */
|
|
1206
1224
|
RsPageListComponent.prototype.customPageTitle;
|
|
1207
1225
|
/** @type {?} */
|
|
1226
|
+
RsPageListComponent.prototype.hideSearch;
|
|
1227
|
+
/** @type {?} */
|
|
1208
1228
|
RsPageListComponent.prototype.isInner;
|
|
1209
1229
|
/**
|
|
1210
1230
|
* @type {?}
|
|
@@ -1312,7 +1332,7 @@ if (false) {
|
|
|
1312
1332
|
*/
|
|
1313
1333
|
class GridBoxComponent {
|
|
1314
1334
|
constructor() {
|
|
1315
|
-
this.
|
|
1335
|
+
this.hideSearch = false;
|
|
1316
1336
|
this.isInner = false;
|
|
1317
1337
|
this.hasWholeToolbarSlot = false;
|
|
1318
1338
|
}
|
|
@@ -1358,7 +1378,7 @@ class GridBoxComponent {
|
|
|
1358
1378
|
GridBoxComponent.decorators = [
|
|
1359
1379
|
{ type: Component, args: [{
|
|
1360
1380
|
selector: "rs-grid-box",
|
|
1361
|
-
template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n <div class=\"rs-content-tab\">\r\n <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-toolbar-wrap\">\r\n <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n <div class=\"rs-search-input\">\r\n <ejs-textbox\r\n type=\"text\"\r\n class=\"e-input\"\r\n [(ngModel)]=\"searchValue\"\r\n (input)=\"onInput()\"\r\n placeholder=\"Search all fields\"\r\n [showClearButton]=\"true\"\r\n autocomplete=\"off\"\r\n ></ejs-textbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"rs-grid-wrap\">\r\n <ng-content select=\"[gridSlot]\"></ng-content>\r\n </div>\r\n</div>\r\n",
|
|
1381
|
+
template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n <div class=\"rs-content-tab\">\r\n <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-toolbar-wrap\">\r\n <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n </div>\r\n <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\r\n <ejs-textbox\r\n type=\"text\"\r\n class=\"e-input\"\r\n [(ngModel)]=\"searchValue\"\r\n (input)=\"onInput()\"\r\n placeholder=\"Search all fields\"\r\n [showClearButton]=\"true\"\r\n autocomplete=\"off\"\r\n ></ejs-textbox>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"rs-grid-wrap\">\r\n <ng-content select=\"[gridSlot]\"></ng-content>\r\n </div>\r\n</div>\r\n",
|
|
1362
1382
|
styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:24px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}.rs-grid-box .rs-search-input{width:240px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
|
|
1363
1383
|
}] }
|
|
1364
1384
|
];
|
|
@@ -1367,8 +1387,7 @@ GridBoxComponent.propDecorators = {
|
|
|
1367
1387
|
orignGrid: [{ type: ContentChild, args: [GridComponent, { static: true },] }],
|
|
1368
1388
|
treeGrid: [{ type: ContentChild, args: [TreeGridComponent, { static: true },] }],
|
|
1369
1389
|
wholeToolbarSlot: [{ type: ContentChild, args: ["wholeToolbarSlot", { static: true },] }],
|
|
1370
|
-
|
|
1371
|
-
customPageTitle: [{ type: Input }],
|
|
1390
|
+
hideSearch: [{ type: Input }],
|
|
1372
1391
|
isInner: [{ type: Input }]
|
|
1373
1392
|
};
|
|
1374
1393
|
if (false) {
|
|
@@ -1381,9 +1400,7 @@ if (false) {
|
|
|
1381
1400
|
/** @type {?} */
|
|
1382
1401
|
GridBoxComponent.prototype.wholeToolbarSlot;
|
|
1383
1402
|
/** @type {?} */
|
|
1384
|
-
GridBoxComponent.prototype.
|
|
1385
|
-
/** @type {?} */
|
|
1386
|
-
GridBoxComponent.prototype.customPageTitle;
|
|
1403
|
+
GridBoxComponent.prototype.hideSearch;
|
|
1387
1404
|
/** @type {?} */
|
|
1388
1405
|
GridBoxComponent.prototype.isInner;
|
|
1389
1406
|
/**
|
|
@@ -2247,11 +2264,9 @@ class DrawerComponent {
|
|
|
2247
2264
|
this.setSlotElement(cache.toolbarEl, this.toolbarSlot.nativeElement);
|
|
2248
2265
|
this.setSlotElement(cache.headerEl, this.headerSlot.nativeElement);
|
|
2249
2266
|
this.setSlotElement(cache.topEl, this.topSlot.nativeElement);
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
this.element.nativeElement.style.setProperty("--drawer-top", drawerTop);
|
|
2254
|
-
}
|
|
2267
|
+
/** @type {?} */
|
|
2268
|
+
const drawerTop = cache.config.top ? `${cache.config.top}px` : "";
|
|
2269
|
+
this.element.nativeElement.style.setProperty("--drawer-top", drawerTop);
|
|
2255
2270
|
if (cache.config.mode === "inner") {
|
|
2256
2271
|
this.content.nativeElement.insertBefore(this.header.nativeElement, this.content.nativeElement.firstChild);
|
|
2257
2272
|
this.content.nativeElement.append(this.toolbarSlot.nativeElement);
|
|
@@ -2349,8 +2364,8 @@ class DrawerComponent {
|
|
|
2349
2364
|
DrawerComponent.decorators = [
|
|
2350
2365
|
{ type: Component, args: [{
|
|
2351
2366
|
selector: "rs-drawer",
|
|
2352
|
-
template: "<div #element id=\"rs-drawer-container\" class=\"rs-drawer-container\">\r\n <div class=\"rs-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div\r\n #drawer\r\n class=\"rs-drawer\"\r\n [attr.data-mode]=\"config.mode\"\r\n [attr.data-opened]=\"($isOpened | async) ? 'yes' : 'no'\"\r\n [attr.data-transition]=\"useTransition\"\r\n >\r\n <div class=\"drawer-header\" #header>\r\n <button class=\"drawer-return-button\" (click)=\"hide()\">\r\n <span class=\"drawer-sub-title\" *ngIf=\"config.subTitle\">\r\n {{ config.subTitle }}\r\n </span>\r\n </button>\r\n <div class=\"drawer-title\">{{ config.title }}</div>\r\n <div class=\"drawer-header-slot\" #headerSlot></div>\r\n </div>\r\n <div class=\"drawer-top-slot\" #topSlot></div>\r\n <div class=\"drawer-content\" #content>\r\n
|
|
2353
|
-
styles: [":host{display:block;height:100%}#rs-drawer-container{height:100%}.rs-drawer-container{height:100%;background-color:transparent;overflow:hidden;position:relative}.rs-drawer-container .rs-drawer-content{width:100%;height:100%;overflow:auto;margin-right:0!important}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar{width:5px;height:5px;background:#fff;position:static;z-index:999;border-radius:10px}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar-thumb{background:#eaedf0}.rs-drawer-container .rs-drawer{width:100%;height:100%;border-left:none;background-color:transparent;overflow:visible;pointer-events:none;opacity:0;display:flex;flex-flow:column nowrap;position:absolute;z-index:2;top:0;left:100%}.rs-drawer-container .rs-drawer[data-opened=yes]{left:0;opacity:1}.rs-drawer-container .rs-drawer[data-transition=yes]{transition:opacity .5s ease-in-out,left .5s ease-in-out}.rs-drawer-container .rs-drawer .drawer-header{flex:none;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;box-sizing:content-box;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button{flex:none;display:flex;flex-flow:row nowrap;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button::before{content:url(../../assets/img/drawer-back.svg);width:24px;height:24px;margin-right:8px;transition:transform 125ms ease-in-out}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover::before{transform:translateX(-2px)}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button .drawer-sub-title{margin-right:12px;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title{flex:none;min-height:14px;padding:0 12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title:empty{padding:0}.rs-drawer-container .rs-drawer .drawer-content{flex:auto;padding:0 20px;border:1px solid #ebedf0;border-radius:15px;background-color:#fff;
|
|
2367
|
+
template: "<div #element id=\"rs-drawer-container\" class=\"rs-drawer-container\">\r\n <div class=\"rs-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div\r\n #drawer\r\n class=\"rs-drawer\"\r\n [attr.data-mode]=\"config.mode\"\r\n [attr.data-opened]=\"($isOpened | async) ? 'yes' : 'no'\"\r\n [attr.data-transition]=\"useTransition\"\r\n >\r\n <div class=\"drawer-header\" #header>\r\n <button class=\"drawer-return-button\" (click)=\"hide()\">\r\n <span class=\"drawer-sub-title\" *ngIf=\"config.subTitle\">\r\n {{ config.subTitle }}\r\n </span>\r\n </button>\r\n <div class=\"drawer-title\">{{ config.title }}</div>\r\n <div class=\"drawer-header-slot\" #headerSlot></div>\r\n </div>\r\n <div class=\"drawer-top-slot\" #topSlot></div>\r\n <div class=\"drawer-content-box\">\r\n <div class=\"drawer-content\" #content>\r\n <div class=\"drawer-content-container\">\r\n <ng-template #dynamicComponentContainer></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"drawer-toolbar-slot\" #toolbarSlot></div>\r\n </div>\r\n</div>\r\n",
|
|
2368
|
+
styles: [":host{display:block;height:100%}#rs-drawer-container{height:100%}.rs-drawer-container{height:100%;background-color:transparent;overflow:hidden;position:relative}.rs-drawer-container .rs-drawer-content{width:100%;height:100%;overflow:auto;margin-right:0!important}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar{width:5px;height:5px;background:#fff;position:static;z-index:999;border-radius:10px}.rs-drawer-container .rs-drawer-content::-webkit-scrollbar-thumb{background:#eaedf0}.rs-drawer-container .rs-drawer{width:100%;height:100%;border-left:none;background-color:transparent;overflow:visible;pointer-events:none;opacity:0;display:flex;flex-flow:column nowrap;position:absolute;z-index:2;top:0;left:100%}.rs-drawer-container .rs-drawer[data-opened=yes]{left:0;opacity:1}.rs-drawer-container .rs-drawer[data-transition=yes]{transition:opacity .5s ease-in-out,left .5s ease-in-out}.rs-drawer-container .rs-drawer .drawer-header{flex:none;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;box-sizing:content-box;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button{flex:none;display:flex;flex-flow:row nowrap;align-items:center;padding:0;border:none;background-color:transparent;cursor:pointer}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button::before{content:url(../../assets/img/drawer-back.svg);width:24px;height:24px;margin-right:8px;transition:transform 125ms ease-in-out}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button:hover::before{transform:translateX(-2px)}.rs-drawer-container .rs-drawer .drawer-header .drawer-return-button .drawer-sub-title{margin-right:12px;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title{flex:none;min-height:14px;padding:0 12px;border-left:1px solid #bdc4ca;font-family:Arial;font-style:normal;font-weight:400}.rs-drawer-container .rs-drawer .drawer-header .drawer-title:empty{padding:0}.rs-drawer-container .rs-drawer .drawer-content-box{flex:auto;height:0;background-color:#f7fafb;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-content{height:100%;padding:0 20px;border:1px solid #ebedf0;border-radius:15px;background-color:#fff;display:flex;flex-flow:column nowrap}.rs-drawer-container .rs-drawer .drawer-content .drawer-content-container{flex:auto;overflow:hidden auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot{flex:none;height:32px;margin-left:auto;display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-toolbar-slot:empty{display:none}.rs-drawer-container .rs-drawer .drawer-top-slot{flex:none;pointer-events:auto}.rs-drawer-container .rs-drawer .drawer-top-slot:empty{height:var(--drawer-top,0);pointer-events:none}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header{height:46px;padding:0 0 0 8px;background-color:#f7fafb}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header .drawer-sub-title,.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-header .drawer-title{color:#1f3f5c;font-size:15px;font-weight:700;line-height:18px}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content{padding-bottom:20px}.rs-drawer-container .rs-drawer[data-mode=outer] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-top-slot:empty+.drawer-content-box{padding-top:calc((var(--drawer-top,0) + 1) * 16px)}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header{height:24px;padding:6px 0;border-bottom:1px solid #eaedf0}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-sub-title,.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-title{color:#44566c;font-size:12px;line-height:14px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-header .drawer-title{font-weight:700}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-content .drawer-content-container{margin-right:-20px;padding-right:20px}.rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot{width:100%;padding:16px 0;box-sizing:content-box;border-top:1px solid #eaedf0}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar]{display:flex;flex-flow:row nowrap;justify-content:flex-end;align-items:center;gap:12px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;gap:6px;min-width:80px;height:32px;padding:0 12px;border:1px solid #adb5bd;border-radius:4px;background-color:#fff;cursor:pointer;color:#44566c;font-size:13px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:hover{border-color:#6c7c90}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button:disabled{opacity:1!important;border-color:#6c7c9066;color:#44566c66;cursor:unset}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary{border:none;background-color:#1364b3;color:#fff}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:hover{background-color:#176bca}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button.primary:disabled{background-color:#1364b366}::ng-deep .rs-drawer-container .rs-drawer .drawer-toolbar-slot [drawer-toolbar] button img{width:16px;height:16px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=outer] .drawer-toolbar-slot [drawer-toolbar] button{height:26px;font-size:12px;line-height:14px}::ng-deep .rs-drawer-container .rs-drawer[data-mode=inner] .drawer-toolbar-slot [drawer-toolbar] button img{display:none}"]
|
|
2354
2369
|
}] }
|
|
2355
2370
|
];
|
|
2356
2371
|
/** @nocollapse */
|