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: [{
|
|
@@ -325,7 +332,7 @@ class SideMenuItemComponent {
|
|
|
325
332
|
}
|
|
326
333
|
}
|
|
327
334
|
SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
328
|
-
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
|
|
335
|
+
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: [
|
|
329
336
|
trigger('enterAnimation', [
|
|
330
337
|
transition(':enter', [
|
|
331
338
|
style({ transform: 'translateX(-20%)', opacity: 0 }),
|
|
@@ -350,7 +357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
350
357
|
animate('300ms', style({ transform: 'translateX(-20%)', opacity: 0 }))
|
|
351
358
|
])
|
|
352
359
|
])
|
|
353
|
-
], 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
|
|
360
|
+
], 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"] }]
|
|
354
361
|
}], propDecorators: { item: [{
|
|
355
362
|
type: Input
|
|
356
363
|
}], open: [{
|
|
@@ -411,10 +418,10 @@ class SideMenuComponent {
|
|
|
411
418
|
}
|
|
412
419
|
}
|
|
413
420
|
SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
414
|
-
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 <
|
|
421
|
+
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"] }] });
|
|
415
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
|
|
416
423
|
type: Component,
|
|
417
|
-
args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n <
|
|
424
|
+
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"] }]
|
|
418
425
|
}], propDecorators: { model: [{
|
|
419
426
|
type: Input
|
|
420
427
|
}], selected: [{
|
|
@@ -645,10 +652,10 @@ class RouterMenuItemComponent {
|
|
|
645
652
|
}
|
|
646
653
|
}
|
|
647
654
|
RouterMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
648
|
-
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:
|
|
655
|
+
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"] }] });
|
|
649
656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, decorators: [{
|
|
650
657
|
type: Component,
|
|
651
|
-
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:
|
|
658
|
+
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"] }]
|
|
652
659
|
}], propDecorators: { item: [{
|
|
653
660
|
type: Input
|
|
654
661
|
}], _selected: [{
|
|
@@ -1013,17 +1020,20 @@ function getProgressColorDynamicallyFunc(value, total) {
|
|
|
1013
1020
|
class ProgressBaseComponent {
|
|
1014
1021
|
constructor() {
|
|
1015
1022
|
this.progress = 0;
|
|
1023
|
+
this.disabled = false;
|
|
1016
1024
|
this.getColor = getProgressColorDefaultFunc;
|
|
1017
1025
|
}
|
|
1018
1026
|
}
|
|
1019
1027
|
ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1020
|
-
ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
|
|
1028
|
+
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 });
|
|
1021
1029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, decorators: [{
|
|
1022
1030
|
type: Directive
|
|
1023
1031
|
}], propDecorators: { progress: [{
|
|
1024
1032
|
type: Input
|
|
1025
1033
|
}], background: [{
|
|
1026
1034
|
type: Input
|
|
1035
|
+
}], disabled: [{
|
|
1036
|
+
type: Input
|
|
1027
1037
|
}], getColor: [{
|
|
1028
1038
|
type: Input
|
|
1029
1039
|
}] } });
|
|
@@ -1047,7 +1057,7 @@ class ProgressLineComponent extends ProgressBaseComponent {
|
|
|
1047
1057
|
get progressStyles() {
|
|
1048
1058
|
return {
|
|
1049
1059
|
width: getCssLikeValue((this.progress / this.total) * CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_PERCENTAGE),
|
|
1050
|
-
backgroundColor: this.getColor(this.progress, this.total)
|
|
1060
|
+
backgroundColor: this.disabled ? '#bdbdbd' : this.getColor(this.progress, this.total)
|
|
1051
1061
|
};
|
|
1052
1062
|
}
|
|
1053
1063
|
}
|
|
@@ -4411,3 +4421,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4411
4421
|
|
|
4412
4422
|
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 };
|
|
4413
4423
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|
|
4424
|
+
//# sourceMappingURL=ngx-sfc-components.mjs.map
|