yokoishioka

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

img {
    width: inherit;

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

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 { Injectable, Input } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { ScreenSize, DetectType } from './devices';

@Injectable({
  providedIn: 'root'
})
export class DevicesService {
  screenSize: Subject<any> = new Subject();
  @Input() detectSize: DetectType;

yokoishioka

<div cesDeviceScreenSize>
  <div *ngIf="showMenuContent" [ngClass]="{'slide-down': this.allowToggle}" class="menu-container">
    <ces-button title="close {{ menuTitle }}" class="button-icon-only menu-button-close" (click)="closeMenu()">
      <ces-svg-x-circle class="menu-icon-close"></ces-svg-x-circle>
    </ces-button>
    <div class="menu-content" (click)="toggleNav()">
      <ng-content></ng-content>
    </div>
  </div>
    <ces-button *ngIf="showMenuButton" title="open {{ menuTitle }}" class="button-icon-only menu-button-open fade-in" (click)="openMenu()">

yokoishioka

import { Directive, HostListener, ElementRef, Renderer2, Output, EventEmitter, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { EditUpdate } from '../forms';

@Directive({
  selector: '[cesClickEdit]'
})

export class ClickEditDirective {
  value: string;

yokoishioka

import { Injectable, ErrorHandler } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SvgsApiService implements ErrorHandler {

yokoishioka

<nav>
    <ces-menu-toggle class="nav-buttons align-left" menuTitle="navigation" toggleIcon="ellipsis-vertical">
        <ces-button-route *ngFor="let button of buttons" [link]="button.path" [title]="button.title" [label]="button.label" [icon]="button.icon" [activeSelfOnly]="button.activeSelfOnly" class="nav-button">
        </ces-button-route>
    </ces-menu-toggle>
</nav>

yokoishioka

.log {
    .header {
        display: flex;
        justify-content: space-between;
    }

    .body {
        position: absolute;
        height: 50vh;
        width: 100%;