@redhat-cloud-services/frontend-components 3.4.13 → 3.6.0

package/esm/ConditionalFilter/RadioFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioFilter.js","sourceRoot":"","sources":["../../src/ConditionalFilter/RadioFilter.js"],"names":[],"mappings":"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"}

package/esm/ConditionalFilter/TextFilter.js

@@ -1,109 +1,86 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput/TextInput.js";
-import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
-import "../../ConditionalFilter/./conditional-filter.css";
-
-var Text = /*#__PURE__*/function (_Component) {
-  _inherits(Text, _Component);
-
-  var _super = _createSuper(Text);
-
-  function Text() {
-    var _this;
-
-    _classCallCheck(this, Text);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      stateValue: ''
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChangeValue", function (e, value) {
-      _this.setState({
-        stateValue: value
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(Text, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          value = _this$props.value,
-          onChange = _this$props.onChange,
-          onSubmit = _this$props.onSubmit,
-          id = _this$props.id,
-          icon = _this$props.icon,
-          className = _this$props.className,
-          isDisabled = _this$props.isDisabled,
-          props = _objectWithoutProperties(_this$props, ["value", "onChange", "onSubmit", "id", "icon", "className", "isDisabled"]);
-
-      var Icon = icon || SearchIcon;
-      var stateValue = this.state.stateValue;
-      var changeCallback = onChange ? onChange : this.onChangeValue;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TextInput, _extends({}, props, {
-        className: "ins-c-conditional-filter ".concat(className || ''),
-        id: id,
-        isDisabled: isDisabled,
-        value: onChange ? value : stateValue,
-        onChange: function onChange(_inputValue, e) {
-          return changeCallback(e, e.target.value);
-        },
-        "widget-type": "InsightsInput",
-        onKeyDown: function onKeyDown(e) {
-          return e.key === 'Enter' && onSubmit(e, value || stateValue);
-        },
-        "data-ouia-component-type": "PF4/TextInput",
-        ouiaId: "ConditionalFilter"
-      })), /*#__PURE__*/React.createElement(Icon, {
-        size: "sm",
-        className: "ins-c-search-icon"
-      }));
+import { TextInput } from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons';
+import './conditional-filter.css';
+var Text = (function (_super) {
+    __extends(Text, _super);
+    function Text() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            stateValue: ''
+        };
+        _this.onChangeValue = function (e, value) {
+            _this.setState({
+                stateValue: value
+            });
+        };
+        return _this;
     }
-  }]);
-
-  return Text;
-}(Component);
-
+    Text.prototype.render = function () {
+        var _a = this.props, value = _a.value, onChange = _a.onChange, onSubmit = _a.onSubmit, id = _a.id, icon = _a.icon, className = _a.className, isDisabled = _a.isDisabled, props = __rest(_a, ["value", "onChange", "onSubmit", "id", "icon", "className", "isDisabled"]);
+        var Icon = icon || SearchIcon;
+        var stateValue = this.state.stateValue;
+        var changeCallback = onChange ? onChange : this.onChangeValue;
+        return (React.createElement(Fragment, null,
+            React.createElement(TextInput, __assign({}, props, { className: "ins-c-conditional-filter ".concat(className || ''), id: id, isDisabled: isDisabled, value: onChange ? value : stateValue, onChange: function (_inputValue, e) { return changeCallback(e, e.target.value); }, "widget-type": "InsightsInput", onKeyDown: function (e) { return e.key === 'Enter' && onSubmit(e, value || stateValue); }, "data-ouia-component-type": "PF4/TextInput", ouiaId: "ConditionalFilter" })),
+            React.createElement(Icon, { size: "sm", className: "ins-c-search-icon" })));
+    };
+    return Text;
+}(Component));
 Text.propTypes = {
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  onSubmit: PropTypes.func,
-  isDisabled: PropTypes.bool,
-  'aria-label': PropTypes.string,
-  id: PropTypes.string,
-  icon: PropTypes.elementType,
-  className: PropTypes.string
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func,
+    isDisabled: PropTypes.bool,
+    'aria-label': PropTypes.string,
+    id: PropTypes.string,
+    icon: PropTypes.elementType,
+    className: PropTypes.string
 };
 Text.defaultProps = {
-  value: '',
-  onSubmit: function onSubmit() {
-    return undefined;
-  },
-  isDisabled: false,
-  'aria-label': 'text input'
+    value: '',
+    onSubmit: function () { return undefined; },
+    isDisabled: false,
+    'aria-label': 'text input'
 };
-export default Text;
+export default Text;
+//# sourceMappingURL=TextFilter.js.map

