@agilekit/ui 0.0.513-alpha.0 → 0.0.514-alpha.0

package/src/assets/styles/shared/elements/scrollbar.scss

@@ -1,31 +1,31 @@
-@mixin customScrollbar() {
-
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      opacity: .2;
-      background-color: rgba(85, 85, 85, 0.15);
-    }
-  }
-
-  &::-webkit-scrollbar-track {
-    // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 10px;
-    background-color: #fff;
-    position: relative;
-    padding-right: 30px;
-    margin-right: 30px;
-
-  }
-
-  &::-webkit-scrollbar {
-    width: 5px;
-    background-color: #F5F5F5;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-    background-color: #fff;
-    opacity: 0;
-  }
+@mixin customScrollbar() {
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      opacity: .2;
+      background-color: rgba(85, 85, 85, 0.15);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #fff;
+    position: relative;
+    padding-right: 30px;
+    margin-right: 30px;
+
+  }
+
+  &::-webkit-scrollbar {
+    width: 5px;
+    background-color: #F5F5F5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    background-color: #fff;
+    opacity: 0;
+  }
 }

package/src/assets/styles/shared/settings/breakpoints.scss

@@ -1,11 +1,11 @@
-// breakpoints
-$breakpoint-mobile-xs: 374px !default;
-$breakpoint-mobile-sm: 413px !default;
-$breakpoint-mobile: 767px !default;
-$breakpoint-tablet-sm: 980px !default;
-$breakpoint-tablet: 1024px !default;
-$breakpoint-sm: 1024px !default;
-$breakpoint-mm: 1280px !default;
-$breakpoint-gg: 1366px !default;
-$breakpoint-lg: 1440px !default;
+// breakpoints
+$breakpoint-mobile-xs: 374px !default;
+$breakpoint-mobile-sm: 413px !default;
+$breakpoint-mobile: 767px !default;
+$breakpoint-tablet-sm: 980px !default;
+$breakpoint-tablet: 1024px !default;
+$breakpoint-sm: 1024px !default;
+$breakpoint-mm: 1280px !default;
+$breakpoint-gg: 1366px !default;
+$breakpoint-lg: 1440px !default;
 $breakpoint-xl: 1920px !default;

package/src/assets/styles/shared/settings/colors.scss

