@anglr/common 17.0.0-beta.20230815122135 → 17.0.0-beta.20230817112330

package/changelog.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## Version 17.0.0 (2023-08-15)
+## Version 17.0.0 (2023-08-17)
 
 ### Features
 
@@ -84,6 +84,7 @@
 - minimal supported version of `@floating-ui/dom` is `1.4.4`
 - minimal supported version of `tslib` is `2.6.1`
 - dropped support of `NodeJs` lower than `16.14`
+- reworked styles, now using same technique as `@anglr/datetime` using mixins and functions to define theme
 - pipe `LocalizePipe` renamed to `LocalizeSAPipe`
 - pipe `IsNaNPipe` renamed to `IsNaNSAPipe`
 - pipe `IsPresentPipe` renamed to `IsPresentSAPipe`
@@ -122,9 +123,10 @@
 - removed `PositionModule` module, use `PositionToSADirective` directly
 - *subpackage* `@anglr/common/numeral`
    - pipe `NumeralPipe` renamed to `NumeralSAPipe`
+   - removed `NumeralModule` module, use `NumeralSAPipe` directly 
 - *subpackage* `@anglr/common/structured-log`
    - updated `ConsoleLogModule` module
-      - removed `forRoot` method, instead use new `provideConsoleComponentSink` function
+      - removed `forRoot` method, instead use new `provideConsoleComponentSink` function and you also have to provide logger using `provideLogger(StructuredLogLogger)`
    - removed `STRUCTURED_LOG_LOGGER` from public API, instead use new `provideLogger` with `StructuredLogLogger` type
 - *subpackage* `@anglr/common/floating-ui`
    - removed `FLOATING_UI_POSITION` from public API, instead use new `providePosition` with `FloatingUiPosition` type

package/es2022/numeral/src/index.js

@@ -1,3 +1,2 @@
 export * from './pipes/numeral.pipe';
-export * from './modules/numeral.module';
 //# sourceMappingURL=index.js.map

package/es2022/numeral/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../numeral/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './pipes/numeral.pipe';\nexport * from './modules/numeral.module';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../numeral/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './pipes/numeral.pipe';\n"]}

package/numeral/src/index.d.ts

@@ -1,3 +1,2 @@
 export * from './pipes/numeral.pipe';
-export * from './modules/numeral.module';
 //# sourceMappingURL=index.d.ts.map

package/numeral/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@anglr/common",
-    "version": "17.0.0-beta.20230815122135",
+    "version": "17.0.0-beta.20230817112330",
     "description": "Angular module for common angular stuff",
     "type": "module",
     "sideEffects": false,
@@ -160,11 +160,11 @@
         "./package.json": {
             "default": "./package.json"
         },