package/esm/ConditionalFilter/TextFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFilter.js","sourceRoot":"","sources":["../../src/ConditionalFilter/TextFilter.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,2BAA2B,CAAC;AAEnC;IAAmB,wBAAS;IAA5B;QAAA,qEAmCC;QAlCG,WAAK,GAAG;YACJ,UAAU,EAAE,EAAE;SACjB,CAAA;QAED,mBAAa,GAAG,UAAC,CAAC,EAAE,KAAK;YACrB,KAAI,CAAC,QAAQ,CAAC;gBACV,UAAU,EAAE,KAAK;aACpB,CAAC,CAAC;QACP,CAAC,CAAA;;IA0BL,CAAC;IAxBG,qBAAM,GAAN;QACI,IAAM,KAA2E,IAAI,CAAC,KAAK,EAAnF,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,EAAE,QAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAK,KAAK,cAAtE,0EAAwE,CAAa,CAAC;QAC5F,IAAM,IAAI,GAAG,IAAI,IAAI,UAAU,CAAC;QACxB,IAAA,UAAU,GAAK,IAAI,CAAC,KAAK,WAAf,CAAgB;QAClC,IAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAChE,OAAO,CACH,oBAAC,QAAQ;YACL,oBAAC,SAAS,eACD,KAAK,IACV,SAAS,EAAE,mCAA4B,SAAS,IAAI,EAAE,CAAE,EACxD,EAAE,EAAG,EAAE,EACP,UAAU,EAAG,UAAU,EACvB,KAAK,EAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EACrC,QAAQ,EAAG,UAAC,WAAW,EAAE,CAAC,IAAK,OAAA,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAjC,CAAiC,iBACpD,eAAe,EAC3B,SAAS,EAAG,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,CAAC,CAAC,EAAE,KAAK,IAAI,UAAU,CAAC,EAArD,CAAqD,8BAC7C,eAAe,EACxC,MAAM,EAAC,mBAAmB,IAC5B;YACF,oBAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,mBAAmB,GAAG,CACzC,CAEd,CAAC;IACN,CAAC;IACL,WAAC;AAAD,CAAC,AAnCD,CAAmB,SAAS,GAmC3B;AAED,IAAI,CAAC,SAAS,GAAG;IACb,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,EAAE,EAAE,SAAS,CAAC,MAAM;IACpB,IAAI,EAAE,SAAS,CAAC,WAAW;IAC3B,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAChB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IACzB,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,YAAY;CAC7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/ConditionalFilter/conditional-filter.css

@@ -0,0 +1,93 @@
+:root {
+  --ins-color--orange: #ec7a08;
+}
+
+.ins-c-conditional-filter.mobile {
+  display: none !important;
+  visibility: hidden !important;
+}
+.ins-c-conditional-filter .pf-c-select__toggle-wrapper .pf-c-select__toggle-text {
+  max-width: 150px;
+  max-width: 9.375rem;
+}
+.ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text {
+  width: 102px;
+  text-align: left;
+}
+.ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text > svg {
+  margin-right: var(--pf-global--spacer--xs);
+}
+.ins-c-conditional-filter .ins-c-conditional-filter__group .ins-c-conditional-filter__no-label .pf-c-dropdown__toggle-text {
+  width: auto;
+}
+.ins-c-conditional-filter .pf-l-split__item .pf-c-select__menu-group {
+  padding: 0;
+}
+.ins-c-conditional-filter .pf-l-split__item .pf-c-select__menu-group .pf-c-select__menu-group-title:empty {
+  display: none;
+}
+.ins-c-conditional-filter .pf-l-split__item .pf-c-select__option-button {
+  padding: 0;
+}
+.ins-c-conditional-filter .pf-l-split__item .pf-c-select__menu-item-icon {
+  display: none;
+}
+.ins-c-conditional-filter input.ins-c-conditional-filter[type=text] {
+  padding-right: 35px;
+  padding-right: 2.1875rem;
+  margin-right: -23px;
+  margin-right: -1.4375rem;
+}
+.ins-c-conditional-filter input.ins-c-conditional-filter[type=text] + svg {
+  position: relative;
+  left: -5px;
+  left: -0.3125rem;
+  top: 2px;
+  top: 0.125rem;
+}
+.ins-c-conditional-filter .pf-c-select__toggle-text {
+  margin-right: 0;
+}
+.ins-c-conditional-filter .pf-c-select__toggle-badge {
+  display: none;
+}
+.ins-c-conditional-filter .pf-c-menu-toggle .pf-c-menu-toggle__text {
+  flex: 1;
+}
+.ins-c-conditional-filter .pf-c-menu-toggle .pf-c-menu-toggle__text input {
+  border: none;
+}
+
+.pf-c-menu.ins-c-menu__scrollable {
+  max-height: 416px;
+  overflow-y: auto;
+  min-width: initial;
+}
+.pf-c-menu .ins-c-menu__show--more {
+  background: none;
+}
+.pf-c-menu .ins-c-menu__show--more .pf-c-menu__item-text {
+  color: var(--pf-global--active-color--100);
+}
+
+@media only screen and (max-width: 768px) {
+  .ins-c-conditional-filter.mobile {
+    visibility: visible !important;
+    display: grid !important;
+  }
+  .ins-c-conditional-filter.desktop {
+    visibility: hidden;
+    display: none;
+  }
+}
+@media only screen and (max-width: 884px) {
+  .ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text {
+    width: auto;
+  }
+  .ins-c-conditional-filter .ins-c-conditional-filter__group .ins-c-conditional-filter__value-selector {
+    display: none;
+  }
+  .ins-c-conditional-filter .ins-c-conditional-filter__group .ins-c-conditional-filter__group {
+    width: initial;
+  }
+}