@@ -1,110 +1,110 @@
-$colorBluePolar: #f3f8fc;
-$colorBlueRoyal: #2b65f0;
-$colorBlueOxford: #323c50;
-
-$colorGrayTuna: #3e3f42;
-$colorGrayRegent: #7e8a95;
-$colorGrayIron: #cecfd2;
-$colorGrayWild: #f6f6f6;
-
-$colorGreen: #00d182;
-$colorOrange: #ff7128;
-
-$colorRedCoral: #fa3a4b;
-
-$colorB050: #ebf4ff;
-$colorB075: #cce4ff;
-$colorB100: #99cdff;
-$colorB200: #66b3ff;
-$colorB300: #008cff;
-$colorB400: #0263e0;
-$colorB500: #043cb5;
-$colorB600: #001489;
-$colorB700: #030b5d;
-$colorB800: #06033a;
-
-$colorR050: #feecec;
-$colorR075: #fccfcf;
-$colorR100: #f6b1b1;
-$colorR200: #f58a8a;
-$colorR300: #eb5656;
-$colorR400: #d61f1f;
-$colorR500: #ad1111;
-$colorR600: #750c0c;
-$colorR700: #4a0b0b;
-$colorR800: #310c0c;
-
-$colorY050: #fffbea;
-$colorY075: #fff1b3;
-$colorY100: #ffe980;
-$colorY200: #ffdd35;
-$colorY300: #fad100;
-$colorY400: #e8b407;
-$colorY500: #c28e00;
-$colorY600: #855c15;
-$colorY700: #543308;
-$colorY800: #3d2106;
-
-$colorO050: #fef5ee;
-$colorO075: #fddcc4;
-$colorO100: #fac2a0;
-$colorO200: #ffb37a;
-$colorO300: #fa9950;
-$colorO400: #f47c22;
-$colorO450: #e36a19;
-$colorO500: #c35323;
-$colorO600: #8d3118;
-$colorO700: #541914;
-$colorO800: #40130f;
-
-$colorT050: #e6fcff;
-$colorT075: #b3f5ff;
-$colorT100: #00c7e6;
-$colorT200: #00b8d9;
-$colorT300: #00a3bf;
-$colorT400: #008da6;
-$colorT500: #79e2f2;
-
-$colorP050: #f5f0fc;
-$colorP075: #e7dcfa;
-$colorP100: #c8aff0;
-$colorP200: #a67fe3;
-$colorP300: #8c5bd8;
-$colorP400: #6d2ed1;
-$colorP500: #5817bd;
-$colorP600: #380e78;
-$colorP700: #22094a;
-$colorP800: #160433;
-
-$colorG050: #edfdf3;
-$colorG075: #d1fae0;
-$colorG100: #a2f6c3;
-$colorG200: #7beaa5;
-$colorG300: #36d576;
-$colorG400: #14b053;
-$colorG500: #0e7c3a;
-$colorG600: #0b602d;
-$colorG700: #0d3a1f;
-$colorG800: #052912;
-
-$colorN000: #ffffff;
-$colorN010: #fafbfc;
-$colorN020: #f4f5f7;
-$colorN030: #ebecf0;
-$colorN040: #dfe1e6;
-$colorN050: #c1c7d0;
-$colorN060: #b3bac5;
-$colorN070: #a5adba;
-$colorN080: #97a0af;
-$colorN090: #8993a4;
-$colorN100: #7a869a;
-$colorN200: #6b778c;
-$colorN300: #5e6c84;
-$colorN400: #505f79;
-$colorN500: #42526e;
-$colorN600: #344563;
-$colorN700: #253858;
-$colorN800: #172b4d;
-$colorN900: #091e42;
-
-$primary-main: var(--palette-primary-main, $colorB400);
+$colorBluePolar: #f3f8fc;
+$colorBlueRoyal: #2b65f0;
+$colorBlueOxford: #323c50;
+
+$colorGrayTuna: #3e3f42;
+$colorGrayRegent: #7e8a95;
+$colorGrayIron: #cecfd2;
+$colorGrayWild: #f6f6f6;
+
+$colorGreen: #00d182;
+$colorOrange: #ff7128;
+
+$colorRedCoral: #fa3a4b;
+
+$colorB050: #ebf4ff;
+$colorB075: #cce4ff;
+$colorB100: #99cdff;
+$colorB200: #66b3ff;
+$colorB300: #008cff;
+$colorB400: #0263e0;
+$colorB500: #043cb5;
+$colorB600: #001489;
+$colorB700: #030b5d;
+$colorB800: #06033a;
+
+$colorR050: #feecec;
+$colorR075: #fccfcf;
+$colorR100: #f6b1b1;
+$colorR200: #f58a8a;
+$colorR300: #eb5656;
+$colorR400: #d61f1f;
+$colorR500: #ad1111;
+$colorR600: #750c0c;
+$colorR700: #4a0b0b;
+$colorR800: #310c0c;
+
+$colorY050: #fffbea;
+$colorY075: #fff1b3;
+$colorY100: #ffe980;
+$colorY200: #ffdd35;
+$colorY300: #fad100;
+$colorY400: #e8b407;
+$colorY500: #c28e00;
+$colorY600: #855c15;
+$colorY700: #543308;
+$colorY800: #3d2106;
+
+$colorO050: #fef5ee;
+$colorO075: #fddcc4;
+$colorO100: #fac2a0;
+$colorO200: #ffb37a;
+$colorO300: #fa9950;
+$colorO400: #f47c22;
+$colorO450: #e36a19;
+$colorO500: #c35323;
+$colorO600: #8d3118;
+$colorO700: #541914;
+$colorO800: #40130f;
+
+$colorT050: #e6fcff;
+$colorT075: #b3f5ff;
+$colorT100: #00c7e6;
+$colorT200: #00b8d9;
+$colorT300: #00a3bf;
+$colorT400: #008da6;
+$colorT500: #79e2f2;
+
+$colorP050: #f5f0fc;
+$colorP075: #e7dcfa;
+$colorP100: #c8aff0;
+$colorP200: #a67fe3;
+$colorP300: #8c5bd8;
+$colorP400: #6d2ed1;
+$colorP500: #5817bd;
+$colorP600: #380e78;
+$colorP700: #22094a;
+$colorP800: #160433;
+
+$colorG050: #edfdf3;
+$colorG075: #d1fae0;
+$colorG100: #a2f6c3;
+$colorG200: #7beaa5;
+$colorG300: #36d576;
+$colorG400: #14b053;
+$colorG500: #0e7c3a;
+$colorG600: #0b602d;
+$colorG700: #0d3a1f;
+$colorG800: #052912;
+
+$colorN000: #ffffff;
+$colorN010: #fafbfc;
+$colorN020: #f4f5f7;
+$colorN030: #ebecf0;
+$colorN040: #dfe1e6;
+$colorN050: #c1c7d0;
+$colorN060: #b3bac5;
+$colorN070: #a5adba;
+$colorN080: #97a0af;
+$colorN090: #8993a4;
+$colorN100: #7a869a;
+$colorN200: #6b778c;
+$colorN300: #5e6c84;
+$colorN400: #505f79;
+$colorN500: #42526e;
+$colorN600: #344563;
+$colorN700: #253858;
+$colorN800: #172b4d;
+$colorN900: #091e42;
+
+$primary-main: var(--palette-primary-main, $colorB400);

