@flywheel-io/vision 1.7.0 → 1.7.1
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/components/layouts/panel/panel.component.d.ts +3 -1
- package/components/layouts/sidebar/sidebar.component.d.ts +1 -1
- package/esm2020/components/avatar/avatar.component.mjs +2 -2
- package/esm2020/components/layouts/panel/panel.component.mjs +9 -3
- package/esm2020/components/layouts/sidebar/sidebar.component.mjs +4 -4
- package/fesm2015/flywheel-io-vision.mjs +13 -7
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +13 -7
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,8 @@ export declare class FwLayoutPanelComponent {
|
|
|
4
4
|
fitted?: boolean;
|
|
5
5
|
border?: 'all' | 'left' | 'right' | 'none';
|
|
6
6
|
rounded?: boolean;
|
|
7
|
+
margin?: boolean;
|
|
8
|
+
padded?: boolean;
|
|
7
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutPanelComponent, never>;
|
|
8
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutPanelComponent, "fw-layout-panel", never, { "height": "height"; "fitted": "fitted"; "border": "border"; "rounded": "rounded"; }, {}, never, ["header", "*", "footer"], false>;
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutPanelComponent, "fw-layout-panel", never, { "height": "height"; "fitted": "fitted"; "border": "border"; "rounded": "rounded"; "margin": "margin"; "padded": "padded"; }, {}, never, ["header", "*", "footer"], false>;
|
|
9
11
|
}
|
|
@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
export declare class FwLayoutSidebarComponent {
|
|
3
3
|
outlined: boolean;
|
|
4
4
|
rounded: boolean;
|
|
5
|
-
width?:
|
|
5
|
+
width?: string;
|
|
6
6
|
direction?: 'row' | 'row-reverse';
|
|
7
7
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutSidebarComponent, never>;
|
|
8
8
|
static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutSidebarComponent, "fw-layout-sidebar", never, { "outlined": "outlined"; "rounded": "rounded"; "width": "width"; "direction": "direction"; }, {}, never, ["*", "aside"], false>;
|
|
@@ -26,10 +26,10 @@ export class FwAvatarComponent {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
FwAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:
|
|
29
|
+
FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:
|
|
32
|
+
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"] }]
|
|
33
33
|
}], propDecorators: { classes: [{
|
|
34
34
|
type: HostBinding,
|
|
35
35
|
args: ['attr.class']
|
|
@@ -7,13 +7,15 @@ export class FwLayoutPanelComponent {
|
|
|
7
7
|
this.fitted = false;
|
|
8
8
|
this.border = 'none';
|
|
9
9
|
this.rounded = true;
|
|
10
|
+
this.margin = false;
|
|
11
|
+
this.padded = true;
|
|
10
12
|
}
|
|
11
13
|
}
|
|
12
14
|
FwLayoutPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
FwLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutPanelComponent, selector: "fw-layout-panel", inputs: { height: "height", fitted: "fitted", border: "border", rounded: "rounded" }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted?'fitted':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article>\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{display:flex;flex-direction:column;
|
|
15
|
+
FwLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutPanelComponent, selector: "fw-layout-panel", inputs: { height: "height", fitted: "fitted", border: "border", rounded: "rounded", margin: "margin", padded: "padded" }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted?'fitted':'', margin?'margin':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded?'padded':'']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:8px 16px;height:52px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header :first-child{flex:1;margin:0;overflow:hidden}main article{overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+ footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
14
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutPanelComponent, decorators: [{
|
|
15
17
|
type: Component,
|
|
16
|
-
args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, template: "<main\n [ngClass]=\"[fitted?'fitted':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article>\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{display:flex;flex-direction:column;
|
|
18
|
+
args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, template: "<main\n [ngClass]=\"[fitted?'fitted':'', margin?'margin':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded?'padded':'']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:8px 16px;height:52px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header :first-child{flex:1;margin:0;overflow:hidden}main article{overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+ footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"] }]
|
|
17
19
|
}], propDecorators: { height: [{
|
|
18
20
|
type: Input
|
|
19
21
|
}], fitted: [{
|
|
@@ -22,5 +24,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
22
24
|
type: Input
|
|
23
25
|
}], rounded: [{
|
|
24
26
|
type: Input
|
|
27
|
+
}], margin: [{
|
|
28
|
+
type: Input
|
|
29
|
+
}], padded: [{
|
|
30
|
+
type: Input
|
|
25
31
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbGF5b3V0cy9wYW5lbC9wYW5lbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9sYXlvdXRzL3BhbmVsL3BhbmVsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFRcEUsTUFBTSxPQUFPLHNCQUFzQjtJQU5uQztRQU9XLFdBQU0sR0FBWSxNQUFNLENBQUM7UUFDekIsV0FBTSxHQUFhLEtBQUssQ0FBQztRQUN6QixXQUFNLEdBQXVDLE1BQU0sQ0FBQztRQUNwRCxZQUFPLEdBQWEsSUFBSSxDQUFDO1FBQ3pCLFdBQU0sR0FBYSxLQUFLLENBQUM7UUFDekIsV0FBTSxHQUFhLElBQUksQ0FBQztLQUNsQzs7bUhBUFksc0JBQXNCO3VHQUF0QixzQkFBc0IsaUxDUm5DLGtWQVNBOzJGRERhLHNCQUFzQjtrQkFObEMsU0FBUzsrQkFDRSxpQkFBaUIsaUJBR1osaUJBQWlCLENBQUMsSUFBSTs4QkFHNUIsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmdy1sYXlvdXQtcGFuZWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFuZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYW5lbC5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBGd0xheW91dFBhbmVsQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaGVpZ2h0Pzogc3RyaW5nID0gJzEwMCUnO1xuICBASW5wdXQoKSBmaXR0ZWQ/OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGJvcmRlcj86ICdhbGwnIHwgJ2xlZnQnIHwgJ3JpZ2h0JyB8ICdub25lJyA9ICdub25lJztcbiAgQElucHV0KCkgcm91bmRlZD86IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBtYXJnaW4/OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHBhZGRlZD86IGJvb2xlYW4gPSB0cnVlO1xufVxuIiwiPG1haW5cbiAgW25nQ2xhc3NdPVwiW2ZpdHRlZD8nZml0dGVkJzonJywgbWFyZ2luPydtYXJnaW4nOicnLCByb3VuZGVkPydyb3VuZGVkJzonJywgJ2JvcmRlci0nK2JvcmRlcl1cIlxuICBbbmdTdHlsZV09XCJ7aGVpZ2h0OiBoZWlnaHR9XCI+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImhlYWRlclwiPjwvbmctY29udGVudD5cbiAgPGFydGljbGUgW25nQ2xhc3NdPVwiW3BhZGRlZD8ncGFkZGVkJzonJ11cIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvYXJ0aWNsZT5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZm9vdGVyXCI+PC9uZy1jb250ZW50PlxuPC9tYWluPlxuIl19
|
|
@@ -5,15 +5,15 @@ export class FwLayoutSidebarComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.outlined = true;
|
|
7
7
|
this.rounded = true;
|
|
8
|
-
this.width = '
|
|
8
|
+
this.width = '65%';
|
|
9
9
|
this.direction = 'row';
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
FwLayoutSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
FwLayoutSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutSidebarComponent, selector: "fw-layout-sidebar", inputs: { outlined: "outlined", rounded: "rounded", width: "width", direction: "direction" }, ngImport: i0, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n
|
|
13
|
+
FwLayoutSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutSidebarComponent, selector: "fw-layout-sidebar", inputs: { outlined: "outlined", rounded: "rounded", width: "width", direction: "direction" }, ngImport: i0, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n direction,\n 'container'\n ]\">\n <div class=\"main\" [ngStyle]=\"{width: 'calc( 100% - '+width+' )'}\">\n <ng-content></ng-content>\n </div>\n <div class=\"aside\" [ngStyle]=\"{width: width}\">\n <ng-content select=\"aside\"></ng-content>\n </div>\n</div>\n", styles: [".container{display:flex;width:100%;overflow:hidden;height:100%;flex-flow:row nowrap}.container .aside{display:flex;overflow:auto}.container .aside aside{flex:1}.container .main{overflow:auto}.container.outlined{border:1px var(--separations-divider) solid}.container.outlined .main{border-right:1px var(--separations-divider) solid}.container.row-reverse{flex-direction:row-reverse}.container.row-reverse.outlined .main{border-right:0;border-left:1px var(--separations-divider) solid}.container.rounded{border-radius:10px}.container.third .main{width:66.6%}.container.third .aside{width:33.3%}.container.half .main,.container.half .aside{width:50%}.container.fourth .main{width:75%}.container.fourth .aside{width:25%}.container.closed .main{width:100%;border-right:none}.container.closed .aside{width:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutSidebarComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
args: [{ selector: 'fw-layout-sidebar', encapsulation: ViewEncapsulation.None, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n
|
|
16
|
+
args: [{ selector: 'fw-layout-sidebar', encapsulation: ViewEncapsulation.None, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n direction,\n 'container'\n ]\">\n <div class=\"main\" [ngStyle]=\"{width: 'calc( 100% - '+width+' )'}\">\n <ng-content></ng-content>\n </div>\n <div class=\"aside\" [ngStyle]=\"{width: width}\">\n <ng-content select=\"aside\"></ng-content>\n </div>\n</div>\n", styles: [".container{display:flex;width:100%;overflow:hidden;height:100%;flex-flow:row nowrap}.container .aside{display:flex;overflow:auto}.container .aside aside{flex:1}.container .main{overflow:auto}.container.outlined{border:1px var(--separations-divider) solid}.container.outlined .main{border-right:1px var(--separations-divider) solid}.container.row-reverse{flex-direction:row-reverse}.container.row-reverse.outlined .main{border-right:0;border-left:1px var(--separations-divider) solid}.container.rounded{border-radius:10px}.container.third .main{width:66.6%}.container.third .aside{width:33.3%}.container.half .main,.container.half .aside{width:50%}.container.fourth .main{width:75%}.container.fourth .aside{width:25%}.container.closed .main{width:100%;border-right:none}.container.closed .aside{width:0;padding:0}\n"] }]
|
|
17
17
|
}], propDecorators: { outlined: [{
|
|
18
18
|
type: Input
|
|
19
19
|
}], rounded: [{
|
|
@@ -23,4 +23,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
23
23
|
}], direction: [{
|
|
24
24
|
type: Input
|
|
25
25
|
}] } });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
26
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9sYXlvdXRzL3NpZGViYXIvc2lkZWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9sYXlvdXRzL3NpZGViYXIvc2lkZWJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUXBFLE1BQU0sT0FBTyx3QkFBd0I7SUFOckM7UUFPVyxhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3pCLFlBQU8sR0FBWSxJQUFJLENBQUM7UUFDeEIsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUN2QixjQUFTLEdBQTJCLEtBQUssQ0FBQztLQUNwRDs7cUhBTFksd0JBQXdCO3lHQUF4Qix3QkFBd0IsdUpDUnJDLDJYQWNBOzJGRE5hLHdCQUF3QjtrQkFOcEMsU0FBUzsrQkFDRSxtQkFBbUIsaUJBR2QsaUJBQWlCLENBQUMsSUFBSTs4QkFHNUIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmdy1sYXlvdXQtc2lkZWJhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zaWRlYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2lkZWJhci5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBGd0xheW91dFNpZGViYXJDb21wb25lbnQge1xuICBASW5wdXQoKSBvdXRsaW5lZDogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIHJvdW5kZWQ6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSB3aWR0aD86IHN0cmluZyA9ICc2NSUnO1xuICBASW5wdXQoKSBkaXJlY3Rpb24/OiAncm93JyB8ICdyb3ctcmV2ZXJzZScgPSAncm93Jztcbn1cbiIsIjxkaXZcbiAgW25nQ2xhc3NdPVwiW1xuICAgICAgICBvdXRsaW5lZD8nb3V0bGluZWQnOicnLFxuICAgICAgICByb3VuZGVkPydyb3VuZGVkJzonJyxcbiAgICAgICAgZGlyZWN0aW9uLFxuICAgICAgICAnY29udGFpbmVyJ1xuICAgICAgICBdXCI+XG4gIDxkaXYgY2xhc3M9XCJtYWluXCIgW25nU3R5bGVdPVwie3dpZHRoOiAnY2FsYyggMTAwJSAtICcrd2lkdGgrJyApJ31cIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiYXNpZGVcIiBbbmdTdHlsZV09XCJ7d2lkdGg6IHdpZHRofVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImFzaWRlXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -324,10 +324,10 @@ class FwAvatarComponent {
|
|
|
324
324
|
}
|
|
325
325
|
}
|
|
326
326
|
FwAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
327
|
-
FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:
|
|
327
|
+
FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
|
|
328
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
329
329
|
type: Component,
|
|
330
|
-
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:
|
|
330
|
+
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"] }]
|
|
331
331
|
}], propDecorators: { classes: [{
|
|
332
332
|
type: HostBinding,
|
|
333
333
|
args: ['attr.class']
|
|
@@ -2724,13 +2724,15 @@ class FwLayoutPanelComponent {
|
|
|
2724
2724
|
this.fitted = false;
|
|
2725
2725
|
this.border = 'none';
|
|
2726
2726
|
this.rounded = true;
|
|
2727
|
+
this.margin = false;
|
|
2728
|
+
this.padded = true;
|
|
2727
2729
|
}
|
|
2728
2730
|
}
|
|
2729
2731
|
FwLayoutPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2730
|
-
FwLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutPanelComponent, selector: "fw-layout-panel", inputs: { height: "height", fitted: "fitted", border: "border", rounded: "rounded" }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted?'fitted':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article>\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{display:flex;flex-direction:column;
|
|
2732
|
+
FwLayoutPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutPanelComponent, selector: "fw-layout-panel", inputs: { height: "height", fitted: "fitted", border: "border", rounded: "rounded", margin: "margin", padded: "padded" }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted?'fitted':'', margin?'margin':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded?'padded':'']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:8px 16px;height:52px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header :first-child{flex:1;margin:0;overflow:hidden}main article{overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+ footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2731
2733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutPanelComponent, decorators: [{
|
|
2732
2734
|
type: Component,
|
|
2733
|
-
args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, template: "<main\n [ngClass]=\"[fitted?'fitted':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article>\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{display:flex;flex-direction:column;
|
|
2735
|
+
args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, template: "<main\n [ngClass]=\"[fitted?'fitted':'', margin?'margin':'', rounded?'rounded':'', 'border-'+border]\"\n [ngStyle]=\"{height: height}\">\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded?'padded':'']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:8px 16px;height:52px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header :first-child{flex:1;margin:0;overflow:hidden}main article{overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+ footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"] }]
|
|
2734
2736
|
}], propDecorators: { height: [{
|
|
2735
2737
|
type: Input
|
|
2736
2738
|
}], fitted: [{
|
|
@@ -2739,21 +2741,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2739
2741
|
type: Input
|
|
2740
2742
|
}], rounded: [{
|
|
2741
2743
|
type: Input
|
|
2744
|
+
}], margin: [{
|
|
2745
|
+
type: Input
|
|
2746
|
+
}], padded: [{
|
|
2747
|
+
type: Input
|
|
2742
2748
|
}] } });
|
|
2743
2749
|
|
|
2744
2750
|
class FwLayoutSidebarComponent {
|
|
2745
2751
|
constructor() {
|
|
2746
2752
|
this.outlined = true;
|
|
2747
2753
|
this.rounded = true;
|
|
2748
|
-
this.width = '
|
|
2754
|
+
this.width = '65%';
|
|
2749
2755
|
this.direction = 'row';
|
|
2750
2756
|
}
|
|
2751
2757
|
}
|
|
2752
2758
|
FwLayoutSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2753
|
-
FwLayoutSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutSidebarComponent, selector: "fw-layout-sidebar", inputs: { outlined: "outlined", rounded: "rounded", width: "width", direction: "direction" }, ngImport: i0, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n
|
|
2759
|
+
FwLayoutSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutSidebarComponent, selector: "fw-layout-sidebar", inputs: { outlined: "outlined", rounded: "rounded", width: "width", direction: "direction" }, ngImport: i0, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n direction,\n 'container'\n ]\">\n <div class=\"main\" [ngStyle]=\"{width: 'calc( 100% - '+width+' )'}\">\n <ng-content></ng-content>\n </div>\n <div class=\"aside\" [ngStyle]=\"{width: width}\">\n <ng-content select=\"aside\"></ng-content>\n </div>\n</div>\n", styles: [".container{display:flex;width:100%;overflow:hidden;height:100%;flex-flow:row nowrap}.container .aside{display:flex;overflow:auto}.container .aside aside{flex:1}.container .main{overflow:auto}.container.outlined{border:1px var(--separations-divider) solid}.container.outlined .main{border-right:1px var(--separations-divider) solid}.container.row-reverse{flex-direction:row-reverse}.container.row-reverse.outlined .main{border-right:0;border-left:1px var(--separations-divider) solid}.container.rounded{border-radius:10px}.container.third .main{width:66.6%}.container.third .aside{width:33.3%}.container.half .main,.container.half .aside{width:50%}.container.fourth .main{width:75%}.container.fourth .aside{width:25%}.container.closed .main{width:100%;border-right:none}.container.closed .aside{width:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2754
2760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutSidebarComponent, decorators: [{
|
|
2755
2761
|
type: Component,
|
|
2756
|
-
args: [{ selector: 'fw-layout-sidebar', encapsulation: ViewEncapsulation.None, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n
|
|
2762
|
+
args: [{ selector: 'fw-layout-sidebar', encapsulation: ViewEncapsulation.None, template: "<div\n [ngClass]=\"[\n outlined?'outlined':'',\n rounded?'rounded':'',\n direction,\n 'container'\n ]\">\n <div class=\"main\" [ngStyle]=\"{width: 'calc( 100% - '+width+' )'}\">\n <ng-content></ng-content>\n </div>\n <div class=\"aside\" [ngStyle]=\"{width: width}\">\n <ng-content select=\"aside\"></ng-content>\n </div>\n</div>\n", styles: [".container{display:flex;width:100%;overflow:hidden;height:100%;flex-flow:row nowrap}.container .aside{display:flex;overflow:auto}.container .aside aside{flex:1}.container .main{overflow:auto}.container.outlined{border:1px var(--separations-divider) solid}.container.outlined .main{border-right:1px var(--separations-divider) solid}.container.row-reverse{flex-direction:row-reverse}.container.row-reverse.outlined .main{border-right:0;border-left:1px var(--separations-divider) solid}.container.rounded{border-radius:10px}.container.third .main{width:66.6%}.container.third .aside{width:33.3%}.container.half .main,.container.half .aside{width:50%}.container.fourth .main{width:75%}.container.fourth .aside{width:25%}.container.closed .main{width:100%;border-right:none}.container.closed .aside{width:0;padding:0}\n"] }]
|
|
2757
2763
|
}], propDecorators: { outlined: [{
|
|
2758
2764
|
type: Input
|
|
2759
2765
|
}], rounded: [{
|