@elderbyte/ngx-starter 22.1.0 → 22.1.2
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/fesm2022/elderbyte-ngx-starter.mjs +2 -2
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/dashboard/dashboard-tile/dashboard-tile.component.scss +1 -2
- package/theming/abstracts/_elder-design-tokens.scss +10 -16
- package/theming/abstracts/_elder-starter-theme.scss +0 -2
- package/theming/components/_elder-dashboard-tile-theme.scss +0 -9
|
@@ -38859,13 +38859,13 @@ class ElderDashboardTileComponent {
|
|
|
38859
38859
|
...(ngDevMode ? [{ debugName: "foregroundColor" }] : /* istanbul ignore next */ []));
|
|
38860
38860
|
}
|
|
38861
38861
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ElderDashboardTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38862
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ElderDashboardTileComponent, isStandalone: true, selector: "elder-dashboard-tile", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, typographySize: { classPropertyName: "typographySize", publicName: "typographySize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "`size--${typographySize()}`" } }, ngImport: i0, template: "<div\n class=\"outer layout-col flex-auto\"\n [class.has-description]=\"description()\"\n [class.has-hover-animation]=\"animated()\"\n [style.color]=\"foregroundColor()\"\n>\n @if (description()) {\n <div class=\"description\" [style.color]=\"backgroundColor()\">{{ description() }}</div>\n }\n <div\n class=\"inner flex-auto p-lg\"\n [style.color]=\"foregroundColor()\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div [class.layout-row]=\"icon()\" [class.gap-
|
|
38862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ElderDashboardTileComponent, isStandalone: true, selector: "elder-dashboard-tile", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, typographySize: { classPropertyName: "typographySize", publicName: "typographySize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "`size--${typographySize()}`" } }, ngImport: i0, template: "<div\n class=\"outer layout-col flex-auto\"\n [class.has-description]=\"description()\"\n [class.has-hover-animation]=\"animated()\"\n [style.color]=\"foregroundColor()\"\n>\n @if (description()) {\n <div class=\"description p-sm pt-xs\" [style.color]=\"backgroundColor()\">{{ description() }}</div>\n }\n <div\n class=\"inner flex-auto p-lg\"\n [style.color]=\"foregroundColor()\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div [class.layout-row]=\"icon()\" [class.gap-lg]=\"icon()\">\n @if (icon()) {\n <div class=\"layout-col place-center-center\">\n <mat-icon class=\"main-icon\">{{ icon() }}</mat-icon>\n </div>\n }\n <div class=\"layout-col\">\n @if (title()) {\n <h3 class=\"m-0\">{{ title() }}</h3>\n }\n <div class=\"value mt-xs bold\"><ng-content></ng-content></div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:max-content}:host.size--small{--tile-font-size: var(--md-sys-typescale-title-large-size);--tile-icon-size: 30px}:host.size--medium{--tile-font-size: var(--md-sys-typescale-headline-medium-size);--tile-icon-size: 40px}:host.size--large{--tile-font-size: var(--md-sys-typescale-headline-large-size);--tile-icon-size: 50px}.outer.has-description{padding:var(--elder-size-xs);border-radius:calc(var(--elder-pane-border-radius) + var(--elder-size-xs));background-color:currentColor}.outer.has-hover-animation{transition:transform .2s ease}.outer.has-hover-animation:hover{transform:translateY(-3px)}.outer .description{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking);line-height:1;opacity:.9}.inner{border-radius:var(--elder-pane-border-radius)}.inner h3{opacity:.65;font-size:var(--md-sys-typescale-body-large-size)}.inner .value{text-wrap:nowrap}.value{font-size:var(--tile-font-size)}.main-icon{width:var(--tile-icon-size);height:var(--tile-icon-size);font-size:var(--tile-icon-size)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
38863
38863
|
}
|
|
38864
38864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ElderDashboardTileComponent, decorators: [{
|
|
38865
38865
|
type: Component,
|
|
38866
38866
|
args: [{ selector: 'elder-dashboard-tile', imports: [MatIcon], host: {
|
|
38867
38867
|
'[class]': '`size--${typographySize()}`',
|
|
38868
|
-
}, template: "<div\n class=\"outer layout-col flex-auto\"\n [class.has-description]=\"description()\"\n [class.has-hover-animation]=\"animated()\"\n [style.color]=\"foregroundColor()\"\n>\n @if (description()) {\n <div class=\"description\" [style.color]=\"backgroundColor()\">{{ description() }}</div>\n }\n <div\n class=\"inner flex-auto p-lg\"\n [style.color]=\"foregroundColor()\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div [class.layout-row]=\"icon()\" [class.gap-
|
|
38868
|
+
}, template: "<div\n class=\"outer layout-col flex-auto\"\n [class.has-description]=\"description()\"\n [class.has-hover-animation]=\"animated()\"\n [style.color]=\"foregroundColor()\"\n>\n @if (description()) {\n <div class=\"description p-sm pt-xs\" [style.color]=\"backgroundColor()\">{{ description() }}</div>\n }\n <div\n class=\"inner flex-auto p-lg\"\n [style.color]=\"foregroundColor()\"\n [style.background-color]=\"backgroundColor()\"\n >\n <div [class.layout-row]=\"icon()\" [class.gap-lg]=\"icon()\">\n @if (icon()) {\n <div class=\"layout-col place-center-center\">\n <mat-icon class=\"main-icon\">{{ icon() }}</mat-icon>\n </div>\n }\n <div class=\"layout-col\">\n @if (title()) {\n <h3 class=\"m-0\">{{ title() }}</h3>\n }\n <div class=\"value mt-xs bold\"><ng-content></ng-content></div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:max-content}:host.size--small{--tile-font-size: var(--md-sys-typescale-title-large-size);--tile-icon-size: 30px}:host.size--medium{--tile-font-size: var(--md-sys-typescale-headline-medium-size);--tile-icon-size: 40px}:host.size--large{--tile-font-size: var(--md-sys-typescale-headline-large-size);--tile-icon-size: 50px}.outer.has-description{padding:var(--elder-size-xs);border-radius:calc(var(--elder-pane-border-radius) + var(--elder-size-xs));background-color:currentColor}.outer.has-hover-animation{transition:transform .2s ease}.outer.has-hover-animation:hover{transform:translateY(-3px)}.outer .description{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking);line-height:1;opacity:.9}.inner{border-radius:var(--elder-pane-border-radius)}.inner h3{opacity:.65;font-size:var(--md-sys-typescale-body-large-size)}.inner .value{text-wrap:nowrap}.value{font-size:var(--tile-font-size)}.main-icon{width:var(--tile-icon-size);height:var(--tile-icon-size);font-size:var(--tile-icon-size)}\n"] }]
|
|
38869
38869
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], typographySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "typographySize", required: false }] }] } });
|
|
38870
38870
|
|
|
38871
38871
|
/**
|