From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 .../components/svg-icons-table.component.ts        | 189 +++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 stories/ng2-component-lab/components/svg-icons-table.component.ts

(limited to 'stories/ng2-component-lab/components/svg-icons-table.component.ts')

diff --git a/stories/ng2-component-lab/components/svg-icons-table.component.ts b/stories/ng2-component-lab/components/svg-icons-table.component.ts
new file mode 100644
index 0000000..732650d
--- /dev/null
+++ b/stories/ng2-component-lab/components/svg-icons-table.component.ts
@@ -0,0 +1,189 @@
+import { Component } from "@angular/core";
+import { Mode, Placement, Size } from "../../../src/angular/common/enums";
+import { SvgIconComponent } from "../../../src/angular/svg-icon/svg-icon.component";
+import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../../src/angular/form-elements/dropdown/dropdown-models";
+
+const options1: IDropDownOption[] = [
+    {
+        label: 'First Option',
+        value: 'First Option',
+    },
+    {
+        label: 'Second Option',
+        value: 'Second Option',
+    },
+    {
+        label: 'Third Option',
+        value: 'Third Option',
+        type: DropDownOptionType.Simple
+    }
+];
+
+@Component({
+    selector: "svg-icons-table",
+    template: `
+        <div class="icon-showcase">
+            <div>
+                <svg-icon [name]="selectedIcon" [mode]="defaultIconSettings.mode" [size]="defaultIconSettings.size"></svg-icon>
+                Selected icon: <b *ngIf="selectedIcon">{{selectedIcon}}</b><i *ngIf="!selectedIcon">None</i>
+            </div>
+
+            <div class="icon-options-wrapper">
+
+                <div class="icon-options">
+                    <div class="icon-options-dropdowns">
+                        <sdc-dropdown label="Mode" [selectedOption]="{'value': mode, 'label': mode}" [options]="modeOptions" (changed)="mode = $event.value"></sdc-dropdown>
+                        <sdc-dropdown label="Label Placement" [selectedOption]="{'value': labelPlacement, 'label': labelPlacement}" [options]="labelPlacementOptions" [selectedOption]="labelPlacement" (changed)="labelPlacement = $event.value"></sdc-dropdown>
+                        <sdc-dropdown label="Size" [selectedOption]="{'value': size, 'label': size}" [options]="sizeOptions" [selectedOption]="size" (changed)="size = $event.value"></sdc-dropdown>
+                    </div>
+                    <div class="icon-options-checkboxes-wrapper">
+                        <div class="icon-options-checkboxes">
+                            <sdc-checkbox label="Clickable" [checked]="clickable" (checkedChange)="clickable = $event"></sdc-checkbox>
+                            <sdc-checkbox label="Disabled" [checked]="disabled" (checkedChange)="disabled = $event"></sdc-checkbox>
+                        </div>
+                        <div class="icon-options-label">
+                            <sdc-input label="Label" [(value)]="label"></sdc-input>
+                        </div>
+                        <svg-icon-label [name]="selectedIcon" [mode]="mode" [size]="size" [clickable]="clickable" [disabled]="disabled" [label]="label" [labelPlacement]="labelPlacement"></svg-icon-label>
+                    </div>
+                </div>
+
+                <div class="icon-code">
+                    <pre>
+                        &lt;svg-icon-label
+                            [name]="{{selectedIcon}}"
+                            [mode]="{{mode}}"
+                            [size]="{{size}}"
+                            [clickable]="{{clickable}}"
+                            [disabled]="{{disabled}}"
+                            [label]="{{label}}"
+                            [labelPlacement]="{{labelPlacement}}"&gt;
+                        &lt;/svg-icon-label&gt;
+                    </pre>
+                </div>
+            </div>
+
+        </div>
+        <div class="svg-icons-table">
+            <div *ngFor="let iconName of iconsNames" class="svg-icon-cell" [ngClass]="{'selected': selectedIcon === iconName}" (click)="selectIcon(iconName)">
+                <svg-icon-label [name]="iconName" [label]="iconName" labelPlacement="right"></svg-icon-label>
+            </div>
+        </div>
+`,
+    styles: [`
+    .svg-icons-table {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        align-items: stretch;
+        overflow-y: auto;
+    }
+    .svg-icons-table .svg-icon-cell {
+        border: 1px solid #999;
+        padding: 5px;
+        margin: 5px;
+        width: 250px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+    .svg-icons-table .svg-icon-cell.selected {
+        border-color: #1eb9f3;
+        background-color: #1eb9f3;
+    }
+    .icon-showcase {
+        margin: 20px 10px;
+        padding: 10px;
+        border: 1px solid #999;
+        background: #eee;
+    }
+    .icon-options-wrapper {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        margin-top: 10px;
+    }
+
+    .icon-options-checkboxes-wrapper {
+        display: flex;
+        flex-flow: row;
+        margin-top: 10px;
+    }
+
+    .icon-options-checkboxes {
+        margin-top: 27px;
+        margin-right: 30px;
+    }
+
+    .icon-options-label {
+        margin-right: 30px;
+    }
+
+    .icon-code pre {
+        user-select: text;
+    }
+
+    sdc-dropdown {
+        display: inline-block;
+        min-width: 160px;
+    }
+
+    sdc-dropdown .sdc-dropdown {
+    }
+`]
+})
+export class SvgIconsTableComponent {
+    public iconsNames: string[];
+    public selectedIcon: string;
+
+    public modeOptions;
+    public sizeOptions;
+    public labelPlacementOptions;
+
+    private mode: Mode;
+    private size: Size;
+    private labelPlacement: Placement;
+    private clickable: boolean;
+    private disabled: boolean;
+    private label: string;
+
+    private defaultIconSettings: {mode: Mode, size: Size};
+
+    constructor() {
+        this.iconsNames = Object.keys(SvgIconComponent.Icons);
+        this.mode = null;
+        this.size = Size.medium;
+        this.clickable = false;
+        this.disabled = false;
+        this.defaultIconSettings = { mode: Mode.info, size: Size.small };
+
+        this.modeOptions = [{value: null, label: 'NONE'}].concat(Object.keys(Mode).map((modeKey) => ({
+            value: modeKey,
+            label: Mode[modeKey]
+        })));
+
+        this.sizeOptions = Object.keys(Size).map((sizeKey) => ({
+            value: sizeKey,
+            label: Size[sizeKey]
+        }));
+
+        this.labelPlacementOptions = Object.keys(Placement).map((placementKey) => ({
+            value: placementKey,
+            label: Placement[placementKey]
+        }));
+
+        this.setDefaults();
+    }
+
+    private setDefaults = (): void => {
+        this.label = 'Some label';
+        this.selectedIcon = "attachment";
+        this.mode = Mode.primary;
+        this.labelPlacement = Placement.right;
+    }
+
+    public selectIcon(iconName) {
+        this.selectedIcon = iconName;
+    }
+}
-- 
cgit 1.2.3-korg