@rei/cedar 11.0.0-alpha.0

package/dist/lib/src/components/tabs/CdrTabs.mjs

@@ -0,0 +1,385 @@
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import debounce from 'lodash-es/debounce';
+import clsx from 'clsx';
+import { CdrColorBackgroundPrimary, CdrSpaceHalfX, CdrSpaceOneX } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.mjs';
+import modifier from '../../mixins/modifier.mjs';
+import size from '../../mixins/size.mjs';
+import modules_722543cf from './styles/CdrTabs.mjs';
+
+var CdrTabs = {
+  name: 'CdrTabs',
+  mixins: [modifier, size],
+  props: {
+    height: {
+      type: String,
+      default: '240px'
+    },
+    activeTab: {
+      type: Number,
+      default: 0
+    },
+    backgroundColor: {
+      type: String,
+      default: CdrColorBackgroundPrimary
+    }
+  },
+
+  data() {
+    return {
+      tabs: [],
+      underlineOffsetX: 0,
+      underlineWidth: 0,
+      underlineScrollX: 0,
+      activeTabIndex: 0,
+      headerWidth: 0,
+      headerOverflow: false,
+      overflowLeft: false,
+      overflowRight: false,
+      animationInProgress: false,
+      style: modules_722543cf
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-tabs';
+    },
+
+    underlineStyle() {
+      return {
+        transform: "translateX(".concat(this.underlineOffsetX, "px)"),
+        width: "".concat(this.underlineWidth, "px")
+      };
+    },
+
+    gradientLeftStyle() {
+      var gradient = "linear-gradient(to left, rgba(255, 255, 255, 0), ".concat(this.backgroundColor, ")");
+      return {
+        background: gradient
+      };
+    },
+
+    gradientRightStyle() {
+      var gradient = "linear-gradient(to right, rgba(255, 255, 255, 0), ".concat(this.backgroundColor, ")");
+      return {
+        background: gradient
+      };
+    }
+
+  },
+
+  mounted() {
+    var _context,
+        _context2,
+        _this = this;
+
+    this.tabs = _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = this.$slots.default || []).call(_context2, function (vnode) {
+      return vnode.componentInstance;
+    })).call(_context, function (tab) {
+      return tab;
+    }); // get vue component children in the slot
+
+    this.activeTabIndex = this.getNextTab(this.activeTab);
+
+    if (this.tabs[this.activeTabIndex] && this.tabs[this.activeTabIndex].setActive) {
+      this.tabs[this.activeTabIndex].setActive(true);
+    }
+
+    this.$nextTick(function () {
+      _this.headerWidth = _this.getHeaderWidth();
+
+      _this.calculateOverflow();
+
+      setTimeout(function () {
+        _this.updateUnderline();
+      }, 500);
+    }); // Check for header overflow on window resize for gradient behavior.
+
+    window.addEventListener('resize', debounce(function () {
+      _this.headerWidth = _this.getHeaderWidth();
+
+      _this.calculateOverflow();
+
+      _this.updateUnderline();
+    }, 500)); // Check for header overflow on widow resize for gradient behavior.
+
+    this.$refs.cdrTabsHeader.parentElement.addEventListener('scroll', debounce(function () {
+      _this.calculateOverflow();
+
+      _this.updateUnderline();
+    }, 50));
+  },
+
+  methods: {
+    getNextTab(startIndex) {
+      for (var i = startIndex; i < this.tabs.length; i += 1) {
+        if (!this.tabs[i].disabled) {
+          return i;
+        }
+      }
+
+      if (startIndex !== 0) {
+        for (var k = 0; k < startIndex; k += 1) {
+          if (!this.tabs[k].disabled) {
+            return k;
+          }
+        }
+      }
+
+      return -1;
+    },
+
+    getPreviousTab(startIndex) {
+      for (var i = startIndex; i > -1; i -= 1) {
+        if (!this.tabs[i].disabled) {
+          return i;
+        }
+      }
+
+      if (startIndex !== this.tabs.length - 1) {
+        for (var k = this.tabs.length - 1; k > startIndex; k -= 1) {
+          if (!this.tabs[k].disabled) {
+            return k;
+          }
+        }
+      }
+
+      return -1;
+    },
+
+    handleClick: debounce(function handleClickCallback(tabClicked) {
+      var newIndex = this.tabs.findIndex(function (tab) {
+        return tabClicked.name === tab.name;
+      });
+      this.changeTab(newIndex);
+    }, 500, {
+      leading: true,
+      trailing: false
+    }),
+
+    changeTab(newIndex) {
+      var _this2 = this;
+
+      var oldIndex = this.activeTabIndex;
+      this.hideScrollBar();
+
+      if (newIndex > oldIndex) {
+        this.tabs[oldIndex].setAnimationDirection('exit-left');
+        this.tabs[oldIndex].setActive(false);
+        setTimeout(function () {
+          _this2.tabs[newIndex].setActive(true);
+
+          _this2.tabs[newIndex].setAnimationDirection('enter-right');
+        }, 200);
+      } else {
+        this.tabs[oldIndex].setAnimationDirection('exit-right');
+        this.tabs[oldIndex].setActive(false);
+        setTimeout(function () {
+          _this2.tabs[newIndex].setActive(true);
+
+          _this2.tabs[newIndex].setAnimationDirection('enter-left');
+        }, 200);
+      }
+
+      this.activeTabIndex = newIndex;
+      this.updateUnderline();
+      this.$refs.cdrTabsHeader.children[this.activeTabIndex].focus();
+    },
+
+    rightArrowNav: debounce(function handleRightArrow() {
+      var nextTab = this.getNextTab(this.activeTabIndex + 1);
+
+      if (nextTab !== -1) {
+        this.changeTab(nextTab);
+      }
+    }, 300, {
+      leading: true,
+      trailing: false
+    }),
+    leftArrowNav: debounce(function handleLeftArrow() {
+      var previousTab = this.getPreviousTab(this.activeTabIndex - 1);
+
+      if (previousTab !== -1) {
+        this.changeTab(previousTab);
+      }
+    }, 300, {
+      leading: true,
+      trailing: false
+    }),
+
+    calculateOverflow() {
+      var containerWidth = 0;
+
+      if (this.$refs.cdrTabsContainer) {
+        containerWidth = this.$refs.cdrTabsContainer.offsetWidth;
+      }
+
+      this.headerOverflow = this.headerWidth > containerWidth;
+
+      if (this.headerOverflow) {
+        // Get Scroll Position
+        var scrollX = this.$refs.cdrTabsHeader.parentElement.scrollLeft;
+        this.overflowLeft = scrollX > 1;
+        this.overflowRight = scrollX + 1 < this.headerWidth - containerWidth;
+      } else {
+        this.overflowLeft = false;
+        this.overflowRight = false;
+      }
+    },
+
+    updateUnderline() {
+      var elements = Array.from(this.$refs.cdrTabsHeader.children);
+
+      if (elements.length > 0) {
+        var activeTab = elements[this.activeTabIndex];
+        var activeRect = activeTab.getBoundingClientRect();
+        var parentRect = this.$refs.cdrTabsHeader.getBoundingClientRect();
+        var offset = activeRect.x - parentRect.x;
+        this.underlineOffsetX = offset - this.$refs.cdrTabsHeader.parentElement.scrollLeft;
+        this.underlineWidth = activeRect.width; // shrink/hide the underline if it scrolls outside the container
+
+        if (this.underlineOffsetX + this.underlineWidth >= parentRect.width) {
+          this.underlineWidth = Math.max(0, parentRect.width - this.underlineOffsetX);
+          this.underlineOffsetX = Math.min(this.underlineOffsetX, parentRect.width);
+        } else if (this.underlineOffsetX < 0) {
+          this.underlineWidth = Math.max(0, this.underlineWidth + this.underlineOffsetX);
+          this.underlineOffsetX = 0;
+        }
+      }
+    },
+
+    handleDownArrowNav() {
+      if (!this.animationInProgress) {
+        this.$el.lastElementChild.children[this.activeTabIndex].focus();
+      }
+    },
+
+    setFocusToActiveTabHeader() {
+      this.$refs.cdrTabsHeader.children[this.activeTabIndex].focus();
+    },
+
+    getHeaderWidth() {
+      var _this3 = this;
+
+      var headerElements = [];
+
+      if (this.$refs.cdrTabsHeader) {
+        headerElements = Array.from(this.$refs.cdrTabsHeader.children);
+      }
+
+      var totalWidth = 0;
+      headerElements.forEach(function (element, i) {
+        // account for margin-left on header elements
+        if (i > 0) {
+          totalWidth += _this3.size === 'small' ? Number(CdrSpaceHalfX) : Number(CdrSpaceOneX);
+        }
+
+        totalWidth += element.offsetWidth || 0;
+      });
+      return totalWidth;
+    },
+
+    hideScrollBar() {
+      var containerRef = this.$refs.cdrTabsContainer.style;
+      var slotRef = this.$refs.slotWrapper.style;
+      window.addEventListener('transitionend', function () {
+        containerRef.setProperty('overflow-x', 'unset');
+        slotRef.setProperty('overflow-y', 'unset');
+      }, {
+        once: true
+      });
+      containerRef.setProperty('overflow-x', 'hidden');
+      slotRef.setProperty('overflow-y', 'hidden');
+    },
+
+    getTabEl(tab) {
+      var _this4 = this;
+
+      var h = this.$createElement;
+      return tab.disabled ? h("button", {
+        "class": clsx(this.style['cdr-tabs__header-item'], this.style['cdr-tabs__header-item--disabled']),
+        "attrs": {
+          "disabled": true
+        }
+      }, [tab.name]) : h("button", {
+        "attrs": {
+          "role": "tab",
+          "aria-selected": tab.active,
+          "aria-controls": tab.id,
+          "id": tab.ariaLabelledby,
+          "tabIndex": tab.active ? 0 : -1,
+          "js-name": tab.name
+        },
+        "key": tab.id,
+        "class": clsx(tab.active ? this.style['cdr-tabs__header-item-active'] : '', this.style['cdr-tabs__header-item']),
+        "on": {
+          "click": function click($event) {
+            $event.preventDefault();
+            return function (e) {
+              return _this4.handleClick(tab, e);
+            }($event);
+          }
+        }
+      }, [tab.name]);
+    }
+
+  },
+
+  render() {
+    var _this5 = this,
+        _context3;
+
+    var h = arguments[0];
+    return h("div", {
+      "class": clsx(this.style[this.baseClass], this.modifierClass, this.sizeClass),
+      "ref": "cdrTabsContainer",
+      "style": {
+        height: this.height
+      }
+    }, [h("div", {
+      "class": this.style['cdr-tabs__gradient-container'],
+      "on": {
+        "keyup": [function ($event) {
+          if (!("button" in $event) && _this5._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) return null;
+          if ("button" in $event && $event.button !== 2) return null;
+          return _this5.rightArrowNav($event);
+        }, function ($event) {
+          if (!("button" in $event) && _this5._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) return null;
+          if ("button" in $event && $event.button !== 0) return null;
+          return _this5.leftArrowNav($event);
+        }],
+        "keydown": function keydown($event) {
+          if (!("button" in $event) && _this5._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) return null;
+          $event.preventDefault();
+          return _this5.handleDownArrowNav($event);
+        }
+      }
+    }, [h("div", {
+      "class": clsx(this.style['cdr-tabs__gradient'], this.style['cdr-tabs__gradient--left'], this.overflowLeft ? this.style['cdr-tabs__gradient--active'] : ''),
+      "style": this.gradientLeftStyle
+    }), h("nav", {
+      "class": this.style['cdr-tabs__header-container']
+    }, [h("div", {
+      "class": this.style['cdr-tabs__header'],
+      "attrs": {
+        "role": "tablist"
+      },
+      "ref": "cdrTabsHeader"
+    }, [_mapInstanceProperty(_context3 = this.tabs).call(_context3, function (tab) {
+      return _this5.getTabEl(tab);
+    })])]), h("div", {
+      "class": clsx(this.style['cdr-tabs__gradient'], this.style['cdr-tabs__gradient--right'], this.overflowRight ? this.style['cdr-tabs__gradient--active'] : ''),
+      "style": this.gradientRightStyle
+    }), h("div", {
+      "class": this.style['cdr-tabs__underline'],
+      "style": this.underlineStyle
+    })]), h("div", {
+      "class": this.style['cdr-tabs__content-container'],
+      "ref": "slotWrapper"
+    }, [this.$slots.default])]);
+  }
+
+};
+
+export default CdrTabs;