package/src/assets/styles/shared/settings/depth.scss

@@ -1,15 +1,15 @@
-$shadow100: 0 0 1px 0 rgba(9, 30, 66, 0.31),
-0 1px 1px 0 rgba(9, 30, 66, 0.25);
-$shadow200: 0 0 1px 0 rgba(9, 30, 66, 0.31),
-0 4px 8px -2px rgba(9, 30, 66, 0.25);
-$shadow300: 0 0 1px 0 rgba(9, 30, 66, 0.31),
-0 8px 16px -4px rgba(9, 30, 66, 0.25);
-$shadow400: 0 0 1px 0 rgba(9, 30, 66, 0.31),
-0 12px 24px -6px rgba(9, 30, 66, 0.25);
-$shadow500: 0 0 1px 0 rgba(9, 30, 66, 0.31),
-0 20px 32px -8px rgba(9, 30, 66, 0.25);
-
-$shadow-alt-100: 0 2px 14px 0 rgba(60, 66, 87, 0.10),
-0 1px 6px 0 rgba(0, 0, 0, 0.07);
-
+$shadow100: 0 0 1px 0 rgba(9, 30, 66, 0.31),
+0 1px 1px 0 rgba(9, 30, 66, 0.25);
+$shadow200: 0 0 1px 0 rgba(9, 30, 66, 0.31),
+0 4px 8px -2px rgba(9, 30, 66, 0.25);
+$shadow300: 0 0 1px 0 rgba(9, 30, 66, 0.31),
+0 8px 16px -4px rgba(9, 30, 66, 0.25);
+$shadow400: 0 0 1px 0 rgba(9, 30, 66, 0.31),
+0 12px 24px -6px rgba(9, 30, 66, 0.25);
+$shadow500: 0 0 1px 0 rgba(9, 30, 66, 0.31),
+0 20px 32px -8px rgba(9, 30, 66, 0.25);
+
+$shadow-alt-100: 0 2px 14px 0 rgba(60, 66, 87, 0.10),
+0 1px 6px 0 rgba(0, 0, 0, 0.07);
+
 $shadow-light: 0 0 10px 0 rgba(0, 0, 0, 0.07);

