ngx-sfc-components 0.0.34 → 0.0.35
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/esm2020/lib/components/index.mjs +1 -1
- package/esm2020/lib/components/menu/router/parts/item/router-menu-item.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/header/side-menu-header.component.mjs +3 -3
- package/esm2020/lib/components/menu/side/parts/item/content/side-menu-item-content.component.mjs +13 -6
- package/esm2020/lib/components/menu/side/parts/item/side-menu-item.component.mjs +3 -3
- package/esm2020/lib/components/menu/side/side-menu.component.mjs +3 -3
- package/esm2020/lib/components/menu/side/side-menu.model.mjs +1 -1
- package/esm2020/lib/components/progress/line/progress-line.component.mjs +2 -2
- package/esm2020/lib/components/progress/progress.component.mjs +5 -2
- package/fesm2015/ngx-sfc-components.mjs +26 -15
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +26 -15
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -1
- package/lib/components/menu/side/parts/item/content/side-menu-item-content.component.d.ts +2 -0
- package/lib/components/menu/side/side-menu.model.d.ts +1 -0
- package/lib/components/progress/progress.component.d.ts +2 -1
- package/package.json +2 -2
|
@@ -4,12 +4,12 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { EventEmitter, Component, Input, Output, ContentChildren, Directive, HostBinding, HostListener, Inject, ViewChild, Injectable, ViewChildren, NgModule } from '@angular/core';
|
|
5
5
|
import { Chart, Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale } from 'chart.js';
|
|
6
6
|
import * as i1$1 from 'ngx-sfc-common';
|
|
7
|
-
import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, getCalcValue, UIConstants, any, Position, isNullOrEmptyString, MediaLimits, WINDOW, all, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, ObservableModel, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, where, sum, hasItem, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
|
|
7
|
+
import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, getCalcValue, UIConstants, hasItemBy, any, Position, isNullOrEmptyString, MediaLimits, WINDOW, all, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, ObservableModel, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, where, sum, hasItem, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
|
|
8
8
|
import { Subject, BehaviorSubject, startWith, combineLatest, map, filter, distinctUntilChanged, fromEvent, tap, merge, of, switchMap, first, from, skip, take, toArray, delay } from 'rxjs';
|
|
9
9
|
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
10
10
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
11
11
|
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
12
|
-
import { faAngleUp, faAngleDown, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faEye, faEyeSlash, faChevronUp, faChevronDown, faTableList, faBorderAll } from '@fortawesome/free-solid-svg-icons';
|
|
12
|
+
import { faAngleUp, faAngleDown, faCircleExclamation, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faEye, faEyeSlash, faChevronUp, faChevronDown, faTableList, faBorderAll } from '@fortawesome/free-solid-svg-icons';
|
|
13
13
|
|
|
14
14
|
class TabService {
|
|
15
15
|
constructor() {
|
|
@@ -216,10 +216,10 @@ class SideMenuHeaderComponent {
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
219
|
-
SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", switch: "switch", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<
|
|
219
|
+
SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", switch: "switch", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div>\r\n <span>{{label}}</span>\r\n <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</div>", styles: [":host div{display:flex;align-items:center;justify-content:center;padding:1.25em;height:2em}:host div span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host div span,:host-context(.sfc-default-theme) :host div span{color:#545e61}:host-context(.sfc-dark-theme) :host div span{color:#fff}:host.open div{justify-content:space-between;padding:1.25em 0 1.25em 1.25em}:host.open div span{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.HamburgerComponent, selector: "sfc-hamburger" }] });
|
|
220
220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
|
|
221
221
|
type: Component,
|
|
222
|
-
args: [{ selector: 'sfc-side-menu-header', template: "<
|
|
222
|
+
args: [{ selector: 'sfc-side-menu-header', template: "<div>\r\n <span>{{label}}</span>\r\n <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</div>", styles: [":host div{display:flex;align-items:center;justify-content:center;padding:1.25em;height:2em}:host div span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host div span,:host-context(.sfc-default-theme) :host div span{color:#545e61}:host-context(.sfc-dark-theme) :host div span{color:#fff}:host.open div{justify-content:space-between;padding:1.25em 0 1.25em 1.25em}:host.open div span{display:block}\n"] }]
|
|
223
223
|
}], propDecorators: { label: [{
|
|
224
224
|
type: Input
|
|
225
225
|
}], switch: [{
|
|
@@ -237,12 +237,14 @@ class SideMenuItemContentComponent {
|
|
|
237
237
|
constructor() {
|
|
238
238
|
this.ANGLE_UP_ICON = faAngleUp;
|
|
239
239
|
this.ANGLE_DOWM_ICON = faAngleDown;
|
|
240
|
+
this.INVALID_ICON = faCircleExclamation;
|
|
240
241
|
this.item = {
|
|
241
242
|
id: CommonConstants.EMPTY_STRING,
|
|
242
243
|
label: CommonConstants.EMPTY_STRING,
|
|
243
244
|
icon: null,
|
|
244
245
|
type: SideMenuItemType.Item,
|
|
245
|
-
active: false
|
|
246
|
+
active: false,
|
|
247
|
+
invalid: false
|
|
246
248
|
};
|
|
247
249
|
this.active = false;
|
|
248
250
|
this.open = false;
|
|
@@ -258,12 +260,17 @@ class SideMenuItemContentComponent {
|
|
|
258
260
|
get expandIcon() {
|
|
259
261
|
return this.openParent ? this.ANGLE_UP_ICON : this.ANGLE_DOWM_ICON;
|
|
260
262
|
}
|
|
263
|
+
get invalidParent() {
|
|
264
|
+
return this.hasChildren &&
|
|
265
|
+
!this.openParent &&
|
|
266
|
+
hasItemBy(this.item.items, (item) => item.invalid || false);
|
|
267
|
+
}
|
|
261
268
|
}
|
|
262
269
|
SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
-
SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div
|
|
270
|
+
SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div class=\"invalid\" *ngIf=\"item.invalid || invalidParent\">\r\n <fa-icon [icon]=\"INVALID_ICON\"></fa-icon> \r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div> \r\n</li> ", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{display:flex;justify-content:center;align-items:center;width:2em;height:2em}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;padding:.3em;transition:background-color .5s ease,color .5s ease;width:1.5em;height:1.5em}:host li .item-container .item a>fa-icon{font-size:1.3em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out,margin-left .3s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host li .invalid{margin:0 0 0 .5em}:host li .invalid fa-icon{color:#e96075;font-size:.8em}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .label{visibility:visible;opacity:1;margin-left:1em;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em;width:.8em;height:.8em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.8em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
264
271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
|
|
265
272
|
type: Component,
|
|
266
|
-
args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div
|
|
273
|
+
args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div class=\"invalid\" *ngIf=\"item.invalid || invalidParent\">\r\n <fa-icon [icon]=\"INVALID_ICON\"></fa-icon> \r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div> \r\n</li> ", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{display:flex;justify-content:center;align-items:center;width:2em;height:2em}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;padding:.3em;transition:background-color .5s ease,color .5s ease;width:1.5em;height:1.5em}:host li .item-container .item a>fa-icon{font-size:1.3em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out,margin-left .3s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host li .invalid{margin:0 0 0 .5em}:host li .invalid fa-icon{color:#e96075;font-size:.8em}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .label{visibility:visible;opacity:1;margin-left:1em;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em;width:.8em;height:.8em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.8em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
|
|
267
274
|
}], propDecorators: { item: [{
|
|
268
275
|
type: Input
|
|
269
276
|
}], active: [{
|
|
@@ -326,7 +333,7 @@ class SideMenuItemComponent {
|
|
|
326
333
|
}
|
|
327
334
|
}
|
|
328
335
|
SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
329
|
-
SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n </sfc-side-menu-item-content>\r\n\r\n <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n
|
|
336
|
+
SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n </sfc-side-menu-item-content>\r\n\r\n <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n </sfc-side-menu-item-content>\r\n </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: ["item", "active", "open", "openParent", "hasChildren"], outputs: ["selectItem"] }], animations: [
|
|
330
337
|
trigger('enterAnimation', [
|
|
331
338
|
transition(':enter', [
|
|
332
339
|
style({ transform: 'translateX(-20%)', opacity: 0 }),
|
|
@@ -351,7 +358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
351
358
|
animate('300ms', style({ transform: 'translateX(-20%)', opacity: 0 }))
|
|
352
359
|
])
|
|
353
360
|
])
|
|
354
|
-
], template: "<div class=\"container\">\r\n <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n </sfc-side-menu-item-content>\r\n\r\n <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n
|
|
361
|
+
], template: "<div class=\"container\">\r\n <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n </sfc-side-menu-item-content>\r\n\r\n <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n </sfc-side-menu-item-content>\r\n </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"] }]
|
|
355
362
|
}], propDecorators: { item: [{
|
|
356
363
|
type: Input
|
|
357
364
|
}], open: [{
|
|
@@ -413,10 +420,10 @@ class SideMenuComponent {
|
|
|
413
420
|
}
|
|
414
421
|
}
|
|
415
422
|
SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
416
|
-
SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open", "class.switch": "this.switch" } }, ngImport: i0, template: "<div class=\"container\">\r\n <
|
|
423
|
+
SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open", "class.switch": "this.switch" } }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n </sfc-side-menu-header>\r\n\r\n <ul>\r\n <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n (selectItem)=\"onItemSelect($event)\">\r\n </sfc-side-menu-item>\r\n\r\n <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n </sfc-side-menu-title>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "switch", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
|
|
417
424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
|
|
418
425
|
type: Component,
|
|
419
|
-
args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n <
|
|
426
|
+
args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n </sfc-side-menu-header>\r\n\r\n <ul>\r\n <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n (selectItem)=\"onItemSelect($event)\">\r\n </sfc-side-menu-item>\r\n\r\n <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n </sfc-side-menu-title>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"] }]
|
|
420
427
|
}], propDecorators: { model: [{
|
|
421
428
|
type: Input
|
|
422
429
|
}], selected: [{
|
|
@@ -651,10 +658,10 @@ class RouterMenuItemComponent {
|
|
|
651
658
|
}
|
|
652
659
|
}
|
|
653
660
|
RouterMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
654
|
-
RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:
|
|
661
|
+
RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
655
662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, decorators: [{
|
|
656
663
|
type: Component,
|
|
657
|
-
args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:
|
|
664
|
+
args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"] }]
|
|
658
665
|
}], propDecorators: { item: [{
|
|
659
666
|
type: Input
|
|
660
667
|
}], _selected: [{
|
|
@@ -1017,17 +1024,20 @@ function getProgressColorDynamicallyFunc(value, total) {
|
|
|
1017
1024
|
class ProgressBaseComponent {
|
|
1018
1025
|
constructor() {
|
|
1019
1026
|
this.progress = 0;
|
|
1027
|
+
this.disabled = false;
|
|
1020
1028
|
this.getColor = getProgressColorDefaultFunc;
|
|
1021
1029
|
}
|
|
1022
1030
|
}
|
|
1023
1031
|
ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1024
|
-
ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
|
|
1032
|
+
ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", disabled: "disabled", getColor: "getColor" }, ngImport: i0 });
|
|
1025
1033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, decorators: [{
|
|
1026
1034
|
type: Directive
|
|
1027
1035
|
}], propDecorators: { progress: [{
|
|
1028
1036
|
type: Input
|
|
1029
1037
|
}], background: [{
|
|
1030
1038
|
type: Input
|
|
1039
|
+
}], disabled: [{
|
|
1040
|
+
type: Input
|
|
1031
1041
|
}], getColor: [{
|
|
1032
1042
|
type: Input
|
|
1033
1043
|
}] } });
|
|
@@ -1051,7 +1061,7 @@ class ProgressLineComponent extends ProgressBaseComponent {
|
|
|
1051
1061
|
get progressStyles() {
|
|
1052
1062
|
return {
|
|
1053
1063
|
width: getCssLikeValue((this.progress / this.total) * CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_PERCENTAGE),
|
|
1054
|
-
backgroundColor: this.getColor(this.progress, this.total)
|
|
1064
|
+
backgroundColor: this.disabled ? '#bdbdbd' : this.getColor(this.progress, this.total)
|
|
1055
1065
|
};
|
|
1056
1066
|
}
|
|
1057
1067
|
}
|
|
@@ -4432,3 +4442,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4432
4442
|
|
|
4433
4443
|
export { AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DEFAULT_CHART_OPTIONS, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressColor, ProgressLineComponent, ProgressSemiCircleComponent, RouterMenuComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableColumnType, TableComponent, TableDataType, TableSelectService, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition, getProgressColorDefaultFunc, getProgressColorDynamicallyFunc };
|
|
4434
4444
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|
|
4445
|
+
//# sourceMappingURL=ngx-sfc-components.mjs.map
|