package/dist/lib/src/components/tabs/styles/CdrTabPanel.mjs

@@ -0,0 +1,3 @@
+var modules_7f8cc96c = {"cdr-tab-panel":"cdr-tab-panel_11-0-0-alpha-0","cdr-tab-panel-enter-left":"cdr-tab-panel-enter-left_11-0-0-alpha-0","cdr-tab-panel-enter-right":"cdr-tab-panel-enter-right_11-0-0-alpha-0","cdr-tab-panel-exit-left":"cdr-tab-panel-exit-left_11-0-0-alpha-0","cdr-tab-panel-exit-right":"cdr-tab-panel-exit-right_11-0-0-alpha-0"};
+
+export default modules_7f8cc96c;

package/dist/lib/src/components/tabs/styles/CdrTabs.mjs

@@ -0,0 +1,3 @@
+var modules_722543cf = {"cdr-tabs":"cdr-tabs_11-0-0-alpha-0","cdr-tabs__header-container":"cdr-tabs__header-container_11-0-0-alpha-0","cdr-tabs__gradient-container":"cdr-tabs__gradient-container_11-0-0-alpha-0","cdr-tabs__gradient":"cdr-tabs__gradient_11-0-0-alpha-0","cdr-tabs__gradient--left":"cdr-tabs__gradient--left_11-0-0-alpha-0","cdr-tabs__gradient--right":"cdr-tabs__gradient--right_11-0-0-alpha-0","cdr-tabs__gradient--active":"cdr-tabs__gradient--active_11-0-0-alpha-0","cdr-tabs__header":"cdr-tabs__header_11-0-0-alpha-0","cdr-tabs__header-item":"cdr-tabs__header-item_11-0-0-alpha-0","cdr-tabs__header-item-active":"cdr-tabs__header-item-active_11-0-0-alpha-0","cdr-tabs__header-item--disabled":"cdr-tabs__header-item--disabled_11-0-0-alpha-0","cdr-tabs__underline":"cdr-tabs__underline_11-0-0-alpha-0","cdr-tabs__content-container":"cdr-tabs__content-container_11-0-0-alpha-0","fade-enter-active":"fade-enter-active_11-0-0-alpha-0","fade-leave-active":"fade-leave-active_11-0-0-alpha-0","fade-enter":"fade-enter_11-0-0-alpha-0","fade-leave-to":"fade-leave-to_11-0-0-alpha-0","cdr-tabs--compact":"cdr-tabs--compact_11-0-0-alpha-0","cdr-tabs__header-item-label":"cdr-tabs__header-item-label_11-0-0-alpha-0","cdr-tabs--small":"cdr-tabs--small_11-0-0-alpha-0","cdr-tabs--no-border":"cdr-tabs--no-border_11-0-0-alpha-0","cdr-tabs--full-width":"cdr-tabs--full-width_11-0-0-alpha-0","cdr-tabs--centered":"cdr-tabs--centered_11-0-0-alpha-0"};
+
+export default modules_722543cf;

