@zeedhi/common 1.112.0 → 3.0.0

package/src/styles/_text.scss

@@ -0,0 +1,46 @@
+%font-base {
+    letter-spacing: unset;
+    color: var(--zd-font-color);
+  }
+  
+  .zd-theme-font-headline {
+    @extend %font-base;
+    font-size: var(--zd-font-headline-size);
+    font-weight: var(--zd-font-headline-weight);
+  }
+  
+  .zd-theme-font-title {
+    @extend %font-base;
+    font-size: var(--zd-font-title-size);
+    font-weight: var(--zd-font-title-weight);
+  }
+  
+  .zd-theme-font-body1 {
+    @extend %font-base;
+    font-size: var(--zd-font-body1-size);
+    font-weight: var(--zd-font-body1-weight);
+  }
+  
+  .zd-theme-font-body2 {
+    @extend %font-base;
+    font-size: var(--zd-font-body2-size);
+    font-weight: var(--zd-font-body2-weight);
+  }
+  
+  .zd-theme-font-body3 {
+    @extend %font-base;
+    font-size: var(--zd-font-body3-size);
+    font-weight: var(--zd-font-body3-weight);
+  }
+  
+  .zd-theme-font-body4 {
+    @extend %font-base;
+    font-size: var(--zd-font-body4-size);
+    font-weight: var(--zd-font-body4-weight);
+  }
+  
+  .zd-theme-font-caption {
+    @extend %font-base;
+    font-size: var(--zd-font-caption-size);
+    font-weight: var(--zd-font-caption-weight);
+  }  

package/src/styles/_utilities.scss

