@netgrif/components 6.1.1 → 6.2.0-rc.1

package/lib/admin/admin.module.d.ts

@@ -4,8 +4,9 @@ import * as i2 from "./ldap-group-role-assignment/ldap-group-role-assignment.com
 import * as i3 from "./user-invite/user-invite.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@netgrif/components-core";
+import * as i6 from "@angular/material/form-field";
 export declare class AdminComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AdminComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AdminComponentModule, [typeof i1.RoleAssignmentComponent, typeof i2.LdapGroupRoleAssignmentComponent, typeof i3.UserInviteComponent], [typeof i4.CommonModule, typeof i5.MaterialModule, typeof i5.TranslateLibModule], [typeof i1.RoleAssignmentComponent, typeof i2.LdapGroupRoleAssignmentComponent, typeof i3.UserInviteComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdminComponentModule, [typeof i1.RoleAssignmentComponent, typeof i2.LdapGroupRoleAssignmentComponent, typeof i3.UserInviteComponent], [typeof i4.CommonModule, typeof i5.MaterialModule, typeof i5.TranslateLibModule, typeof i6.MatFormFieldModule], [typeof i1.RoleAssignmentComponent, typeof i2.LdapGroupRoleAssignmentComponent, typeof i3.UserInviteComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AdminComponentModule>;
 }

package/lib/data-fields/button-field/button-field.component.d.ts

@@ -1,9 +1,13 @@
+import { OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { AbstractButtonFieldComponent, DialogService } from '@netgrif/components-core';
 import * as i0 from "@angular/core";
-export declare class ButtonFieldComponent extends AbstractButtonFieldComponent {
+export declare class ButtonFieldComponent extends AbstractButtonFieldComponent implements OnInit {
     protected dialogService: DialogService;
+    align: string;
+    stretch: string;
     constructor(translate: TranslateService, dialogService: DialogService, informAboutInvalidData: boolean | null);
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonFieldComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ButtonFieldComponent, "nc-button-field", never, {}, {}, never, never>;
 }

package/lib/header/header.module.d.ts

@@ -8,8 +8,9 @@ import * as i6 from "@angular/common";
 import * as i7 from "@netgrif/components-core";
 import * as i8 from "@angular/flex-layout";
 import * as i9 from "@angular-material-components/datetime-picker";
+import * as i10 from "@angular/material/form-field";
 export declare class HeaderComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<HeaderComponentModule, [typeof i1.HeaderComponent, typeof i2.SortModeComponent, typeof i3.SearchModeComponent, typeof i4.EditModeComponent, typeof i5.LoadingModeComponent], [typeof i6.CommonModule, typeof i7.MaterialModule, typeof i8.FlexModule, typeof i7.TranslateLibModule, typeof i7.MaterialModule, typeof i9.NgxMatDatetimePickerModule], [typeof i1.HeaderComponent, typeof i2.SortModeComponent, typeof i3.SearchModeComponent, typeof i4.EditModeComponent, typeof i5.LoadingModeComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HeaderComponentModule, [typeof i1.HeaderComponent, typeof i2.SortModeComponent, typeof i3.SearchModeComponent, typeof i4.EditModeComponent, typeof i5.LoadingModeComponent], [typeof i6.CommonModule, typeof i7.MaterialModule, typeof i8.FlexModule, typeof i7.TranslateLibModule, typeof i7.MaterialModule, typeof i9.NgxMatDatetimePickerModule, typeof i10.MatFormFieldModule], [typeof i1.HeaderComponent, typeof i2.SortModeComponent, typeof i3.SearchModeComponent, typeof i4.EditModeComponent, typeof i5.LoadingModeComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<HeaderComponentModule>;
 }

package/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.d.ts

@@ -0,0 +1,15 @@
+import { Router } from '@angular/router';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { ConfigurationService, LanguageService, LoggerService, UserService, AbstractNavigationDoubleDrawerComponent } from 'netgrif-components-core';
+import * as i0 from "@angular/core";
+export declare class NavigationDoubleDrawerComponent extends AbstractNavigationDoubleDrawerComponent {
+    protected _router: Router;
+    protected _breakpoint: BreakpointObserver;
+    protected _languageService: LanguageService;
+    protected _userService: UserService;
+    protected _log: LoggerService;
+    protected _config: ConfigurationService;
+    constructor(_router: Router, _breakpoint: BreakpointObserver, _languageService: LanguageService, _userService: UserService, _log: LoggerService, _config: ConfigurationService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationDoubleDrawerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationDoubleDrawerComponent, "nc-navigation-double-drawer", never, {}, {}, never, ["*"]>;
+}

package/lib/navigation/navigation.module.d.ts

@@ -8,21 +8,22 @@ import * as i5 from "./group-navigation-component-resolver/default-components/de
 import * as i6 from "./group-navigation-component-resolver/default-components/default-tabbed-task-view/default-tabbed-task-view.component";
 import * as i7 from "./group-navigation-component-resolver/default-components/default-tabbed-case-view/default-tabbed-case-view.component";
 import * as i8 from "./group-navigation-component-resolver/default-components/default-tab-view/default-tab-view.component";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/router";
-import * as i11 from "@netgrif/components-core";
-import * as i12 from "@angular/flex-layout";
-import * as i13 from "./quick-panel/quick-panel.module";
-import * as i14 from "../user/user.module";
-import * as i15 from "angular-resizable-element";
-import * as i16 from "@angular/material/progress-spinner";
-import * as i17 from "../search/search.module";
-import * as i18 from "../header/header.module";
-import * as i19 from "../panel/panel.module";
-import * as i20 from "../tabs/tabs.module";
-import * as i21 from "../view/case-view/case-view.module";
+import * as i9 from "./navigation-double-drawer/navigation-double-drawer.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@angular/router";
+import * as i12 from "@netgrif/components-core";
+import * as i13 from "@angular/flex-layout";
+import * as i14 from "./quick-panel/quick-panel.module";
+import * as i15 from "../user/user.module";
+import * as i16 from "angular-resizable-element";
+import * as i17 from "@angular/material/progress-spinner";
+import * as i18 from "../search/search.module";
+import * as i19 from "../header/header.module";
+import * as i20 from "../panel/panel.module";
+import * as i21 from "../tabs/tabs.module";
+import * as i22 from "../view/case-view/case-view.module";
 export declare class NavigationComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NavigationComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NavigationComponentModule, [typeof i1.NavigationDrawerComponent, typeof i2.NavigationRailComponent, typeof i3.NavigationTreeComponent, typeof i4.GroupNavigationComponentResolverComponent, typeof i5.DefaultSimpleTaskViewComponent, typeof i6.DefaultTabbedTaskViewComponent, typeof i7.DefaultTabbedCaseViewComponent, typeof i8.DefaultTabViewComponent], [typeof i9.CommonModule, typeof i10.RouterModule, typeof i11.MaterialModule, typeof i12.FlexModule, typeof i12.FlexLayoutModule, typeof i13.QuickPanelComponentModule, typeof i11.TranslateLibModule, typeof i14.UserComponentModule, typeof i15.ResizableModule, typeof i16.MatProgressSpinnerModule, typeof i17.SearchComponentModule, typeof i18.HeaderComponentModule, typeof i19.PanelComponentModule, typeof i20.TabsComponentModule, typeof i21.CaseViewComponentModule], [typeof i1.NavigationDrawerComponent, typeof i2.NavigationRailComponent, typeof i3.NavigationTreeComponent, typeof i4.GroupNavigationComponentResolverComponent, typeof i5.DefaultSimpleTaskViewComponent, typeof i6.DefaultTabbedTaskViewComponent, typeof i7.DefaultTabbedCaseViewComponent, typeof i8.DefaultTabViewComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NavigationComponentModule, [typeof i1.NavigationDrawerComponent, typeof i2.NavigationRailComponent, typeof i3.NavigationTreeComponent, typeof i4.GroupNavigationComponentResolverComponent, typeof i5.DefaultSimpleTaskViewComponent, typeof i6.DefaultTabbedTaskViewComponent, typeof i7.DefaultTabbedCaseViewComponent, typeof i8.DefaultTabViewComponent, typeof i9.NavigationDoubleDrawerComponent], [typeof i10.CommonModule, typeof i11.RouterModule, typeof i12.MaterialModule, typeof i13.FlexModule, typeof i13.FlexLayoutModule, typeof i14.QuickPanelComponentModule, typeof i12.TranslateLibModule, typeof i15.UserComponentModule, typeof i16.ResizableModule, typeof i17.MatProgressSpinnerModule, typeof i18.SearchComponentModule, typeof i19.HeaderComponentModule, typeof i20.PanelComponentModule, typeof i21.TabsComponentModule, typeof i22.CaseViewComponentModule], [typeof i1.NavigationDrawerComponent, typeof i9.NavigationDoubleDrawerComponent, typeof i2.NavigationRailComponent, typeof i3.NavigationTreeComponent, typeof i4.GroupNavigationComponentResolverComponent, typeof i5.DefaultSimpleTaskViewComponent, typeof i6.DefaultTabbedTaskViewComponent, typeof i7.DefaultTabbedCaseViewComponent, typeof i8.DefaultTabViewComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NavigationComponentModule>;
 }

package/lib/navigation/public-api.d.ts

@@ -2,6 +2,7 @@ export * from './quick-panel/public-api';
 export * from './navigation.module';
 export * from './navigation-tree/navigation-tree.component';
 export * from './navigation-drawer/navigation-drawer.component';
+export * from './navigation-double-drawer/navigation-double-drawer.component';
 export * from './navigation-rail/navigation-rail.component';
 export * from './group-navigation-component-resolver/group-navigation-component-resolver.component';
 export * from './group-navigation-component-resolver/default-components/default-simple-task-view/default-simple-task-view.component';

package/lib/side-menu/content-components/filter-selector/side-menu-filter-selector-component.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./filter-selector.component";
 import * as i2 from "./filter-selector-list-item/filter-selector-list-item.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@netgrif/components-core";
+import * as i5 from "@angular/material/form-field";
 export declare class SideMenuFilterSelectorComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SideMenuFilterSelectorComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SideMenuFilterSelectorComponentModule, [typeof i1.FilterSelectorComponent, typeof i2.FilterSelectorListItemComponent], [typeof i3.CommonModule, typeof i4.MaterialModule, typeof i4.TranslateLibModule], [typeof i1.FilterSelectorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SideMenuFilterSelectorComponentModule, [typeof i1.FilterSelectorComponent, typeof i2.FilterSelectorListItemComponent], [typeof i3.CommonModule, typeof i4.MaterialModule, typeof i4.TranslateLibModule, typeof i5.MatFormFieldModule], [typeof i1.FilterSelectorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SideMenuFilterSelectorComponentModule>;
 }

package/lib/side-menu/content-components/option-selector/side-menu-option-selector-component.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./option-selector.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@netgrif/components-core";
+import * as i4 from "@angular/material/form-field";
 export declare class SideMenuOptionSelectorComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SideMenuOptionSelectorComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SideMenuOptionSelectorComponentModule, [typeof i1.OptionSelectorComponent], [typeof i2.CommonModule, typeof i3.MaterialModule, typeof i3.TranslateLibModule], [typeof i1.OptionSelectorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SideMenuOptionSelectorComponentModule, [typeof i1.OptionSelectorComponent], [typeof i2.CommonModule, typeof i3.MaterialModule, typeof i3.TranslateLibModule, typeof i4.MatFormFieldModule], [typeof i1.OptionSelectorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SideMenuOptionSelectorComponentModule>;
 }

package/lib/side-menu/content-components/user-assign/side-menu-user-assign-component.module.d.ts

@@ -6,8 +6,9 @@ import * as i4 from "@angular/common";
 import * as i5 from "@netgrif/components-core";
 import * as i6 from "@angular/flex-layout";
 import * as i7 from "@angular/forms";
+import * as i8 from "@angular/material/form-field";
 export declare class SideMenuUserAssignComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SideMenuUserAssignComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SideMenuUserAssignComponentModule, [typeof i1.UserAssignComponent, typeof i2.UserAssignItemComponent, typeof i3.UserAssignListComponent], [typeof i4.CommonModule, typeof i5.MaterialModule, typeof i5.CovalentModule, typeof i6.FlexLayoutModule, typeof i6.FlexModule, typeof i7.FormsModule, typeof i5.TranslateLibModule], [typeof i1.UserAssignComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SideMenuUserAssignComponentModule, [typeof i1.UserAssignComponent, typeof i2.UserAssignItemComponent, typeof i3.UserAssignListComponent], [typeof i4.CommonModule, typeof i5.MaterialModule, typeof i5.CovalentModule, typeof i6.FlexLayoutModule, typeof i6.FlexModule, typeof i7.FormsModule, typeof i5.TranslateLibModule, typeof i8.MatFormFieldModule], [typeof i1.UserAssignComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SideMenuUserAssignComponentModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netgrif/components",
-  "version": "6.1.1",
+  "version": "6.2.0-rc.1",
   "description": "Netgrif Application Engine frontend Angular components",
   "homepage": "https://components.netgrif.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,7 +29,7 @@
     "nae frontend"
   ],
   "peerDependencies": {
-    "@netgrif/components-core": "6.1.1",
+    "@netgrif/components-core": "6.2.0-rc.1",
     "@angular-material-components/datetime-picker": "~7.0.1",
     "@angular-material-components/moment-adapter": "~7.0.0",
     "@angular/animations": "~13.3.1",

package/schematics/view/create-view-prompt/views/case-view/files/simple/__className@dasherize__.component.scss.template

@@ -6,7 +6,7 @@
 
 .case-view-search-container {
     margin-top: 16px;
-    padding: 16px;
+    padding: 8px 16px;
 }
 
 .case-header-padding {

package/schematics/view/create-view-prompt/views/case-view/files/tabbed/__className@dasherize__.component.scss.template

@@ -4,12 +4,12 @@
 }
 
 .case-view-search-container {
-    padding: 16px;
+    padding: 8px 16px;
 }
 
 .case-header-padding {
-    padding-bottom: 20px;
-    padding-top: 20px;
+    padding-bottom: 16px;
+    padding-top: 16px;
 }
 
 .font-size-20 {

package/schematics/view/create-view-prompt/views/task-view/files/common/__className@dasherize__.component.scss.template

@@ -5,14 +5,14 @@
     background-color: transparent;
 }
 .search-panel{
-    margin-top: 20px;
+    margin-top: 16px;
 }
 .content-margin{
-    margin: 0 20px;
+    margin: 0 16px;
 }
 .task-panel-padding-mini{
-    padding-bottom: 20px;
-    padding-top: 20px;
+    padding-bottom: 16px;
+    padding-top: 16px;
 }
 .full-height {
     height: 100%;

package/src/lib/data-fields/data-field.theme.scss

@@ -25,24 +25,6 @@
         padding: 8px 16px !important;
     }
 
-    .mat-radio-label {
-        height: auto !important;
-        min-height: 48px;
-        white-space: normal !important;
-        line-height: normal !important;
-    }
-
-    .mat-list-option {
-        height: auto !important;
-        min-height: 48px;
-        white-space: normal !important;
-        line-height: normal !important;
-        padding: 8px 0 !important;
-        display: flex !important;
-        justify-content: center;
-        flex-direction: column;
-    }
-
     .horizontal-state-primary {
         background-color: mat.get-color-from-palette($primary);
     }
@@ -73,21 +55,171 @@
     }
 
     .filled-language-row:hover {
-        background-color: rgba(mat-color($primary), 0.2);
+        background-color: rgba(mat.get-color-from-palette($primary), 0.2);
     }
 
     .form-input:focus-within:not(.invalid-form-input) {
-        border: solid 2px mat-color($primary) !important;
+        border: solid 2px mat.get-color-from-palette($primary) !important;
         padding: 1px !important;
     }
 
     .invalid-form-input {
-        border: solid 2px mat-color($warn) !important;
+        border: solid 2px mat.get-color-from-palette($primary) !important;
         padding: 1px !important;
     }
 
     .invalid-form-label {
-        color: mat-color($warn) !important;
+        color: mat.get-color-from-palette($primary) !important;
+    }
+
+    .netgrif-input {
+        .mat-form-field-infix {
+            padding: 8px 0 12px 0 !important;
+            font-weight: 400 !important;
+            font-size: 14px !important;
+            line-height: 20px !important;
+            width: unset;
+            min-width: 130px;
+        }
+
+        .mat-form-field-label-wrapper {
+            top: -1.1em !important;
+            font-weight: 400 !important;
+            font-size: 14px !important;
+            line-height: 20px !important;
+        }
+
+        .mat-select-arrow-wrapper {
+            transform: translateY(0) !important;
+        }
+
+        .mat-error {
+            font-size: 11px !important;
+            line-height: 18px !important;
+        }
+
+        .mat-hint {
+            font-size: 11px !important;
+            line-height: 18px !important;
+        }
+
+        .ql-toolbar.ql-snow {
+            border-radius: 6px 6px 0 0;
+        }
+
+        .ql-container.ql-snow {
+            border-radius: 0 0 6px 6px;
+        }
+
+        .mat-radio-label {
+            min-height: 36px !important;
+        }
+
+        .netgrif-label {
+            font-weight: 500;
+        }
+
+        .mat-list-option {
+            height: auto !important;
+            min-height: 36px;
+            padding: 0 !important;
+            white-space: normal !important;
+            line-height: normal !important;
+            display: flex !important;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .mat-list-option:focus {
+            outline: none;
+        }
+
+        .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
+            min-height: 36px;
+            padding: 0 8px !important;
+        }
+
+        .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .mat-list-base {
+            padding-top: 4px !important;
+        }
+
+        .mat-form-field-subscript-wrapper {
+            margin-top: 0.45em;
+            top: calc(100% - 2.05em);
+        }
+
+    }
+
+    .netgrif-input-fix {
+        .mat-form-field-wrapper {
+            padding-bottom: 0 !important;
+        }
+
+        input:-webkit-autofill,
+        input:-webkit-autofill:focus {
+            background: transparent !important;
+        }
+    }
+
+    .netgrif-input-search-fix {
+        .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
+            width: unset !important;
+            height: unset !important;
+            top: 5px !important;
+        }
+    }
+
+    .netgrif-icon-fix {
+        margin-bottom: 18px;
+    }
+
+    .netgrif-input-primary-fix {
+        .mat-form-field-appearance-outline {
+            .mat-form-field-outline {
+                color: mat.get-contrast-color-from-palette($primary, 500);
+            }
+
+            .mat-form-field-outline-thick {
+                color: mat.get-contrast-color-from-palette($primary ,500);
+            }
+
+            &.mat-focused {
+                .mat-form-field-outline-thick {
+                    color: mat.get-contrast-color-from-palette($primary, 500);
+                }
+            }
+        }
+
+        .mat-form-field-label {
+            color: mat.get-contrast-color-from-palette($primary, 500);
+        }
+
+        .mat-form-field.mat-focused .mat-form-field-label {
+            color: mat.get-contrast-color-from-palette($primary, 500);
+        }
+
+        .mat-datepicker-toggle {
+            color: mat.get-contrast-color-from-palette($primary, 500) !important;
+        }
+
+        ::placeholder {
+            color: mat.get-contrast-color-from-palette($primary, 500) !important;
+        }
+    }
+
+    .date-field-fix {
+        .mat-form-field-appearance-outline .mat-form-field-flex {
+            padding: 0 0.75em 0 0.5em !important;
+        }
+    }
+
+    .form-input-error {
+        border-color: mat.get-color-from-palette($warn) !important;
     }
 }
 

package/src/lib/header/header.theme.scss

@@ -5,4 +5,9 @@
     .active-header-item {
         background: rgba(mat.get-color-from-palette($primary), 0.3);
     }
+
+    .header-color {
+        background: mat.get-color-from-palette($primary, 500);
+        color: mat.get-contrast-color-from-palette($primary, 500);
+    }
 }

package/src/lib/navigation/navigation.theme.scss

@@ -1,9 +1,33 @@
 @use '@angular/material' as mat;
 
 @mixin navigation-theme($theme) {
+    $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 
     .active-navigation-route {
         background-color: rgba(mat.get-color-from-palette($accent), 0.3);
     }
+
+    .active-rail {
+        background: white;
+        border-bottom: 1px solid #dddddd;
+        border-top: 1px solid #dddddd;
+        border-left: 3px solid mat.get-color-from-palette($primary);
+
+        .icon-large {
+            color: mat.get-color-from-palette($primary) !important;
+        }
+    }
+
+    .rail-color {
+        background: mat.get-color-from-palette($primary, 50);
+    }
+
+    .active {
+        color: mat.get-color-from-palette($primary) !important;
+    }
+
+    .logo, .toolbar {
+        background: mat.get-color-from-palette($primary, 50);
+    }
 }

package/src/lib/tabs/tabs.theme.scss

@@ -10,5 +10,10 @@
             justify-content: flex-end;
         }
     }
+
+    .mat-tab-label-container {
+        border-radius: 6px;
+        background: white;
+    }
 }