ng-kinintel 0.0.317

package/src/lib/components/dashboard-editor/dashboard-editor.component.sass

@@ -0,0 +1,247 @@
+h2.dashboard-title
+    margin-bottom: 0
+
+.title-input
+    min-width: 300px
+
+.whitesmoke
+    background-color: whitesmoke
+
+.data-actions
+    display: flex
+    align-items: center
+    button
+        min-width: 50px
+        padding: 0 13px
+        color: #505050
+        mat-icon
+            font-size: 20px
+            width: 20px
+            height: 23px
+            line-height: 20px
+    .divider
+        margin: 0 .5rem 0 .5rem
+        width: 1px
+        height: 36px
+        background-color: #ddd
+
+
+ki-item-component
+    display: flex
+    align-items: center
+    flex-direction: column
+    height: 100%
+    &.alert
+        padding-top: 2rem
+
+mat-drawer-container
+    height: 100%
+    background-color: transparent !important
+    padding: 1rem
+
+.configure-dialog
+    display: flex
+    height: 100vh
+    flex-direction: column
+
+.grid-stack-item
+    .grid-stack-item-content
+        //border: 1px solid #e8e8e8
+        border-radius: .5rem
+        position: relative
+        .item-disabled
+            display: none
+        .edit-widget
+            position: absolute
+            right: .5rem
+            top: .5rem
+            z-index: 9999
+        .alert-widget
+            position: absolute
+            top: 0
+            left: 0
+            right: 0
+            background-color: #d01212
+            display: flex
+            align-items: center
+            color: white
+            cursor: pointer
+            padding-right: 1.5rem
+            overflow: hidden
+            white-space: nowrap
+            z-index: 99
+            .alert-summaries
+                overflow: hidden
+                text-overflow: ellipsis
+        &.alert
+            box-shadow: 0 0 6px 0 rgba(194, 13, 13)
+            .edit-widget
+                color: white
+        &::-webkit-scrollbar
+            width: 0.5em
+            height: 0.5em
+            background: transparent
+        &::-webkit-scrollbar-thumb
+            background: #d3d3d3
+        &:hover
+            .remove-widget, .edit-widget
+                display: block
+    &.item-disabled
+        .grid-stack-item-content
+            background-color: #e1e1e1
+            .config-button
+                display: none
+            .item-disabled
+                margin-top: -1rem
+                display: block
+                width: 75%
+                color: #b1b1b1
+                font-size: 1.2rem
+                font-weight: 500
+                text-align: center
+                mat-icon
+                    font-size: 40px
+                    width: 40px
+                    height: 40px
+                p
+                    margin: 0
+                .disabled-notice
+                    font-weight: 400
+                    font-size: 1.1rem
+            .item-container, .item-title
+                display: none
+
+
+.grid-container
+    height: calc(100%  - 93px)
+    .right-panel
+        width: 250px
+        display: none
+        &.show
+            display: block
+        .available-widgets
+            text-transform: uppercase
+            font-size: .75rem
+            color: #4c4c4c
+            font-weight: 500
+            letter-spacing: 1px
+        .draggable-toolbar
+            width: 100%
+            display: flex
+            padding: 1rem 1rem 0 1rem
+            cursor: default
+            flex-wrap: wrap
+            justify-content: space-between
+            .grid-stack-item
+                margin-bottom: 1rem
+                .grid-stack-item-content
+                    display: flex
+                    align-items: center
+                    justify-content: center
+                    width: 100px
+                    height: 78px
+                    flex-direction: column
+                    background-color: white
+                    box-shadow: none
+                    .item-disabled
+                        display: none
+.action-toolbar
+    display: flex
+    align-items: center
+    justify-content: space-between
+    padding: 1rem .5rem
+
+.dashboard-parameters
+    display: flex
+    align-items: center
+    .list-title
+        text-transform: uppercase
+        font-size: .75rem
+        padding: 0 1rem 0 .5rem
+        border-right: 2px solid #ddd
+        color: #4c4c4c
+        font-weight: 500
+        letter-spacing: 1px
+    .divider
+        width: 1px
+        height: 20px
+        background-color: #e0e0e0
+        align-self: center
+
+    label
+        flex-direction: row
+        align-items: center
+        margin-left: 1rem
+        .parameter-input
+            //background-color: #eaeaea
+            border-radius: 4px
+            padding-left: .5rem
+            height: 36px
+            display: flex
+            align-items: center
+            .param-period-picker
+                padding: 5px
+            button
+                color: #8e8e8e
+                &.edit-parameter
+                    visibility: hidden
+                &.mat-icon-button
+                    width: 30px
+                    height: 30px
+                    line-height: 30px
+                    align-self: center
+                    mat-icon
+                        font-size: 20px
+                        width: 20px
+                        height: 20px
+                        line-height: 20px
+            input
+                font-size: .9rem
+                padding: .25rem .45rem
+                width: 175px
+            &:hover
+                .edit-parameter
+                    visibility: visible
+
+.dashboard-editor-panel
+    width: 300px
+    background-color: whitesmoke
+    .panel-head
+        display: flex
+        align-items: center
+        padding: .5rem .5rem .5rem 1rem
+        border-bottom: 1px solid #e8e8e8
+        margin-bottom: 1rem
+        justify-content: space-between
+        p
+            margin: 0
+            text-transform: uppercase
+            font-size: 1.1rem
+            font-weight: 300
+
+.badge-holder
+    display: flex
+    align-items: center
+    margin: .25rem 0
+    .badge-item
+        display: flex
+        align-items: center
+        background-color: #efefef
+        padding-left: 1rem
+        border-radius: 20px
+        &.outline
+            background-color: white
+            border: 1px solid #efefef
+        span
+            margin-right: .5rem
+            color: rgba(0,0,0,0.54)
+        button.mat-icon-button
+            width: 33px
+            height: 33px
+            line-height: 33px
+            mat-icon
+                font-size: 20px
+                height: 20px
+                width: 20px
+                line-height: 20px
+                color: rgba(0,0,0,0.54)

package/src/lib/components/dashboard-editor/dashboard-editor.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardEditorComponent } from './dashboard-editor.component';
+
+describe('DashboardEditorComponent', () => {
+  let component: DashboardEditorComponent;
+  let fixture: ComponentFixture<DashboardEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardEditorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});