ngx-sfc-components 0.0.20 → 0.0.21
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/menu/dropdown/dropdown-menu.component.mjs +3 -3
- package/esm2020/lib/components/menu/dropdown/parts/item/dropdown-menu-item.component.mjs +2 -2
- package/fesm2015/ngx-sfc-components.mjs +4 -4
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +4 -4
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -418,10 +418,10 @@ class DropdownMenuItemComponent {
|
|
|
418
418
|
}
|
|
419
419
|
}
|
|
420
420
|
DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
421
|
-
DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host
|
|
421
|
+
DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
422
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
|
|
423
423
|
type: Component,
|
|
424
|
-
args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host
|
|
424
|
+
args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"] }]
|
|
425
425
|
}], propDecorators: { item: [{
|
|
426
426
|
type: Input
|
|
427
427
|
}], _active: [{
|
|
@@ -489,7 +489,7 @@ class DropdownMenuComponent {
|
|
|
489
489
|
}
|
|
490
490
|
}
|
|
491
491
|
DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i3.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", defaultDots: "defaultDots", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", filled: "filled", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class.filled": "this.filled", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"toggle($event)\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n </sfc-dropdown-menu-item>\r\n </ul>\r\n </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container:
|
|
492
|
+
DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", defaultDots: "defaultDots", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", filled: "filled", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class.filled": "this.filled", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"toggle($event)\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n </sfc-dropdown-menu-item>\r\n </ul>\r\n </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{transition:background .5s ease}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot,:host-context(.sfc-default-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#545e61}:host-context(.sfc-dark-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#fff}:host.filled ul li .container:hover{background:#ffce54}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left: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: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { kind: "component", type: i3.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], animations: [
|
|
493
493
|
trigger('openClose', [
|
|
494
494
|
state('true', style({
|
|
495
495
|
opacity: 1
|
|
@@ -516,7 +516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
516
516
|
animate('0.1s')
|
|
517
517
|
])
|
|
518
518
|
])
|
|
519
|
-
], template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"toggle($event)\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n </sfc-dropdown-menu-item>\r\n </ul>\r\n </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container:
|
|
519
|
+
], template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"toggle($event)\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n </sfc-dropdown-menu-item>\r\n </ul>\r\n </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{transition:background .5s ease}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot,:host-context(.sfc-default-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#545e61}:host-context(.sfc-dark-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#fff}:host.filled ul li .container:hover{background:#ffce54}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"] }]
|
|
520
520
|
}], ctorParameters: function () { return [{ type: i3.ResizeService }, { type: Window, decorators: [{
|
|
521
521
|
type: Inject,
|
|
522
522
|
args: [WINDOW]
|