feat(responsive): add lyShow & lyHide

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { LyToolbarModule } from '@alyle/ui/toolbar';
 import { LyMenuModule } from '@alyle/ui/menu';
 import { LyIconButtonModule } from '@alyle/ui/icon-button';
 import { AlyleUIModule, LyCommonModule, LyThemeConfig, LY_THEME_CONFIG, LyHammerGestureConfig } from '@alyle/ui';
-import { ResponsiveModule } from '@alyle/ui/responsive';
+import { ResponsiveModule, LY_MEDIA_QUERIES, Breakpoints } from '@alyle/ui/responsive';
 import { LyButtonModule } from '@alyle/ui/button';
 import { LyRippleModule } from '@alyle/ui/ripple';
 
@@ -80,8 +80,9 @@ export class MyCustomTheme extends LyThemeConfig {
   ],
   providers: [
     RoutesAppService,
-    { provide: HAMMER_GESTURE_CONFIG, useClass: LyHammerGestureConfig },
-    { provide: LY_THEME_CONFIG, useClass: MyCustomTheme }
+    { provide: LY_THEME_CONFIG, useClass: MyCustomTheme },
+    { provide: LY_MEDIA_QUERIES, useValue: Breakpoints },
+    { provide: HAMMER_GESTURE_CONFIG, useClass: LyHammerGestureConfig }
   ],
   bootstrap: [AppComponent]
 })

src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.html

@@ -1,12 +1,15 @@
-<!-- <p *lyResponsive="'(min-width: 320px)'">
-  responsive-demo-01 works!
-</p> -->
-<p>Handset         : {{ responsive.observe('Handset') | async | json }}</p>
+<div *ngFor="let item of queries" [lyShow]="item.key">
+  <p>
+    <strong color="warn">{{ item.key }}: </strong>{{ item.mediaQuery }}
+  </p>
+</div>
+<!-- ···deprecated··· -->
+<!-- <p>Handset         : {{ responsive.observe('Handset') | async | json }}</p>
 <p>Tablet          : {{ responsive.observe('Tablet') | async | json }}</p>
 <p>Web             : {{ responsive.observe('Web') | async | json }}</p>
 <p>HandsetPortrait : {{ responsive.observe('HandsetPortrait') | async | json }}</p>
 <p>TabletPortrait  : {{ responsive.observe('TabletPortrait') | async | json }}</p>
 <p>WebPortrait     : {{ responsive.observe('WebPortrait') | async | json }}</p>
 <p>HandsetLandscape: {{ responsive.observe('HandsetLandscape') | async | json }}</p>
 <p>TabletLandscape : {{ responsive.observe('TabletLandscape') | async | json }}</p>
-<p>WebLandscape    : {{ responsive.observe('WebLandscape') | async | json }}</p>
+<p>WebLandscape    : {{ responsive.observe('WebLandscape') | async | json }}</p> -->

src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.component.ts

@@ -1,24 +1,34 @@
-import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
-import { Responsive } from '@alyle/ui/responsive';
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, OnDestroy, Inject } from '@angular/core';
+import { Responsive, LY_MEDIA_QUERIES } from '@alyle/ui/responsive';
 import { Subscription } from 'rxjs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'responsive-demo-01',
   templateUrl: './responsive-demo-01.component.html',
-  styleUrls: ['./responsive-demo-01.component.scss'],
+  styleUrls: ['./responsive-demo-01.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  preserveWhitespaces: false
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None
 })
