@seniorsistemas/angular-components 17.20.0 → 17.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/seniorsistemas-angular-components.umd.js +10 -2
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/accordion/components/accordion-panel/accordion-panel.component.d.ts +2 -0
- package/esm2015/components/accordion/components/accordion-panel/accordion-panel.component.js +11 -3
- package/esm5/components/accordion/components/accordion-panel/accordion-panel.component.js +11 -3
- package/fesm2015/seniorsistemas-angular-components.js +10 -2
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +10 -2
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -209,6 +209,8 @@
|
|
|
209
209
|
function AccordionPanelComponent() {
|
|
210
210
|
this.disabled = false;
|
|
211
211
|
this.cache = false;
|
|
212
|
+
this.validationMessageIcon = 'fas fa-exclamation-circle';
|
|
213
|
+
this.validationMessageIconColor = 'Red';
|
|
212
214
|
this.panelOpened = new core.EventEmitter();
|
|
213
215
|
this.panelClosed = new core.EventEmitter();
|
|
214
216
|
this.isAnimating = false;
|
|
@@ -290,6 +292,12 @@
|
|
|
290
292
|
__decorate([
|
|
291
293
|
core.Input()
|
|
292
294
|
], AccordionPanelComponent.prototype, "cache", void 0);
|
|
295
|
+
__decorate([
|
|
296
|
+
core.Input()
|
|
297
|
+
], AccordionPanelComponent.prototype, "validationMessageIcon", void 0);
|
|
298
|
+
__decorate([
|
|
299
|
+
core.Input()
|
|
300
|
+
], AccordionPanelComponent.prototype, "validationMessageIconColor", void 0);
|
|
293
301
|
__decorate([
|
|
294
302
|
core.Output()
|
|
295
303
|
], AccordionPanelComponent.prototype, "panelOpened", void 0);
|
|
@@ -299,7 +307,7 @@
|
|
|
299
307
|
AccordionPanelComponent = __decorate([
|
|
300
308
|
core.Component({
|
|
301
309
|
selector: "s-accordion-panel",
|
|
302
|
-
template: "<div\n class=\"accordion-panel\"\n [ngClass]=\"{\n 'accordion-panel--open': isOpen,\n 'accordion-panel--disabled': disabled\n }\">\n <div class=\"header\" (click)=\"onTabClick()\">\n <div class=\"header__title\">\n <span class=\"icon\" [ngClass]=\"isOpen ? 'fas fa-minus' : 'fas fa-plus'\"></span>\n <span\n *ngIf=\"validationMessage\"\n class=\"exclamation-icon
|
|
310
|
+
template: "<div\n class=\"accordion-panel\"\n [ngClass]=\"{\n 'accordion-panel--open': isOpen,\n 'accordion-panel--disabled': disabled\n }\">\n <div class=\"header\" (click)=\"onTabClick()\">\n <div class=\"header__title\">\n <span class=\"icon\" [ngClass]=\"isOpen ? 'fas fa-minus' : 'fas fa-plus'\"></span>\n <span\n *ngIf=\"validationMessage\"\n class=\"exclamation-icon\"\n [class]=\"validationMessageIcon\"\n [class.exclamation-icon-red]=\"validationMessageIconColor === 'Red'\"\n [class.exclamation-icon-orange]=\"validationMessageIconColor === 'Orange'\"\n [class.exclamation-icon-yellow]=\"validationMessageIconColor === 'Yellow'\"\n [class.exclamation-icon-green]=\"validationMessageIconColor === 'Green'\"\n [class.exclamation-icon-blue]=\"validationMessageIconColor === 'Blue'\"\n [sTooltip]=\"validationMessage\">\n </span>\n <span class=\"title\">{{ header }}</span>\n </div>\n <div class=\"header__controls\">\n <button\n *ngFor=\"let button of buttons\"\n class=\"icon-button\"\n [ngClass]=\"button.icon\"\n (click)=\"onIconButtonsClick($event, button.onClick)\">\n </button>\n <s-switch\n *ngIf=\"switchControl\"\n class=\"switch\"\n [formControl]=\"switchControl\"\n (click)=\"$event.stopPropagation()\">\n </s-switch>\n <s-switch\n *ngIf=\"!switchControl && switch\"\n class=\"switch\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"switch.state\"\n (click)=\"$event.stopPropagation()\"\n (valueChanged)=\"switch.onChange($event)\">\n </s-switch>\n </div>\n </div>\n <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n</div>\n\n<ng-template #cacheTemplate>\n <div\n class=\"content\"\n [@cacheAnimation]=\"isOpen\"\n [@.disabled]=\"isContentAnimationDisabled\"\n (@cacheAnimation.start)=\"onContentAnimationStart()\"\n (@cacheAnimation.done)=\"onContentAnimationDone()\">\n <div class=\"content-container\">\n <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n <div\n *ngIf=\"isOpen\"\n class=\"content\"\n @cachelessAnimation\n [@.disabled]=\"isContentAnimationDisabled\"\n (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n <div class=\"content-container\">\n <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #panelContent>\n <ng-content></ng-content>\n</ng-template>\n",
|
|
303
311
|
animations: [
|
|
304
312
|
animations.trigger("cachelessAnimation", [
|
|
305
313
|
animations.transition(":enter", [animations.style({ height: "0" }), animations.animate("200ms linear", animations.style({ height: "*" }))]),
|
|
@@ -311,7 +319,7 @@
|
|
|
311
319
|
animations.transition("* => *", animations.animate("200ms")),
|
|
312
320
|
]),
|
|
313
321
|
],
|
|
314
|
-
styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{-ms-flex-align:center;align-items:center;background-color:#fff;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.accordion-panel .header .header__title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{
|
|
322
|
+
styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{-ms-flex-align:center;align-items:center;background-color:#fff;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.accordion-panel .header .header__title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon-red{color:#c13018}.accordion-panel .header .header__title .exclamation-icon-orange{color:#f8931f}.accordion-panel .header .header__title .exclamation-icon-yellow{color:#fcbf10}.accordion-panel .header .header__title .exclamation-icon-green{color:#0c9348}.accordion-panel .header .header__title .exclamation-icon-blue{color:#428bca}.accordion-panel .header .header__title .title{font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:700;line-height:150%;text-transform:uppercase}.accordion-panel .header .header__controls{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin-left:16px}.accordion-panel .header .header__controls .icon-button{color:#212533;cursor:pointer;font-size:1rem;margin-left:12px;padding:4px;border:none;background:0 0}.accordion-panel .header .header__controls .switch{padding-left:16px}.accordion-panel .content{background-color:#fff;overflow:hidden}.accordion-panel .content .content-container{margin:20px}.accordion-panel--open .header{background-color:#eeebf2;border-bottom:1px solid #c1c1cc}.accordion-panel--disabled .header{cursor:auto}.accordion-panel--disabled .header .header__title .icon,.accordion-panel--disabled .header .header__title .title{color:#c1c1cc}.accordion-panel--disabled .header .header__controls .icon-button{color:#c1c1cc;cursor:auto}.accordion-panel--disabled .exclamation-icon{opacity:.5}"]
|
|
315
323
|
})
|
|
316
324
|
], AccordionPanelComponent);
|
|
317
325
|
return AccordionPanelComponent;
|