-        "./src/style.scss": {
-            "sass": "./src/style.scss"
+        "./styles": {
+            "sass": "./styles/index.scss"
         },
-        "./styles/*": {
-            "sass": "./styles/*.scss"
+        "./styles/themes/*": {
+            "sass": "./styles/themes/*.scss"
         },
         "./typings/*": {
             "types": "./typings/*/index.d.ts"

package/styles/components/_multi-button.scss

@@ -0,0 +1,19 @@
+@mixin css
+{
+    multi-button
+    {
+        .sub-buttons
+        {
+            box-shadow: 0 8px 10px 1px var(--common-multiButton-subButton-shadow), 0 3px 14px 2px var(--common-multiButton-subButton-shadow), 0 5px 5px -3px var(--common-multiButton-subButton-shadow);
+            background-color: var(--common-multiButton-subButton-background);
+            border: 1px solid var(--common-multiButton-subButton-border);
+
+            button
+            {
+                background-color: var(--common-multiButton-subButton-background);
+                color: var(--common-multiButton-subButton-foreground);
+                border-color: transparent;
+            }
+        }
+    }
+}

package/styles/components/_tooltip.scss

@@ -0,0 +1,9 @@
+@mixin css
+{
+    tooltip-popup
+    {
+        background-color: var(--common-tooltip-background);
+        color: var(--common-tooltip-foreground);
+        box-shadow: 0 0 2px var(--common-tooltip-foreground);
+    }
+}

package/styles/core/_functions.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+@use 'theme';
+
+@function defineTheme($colors, $font)
+{
+    $theme: map.deep-merge(theme.$defaultTheme, $colors);
+    $theme: map.set($theme, 'font', $font);
+
+    @return $theme;
+}

package/styles/core/_misc.scss

@@ -0,0 +1,3 @@
+@mixin misc
+{
+}

package/styles/core/_mixins.scss

@@ -0,0 +1,73 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'misc';
+@use '../components/multi-button' as multiButton;
+@use '../components/tooltip' as tooltip;
+
+@mixin buildThemeColorsTooltip($theme)
+{
+    @if $theme 
+    {
+        --common-tooltip-background: #{map.get(map.get($theme, 'tooltip'), 'background')};
+        --common-tooltip-foreground: #{map.get(map.get($theme, 'tooltip'), 'foreground')};
+        --common-tooltip-shadow: #{map.get(map.get($theme, 'tooltip'), 'shadow')};
+    }
+}
+
+@mixin buildThemeColorsMultiButton($theme)
+{
+    @if $theme 
+    {
+        --common-multiButton-subButton-background: #{map.get(map.get(map.get($theme, 'multiButton'), 'subButton'), 'background')};
+        --common-multiButton-subButton-foreground: #{map.get(map.get(map.get($theme, 'multiButton'), 'subButton'), 'foreground')};
+        --common-multiButton-subButton-border: #{map.get(map.get(map.get($theme, 'multiButton'), 'subButton'), 'border')};
+        --common-multiButton-subButton-shadow: #{map.get(map.get(map.get($theme, 'multiButton'), 'subButton'), 'shadow')};
+    }
+}
+
+@mixin buildThemeColors($theme)
+{
+    @include buildThemeColorsTooltip($theme);
+    @include buildThemeColorsMultiButton($theme);
+}
+
+@mixin buildThemeCssMisc
+{
+    @include misc.misc;
+}
+
+@mixin buildThemeCssTooltip
+{
+    @include tooltip.css;
+}
+
+@mixin buildThemeCssMultiButton
+{
+    @include multiButton.css;
+}
+
+@mixin buildThemeCss
+{
+    @include buildThemeCssMisc;
+    @include buildThemeCssTooltip;
+    @include buildThemeCssMultiButton;
+}
+
+@mixin buildThemeTooltip($theme)
+{
+    @include buildThemeColorsTooltip($theme);
+    @include buildThemeCssTooltip();
+}
+
+@mixin buildThemeMultiButton($theme)
+{
+    @include buildThemeColorsMultiButton($theme);
+    @include buildThemeCssMultiButton();
+}
+
+@mixin buildTheme($theme)
+{
+    @include buildThemeColors($theme);
+    @include buildThemeCss;
+}

package/styles/core/_theme.scss

@@ -0,0 +1,19 @@
+$defaultTheme:
+(
+    tooltip:
+    (
+        background: #151515,
+        foreground: #F5F5F5,
+        shadow: #C0C0C0,
+    ),
+    multiButton:
+    (
+        subButton:
+        (
+            background: #fff,
+            foreground: #333,
+            border: #fff,
+            shadow: #f0f0f0,
+        ),
+    ),
+);

package/styles/index.scss

@@ -0,0 +1,2 @@
+@forward './core/functions';
+@forward './core/mixins';

package/styles/themes/dark.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../core/functions';
+@use '../core/mixins';
+
+$_darkDefaultTheme:
+(
+    multiButton:
+    (
+        subButton:
+        (
+            background: #333,
+            foreground: #FFF,
+            border: #333,
+        ),
+    ),
+);
+
+@function defineTheme($colors: (), $font: 'Inter')
+{
+    $colors: map.deep-merge($_darkDefaultTheme, $colors);
+
+    @return functions.defineTheme($colors, $font);
+}
+
+@mixin buildThemeTooltip()
+{
+    @include mixins.buildThemeTooltip(defineTheme());
+}
+
+@mixin buildThemeMultiButton()
+{
+    @include mixins.buildThemeMultiButton(defineTheme());
+}
+
+@mixin buildTheme()
+{
+    @include mixins.buildTheme(defineTheme());
+}

package/styles/themes/light.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '../core/functions';
+@use '../core/mixins';
+
+$_lightDefaultTheme:
+(
+    tooltip:
+    (
+        background: #FAFAFA,
+        foreground: #444,
+        shadow: #333,
+    ),
+);
+
+@function defineTheme($colors: (), $font: 'Inter')
+{
+    $colors: map.deep-merge($_lightDefaultTheme, $colors);
+
+    @return functions.defineTheme($colors, $font);
+}
+
+@mixin buildThemeTooltip()
+{
+    @include mixins.buildThemeTooltip(defineTheme());
+}
+
+@mixin buildThemeMultiButton()
+{
+    @include mixins.buildThemeMultiButton(defineTheme());
+}
+
+@mixin buildTheme()
+{
+    @include mixins.buildTheme(defineTheme());
+}

package/version.bak

@@ -1 +1 @@
-17.0.0-beta.20230815122135 
+17.0.0-beta.20230817112330 

package/es2022/numeral/src/modules/numeral.module.js

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NumeralSAPipe } from './../pipes/numeral.pipe';
-import * as i0 from "@angular/core";
-/**
- * Module for components, pipes and directives that are using numeral library
- */
-class NumeralModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NumeralModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: NumeralModule, imports: [NumeralSAPipe], exports: [NumeralSAPipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NumeralModule });
-}
-export { NumeralModule };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NumeralModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [NumeralSAPipe],
-                    exports: [NumeralSAPipe]
-                }]
-        }] });
-//# sourceMappingURL=numeral.module.js.map

