linear-react-components-ui 1.0.10-beta.9 → 1.0.10-rc.1

package/coverage/lcov-report/sorter.js

@@ -0,0 +1,196 @@
+/* eslint-disable */
+var addSorting = (function() {
+    'use strict';
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() {
+        return document.querySelector('.coverage-summary');
+    }
+    // returns the thead element of the summary table
+    function getTableHeader() {
+        return getTable().querySelector('thead tr');
+    }
+    // returns the tbody element of the summary table
+    function getTableBody() {
+        return getTable().querySelector('tbody');
+    }
+    // returns the th element for nth column
+    function getNthColumn(n) {
+        return getTableHeader().querySelectorAll('th')[n];
+    }
+
+    function onFilterInput() {
+        const searchValue = document.getElementById('fileSearch').value;
+        const rows = document.getElementsByTagName('tbody')[0].children;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (
+                row.textContent
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase())
+            ) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        }
+    }
+
+    // loads the search box
+    function addSearchBox() {
+        var template = document.getElementById('filterTemplate');
+        var templateClone = template.content.cloneNode(true);
+        templateClone.getElementById('fileSearch').oninput = onFilterInput;
+        template.parentElement.appendChild(templateClone);
+    }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML =
+                    colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function(a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function(a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc
+            ? ' sorted-desc'
+            : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function() {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i = 0; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function() {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData();
+        addSearchBox();
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

package/lib/alerts/AlertContainer.d.ts

@@ -1,6 +1,8 @@
 import { IMessageProps, DefaultMessageConfigType } from './types.js';
 import 'react';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare class AlertContainer {
     pushAlert: (params: IMessageProps) => void;

package/lib/alerts/AlertProvider.d.ts

@@ -1,6 +1,8 @@
 import { IAlertProviderProps } from './types.js';
 import 'react';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const AlertProvider: (props: IAlertProviderProps) => JSX.Element;
 

package/lib/alerts/BaseAlert.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { IBaseAlertProps } from './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const BaseAlert: ({ children }: IBaseAlertProps) => React.ReactPortal;
 

package/lib/alerts/Message.d.ts

@@ -1,6 +1,8 @@
 import { IMessageProps } from './types.js';
 import 'react';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const Message: ({ handleClose, message, id, color, icon, iconName, timeout, customClass, closeButton, className, position, }: IMessageProps) => JSX.Element;
 

package/lib/alerts/Message.js

@@ -38,7 +38,7 @@ var Message = function Message(_ref2) {
     _ref2$icon = _ref2.icon,
     icon = _ref2$icon === void 0 ? null : _ref2$icon,
     _ref2$iconName = _ref2.iconName,
-    iconName = _ref2$iconName === void 0 ? '' : _ref2$iconName,
+    iconName = _ref2$iconName === void 0 ? null : _ref2$iconName,
     _ref2$timeout = _ref2.timeout,
     timeout = _ref2$timeout === void 0 ? 3000 : _ref2$timeout,
     _ref2$customClass = _ref2.customClass,

package/lib/alerts/helpers.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { WithAlertContextProps } from './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const AlertProviderContext: React.Context<WithAlertContextProps>;
 

package/lib/alerts/index.d.ts

@@ -3,6 +3,8 @@ export { default as AlertProvider } from './AlertProvider.js';
 import 'react';
 import './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 
 

package/lib/alerts/types.d.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { PositionAlert } from '../@types/PositionAlert.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
 
 type AlertContainerMethods = {
     default: (messageConfig: DefaultMessageConfigType) => void;
@@ -25,7 +27,7 @@ interface IMessageProps {
     color?: string;
     customClass?: string;
     icon?: ReactNode | null;
-    iconName?: string;
+    iconName?: IconNames | null;
     timeout?: number;
 }
 interface IBaseAlertProps {

package/lib/alerts/withAlert.d.ts

@@ -1,6 +1,8 @@
 import React__default from 'react';
 import { WithAlertContextProps } from './types.js';
 import '../@types/PositionAlert.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const withAlert: <ComponentProps extends WithAlertContextProps>(WrapperComponent: React__default.ComponentType<ComponentProps>) => (props: ComponentProps) => JSX.Element;
 

package/lib/assets/styles/dialog.scss

@@ -5,7 +5,6 @@
   font-family: 'Roboto', sans-serif;
   line-height: 22px;
   font-size: 14px;
-  z-index: 99999;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -29,7 +28,7 @@
       background: $default-color;
       padding: 2px;
       border-radius: 6px;
-      animation: 1s ease-out 0s 1 slideInFromTop;
+      animation: 0.3s ease-out 0s 1 slideInFromTop;
       > .dialog-content {
         height: 100%;
         text-align: left;
@@ -56,12 +55,18 @@
         padding-left: 10px;
         padding-right: 10px;
         padding-top: 3px;
+        cursor: grab;
+        &:active {
+          cursor: grabbing;
+        }
         > .left > .icon-component {
           margin-right: 10px;
         }
         > .right {
-          flex-grow: 1;
+          width: 100%;
           margin-left: 2px;
+          display: flex;
+          align-items: center;
           &.modal-title {
             color: #4e4c4c;
             font-weight: 600;
@@ -70,10 +75,9 @@
         .close-button {
           color: #777;
           cursor: pointer;
-          float: right;
           font-size: 16px;
           text-shadow: 0 1px 0 $default-color;
-          margin-top: -25px;
+          margin-left: auto;
         }
       }
       .footer {
@@ -176,5 +180,4 @@
   width: 100%;
   top: 0;
   left: 0;
-  z-index: 99998;
 }

package/lib/assets/styles/effects.scss

@@ -1,10 +1,10 @@
 //Efeito Utilizado no Dialog
 @keyframes slideInFromTop {
-  0% {
+  from {
     transform: translateY(-60%);
     -webkit-font-smoothing: subpixel-antialiased;
   }
-  30% {
+  to {
     transform: translateY(0);
     -webkit-font-smoothing: subpixel-antialiased;
   }

package/lib/assets/styles/radio.scss

@@ -37,14 +37,26 @@ $radio-button-ripple-size: 15px;
   left: -9999px;
 }
 
+.radio-component:focus + label:before {
+	box-shadow: 0 0 2px 1px $radio-button-checked-color;
+}
+
 .radio-component:checked + .description,
 .radio-component:not(:checked) + .description {
   position: relative;
-  padding-left: 28px;
+  padding-left: 1.35rem;
   cursor: pointer;
   line-height: 20px;
   display: inline-block;
-  color: $font-color-soft;
+  color: $font-color-soft; 
+  &.-medium {
+    padding-left: 1.6rem;
+    padding-top: 0.1rem;
+  }
+  &.-large {
+    padding-left: 1.875rem;
+    padding-top: 0.2rem;
+  }
 }
 
 .disabled + .description {
@@ -57,22 +69,54 @@ $radio-button-ripple-size: 15px;
   position: absolute;
   left: 0;
   top: 0;
-  width: 20px;
-  height: 20px;
   border: 1px solid $component-border-color;
   border-radius: 100%;
   background: $default-color;
 }
 
+.-small:before{
+  width: 16px;
+  height: 16px;
+  top: 0.225rem;
+  left: 0.265rem;
+}
+.-medium:before{
+  width: 20px;
+  height: 20px;
+  top: 0.245rem;
+  left: 0.285rem;
+}
+.-large:before{
+  width: 24px;
+  height: 24px;
+  top: 0.245rem;
+  left: 0.285rem;
+}
+
+.-small:after{
+  width: 8px;
+  height: 8px;
+  top: 0.23rem;
+  left: 0.27rem;
+}
+.-medium:after{
+  width: 12px;
+  height: 12px;
+  top: 0.24rem;
+  left: 0.26rem;
+}
+.-large:after{
+  width: 16px;
+  height: 16px;
+  top: 0.245rem;
+  left: 0.285rem;
+}
+
 .radio-component:checked + .description:after,
 .radio-component:not(:checked) + .description:after {
   content: '';
-  width: 12px;
-  height: 12px;
   background: $radio-button-checked-color;
   position: absolute;
-  top: 4px;
-  left: 4px;
   border-radius: 100%;
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;

package/lib/assets/styles/tooltip.scss

@@ -1,3 +1,5 @@
+@import "colors.scss";
+
 .tooltip-component {
   font-family: 'Roboto', sans-serif;
   position: absolute;
@@ -5,7 +7,7 @@
   background: rgba(black, 0.85);
   border-radius: 5px;
   color: white;
-  box-shadow: 2px 2px 3px rgba(0 ,0, 0, 0.3);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
   text-align: center;
   font-size: 13px;
   z-index: 999999;
@@ -45,11 +47,49 @@
   &.bottom::after {
     content: " ";
     position: absolute;
-    bottom: 100%; 
+    bottom: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent transparent rgba(black, 0.85) transparent;
   }
+  &.tooltip-error {
+    background: $danger-hover-color;
+    color: $default-color;
+    z-index: 99999;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      width: 100%;
+      background: inherit;
+      border-radius: inherit;
+      z-index: -1;
+      opacity: 0.7;
+      animation: tooltip-component 2s ease-out infinite;
+    }
+    @keyframes tooltip-component {
+      100% {
+        transform: scale(1.05, 1.25);
+        opacity: 0;
+      }
+    }
+    &.left::after {
+      border-left-color: $danger-hover-color;
+    }
+    &.right::after {
+      border-right-color: $danger-hover-color;
+    }
+    &.top::after {
+      border-top-color: $danger-hover-color;
+    }
+    &.bottom::after {
+      border-bottom-color: $danger-hover-color;
+    }
+  }
 }

package/lib/buttons/ActivateButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const ActivateButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/AddButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const AddButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/Button.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 interface ButtonProps extends IButtonProps {
     split?: boolean;

package/lib/buttons/CancelButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const CancelButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/DangerButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const DangerButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/DefaultButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const _default: {
     (props: Omit<IButtonProps, "split">): JSX.Element;

package/lib/buttons/DefaultButton.js

@@ -12,7 +12,7 @@ var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
 var _spinner = _interopRequireDefault(require("../spinner"));
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 var _permissionValidations = require("../permissionValidations");
-var _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "tooltipPosition", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef"];
+var _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "tooltipPosition", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -60,6 +60,7 @@ var DefaultButton = function DefaultButton(_ref) {
     permissionAttr = _ref.permissionAttr,
     skeletonize = _ref.skeletonize,
     tooltipPosition = _ref.tooltipPosition,
+    errorMessage = _ref.errorMessage,
     tooltipWidth = _ref.tooltipWidth,
     isFloatMenu = _ref.isFloatMenu,
     dropdownAlign = _ref.dropdownAlign,

package/lib/buttons/DestroyButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const DestroyButton: ({ icon, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/EditButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const EditButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/InactivateButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const InactivateButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/InfoButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const InfoButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/PrimaryButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const PrimaryButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/RestoreButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const RestoreButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/SaveButton.d.ts

@@ -3,6 +3,8 @@ import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 import '../@types/Size.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
 
 declare const SaveButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;