WIP

projects/testing.ts

@@ -0,0 +1,274 @@
+/* istanbul ignore file */
+
+/* TODO: Issue #292. */
+import { Injectable, OnDestroy } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { filter } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { ThemeVariants } from '../../shared/theme';
+import { hexToRgb, luminance, mix, yiq } from '../../shared/utility/color.utility';
+import { WvrThemeableComponent } from '../../shared/wvr-themeable.component';
+import { RootState, selectThemeState } from '../store';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService implements OnDestroy {
+
+  currentTheme: ThemeVariants;
+
+  themes: { [name: string]: ThemeVariants };
+
+  themedComponents: Map<number, WvrThemeableComponent>;
+
+  subscription: Subscription;
+
+  constructor(private readonly store: Store<RootState>) {
+    this.themedComponents = new Map<number, WvrThemeableComponent>();
+    this.subscription = this.store.pipe(
+      select(selectThemeState),
+      filter(themeState => !!themeState)
+    )
+    .subscribe(themeState => {
+      this.themes = themeState.themes;
+      this.currentTheme = this.themes[themeState.currentTheme];
+      this.themedComponents.forEach((themeableComponent: WvrThemeableComponent, id: number) => {
+        this.applyTheme(this.currentTheme, themeableComponent);
+      });
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  registerComponent(id: number, themeableComponent: WvrThemeableComponent): void {
+    this.themedComponents.set(id, themeableComponent);
+    this.applyTheme(this.currentTheme, themeableComponent);
+  }
+
+  unRegisterComponent(id: number): void {
+    this.themedComponents.delete(id);
+  }
+
+  applyThemeByName(themeName: string, themeableComponent: WvrThemeableComponent): void {
+    const theme = this.themes[themeName];
+    this.applyTheme(theme, themeableComponent);
+  }
+
+  private applyTheme(theme: ThemeVariants, themeableComponent: WvrThemeableComponent): void {
+    if (!!theme) {
+      //let styles = '';
+      //styles += this.processThemeVariants(theme, themeableComponent);
+      //themeableComponent.style = styles;
+    }
+  }
+
+  // tslint:disable-next-line:prefer-function-over-method
+  private processThemeVariants(theme: ThemeVariants, themeableComponent: WvrThemeableComponent): string {
+    //const computedStyle = getComputedStyle(themeableComponent.eRef.nativeElement);
+/*
+    const yiqContrastedThreshold = Number(computedStyle.getPropertyValue('--yiq-contrasted-threshold')
+      .trim());
+    const yiqTextDark = computedStyle.getPropertyValue('--yiq-text-dark')
+      .trim();
+    const yiqTextLight = computedStyle.getPropertyValue('--yiq-text-light')
+      .trim();
+
+    const themeColorInterval = parseInt(computedStyle.getPropertyValue('--theme-color-interval')
+      .trim(), 10);
+
+    const black = computedStyle.getPropertyValue('--black')
+      .trim();
+    const white = computedStyle.getPropertyValue('--white')
+      .trim();
+//*/
+
+///*
+    const yiqContrastedThreshold = 0;
+    const yiqTextDark = '';
+    const yiqTextLight = '';
+    const themeColorInterval = 10;
+
+    const black = '';
+    const white = '';
+//*/
+
+    const contrast = (level: number) => (level > 0 ? black : white);
+    const yiqConstrast = (value: number) => (value >= yiqContrastedThreshold ? yiqTextDark : yiqTextLight);
+
+    let styles = '';
+///*
+    const appendStyle = (customProperty: string, value: string): void => {
+      styles += themeableComponent.themeOverrides[customProperty]
+        ? `${customProperty}: ${themeableComponent.themeOverrides[customProperty]};`
+        : `${customProperty}: ${value};`;
+    };
+
+    // update variant variables
+    for (const k of Object.keys(theme)) {
+      const key = `--${k}`;
+      const value = theme[k].baseColor;
+
+      // update theme variable
+      styles += `${key}: ${value};`;
+
+      themeableComponent.variantTypes.forEach(variantType => {
+
+        switch (variantType) {
+          case 'alert':
+            /*const alertBackgroundLevel = Number(computedStyle.getPropertyValue('--alert-bg-level')
+              .trim());
+            const alertBorderLevel = Number(computedStyle.getPropertyValue('--alert-border-level')
+              .trim());
+            const alertColorLevel = Number(computedStyle.getPropertyValue('--alert-color-level')
+              .trim());
+
+            // update alert variants
+            const alertBgValue = mix(contrast(alertBackgroundLevel), value, Math.abs(alertBackgroundLevel) * themeColorInterval);
+            appendStyle(`${key}-alert-bg`, alertBgValue);
+
+            const alertBorderValue = mix(contrast(alertBorderLevel), value, Math.abs(alertBorderLevel) * themeColorInterval);
+            appendStyle(`${key}-alert-border`, alertBorderValue);
+
+            const alertColorValue = mix(contrast(alertColorLevel), value, Math.abs(alertColorLevel) * themeColorInterval);
+            appendStyle(`${key}-alert-color`, alertColorValue);*/
+            break;
+          case 'badge':
+            // update badge variants
+            const badgeBgValue = value;
+            appendStyle(`${key}-badge-bg`, badgeBgValue);
+
+            const badgeColorValue = yiqConstrast(yiq(value));
+            appendStyle(`${key}-badge-color`, badgeColorValue);
+            break;
+          case 'button':
+            // update button outline variants
+            const buttonOutlineColorValue = value;
+            appendStyle(`${key}-button-outline-color`, buttonOutlineColorValue);
+
+            const buttonOutlineColorHoverValue = yiqConstrast(yiq(value));
+            appendStyle(`${key}-button-outline-color-hover`, buttonOutlineColorHoverValue);
+
+            const bobsrgba = hexToRgb(value);
+            const buttonOutlineBoxShadowColorValue = `rgba(${bobsrgba.r}, ${bobsrgba.g}, ${bobsrgba.b}, .5)`;
+            appendStyle(`${key}-button-outline-box-shadow-color`, buttonOutlineBoxShadowColorValue);
+
+            // update button variants
+            const buttonColorValue = yiqConstrast(yiq(value));
+            appendStyle(`${key}-button-color`, buttonColorValue);
+
+            const buttonBgValue = value;
+            appendStyle(`${key}-button-bg`, buttonBgValue);
+
+            const buttonBorderValue = value;
+            appendStyle(`${key}-button-border`, buttonBorderValue);
+
+            const buttonHoverColorValue = yiqConstrast(yiq(luminance(value, -0.1165)));
+            appendStyle(`${key}-button-hover-color`, buttonHoverColorValue);
+
+            const buttonHoverBgValue = luminance(value, -0.1165);
+            appendStyle(`${key}-button-hover-bg`, buttonHoverBgValue);
+
+            const buttonHoverBorderValue = luminance(value, -0.1415);
+            appendStyle(`${key}-button-hover-border`, buttonHoverBorderValue);
+
+            const buttonActiveColorValue = yiqConstrast(yiq(luminance(value, -0.1415)));
+            appendStyle(`${key}-button-active-color`, buttonActiveColorValue);
+
+            const buttonActiveBgValue = luminance(value, -0.1415);
+            appendStyle(`${key}-button-active-bg`, buttonActiveBgValue);
+
+            const buttonActiveBorderValue = luminance(value, -0.17);
+            appendStyle(`${key}-button-active-border`, buttonActiveBorderValue);
+
+            const bbsrgba = hexToRgb(mix(yiqConstrast(yiq(luminance(buttonBgValue, -0.1165))), buttonBorderValue, 15));
+            const buttonBoxShadowColorValue = `rgba(${bbsrgba.r}, ${bbsrgba.g}, ${bbsrgba.b}, .5)`;
+            appendStyle(`${key}-button-box-shadow-color`, buttonBoxShadowColorValue);
+            break;
+          case 'default':
+              // update default outline variants
+              const defaultOutlineColorValue = value;
+              appendStyle(`${key}-default-outline-color`, defaultOutlineColorValue);
+
+              const defaultOutlineColorHoverValue = yiqConstrast(yiq(value));
+              appendStyle(`${key}-default-outline-color-hover`, defaultOutlineColorHoverValue);
+
+              const dvobsrgba = hexToRgb(value);
+              const defaultOutlineBoxShadowColorValue = `rgba(${dvobsrgba.r}, ${dvobsrgba.g}, ${dvobsrgba.b}, .5)`;
+              appendStyle(`${key}-default-outline-box-shadow-color`, defaultOutlineBoxShadowColorValue);
+
+              // update default variants
+              const defaultColorValue = yiqConstrast(yiq(value));
+              appendStyle(`${key}-default-color`, defaultColorValue);
+
+              const defaultBgValue = value;
+              appendStyle(`${key}-default-bg`, defaultBgValue);
+
+              const defaultBorderValue = value;
+              appendStyle(`${key}-default-border`, defaultBorderValue);
+
+              const defaultHoverColorValue = yiqConstrast(yiq(luminance(value, -0.1165)));
+              appendStyle(`${key}-default-hover-color`, defaultHoverColorValue);
+
+              const defaultHoverBgValue = luminance(value, -0.1165);
+              appendStyle(`${key}-default-hover-bg`, defaultHoverBgValue);
+
+              const defaultHoverBorderValue = luminance(value, -0.1415);
+              appendStyle(`${key}-default-hover-border`, defaultHoverBorderValue);
+
+              const defaultActiveColorValue = yiqConstrast(yiq(luminance(value, -0.1415)));
+              appendStyle(`${key}-default-active-color`, defaultActiveColorValue);
+
+              const defaultActiveBgValue = luminance(value, -0.1415);
+              appendStyle(`${key}-default-active-bg`, defaultActiveBgValue);
+
+              const defaultActiveBorderValue = luminance(value, -0.17);
+              appendStyle(`${key}-default-active-border`, defaultActiveBorderValue);
+
+              const dbsrgba = hexToRgb(mix(yiqConstrast(yiq(luminance(defaultBgValue, -0.1165))), defaultBorderValue, 15));
+              const defaultBoxShadowColorValue = `rgba(${dbsrgba.r}, ${dbsrgba.g}, ${dbsrgba.b}, .5)`;
+              appendStyle(`${key}-default-box-shadow-color`, defaultBoxShadowColorValue);
+              break;
+          case 'list-group-item':
+          /*
+            const listGroupItemBackgroundLevel = Number(computedStyle.getPropertyValue('--list-group-item-bg-level')
+              .trim());
+            const listGroupItemColorLevel = Number(computedStyle.getPropertyValue('--list-group-item-color-level')
+              .trim());
+
+            // update list item group variants
+            // tslint:disable-next-line:max-line-length
+            const listGroupItemBgValue = mix(contrast(listGroupItemBackgroundLevel), value, Math.abs(listGroupItemBackgroundLevel) * themeColorInterval);
+            appendStyle(`${key}-list-group-item-bg`, listGroupItemBgValue);
+
+            // tslint:disable-next-line:max-line-length
+            const listGroupItemColorValue = mix(contrast(listGroupItemColorLevel), value, Math.abs(listGroupItemColorLevel) * themeColorInterval);
+            appendStyle(`${key}-list-group-item-color`, listGroupItemColorValue);
+            */
+            break;
+          case 'table':
+          /*
+            const tableBackgroundLevel = Number(computedStyle.getPropertyValue('--table-bg-level')
+              .trim());
+            const tableBorderLevel = Number(computedStyle.getPropertyValue('--table-border-level')
+              .trim());
+
+            // update table variants
+            const tableBgValue = mix(contrast(tableBackgroundLevel), value, Math.abs(tableBackgroundLevel) * themeColorInterval);
+            appendStyle(`${key}-table-bg`, tableBgValue);
+
+            const tableBorderValue = mix(contrast(tableBorderLevel), value, Math.abs(tableBorderLevel) * themeColorInterval);
+            appendStyle(`${key}-table-border`, tableBorderValue);
+            */
+            break;
+          default: break;
+        }
+
+      });
+    }
+//*/
+    return styles;
+  }
+
+}

projects/wvr-elements/src/lib/core/index.ts

@@ -0,0 +1,20 @@
+export * from './action-registry.service';
+export * from './actions';
+export * from './animation.service';
+export * from './component-registry.service';
+export * from './data-select';
+export * from './effects';
+export * from './handlebars-helpers';
+export * from './layout';
+export * from './manifest';
+export * from './map';
+export * from './message';
+export * from './message-manifest';
+export * from './modal';
+export * from './ng-bindings.service';
+export * from './rest';
+export * from './router';
+export * from './store';
+export * from './theme';
+export * from './wvr-core.module';
+export * from './wysiwyg';

projects/wvr-elements/src/lib/core/layout/index.ts

@@ -0,0 +1,4 @@
+export * from './layout';
+export * from './layout.effects';
+export * as LayoutActions from './layout.actions';
+export * as LayoutReducers from './layout.reducers';

projects/wvr-elements/src/lib/core/manifest/index.ts

@@ -1 +1,6 @@
-export { ManifestEntryRequest } from './manifest-entry-request';
+export * from './manifest';
+export * from './manifest.effects';
+export * from './manifest-entry';
+export * from './manifest-entry-request';
+export * as ManifestActions from './manifest.actions';
+export * as ManifestReducers from './manifest.reducers';

projects/wvr-elements/src/lib/core/manifest/manifest-entry.ts

@@ -1,7 +1,5 @@
-import { RequestMethod } from '../rest/request-method';
-import { RequestOptions } from '../rest/request-options';
-
-export type map = (response) => any;
+import { RequestMethod, RequestOptions } from '../rest';
+import { map } from '../map';
 
 export interface ManifestEntry {
   name: string; // unique

projects/wvr-elements/src/lib/core/map/index.ts

@@ -0,0 +1 @@
+export * from './map';

projects/wvr-elements/src/lib/core/map/map.ts

@@ -0,0 +1 @@
+export type map = (response) => any;

projects/wvr-elements/src/lib/core/message-manifest/index.ts

@@ -1,9 +1,9 @@
-export { MessageClientOptions } from './message-client-options';
-export { MessageClientProtocol } from './message-client-protocol';
-export { MessageManifest } from './message-manifest';
-export { MessageManifestEffects } from './message-manifest.effects';
-export { MessageManifestEntry } from './message-manifest-entry';
-export { MessageManifestEntryMessage } from './message-manifest-entry-message';
-export { MessageMappingStrategy } from './message-mapping-strategy';
+export * from './message-client-options';
+export * from './message-client-protocol';
+export * from './message-manifest';
+export * from './message-manifest.effects';
+export * from './message-manifest-entry';
+export * from './message-manifest-entry-message';
+export * from './message-mapping-strategy';
 export * as MessageManifestActions from './message-manifest.actions';
 export * as MessageManifestReducers from './message-manifest.reducers';

projects/wvr-elements/src/lib/core/message-manifest/message-manifest-entry.ts

@@ -1,8 +1,7 @@
 import { MessageClientOptions } from './message-client-options';
 import { MessageClientProtocol } from './message-client-protocol';
 import { MessageMappingStrategy } from './message-mapping-strategy';
-
-export type map = (response) => any;
+import { map } from '../map';
 
 export interface MessageManifestEntry {
   // A subscription identifier.

projects/wvr-elements/src/lib/core/message/index.ts

@@ -1 +1 @@
-export { MessageService } from './message.service';
+export * from './message.service';

projects/wvr-elements/src/lib/core/modal/index.ts

@@ -0,0 +1,4 @@
+export * from './modal';
+export * from './modal.effects';
+export * as ModalActions from './modal.actions';
+export * as ModalReducers from './modal.reducers';

projects/wvr-elements/src/lib/core/rest/index.ts

@@ -0,0 +1,7 @@
+export * from './rest.effects';
+export * from './rest.service';
+export * from './request';
+export * from './request-method';
+export * from './request-options';
+export * as RestActions from './rest.actions';
+export * as RestReducers from './rest.reducers';

projects/wvr-elements/src/lib/core/router/index.ts

@@ -0,0 +1 @@
+export * from './wvr-route-reuse-strategy';