package/es2022/numeral/src/modules/numeral.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"numeral.module.js","sourceRoot":"","sources":["../../../../numeral/src/modules/numeral.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;;AAEtD;;GAEG;AACH,MAKa,aAAa;uGAAb,aAAa;wGAAb,aAAa,YAHZ,aAAa,aACb,aAAa;wGAEd,aAAa;;SAAb,aAAa;2FAAb,aAAa;kBALzB,QAAQ;mBACT;oBACI,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,OAAO,EAAE,CAAC,aAAa,CAAC;iBAC3B","sourcesContent":["import {NgModule} from '@angular/core';\n\nimport {NumeralSAPipe} from './../pipes/numeral.pipe';\n\n/**\n * Module for components, pipes and directives that are using numeral library\n */\n@NgModule(\n{\n    imports: [NumeralSAPipe],\n    exports: [NumeralSAPipe]\n})\nexport class NumeralModule\n{\n}"]}

package/numeral/src/modules/numeral.module.d.ts

@@ -1,11 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "../pipes/numeral.pipe";
-/**
- * Module for components, pipes and directives that are using numeral library
- */
-export declare class NumeralModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NumeralModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NumeralModule, never, [typeof i1.NumeralSAPipe], [typeof i1.NumeralSAPipe]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NumeralModule>;
-}
-//# sourceMappingURL=numeral.module.d.ts.map

package/numeral/src/modules/numeral.module.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"numeral.module.d.ts","sourceRoot":"","sources":["numeral.module.ts"],"names":[],"mappings":";;AAIA;;GAEG;AACH,qBAKa,aAAa;yCAAb,aAAa;0CAAb,aAAa;0CAAb,aAAa;CAEzB"}

package/styles/_dark-colors-vars.scss

@@ -1 +0,0 @@
-@forward 'multibutton/dark-colors-vars';

package/styles/_light-colors-vars.scss

@@ -1 +0,0 @@
-@forward 'multibutton/light-colors-vars';

package/styles/dark.scss

@@ -1 +0,0 @@
-@forward 'multibutton/dark';

package/styles/light.scss

@@ -1 +0,0 @@
-@forward 'multibutton/light';

package/styles/multibutton/_dark-colors-vars.scss