package/esm/ConditionalFilter/conditional-filter.scss

@@ -0,0 +1,110 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
+
+.ins-c-conditional-filter {
+    &.mobile {
+        display: none !important;
+        visibility: hidden !important;
+    }
+    .pf-c-select__toggle-wrapper .pf-c-select__toggle-text {
+        @include rem('max-width', 150px);
+    }
+
+    .ins-c-conditional-filter__group {
+        .pf-c-dropdown__toggle-text {
+            width: 102px;
+            text-align: left;
+
+            & > svg {
+                margin-right: var(--pf-global--spacer--xs);
+            }
+        }
+
+        .ins-c-conditional-filter__no-label .pf-c-dropdown__toggle-text  {
+            width: auto;
+        }
+    }
+
+    .pf-l-split__item {
+        .pf-c-select__menu-group {
+            .pf-c-select__menu-group-title:empty {
+                display: none;
+            }
+
+            padding: 0;
+        }
+        
+        .pf-c-select__option-button {
+            padding: 0;
+        }
+
+        .pf-c-select__menu-item-icon {
+            display: none;
+        }
+    }
+
+    input.ins-c-conditional-filter[type="text"] {
+        @include rem('padding-right', 35px);
+        @include rem('margin-right', -23px);
+
+        & + svg {
+            position: relative;
+            @include rem('left', -5px);
+            @include rem('top', 2px);
+        }
+    }
+
+    .pf-c-select__toggle-text {
+        margin-right: 0;
+    }
+    .pf-c-select__toggle-badge {
+        display: none;
+    }
+
+    .pf-c-menu-toggle {
+        .pf-c-menu-toggle__text {
+            flex: 1;
+            input { border: none; }
+        }
+    }
+}
+
+.pf-c-menu {
+    &.ins-c-menu__scrollable {
+        max-height: 416px;
+        overflow-y: auto;
+        min-width: initial;
+    }
+    .ins-c-menu__show--more {
+        background: none;
+        .pf-c-menu__item-text{ color: var(--pf-global--active-color--100); }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .ins-c-conditional-filter {
+        &.mobile {
+            visibility: visible !important;
+            display: grid !important;
+        }
+        &.desktop {
+            visibility: hidden;
+            display: none;
+        }
+    }
+}
+
+@media only screen and (max-width: 884px) {
+    .ins-c-conditional-filter {
+        .ins-c-conditional-filter__group {
+            .pf-c-dropdown__toggle-text {
+                width: auto;
+            }
+            .ins-c-conditional-filter__value-selector {
+                display: none;
+            }
+            .ins-c-conditional-filter__group {
+                width: initial;
+            }
+        }
+    }
+}

package/esm/ConditionalFilter/conditionalFilterConstants.js

@@ -4,16 +4,17 @@ import Checkbox from './CheckboxFilter';
 import Radio from './RadioFilter';
 import Group from './GroupFilter';
 export var conditionalFilterType = {
-  text: 'text',
-  checkbox: 'checkbox',
-  radio: 'radio',
-  custom: 'custom',
-  group: 'group'
+    text: 'text',
+    checkbox: 'checkbox',
+    radio: 'radio',
+    custom: 'custom',
+    group: 'group'
 };
 export var typeMapper = {
-  text: Text,
-  checkbox: Checkbox,
-  radio: Radio,
-  custom: Fragment,
-  group: Group
-};
+    text: Text,
+    checkbox: Checkbox,
+    radio: Radio,
+    custom: Fragment,
+    group: Group
+};
+//# sourceMappingURL=conditionalFilterConstants.js.map

package/esm/ConditionalFilter/conditionalFilterConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditionalFilterConstants.js","sourceRoot":"","sources":["../../src/ConditionalFilter/conditionalFilterConstants.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,KAAK,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACjC,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG;IACtB,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,KAAK;CACf,CAAC"}

package/esm/ConditionalFilter/group-filter.css

@@ -0,0 +1,19 @@
+:root {
+  --ins-color--orange: #ec7a08;
+}
+
+.ins-c-tree-view .pf-c-tree-view {
+  padding: 0;
+}
+.ins-c-tree-view .pf-c-menu__list-item {
+  background: none;
+}
+.ins-c-tree-view .pf-c-menu__list-item .pf-c-menu__item {
+  padding: 0;
+}
+.ins-c-tree-view .pf-c-menu__list-item .pf-c-menu__item .pf-c-tree-view__content {
+  background: none;
+}
+.ins-c-tree-view .pf-c-menu__list-item .pf-c-menu__item .pf-c-tree-view__node {
+  background: none;
+}

package/esm/ConditionalFilter/group-filter.scss

@@ -0,0 +1,23 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
+
+.ins-c-tree-view {
+    .pf-c-tree-view {
+        padding: 0;
+    }
+
+    .pf-c-menu__list-item {
+        background: none;
+
+        .pf-c-menu__item {
+            padding: 0;
+
+            .pf-c-tree-view__content {
+                background: none;
+            }
+            
+            .pf-c-tree-view__node {
+                background: none;
+            }
+        }
+    }
+}