@indice/ng-components 0.2.117 → 0.2.120

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/_styles.css CHANGED
@@ -366,48 +366,27 @@
366
366
  @apply flex flex-row justify-start ;
367
367
  }
368
368
 
369
- .view-layout-title-container-sm {
370
- @apply lg:flex lg:items-center lg:justify-between;
371
- }
372
-
373
369
  .view-layout-title-container-inner {
374
370
  @apply flex-1 min-w-0;
375
371
  }
376
372
 
377
-
378
- .view-layout-title-container-sm-inner {
379
- @apply flex-1 justify-start items-center;
380
- }
381
-
382
373
  .title-icon {
383
- @apply text-xl text-white font-thin mr-1;
384
- }
385
-
386
- .title-icon-sm {
387
- @apply text-2xl text-white font-thin mr-2 mt-1;
388
- }
389
-
390
- .view-layout-title-busy {
391
- @apply animate-pulse inline text-xl text-gray-200;
374
+ @apply text-2xl md:text-xl text-white font-thin mr-1;
392
375
  }
393
376
 
394
377
  .view-layout-title {
395
- @apply inline text-xl text-white;
396
- }
397
-
398
- .view-layout-title-busy-sm {
399
- @apply animate-pulse inline text-3xl text-gray-200;
378
+ @apply inline text-xl md:text-3xl text-white;
400
379
  }
401
380
 
402
- .view-layout-title-sm {
403
- @apply inline text-3xl text-white;
381
+ .view-layout-title-busy {
382
+ @apply animate-pulse inline text-xl md:text-3xl text-gray-200;
404
383
  }
405
384
 
406
385
  .meta-container {
407
386
  @apply mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6;
408
387
  }
409
388
 
410
- .meta-container-inner {
389
+ .meta-item-container {
411
390
  @apply mt-2 flex items-center text-sm text-gray-500;
412
391
  }
413
392
 
@@ -419,19 +398,11 @@
419
398
  @apply flex flex-wrap sm:flex-row space-x-2;
420
399
  }
421
400
 
422
- .meta-container-sm-inner {
423
- @apply flex flex-wrap mt-2 sm:flex-row space-x-2 text-white;
424
- }
425
-
426
- .meta-icon-sm {
427
- @apply text-sm text-gray-400 mr-1;
428
- }
429
-
430
401
  .meta-text {
431
402
  @apply text-white text-xs;
432
403
  margin-top: 2px;
433
404
  margin-left: 2px;
434
- margin-right: 4px;
405
+ margin-right: 2px;
435
406
  }
436
407
 
437
408
  .search-container {
@@ -847,15 +818,15 @@
847
818
  }
848
819
 
849
820
  .list-view-th {
850
- @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
821
+ @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
851
822
  }
852
823
 
853
824
  .list-view-th-full {
854
- @apply w-full px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
825
+ @apply w-full px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
855
826
  }
856
827
 
857
828
  .list-view-th-half {
858
- @apply w-full sm:w-1/2 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
829
+ @apply w-full sm:w-1/2 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-normal break-words;
859
830
  }
860
831
 
861
832
  .list-view-tbody {
@@ -871,15 +842,15 @@
871
842
  }
872
843
 
873
844
  .list-view-td {
874
- @apply px-6 py-4 whitespace-nowrap;
845
+ @apply px-4 py-4 whitespace-nowrap;
875
846
  }
876
847
 
877
848
  .list-view-td-full {
878
- @apply w-full px-6 py-4 break-all;
849
+ @apply w-full px-4 py-4 break-all;
879
850
  }
880
851
 
881
852
  .list-view-td-half {
882
- @apply w-full sm:w-1/2 px-6 py-4 whitespace-normal break-words;
853
+ @apply w-full sm:w-1/2 px-4 py-4 whitespace-normal break-words;
883
854
  }
884
855
 
885
856
  .details-button {
@@ -2355,7 +2355,7 @@
2355
2355
  return ViewLayoutComponent;
2356
2356
  }());
2357
2357
  ViewLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ViewLayoutComponent, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Component });
2358
- ViewLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0__namespace, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n <div class=\"view-layout-title-container\">\r\n\r\n <div class=\"view-layout-title-container-inner\">\r\n <div class=\"flex items-center\">\r\n <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n </div>\r\n <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n <ng-container *ngFor=\"let meta of metaItems\">\r\n <div class=\"mt-2 flex items-center text-sm text-gray-500\" class1=\"meta-container-inner\">\r\n <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n <span class=\"meta-text\">{{meta.text}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex items-center justify-end\">\r\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'switch-view'\">\r\n <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n <span class=\"inline-block relative\">\r\n <i [class]=\"action.icon\"></i>\r\n <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'search'\">\r\n <label for=\"search\" class=\"sr-only\">Search</label>\r\n <div class=\"search-container\">\r\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n </svg>-->\r\n </div>\r\n <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n </div>\r\n <button type=\"button\" href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n <i [class]=\"action.icon\"></i>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'router-link'\">\r\n <button type=\"button\" href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n <i [class]=\"action.icon\"></i>\r\n </button>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchDefault>\r\n <button type=\"button\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n <i [class]=\"action.icon\"></i>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
2358
+ ViewLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0__namespace, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n <div class=\"view-layout-title-container\">\r\n\r\n <div class=\"view-layout-title-container-inner\">\r\n <div class=\"flex items-center\">\r\n <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n </div>\r\n <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n <ng-container *ngFor=\"let meta of metaItems\">\r\n <div class=\"meta-item-container\">\r\n <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n <span class=\"meta-text\">{{meta.text}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex items-center justify-end\">\r\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'switch-view'\">\r\n <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n <span class=\"inline-block relative\">\r\n <i [class]=\"action.icon\"></i>\r\n <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'search'\">\r\n <label for=\"search\" class=\"sr-only\">Search</label>\r\n <div class=\"search-container\">\r\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n </svg>-->\r\n </div>\r\n <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n </div>\r\n <button type=\"button\" href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n <i [class]=\"action.icon\"></i>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'router-link'\">\r\n <button type=\"button\" href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n <i [class]=\"action.icon\"></i>\r\n </button>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchDefault>\r\n <button type=\"button\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n <i [class]=\"action.icon\"></i>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
2359
2359
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ViewLayoutComponent, decorators: [{
2360
2360
  type: i0.Component,
2361
2361
  args: [{