@cauca-911/material 21.1.3 → 21.1.4
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.
|
@@ -3376,13 +3376,13 @@ class ExpandablePanelComponent {
|
|
|
3376
3376
|
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
3377
3377
|
this.caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : []));
|
|
3378
3378
|
this.subCaption = input('', ...(ngDevMode ? [{ debugName: "subCaption" }] : []));
|
|
3379
|
-
this.
|
|
3379
|
+
this.contentPosition = input('right', ...(ngDevMode ? [{ debugName: "contentPosition" }] : []));
|
|
3380
3380
|
}
|
|
3381
3381
|
changeState() {
|
|
3382
3382
|
this.isCollapsed.update(value => !value);
|
|
3383
3383
|
}
|
|
3384
3384
|
static { this.ɵfac = function ExpandablePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ExpandablePanelComponent)(); }; }
|
|
3385
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExpandablePanelComponent, selectors: [["cauca-expandable-panel"]], inputs: { isCollapsed: [1, "isCollapsed"], caption: [1, "caption"], subCaption: [1, "subCaption"],
|
|
3385
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExpandablePanelComponent, selectors: [["cauca-expandable-panel"]], inputs: { isCollapsed: [1, "isCollapsed"], caption: [1, "caption"], subCaption: [1, "subCaption"], contentPosition: [1, "contentPosition"] }, outputs: { isCollapsed: "isCollapsedChange" }, ngContentSelectors: _c0$2, decls: 12, vars: 8, consts: [[1, "expansion-button", 3, "click"], [1, "expansion-button-text"], [1, "primary"], [1, "body2"], [1, "expansion-panel"], [1, "expansion-panel-content"]], template: function ExpandablePanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
3386
3386
|
i0.ɵɵprojectionDef();
|
|
3387
3387
|
i0.ɵɵelementStart(0, "section")(1, "div", 0);
|
|
3388
3388
|
i0.ɵɵlistener("click", function ExpandablePanelComponent_Template_div_click_1_listener() { return ctx.changeState(); });
|
|
@@ -3399,7 +3399,7 @@ class ExpandablePanelComponent {
|
|
|
3399
3399
|
i0.ɵɵprojection(11);
|
|
3400
3400
|
i0.ɵɵelementEnd()()();
|
|
3401
3401
|
} if (rf & 2) {
|
|
3402
|
-
i0.ɵɵclassProp("content-under", ctx.
|
|
3402
|
+
i0.ɵɵclassProp("content-under", ctx.contentPosition() === "underCaption");
|
|
3403
3403
|
i0.ɵɵadvance(2);
|
|
3404
3404
|
i0.ɵɵclassProp("collapsed", ctx.isCollapsed());
|
|
3405
3405
|
i0.ɵɵadvance(4);
|
|
@@ -3412,8 +3412,8 @@ class ExpandablePanelComponent {
|
|
|
3412
3412
|
}
|
|
3413
3413
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExpandablePanelComponent, [{
|
|
3414
3414
|
type: Component,
|
|
3415
|
-
args: [{ selector: 'cauca-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<section [class.content-under]=\"
|
|
3416
|
-
}], null, { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], subCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "subCaption", required: false }] }],
|
|
3415
|
+
args: [{ selector: 'cauca-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<section [class.content-under]=\"contentPosition() === 'underCaption'\">\r\n <div class=\"expansion-button\" (click)=\"changeState()\">\r\n <mat-icon [class.collapsed]=\"isCollapsed()\">expand_less</mat-icon>\r\n <div class=\"expansion-button-text\">\r\n <div class=\"primary\">{{caption()}}</div>\r\n <div class=\"body2\">{{subCaption()}}</div>\r\n </div>\r\n </div>\r\n <div class=\"expansion-panel\" [class.collapsed]=\"isCollapsed()\">\r\n <div class=\"expansion-panel-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</section>", styles: [":host{display:block}section{display:flex;padding:16px 0}.primary{font-weight:600}.expansion-button{display:flex;align-items:flex-start;gap:4px;width:240px;padding:0 16px 8px 0;cursor:pointer;height:fit-content}.expansion-button mat-icon{flex:0 0 auto;transition:transform .5s ease-in-out}.expansion-button mat-icon.collapsed{transform:rotate(180deg)}.expansion-button-text{min-width:0;flex:1 1 auto;width:100%}.primary,.body2{display:block;width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.expansion-panel{overflow:hidden;flex:1;display:grid;grid-template-rows:1fr;min-height:0;transition:grid-template-rows .5s ease-in,opacity .5s ease-in,visibility .5s ease-in}.expansion-panel.collapsed{grid-template-rows:0fr;opacity:0;visibility:hidden}.expansion-panel-content{min-height:0}.content-under{flex-direction:column}.content-under .expansion-button{width:100%;padding-right:0}.content-under .expansion-panel{width:100%;flex:0 1 auto}@media(max-width:768px){section{flex-direction:column}.expansion-button{width:100%;padding-right:0}.expansion-panel{width:100%;flex:0 1 auto}}\n"] }]
|
|
3416
|
+
}], null, { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], subCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "subCaption", required: false }] }], contentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPosition", required: false }] }] }); })();
|
|
3417
3417
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExpandablePanelComponent, { className: "ExpandablePanelComponent", filePath: "lib/components/layout/expandable-panel/expandable-panel.component.ts", lineNumber: 11 }); })();
|
|
3418
3418
|
|
|
3419
3419
|
class MenuExpandablePanelItemComponent {
|