-export class ResponsiveDemo01Component implements OnInit, OnDestroy {
+export class ResponsiveDemo01Component implements OnDestroy {
   private _subscription: Subscription;
-  constructor(public responsive: Responsive) {
+  private queries: {key: string, mediaQuery: string}[] = [];
+  constructor(
+    @Inject(LY_MEDIA_QUERIES) mediaQueries: { [key: string]: string; },
+    public responsive: Responsive
+  ) {
+    /** Deprecated */
     this._subscription = this.responsive.observe('Web')
     .subscribe((result) => {
-      console.log('Web', result);
+      // console.log('Web', result);
+    });
+    Object.keys(mediaQueries).forEach(key => {
+      this.queries.push({
+        key,
+        mediaQuery: mediaQueries[key]
+      });
     });
-  }
-
-  ngOnInit() {
   }
 
   ngOnDestroy() {

src/app/components/responsive-demo/responsive-demo-01/responsive-demo-01.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { LyCommonModule } from '@alyle/ui';
 import { ResponsiveModule } from '@alyle/ui/responsive';
 import { ResponsiveDemo01Component } from './responsive-demo-01.component';
 
 @NgModule({
   imports: [
     CommonModule,
+    LyCommonModule,
     ResponsiveModule
   ],
   exports: [ResponsiveDemo01Component],

src/lib/core/public_api.ts

@@ -24,3 +24,4 @@ export * from './src/theme/theme.directive';
 export * from './src/theme/theme2.service';
 export * from './src/styles/core-styles';
 export * from './src/undefined';
+export * from './src/media/invert-media-query';

src/lib/core/src/media/invert-media-query.ts

@@ -0,0 +1,12 @@
+export enum InvertMediaQuery {
+  No,
+  Yes
+}
+
+export function transformMediaQuery(media: string, invertMediaQuery: InvertMediaQuery = InvertMediaQuery.No): string | string[] {
+  if (media && invertMediaQuery === InvertMediaQuery.Yes) {
+    const newVal = media.split(',').map(_ => `not ${_}`);
+    return newVal;
+  }
+  return media;
+}

src/lib/core/src/theme.service.ts

@@ -201,7 +201,7 @@ export interface StyleData {
 export interface DataStyle {
   id: string;
   styleElement: HTMLStyleElement;
-  style: MultipleStyles;
+  style: Style;
 }
 
 // export function isObject(item) {
@@ -212,6 +212,8 @@ export interface MultipleStyles {
   [key: string]: StyleContent;
 }
 
+export type Style = string | StyleContent | MultipleStyles;
+
 export function mergeDeep(...objects) {
   // const output = Object.assign({}, target);
   // if (isObject(target) && isObject(source)) {

src/lib/core/src/theme/core-theme.service.ts

@@ -1,8 +1,9 @@
 import { Injectable, Optional, Inject, Renderer2, RendererFactory2, isDevMode } from '@angular/core';
 import { THEME_CONFIG, ThemeConfig, THEME_CONFIG_EXTRA, LY_THEME_CONFIG, LyThemeConfig } from './theme-config';
 import { DOCUMENT } from '@angular/common';
-import { StyleContent, StyleData, DataStyle, MultipleStyles, mergeDeep } from '../theme.service';
+import { StyleContent, StyleData, DataStyle, Style, mergeDeep, MultipleStyles } from '../theme.service';
 import { Platform } from '../platform';
+import { InvertMediaQuery, transformMediaQuery } from '../media/invert-media-query';
 
 let classId = 0;
 
@@ -63,49 +64,61 @@ export class CoreTheme {
 
   setUpStyle(
     key: string,
-    styles: MultipleStyles,
-    _in?: any
+    styles: Style,
+    media?: string,
+    invertMediaQuery?: InvertMediaQuery
   ) {
-    return this._ĸreateStyle(key, styles, this._styleCoreMap, 'root', _in);
+    return this._ĸreateStyle(key, styles, this._styleCoreMap, 'root', this.primaryStyleContainer, media, invertMediaQuery);
   }
   setUpStyleSecondary(
     key: string,
-    styles: MultipleStyles
+    styles: Style,
+    media?: string,
+    invertMediaQuery?: InvertMediaQuery
   ) {
-    return this._ĸreateStyle(key, styles, this._styleCoreMap, 'root', this.secondaryStyleContainer);
+    return this._ĸreateStyle(key, styles, this._styleCoreMap, 'root', this.secondaryStyleContainer, media, invertMediaQuery);
   }
 
-  _ĸreateStyle(key, style: MultipleStyles, mapStyles: Map<string, DataStyle>, _for: string, _in?: any) {
+  _ĸreateStyle(key, style: Style, mapStyles: Map<string, DataStyle>, _for: string, _in: any, _media?: string, invertMediaQuery?: InvertMediaQuery) {
     if (mapStyles.has(key)) {
       return mapStyles.get(key).id;
     } else {
       const id = `k${(classId++).toString(36)}`;
       const styleElement = this.renderer.createElement('style');
-      const styleContent = this.renderer.createText(this._createStyleContent(style, id));
+      const media = transformMediaQuery(_media, invertMediaQuery);
+      const styleContent = this.renderer.createText(this._createStyleContent(style, id, media));
       this.renderer.appendChild(styleElement, styleContent);
-      this.renderer.appendChild(_in || this.primaryStyleContainer, styleElement);
+      this.renderer.appendChild(_in, styleElement);
       if (isDevMode()) {
-        this.renderer.setAttribute(styleElement, 'key', `${id}···${key}`, _for);
+        this.renderer.setAttribute(styleElement, 'style_data', `${_for}···${id}···${key}`);
       }
       const dataStyle = {
         id,
         style,
-        styleElement
+        styleElement,
+        media
       };
       mapStyles.set(key, dataStyle);
       return id;
     }
   }
 
   /** #style */
-  _createStyleContent(styles: MultipleStyles, id: string) {
+  _createStyleContent(styles: Style, id: string, media?: string | string[]) {
+    const typf = typeof styles;
+    if (typf === 'string') {
+      return toMedia(`.${id}{${styles}}`, media);
+    } else if (typf === 'function') {
+      return toMedia(`.${id}{${(styles as StyleContent)()}}`, media);
+    }
     let content = '';
     // tslint:disable-next-line:forin
-    for (const key$ in styles) {
-      const fn = styles[key$];
-      content += `.${id}${key$}{${fn()}}`;
+    for (const key$ in styles as MultipleStyles) {
+      const val = styles[key$];
+      const text = typeof val === 'function' ? val() : val;
+      content += `.${id}${key$}{${text}}`;
     }
-    return content;
+    return toMedia(content, media);
   }
 
   private setCoreStyle() {
@@ -125,3 +138,19 @@ export class CoreTheme {
   }
 
 }
+
+/**
+ * Converter to media query if `media` is present
+ * @param text style content
+ * @param media media query
+ */
+function toMedia(text: string, media?: string | string[]) {
+  if (typeof media === 'string') {
+    return `@media ${media}{${text}}`;
+  } else if (Array.isArray(media)) {
+    let result = '';
+    media.forEach(_ => result += `@media ${_}{${text}}`);
+    return result;
+  }
+  return text;
+}

src/lib/core/src/theme/theme.directive.ts

@@ -37,7 +37,7 @@ export class LyThemeContainer implements OnInit {
   }
 
   private _setContainerStyle(element, renderer: Renderer2) {
-    const classname = this.theme.setUpStyle(`theme:${this.theme.config}`, {
+    const classname = this.theme.setUpStyle(`theme:${this.theme.config.name}`, {
       '': () => (
         `background-color:${this.theme.config.background.primary};` +
         `color:${this.theme.config.text.default};` +

src/lib/core/src/theme/theme2.service.ts

@@ -3,6 +3,7 @@ import { ThemeConfig } from './theme-config';
 import { CoreTheme } from './core-theme.service';
 import { MultipleStyles, DataStyle } from '../theme.service';
 import { LyThemeContainer } from './theme.directive';
+import { InvertMediaQuery } from '../media/invert-media-query';
 
 @Injectable()
 export class LyTheme2 {
@@ -15,17 +16,20 @@ export class LyTheme2 {
   setUpStyle(
     key: string,
     styles: MultipleStyles,
-    _in?: any
+    media?: string,
+    invertMediaQuery?: InvertMediaQuery
   ) {
     const name = this.config.name;
-    return this.core._ĸreateStyle(key, styles, this._styleMap, name, _in);
+    return this.core._ĸreateStyle(key, styles, this._styleMap, name, this.core.primaryStyleContainer, media, invertMediaQuery);
   }
   setUpStyleSecondary(
     key: string,
-    styles: MultipleStyles
+    styles: MultipleStyles,
+    media?: string,
+    invertMediaQuery?: InvertMediaQuery
   ) {
     const name = this.config.name;
-    return this.core._ĸreateStyle(key, styles, this._styleMap, name, this.core.secondaryStyleContainer);
+    return this.core._ĸreateStyle(key, styles, this._styleMap, name, this.core.secondaryStyleContainer, media, invertMediaQuery);
   }
   colorOf(value: string): string {
     return get(this.config, value);

src/lib/flex/flex.directive.ts

@@ -1,5 +1,6 @@
-import { Directive, Input, OnChanges, SimpleChanges, Renderer2, ElementRef, isDevMode } from '@angular/core';
+import { Directive, Input, OnChanges, SimpleChanges, Renderer2, ElementRef, isDevMode, Inject } from '@angular/core';
 import { CoreTheme, Undefined } from '@alyle/ui';
+import { LY_MEDIA_QUERIES } from '@alyle/ui/responsive';
 
 enum __align {
   flex,
@@ -28,7 +29,9 @@ export type FxJustifyContent = 'start' | 'end' | 'center' | 'between' | 'around'
 export type FxAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | null;
 export type FxAlignContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch' | null;
 export type FxAlignItemsAndContent = 'start' | 'center' | 'end' | 'stretch' | null;
-
+/**
+ * TODO: remove array type, FxAlign = string;
+ */
 export type FxAlign = [FxJustifyContent] | [FxJustifyContent, FxAlignItemsAndContent] | [FxJustifyContent, FxAlignItems, FxAlignContent] | string;
 
 @Directive({
@@ -49,6 +52,10 @@ export class LyFlex implements OnChanges {
   private fxWrapClass: string;
   private _currentClassname: string;
 
+  @Input()
+  set fx(val: string) {
+    // code
+  }
   @Input()
   set fxDisplay(val: 'flex' | 'inline') {
     if (this._fxDisplay !== val) {
@@ -150,6 +157,7 @@ export class LyFlex implements OnChanges {
     return this._fxWrap;
   }
   constructor(
+    @Inject(LY_MEDIA_QUERIES) private mediaQueries: { [key: string]: string; },
     private renderer: Renderer2,
     private elementRef: ElementRef,
     private coreTheme: CoreTheme

src/lib/responsive/media-queries.ts

@@ -1,16 +1,38 @@
-export const MediaQueries = {
-  Handset: '(max-width: 599px) and (orientation: portrait), ' +
-           '(max-width: 959px) and (orientation: landscape)',
-  Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
-          '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
-  Web: '(min-width: 840px) and (orientation: portrait), ' +
-       '(min-width: 1280px) and (orientation: landscape)',
+export const Breakpoints = {
+  XSmall: 'screen and (max-width: 599px)',
+  Small: 'screen and (min-width: 600px) and (max-width: 959px)',
+  Medium: 'screen and (min-width: 960px) and (max-width: 1279px)',
+  Large: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+  XLarge: 'screen and (min-width: 1920px)',
+
+  Handset: 'screen and (max-width: 599px) and (orientation: portrait), ' +
+           'screen and (max-width: 959px) and (orientation: landscape)',
+  Tablet: 'screen and (min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
+          'screen and (min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
+  Web: 'screen and (min-width: 840px) and (orientation: portrait), ' +
+       'screen and (min-width: 1280px) and (orientation: landscape)',
 
-  HandsetPortrait: '(max-width: 599px) and (orientation: portrait)',
-  TabletPortrait: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
-  WebPortrait: '(min-width: 840px) and (orientation: portrait)',
+  HandsetPortrait: 'screen and (max-width: 599px) and (orientation: portrait)',
+  TabletPortrait: 'screen and (min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
+  WebPortrait: 'screen and (min-width: 840px) and (orientation: portrait)',
 
-  HandsetLandscape: '(max-width: 959px) and (orientation: landscape)',
-  TabletLandscape: '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
-  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
+  HandsetLandscape: 'screen and (max-width: 959px) and (orientation: landscape)',
+  TabletLandscape: 'screen and (min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
+  WebLandscape: 'screen and (min-width: 1280px) and (orientation: landscape)',
+};
+
+export const MediaQueries = {
+  'xs': 'screen and (max-width: 599px)',
+  'sm': 'screen and (min-width: 600px) and (max-width: 959px)',
+  'md': 'screen and (min-width: 960px) and (max-width: 1279px)',
+  'lg': 'screen and (min-width: 1280px) and (max-width: 1919px)',
+  'xl': 'screen and (min-width: 1920px) and (max-width: 5000px)',
+  'lt-sm': 'screen and (max-width: 599px)',
+  'lt-md': 'screen and (max-width: 959px)',
+  'lt-lg': 'screen and (max-width: 1279px)',
+  'lt-xl': 'screen and (max-width: 1919px)',
+  'gt-xs': 'screen and (min-width: 600px)',
+  'gt-sm': 'screen and (min-width: 960px)',
+  'gt-md': 'screen and (min-width: 1280px)',
+  'gt-lg': 'screen and (min-width: 1920px)'
 };