@@ -0,0 +1,515 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2019 John Jeremy Leider
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally copied from Vuetify package 
+ * (https://github.com/vuetifyjs/vuetify/blob/v1.5.16/packages/vuetify/src/styles/tools/_utilities.sass)
+ */
+ 
+ @import '_functions';
+
+ $utilities: () !default;
+ $utilities: map-deep-merge(
+   (
+     "display": (
+       responsive: true,
+       print: true,
+       property: display,
+       class: zd-display,
+       values: none inline inline-block block table table-row table-cell flex inline-flex grid
+     ),
+     "float": (
+       responsive: true,
+       print: true,
+       property: float,
+       class: zd-float,
+       values: none left right
+     ),
+ 
+     // Flex utilities
+     "flex": (
+       responsive: true,
+       property: flex,
+       class: zd-flex,
+       values: (fill: 1 1 auto)
+     ),
+     "flex-direction": (
+       responsive: true,
+       property: flex-direction,
+       class: zd-flex,
+       values: row column row-reverse column-reverse
+     ),
+     "flex-grow": (
+       responsive: true,
+       property: flex-grow,
+       class: zd-flex,
+       values: (
+         grow-0: 0,
+         grow-1: 1,
+       )
+     ),
+     "flex-shrink": (
+       responsive: true,
+       property: flex-shrink,
+       class: zd-flex,
+       values: (
+         shrink-0: 0,
+         shrink-1: 1,
+       )
+     ),
+     "flex-wrap": (
+       responsive: true,
+       property: flex-wrap,
+       class: zd-flex,
+       values: wrap nowrap wrap-reverse
+     ),
+     "justify-content": (
+       responsive: true,
+       property: justify-content,
+       class: zd-justify,
+       values: (
+         start: flex-start,
+         end: flex-end,
+         center: center,
+         space-between: space-between,
+         space-around: space-around,
+       )
+     ),
+     "align-items": (
+       responsive: true,
+       property: align-items,
+       class: zd-align,
+       values: (
+         start: flex-start,
+         end: flex-end,
+         center: center,
+         baseline: baseline,
+         stretch: stretch,
+       )
+     ),
+     "align-content": (
+       responsive: true,
+       property: align-content,
+       class: zd-align-content,
+       values: (
+         start: flex-start,
+         end: flex-end,
+         center: center,
+         space-between: space-between,
+         space-around: space-around,
+         stretch: stretch,
+       )
+     ),
+     "align-self": (
+       responsive: true,
+       property: align-self,
+       class: zd-align-self,
+       values: (
+         auto: auto,
+         start: flex-start,
+         end: flex-end,
+         center: center,
+         baseline: baseline,
+         stretch: stretch,
+       )
+     ),
+     "order": (
+       responsive: true,
+       property: order,
+       class: zd-order,
+       values: (
+         first: -1,
+         0: 0,
+         1: 1,
+         2: 2,
+         3: 3,
+         4: 4,
+         5: 5,
+         6: 6,
+         7: 7,
+         8: 8,
+         9: 9,
+         10: 10,
+         11: 11,
+         12: 12,
+         last: 13,
+       ),
+     ),
+ 
+     // Margin utilities
+     "margin": (
+       responsive: true,
+       property: margin,
+       class: zd-ma,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-x": (
+       responsive: true,
+       property: margin-right margin-left,
+       class: zd-mx,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-y": (
+       responsive: true,
+       property: margin-top margin-bottom,
+       class: zd-my,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-top": (
+       responsive: true,
+       property: margin-top,
+       class: zd-mt,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-right": (
+       responsive: true,
+       property: margin-right,
+       class: zd-mr,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-bottom": (
+       responsive: true,
+       property: margin-bottom,
+       class: zd-mb,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-left": (
+       responsive: true,
+       property: margin-left,
+       class: zd-ml,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-start": (
+       responsive: true,
+       property: margin-left,
+       class: zd-ms,
+       values: map-merge($spacers, (auto: auto))
+     ),
+     "margin-end": (
+       responsive: true,
+       property: margin-right,
+       class: zd-me,
+       values: map-merge($spacers, (auto: auto))
+     ),
+ 
+     // Negative margin utilities
+     "negative-margin": (
+       responsive: true,
+       property: margin,
+       class: zd-ma,
+       values: $negative-spacers
+     ),
+     "negative-margin-x": (
+       responsive: true,
+       property: margin-right margin-left,
+       class: zd-mx,
+       values: $negative-spacers
+     ),
+     "negative-margin-y": (
+       responsive: true,
+       property: margin-top margin-bottom,
+       class: zd-my,
+       values: $negative-spacers
+     ),
+     "negative-margin-top": (
+       responsive: true,
+       property: margin-top,
+       class: zd-mt,
+       values: $negative-spacers
+     ),
+     "negative-margin-right": (
+       responsive: true,
+       property: margin-right,
+       class: zd-mr,
+       values: $negative-spacers
+     ),
+     "negative-margin-bottom": (
+       responsive: true,
+       property: margin-bottom,
+       class: zd-mb,
+       values: $negative-spacers
+     ),
+     "negative-margin-left": (
+       responsive: true,
+       property: margin-left,
+       class: zd-ml,
+       values: $negative-spacers
+     ),
+     "negative-margin-start": (
+       responsive: true,
+       property: margin-left,
+       class: zd-ms,
+       values: $negative-spacers
+     ),
+     "negative-margin-end": (
+       responsive: true,
+       property: margin-right,
+       class: zd-me,
+       values: $negative-spacers
+     ),
+ 
+     // Padding utilities
+     "padding": (
+       responsive: true,
+       property: padding,
+       class: zd-pa,
+       values: $spacers
+     ),
+     "padding-x": (
+       responsive: true,
+       property: padding-right padding-left,
+       class: zd-px,
+       values: $spacers
+     ),
+     "padding-y": (
+       responsive: true,
+       property: padding-top padding-bottom,
+       class: zd-py,
+       values: $spacers
+     ),
+     "padding-top": (
+       responsive: true,
+       property: padding-top,
+       class: zd-pt,
+       values: $spacers
+     ),
+     "padding-right": (
+       responsive: true,
+       property: padding-right,
+       class: zd-pr,
+       values: $spacers
+     ),
+     "padding-bottom": (
+       responsive: true,
+       property: padding-bottom,
+       class: zd-pb,
+       values: $spacers
+     ),
+     "padding-left": (
+       responsive: true,
+       property: padding-left,
+       class: zd-pl,
+       values: $spacers
+     ),
+     "padding-start": (
+       responsive: true,
+       property: padding-left,
+       class: zd-ps,
+       values: $spacers
+     ),
+     "padding-end": (
+       responsive: true,
+       property: padding-right,
+       class: zd-pe,
+       values: $spacers
+     ),
+ 
+     // Gap utilities
+     "gap": (
+       responsive: true,
+       property: gap,
+       class: zd-gap-a,
+       values: $spacers
+     ),
+     "gap-x": (
+       responsive: true,
+       property: column-gap,
+       class: zd-gap-x,
+       values: $spacers
+     ),
+     "gap-y": (
+       responsive: true,
+       property: row-gap,
+       class: zd-gap-y,
+       values: $spacers
+     ),
+ 
+     // Text
+     "text-align": (
+       responsive: true,
+       property: text-align,
+       class: zd-text,
+       values: left right center justify start end
+     )
+   ),
+   $utilities
+ );
+ 
+ @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+   $min: breakpoint-min($name, $breakpoints);
+   @if $min {
+     @media (min-width: $min) {
+       @content;
+     }
+   }
+   @else {
+     @content;
+   }
+ }
+ 
+ @mixin generate-utility($utility, $infix) {
+   $values: map-get($utility, values);
+ 
+   // If the values are a list or string, convert it into a map
+   @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+     $values: zip($values, $values);
+   }
+ 
+   @each $value in $values {
+     $properties: map-get($utility, property);
+ 
+     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+     @if type-of($properties) == 'string' {
+       $properties: append((), $properties);
+     }
+ 
+     // Property can be a map, where the key is a mixin to include
+     @if type-of($properties) == 'map' {
+       @each $dir in $properties {
+         $mixin: nth($dir, 1);
+         // SASS doesn't support dynamic mixin invocation
+         // https://github.com/sass/sass/issues/626
+         @if $mixin == 'ltr' {
+           @include generate-utility-body($utility, nth($dir, 2), $value, $infix);
+         }
+         @else if $mixin == 'rtl' {
+           @include generate-utility-body($utility, nth($dir, 2), $value, $infix);
+         }
+         @else {
+           @error 'Only RTL and LTR are supported';
+         }
+       }
+     }
+     @else { 
+       @include generate-utility-body($utility, $properties, $value, $infix);
+     }
+   }
+ }
+ 
+ @mixin generate-utility-body($utility, $properties, $value, $infix) {
+   // Use custom class if present
+   $property-class: map-get($utility, class);
+   $property-class: if($property-class, $property-class, nth($properties, 1));
+ 
+   // Don't prefix if value key is null (eg. with shadow class)
+   $property-class-modifier: if(nth($value, 1), "-" + nth($value, 1), "");
+ 
+   $value: nth($value, 2);
+ 
+   .#{$property-class + $infix + $property-class-modifier} {
+     @for $i from 1 through length($properties) {
+       $property: nth($properties, $i);
+       $val: $value;
+       @if type-of($value) == 'list' and length($properties) == length($value) {
+         $val: nth($value, $i);
+       }
+       #{$property}: $val !important;
+     }
+   }
+ }
+ 
+ // Utilities
+ @each $breakpoint in map-keys($grid-breakpoints) {
+   // Generate media query if needed
+   @include media-breakpoint-up($breakpoint) {
+     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ 
+     // Loop over each utility property
+     @each $key, $utility in $utilities {
+       // The utility can be disabled with `false`, thus check if the utility is a map first
+       // Only proceed if responsive media queries are enabled or if it's the base media query
+       @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+         @include generate-utility($utility, $infix);
+       }
+     }
+   }
+ }
+ 
+ // Print utilities
+ @media print {
+   @each $key, $utility in $utilities {
+     // The utility can be disabled with `false`, thus check if the utility is a map first
+     // Then check if the utility needs print styles
+     @if type-of($utility) == "map" and map-get($utility, print) == true {
+       @include generate-utility($utility, "-print");
+     }
+   }
+ }
+ 
+ // Grid system
+ $grid-columns: 12;
+ $grid-class: ".zd-col";
+ 
+ .zd-col-auto {
+   flex: 0 0 auto;
+   width: auto;
+   max-width: 100%;
+ }
+ 
+ @each $breakpoint in map-keys($grid-breakpoints) {
+   // Generate media query if needed
+   @include media-breakpoint-up($breakpoint) {
+     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ 
+     // Loop over each column
+     @for $n from 1 through $grid-columns {
+       $val: percentage($n / $grid-columns);
+       #{$grid-class + $infix + "-" + $n} {
+         max-width: $val;
+         flex: 0 0 $val;
+       } 
+     }
+ 
+     #{$grid-class + $infix + "-auto"} {
+       max-width: 100%;
+       flex: 0 0 auto;
+       width: auto;
+     } 
+   }
+ }
+ 
+ // Grid Offset system
+ $column-offset: 12;
+ $column-offset-class: ".zd-offset";
+ 
+ .zd-offset-auto {     
+   margin-left: auto;
+ }
+ 
+ @each $breakpoint in map-keys($grid-breakpoints) {
+   // Generate media query if needed
+   @include media-breakpoint-up($breakpoint) {
+     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ 
+     // Loop over each column
+     @for $n from 1 through $column-offset {
+       $val: percentage($n / $column-offset);
+       #{$column-offset-class + $infix + "-" + $n} {        
+         margin-left: $val;
+       } 
+     }
+ 
+     #{$column-offset-class + $infix + "-auto"} {       
+       margin-left: auto;
+     } 
+   }
+ } 