package/src/assets/styles/shared/settings/layout.scss

@@ -1,11 +1,11 @@
-// spacing
-$space-xs: 4px;
-$space-sm: 8px;
-$space-md: 16px;
-$space-lg: 24px;
-$space-xl: 32px;
-$space-xxl: 40px;
-$space-xxxl: 64px;
-$space-wl: 80px;
-$space-wwl: 128px;
+// spacing
+$space-xs: 4px;
+$space-sm: 8px;
+$space-md: 16px;
+$space-lg: 24px;
+$space-xl: 32px;
+$space-xxl: 40px;
+$space-xxxl: 64px;
+$space-wl: 80px;
+$space-wwl: 128px;
 $space-wwwl: 256px;

package/src/assets/styles/shared/settings/typography.scss

@@ -1,9 +1,9 @@
-$fontPrimary: var(--font-family, 'Inter', 'Roboto', sans-serif);
-$font-size-9: 35px;
-$font-size-8: 29px;
-$font-size-7: 24px;
-$font-size-6: 20px;
-$font-size-5: 16px;
-$font-size-4: 14px;
-$font-size-3: 12px;
-$font-size-2: 11px;
+$fontPrimary: var(--font-family, 'Inter', 'Roboto', sans-serif);
+$font-size-9: 35px;
+$font-size-8: 29px;
+$font-size-7: 24px;
+$font-size-6: 20px;
+$font-size-5: 16px;
+$font-size-4: 14px;
+$font-size-3: 12px;
+$font-size-2: 11px;

package/src/assets/styles/shared/shared.scss

@@ -1,9 +1,9 @@
-@import "./settings/typography.scss";
-@import "./settings/colors.scss";
-@import "./settings/layout.scss";
-@import "./settings/breakpoints.scss";
-@import "./settings/depth.scss";
-
-@import "./tools/respond-to.scss";
-
+@import "./settings/typography.scss";
+@import "./settings/colors.scss";
+@import "./settings/layout.scss";
+@import "./settings/breakpoints.scss";
+@import "./settings/depth.scss";
+
+@import "./tools/respond-to.scss";
+
 @import "./elements/scrollbar.scss";

package/src/assets/styles/shared/tools/respond-to.scss