@@ -1,8 +0,0 @@
-@use "dark-colors" as theme;
-
-.multibutton-dark-theme
-{
-    --multibutton-subbuttons-background: #{theme.$multibuttonSubbuttonsBackground};
-    --multibutton-subbuttons-foreground: #{theme.$multibuttonSubbuttonsForeground};
-    --multibutton-subbuttons-shadow: #{theme.$multibuttonSubbuttonsShadow};
-}

package/styles/multibutton/_dark-colors.scss

@@ -1,3 +0,0 @@
-$multibuttonSubbuttonsBackground: #333;
-$multibuttonSubbuttonsForeground: #FFF;
-$multibuttonSubbuttonsShadow: 240 240 240;

package/styles/multibutton/_dark.scss

@@ -1,18 +0,0 @@
-@use "dark-colors" as theme;
-
-multi-button
-{
-    .sub-buttons
-    {
-        box-shadow: 0 8px 10px 1px rgb(var(--multibutton-subbuttons-shadow, theme.$multibuttonSubbuttonsShadow) / 14%), 0 3px 14px 2px rgb(var(--multibutton-subbuttons-shadow, theme.$multibuttonSubbuttonsShadow) / 12%), 0 5px 5px -3px rgb(var(--multibutton-subbuttons-shadow, theme.$multibuttonSubbuttonsShadow) / 20%);
-        background-color: var(--multibutton-subbuttons-background, theme.$multibuttonSubbuttonsBackground);
-        border: 1px solid var(--multibutton-subbuttons-background, theme.$multibuttonSubbuttonsBackground);
-
-        button
-        {
-            background-color: var(--multibutton-subbuttons-background, theme.$multibuttonSubbuttonsBackground);
-            color: var(--multibutton-subbuttons-foreground, theme.$multibuttonSubbuttonsForeground);
-            border-color: transparent;
-        }
-    }
-}

package/styles/multibutton/_light-colors-vars.scss

@@ -1,8 +0,0 @@
-@use "light-colors" as theme;
-
-.multibutton-light-theme
-{
-    --multibutton-subbuttons-background: #{theme.$multibuttonSubbuttonsBackground};
-    --multibutton-subbuttons-foreground: #{theme.$multibuttonSubbuttonsForeground};
-    --multibutton-subbuttons-shadow: #{theme.$multibuttonSubbuttonsShadow};
-}

package/styles/multibutton/_light-colors.scss

@@ -1,3 +0,0 @@
-$multibuttonSubbuttonsBackground: #fff;
-$multibuttonSubbuttonsForeground: #333;
-$multibuttonSubbuttonsShadow: 0 0 0;

package/styles/multibutton/_light.scss

@@ -1,18 +0,0 @@
-@use "light-colors" as theme;
-
-multi-button
-{
-    .sub-buttons
-    {
-        box-shadow: 0 8px 10px 1px rgb(var(--multibutton-subbuttons-shadow, theme.$multibuttonSubbuttonsShadow) / 14%), 0 3px 14px 2px rgb(var(--multibutton-subbuttons-shadow, theme.$multibuttonSubbuttonsShadow) / 12%), 0 5px 5px -3px rgb(var(--multibutton-subbuttons-shadow, theme.$multibuttonSubbuttonsShadow) / 20%);
-        background-color: var(--multibutton-subbuttons-background, theme.$multibuttonSubbuttonsBackground);
-        border: 1px solid var(--multibutton-subbuttons-background, theme.$multibuttonSubbuttonsBackground);
-
-        button
-        {
-            background-color: var(--multibutton-subbuttons-background, theme.$multibuttonSubbuttonsBackground);
-            color: var(--multibutton-subbuttons-foreground, theme.$multibuttonSubbuttonsForeground);
-            border-color: transparent;
-        }
-    }
-}

package/styles/positions/_dark.scss

@@ -1,6 +0,0 @@
-tooltip-popup
-{
-    background-color: #151515;
-    color: #F5F5F5;
-    box-shadow: 0 0 2px #C0C0C0;
-}

package/styles/positions/_light.scss

@@ -1,6 +0,0 @@
-tooltip-popup
-{
-    background-color: #FAFAFA;
-    color: #444;
-    box-shadow: 0 0 2px #333;
-}