package/src/styles/_variables.scss

@@ -0,0 +1,70 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2019 John Jeremy Leider
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally copied from Vuetify package 
+ * (https://github.com/vuetifyjs/vuetify/blob/v1.5.16/packages/vuetify/src/styles/settings/_variables.sass)
+ */
+ 
+ @import '_functions';
+
+ $spacer: 4px !default;
+ $spacers: ();
+ @for $i from 0 through 12 {
+   $spacers: map-merge($spacers, ($i: $spacer * $i))
+ }
+ $negative-spacers: ();
+ @for $i from 1 through 12 {
+   $negative-spacers: map-merge($negative-spacers, ("n" + $i: -$spacer * $i))
+ }
+ 
+ $grid-breakpoints: () !default;
+ $grid-breakpoints: map-deep-merge(
+   (
+     'xs': 0,
+     'sm': 600px,
+     'md': 960px,
+     'lg': 1280px - 16px,
+     'xl': 1920px - 16px
+   ),
+   $grid-breakpoints
+ );
+ 
+ $display-breakpoints: () !default;
+ $display-breakpoints: map-deep-merge(
+   (
+     'print-only': 'only print',
+     'screen-only': 'only screen',
+     'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
+     'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+     'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+     'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
+     'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+     'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+     'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
+     'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+     'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+     'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
+     'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
+   ), 
+   $display-breakpoints
+ ); 

package/src/styles/index.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'display';
+@import 'elevation';
+@import 'text';
+@import 'utilities';

package/src/utils/config/config.ts

@@ -0,0 +1,8 @@
+import { IConfig } from '@zeedhi/core';
+
+export interface ITekConfig extends IConfig {
+	saveGridLayoutsEndPoint?: string;
+	loadGridLayoutsEndPoint?: string;
+	selectAllCompatibilityMode?: boolean;
+	gridShowCheckboxAllFilter?: boolean;
+}

package/src/utils/data-value-out/data-value-out.ts

@@ -0,0 +1,39 @@
+import { Metadata, Utils } from '@zeedhi/core';
+import { Form } from '../../components/zd-form/form';
+import { Input } from '../../components/zd-input/input';
+import { ISelectDataValueOut, ISelectDataValueOutItem } from './interfaces';
+
+export class DataValueOutHelper {
+	private static getFormParent(select: ISelectDataValueOut) {
+		let { formParent } = select as Input;
+		if (select.dataValueOutFormName) {
+			try {
+				formParent = Metadata.getInstance<Form>(select.dataValueOutFormName);
+			} catch (_error) {
+				// instance not found, use input.formParent
+			}
+		}
+
+		return formParent;
+	}
+
+	public static setDataValueOut(select: ISelectDataValueOut, value: any) {
+		const { dataValueOut } = select;
+		if (dataValueOut?.length && typeof value === 'object') {
+			const formParent = DataValueOutHelper.getFormParent(select);
+
+			if (formParent) {
+				dataValueOut.forEach((columns: ISelectDataValueOutItem) => {
+					const { column, columnOnForm } = columns;
+					if (!column || !columnOnForm) return;
+
+					const currentValue = value ? value[column] : null;
+
+					if (!Utils.isEqual(formParent.value[columnOnForm], currentValue)) {
+						formParent.value[columnOnForm] = currentValue;
+					}
+				});
+			}
+		}
+	}
+}

package/src/utils/data-value-out/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export * from './data-value-out';

package/src/utils/data-value-out/interfaces.ts

@@ -0,0 +1,9 @@
+export interface ISelectDataValueOutItem {
+	column: string;
+	columnOnForm: string;
+}
+
+export interface ISelectDataValueOut {
+	dataValueOut?: ISelectDataValueOutItem[];
+	dataValueOutFormName?: string;
+}