@@ -9,10 +9,10 @@ import { CdkAccordionModule } from '@angular/cdk/accordion';
9
9
class CdkAccordionOverviewExample {
10
10
items = [ 'Item 1' , 'Item 2' , 'Item 3' , 'Item 4' , 'Item 5' ] ;
11
11
expandedIndex = 0 ;
12
- static ɵfac = i0 . ɵɵngDeclareFactory ( { minVersion : "12.0.0" , version : "20.2 .0-rc.1 " , ngImport : i0 , type : CdkAccordionOverviewExample , deps : [ ] , target : i0 . ɵɵFactoryTarget . Component } ) ;
13
- static ɵcmp = i0 . ɵɵngDeclareComponent ( { minVersion : "17.0.0" , version : "20.2.0-rc.1" , type : CdkAccordionOverviewExample , isStandalone : true , selector : "cdk-accordion-overview-example" , ngImport : i0 , template : "<cdk-accordion class=\"example-accordion\">\n @for (item of items; track item; let index = $index) {\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" class=\"example-accordion-item\">\n <button\n class=\"example-accordion-item-header\"\n (click)=\"accordionItem.toggle()\"\n tabindex=\"0\"\n [attr.id]=\"'accordion-header-' + index\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [attr.aria-controls]=\"'accordion-body-' + index\">\n {{ item }}\n <span class=\"example-accordion-item-description\">\n Click to {{ accordionItem.expanded ? 'close' : 'open' }}\n </span>\n </button>\n @if(accordionItem.expanded) {\n <div\n class=\"example-accordion-item-body\"\n role=\"region\"\n [style.display]=\"accordionItem.expanded ? '' : 'none'\"\n [attr.id]=\"'accordion-body-' + index\"\n [attr.aria-labelledby]=\"'accordion-header-' + index\"\n >\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n }\n </cdk-accordion-item>\n }\n</cdk-accordion>\n" , styles : [ ".example-accordion {\n display: block;\n max-width: 500px;\n}\n\n.example-accordion-item {\n display: block;\n border: solid 1px #ccc;\n}\n\n.example-accordion-item + .example-accordion-item {\n border-top: none;\n}\n\n.example-accordion-item-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n background: none;\n border: none;\n padding: 16px;\n text-align: left;\n\n}\n\n.example-accordion-item-description {\n font-size: 0.85em;\n color: #999;\n}\n\n.example-accordion-item-body {\n padding: 16px;\n}\n\n.example-accordion-item-header:hover {\n cursor: pointer;\n background-color: #eee;\n}\n\n.example-accordion-item:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n\n.example-accordion-item:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n" ] , dependencies : [ { kind : "ngmodule" , type : CdkAccordionModule } , { kind : "directive" , type : i1 . CdkAccordion , selector : "cdk-accordion, [cdkAccordion]" , inputs : [ "multi" ] , exportAs : [ "cdkAccordion" ] } , { kind : "directive" , type : i1 . CdkAccordionItem , selector : "cdk-accordion-item, [cdkAccordionItem]" , inputs : [ "expanded" , "disabled" ] , outputs : [ "closed" , "opened" , "destroyed" , "expandedChange" ] , exportAs : [ "cdkAccordionItem" ] } ] } ) ;
12
+ static ɵfac = i0 . ɵɵngDeclareFactory ( { minVersion : "12.0.0" , version : "21.0 .0-next.0 " , ngImport : i0 , type : CdkAccordionOverviewExample , deps : [ ] , target : i0 . ɵɵFactoryTarget . Component } ) ;
13
+ static ɵcmp = i0 . ɵɵngDeclareComponent ( { minVersion : "17.0.0" , version : "21.0.0-next.0" , type : CdkAccordionOverviewExample , isStandalone : true , selector : "cdk-accordion-overview-example" , ngImport : i0 , template : "<cdk-accordion class=\"example-accordion\">\n @for (item of items; track item; let index = $index) {\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" class=\"example-accordion-item\">\n <button\n class=\"example-accordion-item-header\"\n (click)=\"accordionItem.toggle()\"\n tabindex=\"0\"\n [attr.id]=\"'accordion-header-' + index\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [attr.aria-controls]=\"'accordion-body-' + index\">\n {{ item }}\n <span class=\"example-accordion-item-description\">\n Click to {{ accordionItem.expanded ? 'close' : 'open' }}\n </span>\n </button>\n @if(accordionItem.expanded) {\n <div\n class=\"example-accordion-item-body\"\n role=\"region\"\n [style.display]=\"accordionItem.expanded ? '' : 'none'\"\n [attr.id]=\"'accordion-body-' + index\"\n [attr.aria-labelledby]=\"'accordion-header-' + index\"\n >\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n }\n </cdk-accordion-item>\n }\n</cdk-accordion>\n" , styles : [ ".example-accordion {\n display: block;\n max-width: 500px;\n}\n\n.example-accordion-item {\n display: block;\n border: solid 1px #ccc;\n}\n\n.example-accordion-item + .example-accordion-item {\n border-top: none;\n}\n\n.example-accordion-item-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n background: none;\n border: none;\n padding: 16px;\n text-align: left;\n\n}\n\n.example-accordion-item-description {\n font-size: 0.85em;\n color: #999;\n}\n\n.example-accordion-item-body {\n padding: 16px;\n}\n\n.example-accordion-item-header:hover {\n cursor: pointer;\n background-color: #eee;\n}\n\n.example-accordion-item:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n\n.example-accordion-item:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n" ] , dependencies : [ { kind : "ngmodule" , type : CdkAccordionModule } , { kind : "directive" , type : i1 . CdkAccordion , selector : "cdk-accordion, [cdkAccordion]" , inputs : [ "multi" ] , exportAs : [ "cdkAccordion" ] } , { kind : "directive" , type : i1 . CdkAccordionItem , selector : "cdk-accordion-item, [cdkAccordionItem]" , inputs : [ "expanded" , "disabled" ] , outputs : [ "closed" , "opened" , "destroyed" , "expandedChange" ] , exportAs : [ "cdkAccordionItem" ] } ] } ) ;
14
14
}
15
- i0 . ɵɵngDeclareClassMetadata ( { minVersion : "12.0.0" , version : "20.2 .0-rc.1 " , ngImport : i0 , type : CdkAccordionOverviewExample , decorators : [ {
15
+ i0 . ɵɵngDeclareClassMetadata ( { minVersion : "12.0.0" , version : "21.0 .0-next.0 " , ngImport : i0 , type : CdkAccordionOverviewExample , decorators : [ {
16
16
type : Component ,
17
17
args : [ { selector : 'cdk-accordion-overview-example' , imports : [ CdkAccordionModule ] , template : "<cdk-accordion class=\"example-accordion\">\n @for (item of items; track item; let index = $index) {\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" class=\"example-accordion-item\">\n <button\n class=\"example-accordion-item-header\"\n (click)=\"accordionItem.toggle()\"\n tabindex=\"0\"\n [attr.id]=\"'accordion-header-' + index\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [attr.aria-controls]=\"'accordion-body-' + index\">\n {{ item }}\n <span class=\"example-accordion-item-description\">\n Click to {{ accordionItem.expanded ? 'close' : 'open' }}\n </span>\n </button>\n @if(accordionItem.expanded) {\n <div\n class=\"example-accordion-item-body\"\n role=\"region\"\n [style.display]=\"accordionItem.expanded ? '' : 'none'\"\n [attr.id]=\"'accordion-body-' + index\"\n [attr.aria-labelledby]=\"'accordion-header-' + index\"\n >\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n }\n </cdk-accordion-item>\n }\n</cdk-accordion>\n" , styles : [ ".example-accordion {\n display: block;\n max-width: 500px;\n}\n\n.example-accordion-item {\n display: block;\n border: solid 1px #ccc;\n}\n\n.example-accordion-item + .example-accordion-item {\n border-top: none;\n}\n\n.example-accordion-item-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n background: none;\n border: none;\n padding: 16px;\n text-align: left;\n\n}\n\n.example-accordion-item-description {\n font-size: 0.85em;\n color: #999;\n}\n\n.example-accordion-item-body {\n padding: 16px;\n}\n\n.example-accordion-item-header:hover {\n cursor: pointer;\n background-color: #eee;\n}\n\n.example-accordion-item:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n\n.example-accordion-item:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n" ] } ]
18
18
} ] } ) ;
0 commit comments