@coreui/angular-pro 4.0.0-alpha.11 → 4.0.0-alpha.12
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/accordion/accordion-item/accordion-item.component.mjs +21 -11
- package/esm2020/lib/accordion/accordion.service.mjs +2 -2
- package/esm2020/lib/collapse/collapse.directive.mjs +5 -2
- package/fesm2015/coreui-angular-pro.mjs +24 -12
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +24 -12
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/accordion/accordion-item/accordion-item.component.d.ts +6 -1
- package/lib/accordion/accordion.service.d.ts +1 -1
- package/lib/collapse/collapse.directive.d.ts +3 -2
- package/package.json +1 -1
|
@@ -192,7 +192,7 @@ class AccordionService {
|
|
|
192
192
|
this.items.splice(index, 1);
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
|
-
|
|
195
|
+
toggleItem(item) {
|
|
196
196
|
item.visible = !item.visible;
|
|
197
197
|
this.closeOtherItems(item);
|
|
198
198
|
}
|
|
@@ -314,7 +314,7 @@ class CollapseDirective {
|
|
|
314
314
|
get hostClasses() {
|
|
315
315
|
return {
|
|
316
316
|
'navbar-collapse': this.navbar,
|
|
317
|
-
show: this.visible
|
|
317
|
+
show: this.visible
|
|
318
318
|
};
|
|
319
319
|
}
|
|
320
320
|
ngOnDestroy() {
|
|
@@ -355,6 +355,9 @@ class CollapseDirective {
|
|
|
355
355
|
this.player.onStart(() => { this.collapseChange.emit(visible ? 'opening' : 'collapsing'); });
|
|
356
356
|
this.player.onDone(() => { this.collapseChange.emit(visible ? 'open' : 'collapsed'); });
|
|
357
357
|
}
|
|
358
|
+
ngAfterViewInit() {
|
|
359
|
+
this.toggle();
|
|
360
|
+
}
|
|
358
361
|
}
|
|
359
362
|
CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
360
363
|
CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.5", type: CollapseDirective, selector: "[cCollapse]", inputs: { animate: "animate", visible: "visible", navbar: "navbar", duration: "duration", transition: "transition" }, outputs: { collapseChange: "collapseChange" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["cCollapse"], usesOnChanges: true, ngImport: i0 });
|
|
@@ -385,19 +388,28 @@ let nextId$1 = 0;
|
|
|
385
388
|
class AccordionItemComponent {
|
|
386
389
|
constructor(accordionService) {
|
|
387
390
|
this.accordionService = accordionService;
|
|
388
|
-
|
|
389
|
-
* Toggle an accordion item programmatically
|
|
390
|
-
* @type boolean
|
|
391
|
-
* @default false
|
|
392
|
-
*/
|
|
393
|
-
this.visible = false;
|
|
391
|
+
this._visible = false;
|
|
394
392
|
this.contentId = `accordion-item-${nextId$1++}`;
|
|
395
393
|
this.itemContext = { $implicit: this.visible };
|
|
396
394
|
this.templates = {};
|
|
397
395
|
}
|
|
396
|
+
/**
|
|
397
|
+
* Toggle an accordion item programmatically
|
|
398
|
+
* @type boolean
|
|
399
|
+
* @default false
|
|
400
|
+
*/
|
|
401
|
+
set visible(value) {
|
|
402
|
+
this._visible = coerceBooleanProperty(value);
|
|
403
|
+
}
|
|
404
|
+
get visible() {
|
|
405
|
+
return this._visible;
|
|
406
|
+
}
|
|
398
407
|
set open(value) {
|
|
399
408
|
console.warn('c-accordion-item "open" prop is deprecated, use "visible" prop instead.');
|
|
400
|
-
this.visible = value
|
|
409
|
+
this.visible = value || this.visible;
|
|
410
|
+
}
|
|
411
|
+
get open() {
|
|
412
|
+
return this.visible;
|
|
401
413
|
}
|
|
402
414
|
get hostClasses() {
|
|
403
415
|
return {
|
|
@@ -411,7 +423,7 @@ class AccordionItemComponent {
|
|
|
411
423
|
this.accordionService.removeItem(this);
|
|
412
424
|
}
|
|
413
425
|
toggleItem() {
|
|
414
|
-
this.accordionService.
|
|
426
|
+
this.accordionService.toggleItem(this);
|
|
415
427
|
}
|
|
416
428
|
ngAfterContentInit() {
|
|
417
429
|
this.contentTemplates.forEach((child) => {
|
|
@@ -420,10 +432,10 @@ class AccordionItemComponent {
|
|
|
420
432
|
}
|
|
421
433
|
}
|
|
422
434
|
AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
423
|
-
AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AccordionItemComponent, selector: "c-accordion-item", inputs: { visible: "visible", open: "open" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates
|
|
435
|
+
AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AccordionItemComponent, selector: "c-accordion-item", inputs: { visible: "visible", open: "open" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cAccordionItem"], ngImport: i0, template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #defaultAccordionHeaderTemplate>\r\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionHeaderContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyTemplate>\r\n <div class=\"accordion-body\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:block;overflow:hidden}\n"], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "visible", "navbar", "duration", "transition"], outputs: ["collapseChange"], exportAs: ["cCollapse"] }, { type: AccordionButtonDirective, selector: "[cAccordionButton]", inputs: ["collapsed", "type"] }] });
|
|
424
436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
425
437
|
type: Component,
|
|
426
|
-
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates
|
|
438
|
+
args: [{ selector: 'c-accordion-item', exportAs: 'cAccordionItem', template: "<ng-container>\r\n <div class=\"accordion-header\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n <div class=\"accordion-collapse\" cCollapse [visible]=\"visible\" [attr.aria-expanded]=\"visible\" [id]=\"contentId\">\r\n <ng-container *ngTemplateOutlet=\"templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #defaultAccordionHeaderTemplate>\r\n <button cAccordionButton [collapsed]=\"!visible\" [attr.aria-controls]=\"contentId\" (click)=\"toggleItem()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionHeader'] || defaultAccordionHeaderContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionHeaderContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyTemplate>\r\n <div class=\"accordion-body\">\r\n <ng-container\r\n *ngTemplateOutlet=\"templates['accordionBody'] || defaultAccordionBodyContentTemplate; context: itemContext\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultAccordionBodyContentTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:block;overflow:hidden}\n"] }]
|
|
427
439
|
}], ctorParameters: function () { return [{ type: AccordionService }]; }, propDecorators: { visible: [{
|
|
428
440
|
type: Input
|
|
429
441
|
}], open: [{
|