package/dist/lib/src/components/text/CdrText.mjs

@@ -0,0 +1,44 @@
+import modules_7ce14c17 from './styles/CdrText.mjs';
+
+/**
+ * Cedar 2 component for text styles
+ * Accepts typography modifiers.
+ * @version 0.0.1
+ * @author [REI Software Engineering](https://rei.github.io/rei-cedar/)
+ */
+
+var CdrText = {
+  name: 'CdrText',
+  props: {
+    /** Any valid HTML tag */
+    tag: {
+      type: String,
+      default: 'p'
+    }
+  },
+
+  data() {
+    return {
+      s: modules_7ce14c17 // named `s` not `style` so that modifierClass works for text utils
+
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-text';
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    var Component = this.tag;
+    return h(Component, {
+      "class": this.s[this.baseClass]
+    }, [this.$slots.default]);
+  }
+
+};
+
+export default CdrText;

package/dist/lib/src/components/text/styles/CdrText.mjs

@@ -0,0 +1,3 @@
+var modules_7ce14c17 = {"cdr-text":"cdr-text_11-0-0-alpha-0"};
+
+export default modules_7ce14c17;

package/dist/lib/src/components/toast/CdrToast.mjs

@@ -0,0 +1,129 @@
+import clsx from 'clsx';
+import validateProp from '../../utils/propValidator.mjs';
+import BuildClass from '../../mixins/buildClass.mjs';
+import IconXSm from '../icon/comps/x-sm.mjs';
+import CdrButton from '../button/CdrButton.mjs';
+import modules_485069ef from './styles/CdrToast.mjs';
+
+var CdrToast = {
+  name: 'CdrToast',
+  components: {
+    CdrButton,
+    IconXSm
+  },
+  mixins: [BuildClass],
+  props: {
+    type: {
+      type: String,
+      validator: function validator(value) {
+        return validateProp(value, ['info', 'warning', 'success', 'error', 'default']);
+      },
+      default: 'default'
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    autoDismiss: {
+      type: Boolean,
+      default: true
+    },
+    dismissDelay: {
+      type: Number,
+      default: 5000
+    }
+  },
+
+  data() {
+    return {
+      style: modules_485069ef,
+      closed: null,
+      opened: null
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-toast';
+    },
+
+    borderClass() {
+      return this.modifyClassName(this.baseClass, this.type);
+    },
+
+    iconClass() {
+      return this.modifyClassName("".concat(this.baseClass, "__icon-left"), this.type);
+    },
+
+    themeClass() {
+      return this.modifyClassName("".concat(this.baseClass, "__main"), this.type);
+    }
+
+  },
+  watch: {
+    open(newValue, oldValue) {
+      if (!!newValue === !!oldValue) return;
+
+      if (newValue) {
+        this.openToast();
+      } else {
+        this.closeToast();
+      }
+    }
+
+  },
+  methods: {
+    openToast() {
+      this.closed = false;
+      this.opened = true;
+
+      if (this.autoDismiss) {
+        setTimeout(this.closeToast, this.dismissDelay);
+      }
+    },
+
+    closeToast() {
+      this.opened = false;
+      this.closed = true;
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    return h("transition", {
+      "attrs": {
+        "enter-class": clsx(this.style['cdr-toast--toast-enter']),
+        "enter-active-class": clsx(this.style['cdr-toast--toast-enter-active']),
+        "leave-to-class": clsx(this.style['cdr-toast--toast-leave-to']),
+        "leave-active-class": clsx(this.style['cdr-toast--toast-leave-active'])
+      }
+    }, [this.opened ? h("div", {
+      "class": clsx(this.style[this.baseClass], this.borderClass)
+    }, [h("div", {
+      "class": clsx(this.style['cdr-toast__main'], this.themeClass)
+    }, [this.$slots['icon-left'] && h("div", {
+      "class": clsx(this.style['cdr-toast__icon-left'], this.iconClass)
+    }, [this.$slots['icon-left']]), h("span", {
+      "class": this.style['cdr-toast__message']
+    }, [this.$slots.default]), h("cdr-button", {
+      "class": this.style['cdr-toast__close-button'],
+      "attrs": {
+        "icon-only": true,
+        "aria-label": "Close",
+        "size": "small"
+      },
+      "on": {
+        "click": this.closeToast
+      }
+    }, [h("icon-x-sm", {
+      "slot": "icon",
+      "attrs": {
+        "inherit-color": true
+      }
+    })])])]) : null]);
+  }
+
+};
+
+export default CdrToast;

package/dist/lib/src/components/toast/styles/CdrToast.mjs

@@ -0,0 +1,3 @@
+var modules_485069ef = {"cdr-toast":"cdr-toast_11-0-0-alpha-0","cdr-toast__inner":"cdr-toast__inner_11-0-0-alpha-0","cdr-toast--toast-enter":"cdr-toast--toast-enter_11-0-0-alpha-0","cdr-toast--toast-enter-active":"cdr-toast--toast-enter-active_11-0-0-alpha-0","cdr-toast--toast-leave-to":"cdr-toast--toast-leave-to_11-0-0-alpha-0","cdr-toast--toast-leave-active":"cdr-toast--toast-leave-active_11-0-0-alpha-0","cdr-toast__main":"cdr-toast__main_11-0-0-alpha-0","cdr-toast__main--default":"cdr-toast__main--default_11-0-0-alpha-0","cdr-toast__main--info":"cdr-toast__main--info_11-0-0-alpha-0","cdr-toast__main--warning":"cdr-toast__main--warning_11-0-0-alpha-0","cdr-toast__main--success":"cdr-toast__main--success_11-0-0-alpha-0","cdr-toast__main--error":"cdr-toast__main--error_11-0-0-alpha-0","cdr-toast__icon-left":"cdr-toast__icon-left_11-0-0-alpha-0","cdr-toast__icon-left--info":"cdr-toast__icon-left--info_11-0-0-alpha-0","cdr-toast__icon-left--warning":"cdr-toast__icon-left--warning_11-0-0-alpha-0","cdr-toast__icon-left--success":"cdr-toast__icon-left--success_11-0-0-alpha-0","cdr-toast__icon-left--error":"cdr-toast__icon-left--error_11-0-0-alpha-0","cdr-toast__icon-left--default":"cdr-toast__icon-left--default_11-0-0-alpha-0","cdr-toast__message":"cdr-toast__message_11-0-0-alpha-0","cdr-toast__close-button":"cdr-toast__close-button_11-0-0-alpha-0","cdr-toast--default":"cdr-toast--default_11-0-0-alpha-0","cdr-toast--info":"cdr-toast--info_11-0-0-alpha-0","cdr-toast--warning":"cdr-toast--warning_11-0-0-alpha-0","cdr-toast--success":"cdr-toast--success_11-0-0-alpha-0","cdr-toast--error":"cdr-toast--error_11-0-0-alpha-0"};
+
+export default modules_485069ef;