New packages org (#2639)

New packages org

demo-shell/src/app/components/theme-picker/style-manager/style-manager.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
+ * removed or changed later.
+ */
+@Injectable()
+export class StyleManager {
+  /**
+   * Set the stylesheet with the specified key.
+   */
+  setStyle(key: string, href: string) {
+    getLinkElementForKey(key).setAttribute('href', href);
+  }
+
+  /**
+   * Remove the stylesheet with the specified key.
+   */
+  removeStyle(key: string) {
+    const existingLinkElement = getExistingLinkElementByKey(key);
+    if (existingLinkElement) {
+      document.head.removeChild(existingLinkElement);
+    }
+  }
+}
+
+function getLinkElementForKey(key: string) {
+  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
+}
+
+function getExistingLinkElementByKey(key: string) {
+  return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
+}
+
+function createLinkElementWithKey(key: string) {
+  const linkEl = document.createElement('link');
+  linkEl.setAttribute('rel', 'stylesheet');
+  linkEl.setAttribute('type', 'text/css');
+  linkEl.classList.add(getClassNameForKey(key));
+  document.head.appendChild(linkEl);
+  return linkEl;
+}
+
+function getClassNameForKey(key: string) {
+  return `style-manager-${key}`;
+}

demo-shell/src/app/components/theme-picker/theme-picker.css

@@ -0,0 +1,26 @@
+.docs-theme-picker-menu .mat-menu-content {
+    padding: 8px;
+}
+
+.docs-theme-picker-menu [mat-menu-item] {
+    flex: 0 0 auto;
+    padding: 0;
+    overflow: hidden;
+}
+
+
+.docs-theme-picker-menu .docs-theme-picker-primary {
+    width: 25px;
+    height: 25px;
+}
+
+.docs-theme-picker-menu .docs-theme-picker-accent {
+     position: absolute;
+     bottom: 6px;
+     width: 100%;
+     height: 6px;
+ }
+
+.docs-theme-chosen-icon{
+    border-radius: 13px;
+}

demo-shell/src/app/components/theme-picker/theme-picker.html

@@ -0,0 +1,17 @@
+<button mat-icon-button [mat-menu-trigger-for]="themeMenu" matTooltip="Select a theme!">
+    <mat-icon>format_color_fill</mat-icon>
+</button>
+
+<mat-menu class="docs-theme-picker-menu" #themeMenu="matMenu" x-position="before">
+    <button *ngFor="let theme of themes"  mat-menu-item (click)="installTheme(theme)" >
+        <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+                 [style.background]="theme.primary"
+                 *ngIf="currentTheme === theme">check_circle
+        </mat-icon>
+        <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+                 [style.background]="theme.primary"
+                 *ngIf="currentTheme !== theme">invert_colors
+        </mat-icon>
+        {{theme.name}}
+    </button>
+</mat-menu>

demo-shell/src/app/components/theme-picker/theme-picker.ts

@@ -0,0 +1,132 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import {
+    MatButtonModule, MatGridListModule, MatIconModule, MatMenuModule,
+    MatTooltipModule, MatListModule
+} from '@angular/material';
+import { StyleManager } from './style-manager/style-manager';
+import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
+
+@Component({
+    selector: 'theme-picker',
+    templateUrl: 'theme-picker.html',
+    styleUrls: ['theme-picker.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {'aria-hidden': 'true'}
+})
+export class ThemePickerComponent {
+    currentTheme;
+
+    themes = [
+        {
+            primary: '#ff9800',
+            accent: '#3f51b5',
+            name: 'Developer Theme',
+            href: '',
+            isDefault: true
+        },
+        {
+            primary: '#00bcd4',
+            accent: '#ff9800',
+            name: 'ECM Cyan Orange',
+            href: 'adf-cyan-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#00bcd4',
+            accent: '#3f51b5',
+            name: 'ECM Cyan Purple',
+            href: 'adf-cyan-purple.css',
+            isDark: false
+        },
+        {
+            primary: '#8bc34a',
+            accent: '#ff9800',
+            name: 'BPM Green Orange',
+            href: 'adf-green-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#8bc34a',
+            accent: '#3f51b5',
+            name: 'BPM Green Purple',
+            href: 'adf-green-purple.css',
+            isDark: false
+        },
+        {
+            primary: '#3f51b5',
+            accent: '#ff4081',
+            name: 'Indigo Pink',
+            href: 'adf-indigo-pink.css',
+            isDark: false
+        },
+        {
+            primary: '#c2185b',
+            accent: '#b0bec5',
+            name: 'Pink Bluegrey Dark',
+            href: 'adf-pink-bluegrey.css',
+            isDark: false
+        },
+        {
+            primary: '#7b1fa2',
+            accent: '#69f0ae',
+            name: 'Purple Green Dark',
+            href: 'adf-purple-green.css',
+            isDark: false
+        },
+        {
+            primary: '#2196f3',
+            accent: '#ff9800',
+            name: 'ECM Blue Orange',
+            href: 'adf-blue-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#2196f3',
+            accent: '#3f51b5',
+            name: 'ECM Blue Purple',
+            href: 'adf-blue-purple.css',
+            isDark: false
+        }
+    ];
+
+    constructor(public styleManager: StyleManager,
+                private _themeStorage: ThemeStorage) {
+
+    }
+
+    installTheme(theme: DocsSiteTheme) {
+        if (theme.isDefault === true) {
+            this.styleManager.setStyle('theme', ``);
+        } else {
+            this.currentTheme = this._getCurrentThemeFromHref(theme.href);
+
+            this.styleManager.setStyle('theme', `prebuilt-themes/${theme.href}`);
+
+            if (this.currentTheme) {
+                this._themeStorage.storeTheme(this.currentTheme);
+            }
+        }
+    }
+
+    private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
+        return this.themes.find(theme => theme.href === href);
+    }
+}
+
+@NgModule({
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatGridListModule,
+        MatTooltipModule,
+        MatListModule,
+        CommonModule
+    ],
+    exports: [ThemePickerComponent],
+    declarations: [ThemePickerComponent],
+    providers: [StyleManager, ThemeStorage]
+})
+export class ThemePickerModule {
+}

demo-shell/src/app/components/theme-picker/theme-storage/theme-storage.ts

@@ -0,0 +1,39 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+export interface DocsSiteTheme {
+  href: string;
+  name: string;
+  accent: string;
+  primary: string;
+  isDark?: boolean;
+  isDefault?: boolean;
+}
+
+@Injectable()
+export class ThemeStorage {
+  static storageKey = 'docs-theme-storage-current';
+
+  public onThemeUpdate: EventEmitter<DocsSiteTheme> = new EventEmitter<DocsSiteTheme>();
+
+  public storeTheme(theme: DocsSiteTheme) {
+    try {
+      window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme);
+    } catch (e) { }
+
+    this.onThemeUpdate.emit(theme);
+  }
+
+  public getStoredTheme(): DocsSiteTheme {
+    try {
+      return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  public clearStorage() {
+    try {
+      window.localStorage.removeItem(ThemeStorage.storageKey);
+    } catch (e) { }
+  }
+}