blob: 138bb8288650099dc3f9f43df7db226961b52769 [file] [log] [blame]
Sean Condon83fc39f2018-04-19 18:56:13 +01001/*
Sean Condon5ca00262018-09-06 17:55:25 +01002 * Copyright 2018-present Open Networking Foundation
Sean Condon83fc39f2018-04-19 18:56:13 +01003 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
Sean Condon28ecc5f2018-06-25 12:50:16 +010016import { Component, OnInit, OnChanges, Input } from '@angular/core';
Sean Condon83fc39f2018-04-19 18:56:13 +010017import { IconService, glyphMapping } from '../icon.service';
Sean Condon5ca00262018-09-06 17:55:25 +010018import { LogService } from '../../log.service';
Sean Condon83fc39f2018-04-19 18:56:13 +010019
20/**
21 * Icon Component
22 *
23 * Note: This is an alternative to the Icon Directive from ONOS 1.0.0
24 * It has been implemented as a Component because it was inadvertently adding
25 * in a template through d3 DOM manipulations - it's better to make it a Comp
Sean Condon7d275162018-11-02 16:29:06 +000026 * and build a template the Angular 7 way
Sean Condon83fc39f2018-04-19 18:56:13 +010027 *
28 * Remember: The CSS files applied here only apply to this component
29 */
30@Component({
31 selector: 'onos-icon',
32 templateUrl: './icon.component.html',
Sean Condon2bd11b72018-06-15 08:00:48 +010033 styleUrls: [
34 './icon.component.css', './icon.theme.css',
35 './glyph.css', './glyph-theme.css',
Sean Condon91481822019-01-01 13:56:14 +000036 './tooltip.css', './button-theme.css'
Sean Condon2bd11b72018-06-15 08:00:48 +010037 ]
Sean Condon83fc39f2018-04-19 18:56:13 +010038})
Sean Condonc687ccb2019-10-25 12:27:54 +010039export class IconComponent implements OnChanges {
Sean Condon83fc39f2018-04-19 18:56:13 +010040 @Input() iconId: string;
Sean Condon2bd11b72018-06-15 08:00:48 +010041 @Input() iconSize: number = 20;
42 @Input() toolTip: string = undefined;
43 @Input() classes: string = undefined;
44
45 // The displayed tooltip - undefined until mouse hovers over, then equals toolTip
46 toolTipDisp: string = undefined;
Sean Condon83fc39f2018-04-19 18:56:13 +010047
48 constructor(
49 private is: IconService,
50 private log: LogService
51 ) {
52 // Note: iconId is not available until initialization
Sean Condon83fc39f2018-04-19 18:56:13 +010053 }
54
Sean Condon28ecc5f2018-06-25 12:50:16 +010055 /**
Sean Condon28ecc5f2018-06-25 12:50:16 +010056 * This is needed in case the iconId changes while icon component
57 * is displayed on screen.
58 */
59 ngOnChanges() {
60 this.is.loadIconDef(this.iconId);
61 }
Sean Condon83fc39f2018-04-19 18:56:13 +010062}