@longline/aqua-ui 1.0.286 → 1.0.288

package/formatters/HttpStatusFormatter/index.d.ts

@@ -0,0 +1 @@
+export * from './HttpStatusFormatter';

package/formatters/HttpStatusFormatter/index.js

@@ -0,0 +1 @@
+export * from './HttpStatusFormatter';

package/inputs/Selector/Selector.d.ts

@@ -17,10 +17,14 @@ interface IProps extends ISelectorProps {
      */
     label?: React.ReactNode;
     /**
-     * Checkbox visual style: `check`, `toggle`, `slider` or `circle`. Default is `check`.
+     * Checkbox visual style: `check`, `toggle` or `circle`. Default is `check`.
      * @default check
      */
     type?: TCheckboxType;
+    /**
+     * If set, checkbox has a dark label.
+     */
+    dark?: boolean;
 }
 /**
  * A Selector can be used to create either a HTML checkbox or a HTML radio button.

package/inputs/Selector/Selector.js

@@ -28,6 +28,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Checkbox } from './widgets/Checkbox';
 import { Toggle } from './widgets/Toggle';
+import { Circle } from './widgets/Circle';
 var SelectorBase = function (props) {
     var _a = React.useState(props.checked), checked = _a[0], setChecked = _a[1];
     var inputRef = React.useRef(null);
@@ -56,6 +57,7 @@ var SelectorBase = function (props) {
         var type = (_a = props.type) !== null && _a !== void 0 ? _a : (props.radio ? 'radio' : 'check');
         switch (type) {
             case 'toggle': return React.createElement(Toggle, __assign({}, otherProps));
+            case 'circle': return React.createElement(Circle, __assign({}, otherProps));
             default: return React.createElement(Checkbox, __assign({}, otherProps));
         }
     };
@@ -68,7 +70,7 @@ var SelectorStyled = styled(SelectorBase)(templateObject_2 || (templateObject_2
     /**
      * A Selector can be used to create either a HTML checkbox or a HTML radio button.
      */
-])), function (p) { return (p.disabled || p.locked) ? 'none' : 'all'; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #aaa;\n    "], ["\n      color: #aaa;\n    "]))); });
+])), function (p) { return (p.disabled || p.locked) ? 'none' : 'all'; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #aaa;\n    "], ["\n      color: #aaa;\n    "]))); });
 /**
  * A Selector can be used to create either a HTML checkbox or a HTML radio button.
  */

package/inputs/Selector/widgets/Circle.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ISelectorProps } from '../ISelectorProps';
+declare const Circle: (props: {
+    className?: string;
+} & ISelectorProps) => React.JSX.Element;
+export { Circle };

package/inputs/Selector/widgets/Circle.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+var CircleBase = function (props) {
+    return React.createElement("div", { className: props.className });
+};
+var CircleStyled = styled(CircleBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n\n  width: 19px;\n  height: 19px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  background-color: transparent;\n  border: solid 2px ", ";\n  transition: \n    left ease-in-out ", "ms, \n    background-color ease-in-out ", "ms, \n    border-color ease-in-out ", "ms;\n\n  // Checked circle:\n  input:checked + &:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 9px;\n    height: 9px;\n    transform: translateX(-50%) translateY(-50%);\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  // Disabled circle:\n  ", "\n"], ["\n  position: relative;\n\n  width: 19px;\n  height: 19px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  background-color: transparent;\n  border: solid 2px ", ";\n  transition: \n    left ease-in-out ", "ms, \n    background-color ease-in-out ", "ms, \n    border-color ease-in-out ", "ms;\n\n  // Checked circle:\n  input:checked + &:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 9px;\n    height: 9px;\n    transform: translateX(-50%) translateY(-50%);\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  // Disabled circle:\n  ", "\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-color: ", ";\n    &:after {\n      background-color: ", " !important;\n    }\n  "], ["\n    border-color: ", ";\n    &:after {\n      background-color: ", " !important;\n    }\n  "])), p.theme.colors.neutral[50], p.theme.colors.neutral[50]); });
+var Circle = function (props) { return React.createElement(CircleStyled, __assign({}, props)); };
+export { Circle };
+var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.286",
+  "version": "1.0.288",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",