@@ -1,33 +1,33 @@
-//* ==========================================================================
-//   #RESPOND TO
-// ========================================================================== */
-
-// sass-lint:disable-all
-
-//
-// A mixin to handle midea queries, it responds to the specified breakpoint and 
-// down.
-//
-// USAGE: 
-//
-// @include responde-to($breakpoint-tablet){
-//	 .. styles will apply from tablet breakpoint and down ..
-// }
-//
-@mixin respond-to($max-breakpoint) {
-  @media (max-width: $max-breakpoint) {
-    @content;
-  }
-}
-
-@mixin respond-to-min($min-breakpoint) {
-  @media (min-width: $min-breakpoint) {
-    @content;
-  }
-}
-
-@mixin respond-to-ie() {
-  @media all and (-ms-high-contrast:none) {
-    @content;
-  }
+//* ==========================================================================
+//   #RESPOND TO
+// ========================================================================== */
+
+// sass-lint:disable-all
+
+//
+// A mixin to handle midea queries, it responds to the specified breakpoint and 
+// down.
+//
+// USAGE: 
+//
+// @include responde-to($breakpoint-tablet){
+//	 .. styles will apply from tablet breakpoint and down ..
+// }
+//
+@mixin respond-to($max-breakpoint) {
+  @media (max-width: $max-breakpoint) {
+    @content;
+  }
+}
+
+@mixin respond-to-min($min-breakpoint) {
+  @media (min-width: $min-breakpoint) {
+    @content;
+  }
+}
+
+@mixin respond-to-ie() {
+  @media all and (-ms-high-contrast:none) {
+    @content;
+  }
 }

package/src/components/utils/breakpoints.ts

@@ -1,14 +1,14 @@
-export const Breakpoints = {
-  mobileXS: 374,
-  // tslint:disable-next-line:object-literal-sort-keys
-  mobileSM: 413,
-  mobile: 767,
-  tabletSM: 980,
-  tablet: 1024,
-  // tslint:disable-next-line:object-literal-sort-keys
-  sm: 1024,
-  mm: 1280,
-  gg: 1366,
-  lg: 1440,
-  xl: 1920,
-};
+export const Breakpoints = {
+  mobileXS: 374,
+  // tslint:disable-next-line:object-literal-sort-keys
+  mobileSM: 413,
+  mobile: 767,
+  tabletSM: 980,
+  tablet: 1024,
+  // tslint:disable-next-line:object-literal-sort-keys
+  sm: 1024,
+  mm: 1280,
+  gg: 1366,
+  lg: 1440,
+  xl: 1920,
+};

package/src/components/utils/browser.ts

@@ -1,10 +1,10 @@
-const isIE = (): boolean => {
-  const ua = window.navigator.userAgent;
-
-  if (ua.indexOf('Trident') > -1) {
-    return true;
-  }
-  return false;
-};
-
-export default isIE;
+const isIE = (): boolean => {
+  const ua = window.navigator.userAgent;
+
+  if (ua.indexOf('Trident') > -1) {
+    return true;
+  }
+  return false;
+};
+
+export default isIE;

package/src/components/utils/findParentBySelector.ts

@@ -1,17 +1,17 @@
-function collectionHas(a, b) {
-  for (let i = 0, len = a.length; i < len; i++) {
-    if (a[i] === b) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function findParentBySelector(elm, selector) {
-  const all = document.querySelectorAll(selector);
-  let cur = elm.parentNode;
-  while (cur && !collectionHas(all, cur)) {
-    cur = cur.parentNode;
-  }
-  return cur;
-}
+function collectionHas(a, b) {
+  for (let i = 0, len = a.length; i < len; i++) {
+    if (a[i] === b) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function findParentBySelector(elm, selector) {
+  const all = document.querySelectorAll(selector);
+  let cur = elm.parentNode;
+  while (cur && !collectionHas(all, cur)) {
+    cur = cur.parentNode;
+  }
+  return cur;
+}

package/src/components/utils/idGenerator.ts

@@ -1,4 +1,4 @@
-export const idGenerator = (prefix: string | number): (() => string) => {
-  let index = 1;
-  return () => '' + prefix + index++;
-};
+export const idGenerator = (prefix: string | number): (() => string) => {
+  let index = 1;
+  return () => '' + prefix + index++;
+};

package/src/components/utils/index.ts

@@ -1,4 +1,4 @@
-export { Breakpoints } from './breakpoints';
-export { idGenerator } from './idGenerator';
-export { setNativeValue } from './setNativeValue';
-export { findParentBySelector } from './findParentBySelector';
+export { Breakpoints } from './breakpoints';
+export { idGenerator } from './idGenerator';
+export { setNativeValue } from './setNativeValue';
+export { findParentBySelector } from './findParentBySelector';

package/src/components/utils/setNativeValue.ts

@@ -1,13 +1,13 @@
-export function setNativeValue(element: any, value: any): void {
-  const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || { set: undefined };
-  const prototype = Object.getPrototypeOf(element);
-  const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || { set: undefined };
-
-  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
-    prototypeValueSetter.call(element, value);
-  } else if (valueSetter) {
-    valueSetter.call(element, value);
-  } else {
-    throw new Error('The given element does not have a value setter');
-  }
-}
+export function setNativeValue(element: any, value: any): void {
+  const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || { set: undefined };
+  const prototype = Object.getPrototypeOf(element);
+  const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || { set: undefined };
+
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else if (valueSetter) {
+    valueSetter.call(element, value);
+  } else {
+    throw new Error('The given element does not have a value setter');
+  }
+}