yokoishioka

import { Directive, HostListener } from '@angular/core';
import { DevicesService } from './devices.service';

@Directive({
  selector: '[cesDeviceScreenSize]'
})
export class DeviceScreenSizeDirective {
  constructor(
    private devices: DevicesService
  ) { }

yokoishioka

import { Directive, HostListener } from '@angular/core';
import { DevicesService } from './devices.service';

@Directive({
  selector: '[cesDeviceScreenSize]'
})
export class DeviceScreenSizeDirective {
  constructor(
    private devices: DevicesService
  ) { }

yokoishioka

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ces-svg',
  template: `
    <img src="/assets/images/svgs/{{ type }}.svg" [alt]="type + ' icon'" [title]="title">
  `,
  styleUrls: [
    './svg.component.scss'
  ]

yokoishioka

svg {
    width: inherit;
    height: inherit;
    fill: inherit;
    background: inherit;
    background-color: inherit;
}

img {
    width: inherit;

yokoishioka

import { Component } from '@angular/core';

@Component({
  selector: 'ces-svg-astronaut',
  templateUrl: '../../../../../../src/assets/images/svgs/astronaut.svg',
  styleUrls: ['../../svg.component.scss']
})
export class SvgAstronautComponent  {

  constructor() { }

yokoishioka

@import "src/assets/styles/variables.scss";

button {
    font-size: inherit;
    background: inherit;
    color: inherit;
    text-align: center;
    padding: 0.5em 1.0em;
    border: 1px solid;
    border-radius: $border-radius;

yokoishioka

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ces-button',
  templateUrl: './button.component.html',
  styleUrls: [
    './button.component.scss'
 ]
})

yokoishioka

<ces-button type="button" class="no-border no-padding" (click)="onClose()">
  <span *ngIf="label" class="label">{{ label }}</span>
  <img *ngIf="showIcon" src="/assets/svgs/button-close.png" alt="button that hides its parent">
  <ng-content></ng-content>
</ces-button>

yokoishioka

import { Component, Input, Renderer2, ElementRef, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'ces-button-hide-parent',
  templateUrl: './button-hide-parent.component.html',
  styleUrls: ['./button-hide-parent.component.scss']
})
export class ButtonHideParentComponent  {
  @Input() showIcon: boolean;
  @Input() label:string;

yokoishioka

<button [ngClass]="class" [disabled]="disabled">
    <ng-content></ng-content>
    <ces-svg *ngIf="icon" [type]="icon"></ces-svg>
    <span *ngIf="label">{{ label }}</span>
</button>