@energycap/components 0.28.6 → 0.28.7

package/lib/controls/form-control-label/form-control-label.component.d.ts

@@ -0,0 +1,70 @@
+import { OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { ValidationMessageService } from '../../core/validation-message.service';
+import { ControlLabelPosition } from '../form-control-base';
+export declare class FormControlLabelComponent implements OnInit {
+    protected validationMessageService: ValidationMessageService;
+    private translateService;
+    /**
+     * Id
+     */
+    id?: string;
+    /**
+     * Bind id to host element
+     */
+    attrId?: string;
+    /**
+     * The form control label
+     */
+    label: string;
+    /**
+     * UI-oriented form model that retains the states and values of the HTML controls on screen.
+     * Can be a {@link FormControl}, a {@link FormGroup} or a {@link FormArray}
+     *
+     * @type {AbstractControl}
+     * @memberof FormControlBase
+     */
+    control?: AbstractControl;
+    /**
+       * The position of the form control label (top|bottom|left)
+       */
+    labelPosition?: ControlLabelPosition;
+    /**An optional string to show if any of the underlying controls has an error. If falsy, one of the
+     * errors from the underlying controls will be used.
+     */
+    overrideValidationError?: string;
+    /**An optional flag to hide the validation messages.
+     */
+    hideValidationMessage?: boolean;
+    /**
+     * All current validation errors
+     *
+     * @type {string}
+     * @memberof FormControlBase
+     */
+    validationErrors: string;
+    allControlsTouched: boolean;
+    private componentDestroyed;
+    constructor(validationMessageService: ValidationMessageService, translateService: TranslateService);
+    ngOnInit(): Promise<void>;
+    /**
+     * Angular onDestroy lifecyle hook.
+     * Unsubscribe from any observables
+     *
+     * @see https://angular.io/guide/lifecycle-hooks
+     * @memberof FormControlBase
+     */
+    ngOnDestroy(): void;
+    private getErrors;
+    private assignErrors;
+    /**
+     * Function that subscribes to the controls valueChanges Observable
+     * to take any erros and translate them
+     *
+     * @param {*} [data]
+     * @returns
+     * @memberof FormControlBase
+     */
+    private translateValidationMessages;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.28.6",
+  "version": "0.28.7",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/public-api.d.ts

@@ -6,6 +6,7 @@ export * from './lib/controls/collapsible-toggle/collapsible-toggle.component';
 export * from './lib/controls/combobox/combobox.component';
 export * from './lib/controls/dropdown/dropdown.component';
 export * from './lib/controls/form-control-base';
+export * from './lib/controls/form-control-label/form-control-label.component';
 export * from './lib/controls/menu/menu.component';
 export * from './lib/controls/navigation/link-item';
 export * from './lib/controls/navigation/nav-group';

package/src/styles/components/_card.scss

@@ -1,42 +1,21 @@
-@import '../variables';
+@import '../mixins/card-base';
 
 .card {
-  background-color: $ec-color-bg-content;
-  background-clip: padding-box;
-  border: 1px solid rgba($black, .1);
-  border-radius: var(--ec-border-radius-card);
-  overflow: auto;
-  box-shadow: var(--ec-box-shadow);
+  @include card;
 }
 
 .card-header {
-  display: flex;
-  align-items: center;
-  min-height: 2.5rem;
+  @include card-header;
 }
 
 .card-title {
-  @extend .text-heading-2;
-  @include truncate;
-  cursor: default;
-  display: flex;
-  align-items: center;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  flex: 1 1;
-  min-height: 0;
-  min-width: 0;
+  @include card-title;
 }
 
 .card-footer {
-  @extend .text-caption-1;
-  border-top: 1px solid $ec-border-color-default;
-  min-height: 2rem;
-  padding: .5rem;
+  @include card-footer;
 }
 
 .card-actions {
-  padding: .25rem;
-  display: flex;
-  margin-left: auto;
-}
+  @include card-actions;
+}

package/src/styles/mixins/_card-base.scss

@@ -0,0 +1,42 @@
+@import '../variables';
+
+@mixin card {
+  background-color: $ec-color-bg-content;
+  background-clip: padding-box;
+  border: 1px solid rgba($black, .1);
+  border-radius: var(--ec-border-radius-card);
+  overflow: auto;
+  box-shadow: var(--ec-box-shadow);
+}
+
+@mixin card-header {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+}
+
+@mixin card-title {
+  @extend .text-heading-2;
+  @include truncate;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  flex: 1 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+@mixin card-footer {
+  @extend .text-caption-1;
+  border-top: 1px solid $ec-border-color-default;
+  min-height: 2rem;
+  padding: .5rem;
+}
+
+@mixin card-actions {
+  padding: .25rem;
+  display: flex;
+  margin-left: auto;
+}

package/src/styles/mixins.scss

@@ -13,4 +13,5 @@
 @import 'mixins/resizable-base';
 @import 'mixins/login';
 @import 'mixins/tags-base';
-@import 'mixins/animations';
+@import 'mixins/animations';
+@import 'mixins/card-base';