@agilekit/ui 0.0.478-alpha.0 → 0.0.481-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,81 +1,81 @@
-$colorBluePolar: #f3f8fc;
-$colorBlueRoyal: #2B65F0;
-$colorBlueOxford: #323C50;
-
-$colorGrayTuna: #3E3F42;
-$colorGrayRegent: #7E8A95;
-$colorGrayIron: #CECFD2;
-$colorGrayWild: #F6F6F6;
-
-$colorGreen: #00D182;
-$colorOrange: #FF7128;
-
-$colorRedCoral: #FA3A4B;
-
-$colorB050: #DEEBFF;
-$colorB075: #B3D4FF;
-$colorB100: #4C9AFF;
-$colorB200: #2684FF;
-$colorB300: #0065FF;
-$colorB400: #0052CC;
-$colorB500: #0747A6;
-
-$colorR050: #FFEBE5;
-$colorR075: #FFBDAD;
-$colorR100: #FF8F73;
-$colorR200: #FF7452;
-$colorR300: #FF5630;
-$colorR400: #DE350B;
-$colorR500: #BF2600;
-
-$colorY050: #FFFAE6;
-$colorY075: #FFF0B3;
-$colorY100: #FFE380;
-$colorY200: #FFC400;
-$colorY300: #FFAB00;
-$colorY400: #FF991F;
-$colorY500: #FF8B00;
-
-$colorT050: #E6FCFF;
-$colorT075: #B3F5FF;
-$colorT100: #00C7E6;
-$colorT200: #00B8D9;
-$colorT300: #00A3BF;
-$colorT400: #008DA6;
-$colorT500: #79E2F2;
-
-$colorP050: #EAE6FF;
-$colorP075: #C0B6F2;
-$colorP100: #998DD9;
-$colorP200: #8777D9;
-$colorP300: #6554C0;
-$colorP400: #5243AA;
-$colorP500: #403294;
-
-$colorG050: #E2FFEE;
-$colorG075: #ABF5D1;
-$colorG100: #79F2C0;
-$colorG200: #57D9A3;
-$colorG300: #36B37E;
-$colorG400: #00875A;
-$colorG500: #006644;
-
-$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;
+$colorBluePolar: #f3f8fc;
+$colorBlueRoyal: #2B65F0;
+$colorBlueOxford: #323C50;
+
+$colorGrayTuna: #3E3F42;
+$colorGrayRegent: #7E8A95;
+$colorGrayIron: #CECFD2;
+$colorGrayWild: #F6F6F6;
+
+$colorGreen: #00D182;
+$colorOrange: #FF7128;
+
+$colorRedCoral: #FA3A4B;
+
+$colorB050: #DEEBFF;
+$colorB075: #B3D4FF;
+$colorB100: #4C9AFF;
+$colorB200: #2684FF;
+$colorB300: #0065FF;
+$colorB400: #0052CC;
+$colorB500: #0747A6;
+
+$colorR050: #FFEBE5;
+$colorR075: #FFBDAD;
+$colorR100: #FF8F73;
+$colorR200: #FF7452;
+$colorR300: #FF5630;
+$colorR400: #DE350B;
+$colorR500: #BF2600;
+
+$colorY050: #FFFAE6;
+$colorY075: #FFF0B3;
+$colorY100: #FFE380;
+$colorY200: #FFC400;
+$colorY300: #FFAB00;
+$colorY400: #FF991F;
+$colorY500: #FF8B00;
+
+$colorT050: #E6FCFF;
+$colorT075: #B3F5FF;
+$colorT100: #00C7E6;
+$colorT200: #00B8D9;
+$colorT300: #00A3BF;
+$colorT400: #008DA6;
+$colorT500: #79E2F2;
+
+$colorP050: #EAE6FF;
+$colorP075: #C0B6F2;
+$colorP100: #998DD9;
+$colorP200: #8777D9;
+$colorP300: #6554C0;
+$colorP400: #5243AA;
+$colorP500: #403294;
+
+$colorG050: #E2FFEE;
+$colorG075: #ABF5D1;
+$colorG100: #79F2C0;
+$colorG200: #57D9A3;
+$colorG300: #36B37E;
+$colorG400: #00875A;
+$colorG500: #006644;
+
+$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;

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,12 +1,12 @@
-$fontPrimary: Lato,
-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;
+$fontPrimary: Lato,
+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');
+  }
+}