@rei/cedar 11.0.0-alpha.0

package/dist/lib/node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.mjs

@@ -0,0 +1,9 @@
+const CdrColorBackgroundPrimary = "#ffffff";
+const CdrSpaceHalfX = "8";
+const CdrSpaceOneX = "16";
+const CdrSpaceTwoX = "32";
+const CdrBreakpointSm = "768";
+const CdrBreakpointMd = "992";
+const CdrBreakpointLg = "1232";
+
+export { CdrBreakpointLg, CdrBreakpointMd, CdrBreakpointSm, CdrColorBackgroundPrimary, CdrSpaceHalfX, CdrSpaceOneX, CdrSpaceTwoX };

package/dist/lib/src/components/accordion/CdrAccordion.mjs

@@ -0,0 +1,206 @@
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import clsx from 'clsx';
+import IconCaretDown from '../icon/comps/caret-down.mjs';
+import modifier from '../../mixins/modifier.mjs';
+import modules_b5678f63 from './styles/CdrAccordion.mjs';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var CdrAccordion = {
+  name: 'CdrAccordion',
+  components: {
+    IconCaretDown
+  },
+  mixins: [modifier],
+  inject: {
+    unwrap: {
+      default: {
+        value: false
+      }
+    }
+  },
+  props: {
+    /**
+     * The unique id of an accordion.
+     */
+    id: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Toggle this value to open/close the accordion.
+     */
+    opened: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Sets a compact style.
+     */
+    compact: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Sets a border-aligned style.
+     */
+    borderAligned: {
+      type: Boolean,
+      default: false
+    },
+    // Sets the heading level
+    level: {
+      type: [String, Number],
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      focused: false,
+      maxHeight: this.opened ? 'none' : 0,
+      // set maxHeight to none if initialized as open
+      style: modules_b5678f63
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-accordion';
+    },
+
+    styleClass() {
+      var styles = [];
+
+      if (this.compact) {
+        styles.push(this.modifyClassName(this.baseClass, 'compact'));
+      }
+
+      if (this.borderAligned) {
+        styles.push(this.modifyClassName(this.baseClass, 'border-aligned'));
+      }
+
+      return styles.join(' ');
+    },
+
+    unwrapClass() {
+      return this.unwrap.value ? this.modifyClassName(this.baseClass, 'unwrap') : null;
+    },
+
+    focusedClass() {
+      return this.focused ? this.modifyClassName(this.baseClass, 'focused') : null;
+    },
+
+    isOpenClass() {
+      return this.opened || this.unwrap.value ? 'open' : 'closed';
+    },
+
+    listeners() {
+      return this.unwrap.value ? {} : {
+        click: this.onClick,
+        focus: this.onFocus,
+        blur: this.onBlur
+      };
+    }
+
+  },
+  watch: {
+    opened() {
+      var _this = this;
+
+      // reset maxHeight before animating
+      this.maxHeight = !this.opened ? "".concat(this.$refs['accordion-content'].clientHeight, "px") : 0; // nextTick is not sufficient here, must wait for CSS to re-paint
+
+      setTimeout(function () {
+        // on next frame, set maxHeight to new value
+        _this.maxHeight = _this.opened ? "".concat(_this.$refs['accordion-content'].clientHeight, "px") : 0;
+        setTimeout(function () {
+          // after animation is complete, remove max-height so content can reflow
+          _this.maxHeight = _this.opened ? 'none' : 0;
+        }, 350); // cdr-duration-3x + 50ms
+      }, 50);
+    }
+
+  },
+
+  mounted() {
+    /*
+      The intent here is to give maxHeight an actual pixel value when the accordion
+      is initialized as open. This guarantees that the open-to-close animation is
+      nice and smooth the first time they click it.
+    */
+    if (this.opened && this.$refs['accordion-content']) {
+      this.maxHeight = 'none';
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('accordion-toggle', event);
+    },
+
+    onFocus() {
+      this.focused = true;
+    },
+
+    onBlur() {
+      this.focused = false;
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    var Heading = "h".concat(this.level);
+    var HeadingContent = this.unwrap.value ? 'div' : 'button';
+    return h("div", {
+      "class": !this.unwrap.value && clsx(this.style[this.baseClass], this.modifierClass, this.styleClass, this.focusedClass),
+      "attrs": {
+        "id": "".concat(this.id, "-accordion")
+      },
+      "ref": "accordion-container"
+    }, [h(Heading, {
+      "class": this.unwrap.value ? this.style['cdr-accordion__header--unwrapped'] : this.style['cdr-accordion__header']
+    }, [h(HeadingContent, {
+      "class": [!this.unwrap.value && this.style['cdr-accordion__button'], 'js-cdr-accordion-button'],
+      "attrs": {
+        "id": this.id,
+        "aria-expanded": !this.unwrap.value && "".concat(this.opened),
+        "aria-controls": !this.unwrap.value && "".concat(this.id, "-collapsible")
+      },
+      "on": _objectSpread({}, this.listeners)
+    }, [h("span", {
+      "class": this.style['cdr-accordion__label'],
+      "attrs": {
+        "id": "".concat(this.id, "-label")
+      }
+    }, [this.$slots.label]), !this.unwrap.value && h("icon-caret-down", {
+      "class": clsx(this.style['cdr-accordion__icon'], this.isOpenClass),
+      "attrs": {
+        "size": this.compact ? 'small' : null
+      }
+    })])]), h("div", {
+      "class": clsx(this.style['cdr-accordion__content-container'], this.isOpenClass),
+      "style": {
+        maxHeight: this.unwrap.value ? 'none' : this.maxHeight
+      }
+    }, [h("div", {
+      "class": clsx(this.style['cdr-accordion__content'], this.isOpenClass, this.unwrapClass),
+      "attrs": {
+        "aria-hidden": !this.unwrap.value && "".concat(!this.opened),
+        "id": "".concat(this.id, "-collapsible")
+      },
+      "ref": "accordion-content"
+    }, [this.$slots.default])])]);
+  }
+
+};
+
+export default CdrAccordion;

package/dist/lib/src/components/accordion/CdrAccordionGroup.mjs

@@ -0,0 +1,124 @@
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import debounce from 'lodash-es/debounce';
+import clsx from 'clsx';
+import validateProp from '../../utils/propValidator.mjs';
+import breakpoints from '../../mixins/breakpoints.mjs';
+import modules_6e2f679e from './styles/CdrAccordionGroup.mjs';
+
+var CdrAccordionGroup = {
+  name: 'CdrAccordionGroup',
+  mixins: [breakpoints],
+
+  provide() {
+    return {
+      unwrap: this.isUnwrapped
+    };
+  },
+
+  props: {
+    unwrap: {
+      type: [String, Boolean],
+      default: false,
+      validator: function validator(value) {
+        if (typeof value === 'string') {
+          return validateProp(value, ['@xs', '@sm', '@md', '@lg'], false);
+        }
+
+        return typeof value === 'boolean';
+      }
+    }
+  },
+
+  data() {
+    return {
+      style: modules_6e2f679e,
+      accordionButtons: [],
+      currentIdx: 0,
+      isUnwrapped: {
+        value: this.unwrap
+      }
+    };
+  },
+
+  computed: {
+    nextIdx() {
+      var idx = this.currentIdx + 1;
+      return idx >= this.accordionButtons.length ? 0 : idx; // if at the last, go to first
+    },
+
+    prevIdx() {
+      var idx = this.currentIdx - 1;
+      return idx <= -1 ? this.accordionButtons.length - 1 : idx; // if at first, go to last
+    }
+
+  },
+
+  mounted() {
+    var _this = this;
+
+    // get all of the buttons in the group
+    this.accordionButtons = this.$el.querySelectorAll('.js-cdr-accordion-button');
+
+    if (typeof this.unwrap === 'string') {
+      this.isUnwrapped.value = this.unwrap.indexOf(this.getCurrentBreakpoint()) !== -1;
+      window.addEventListener('resize', debounce(function () {
+        _this.isUnwrapped.value = _this.unwrap.indexOf(_this.getCurrentBreakpoint()) !== -1;
+      }, 300));
+    }
+  },
+
+  methods: {
+    handleKeyDown(e) {
+      // something besides the button is focused
+      if (this.currentIdx === -1) return;
+      var key = e.key;
+
+      switch (key) {
+        case 'Home':
+          e.preventDefault();
+          this.accordionButtons[0].focus();
+          break;
+
+        case 'End':
+          e.preventDefault();
+          this.accordionButtons[this.accordionButtons.length - 1].focus();
+          break;
+
+        case 'ArrowDown':
+        case 'Down':
+          e.preventDefault();
+          this.accordionButtons[this.nextIdx].focus();
+          break;
+
+        case 'ArrowUp':
+        case 'Up':
+          e.preventDefault();
+          this.accordionButtons[this.prevIdx].focus();
+          break;
+      }
+    },
+
+    focusin(e) {
+      // find out which, if any, button is focused
+      this.currentIdx = Array.prototype.indexOf.call(this.accordionButtons, e.target);
+    }
+
+  },
+
+  render(h) {
+    var _context;
+
+    return h("ul", {
+      "class": clsx(this.style['cdr-accordion-group']),
+      "on": {
+        "focusin": this.focusin,
+        "keydown": this.handleKeyDown
+      }
+    }, [_mapInstanceProperty(_context = this.$slots.default).call(_context, function (vNode) {
+      return vNode.tag !== undefined ? h('li', vNode, [vNode]) : '';
+    })]);
+  }
+
+};
+
+export default CdrAccordionGroup;

package/dist/lib/src/components/accordion/styles/CdrAccordion.mjs

@@ -0,0 +1,3 @@
+var modules_b5678f63 = {"cdr-accordion":"cdr-accordion_11-0-0-alpha-0","cdr-accordion__button":"cdr-accordion__button_11-0-0-alpha-0","cdr-accordion__label":"cdr-accordion__label_11-0-0-alpha-0","cdr-accordion__header":"cdr-accordion__header_11-0-0-alpha-0","cdr-accordion__header--unwrapped":"cdr-accordion__header--unwrapped_11-0-0-alpha-0","cdr-accordion__icon":"cdr-accordion__icon_11-0-0-alpha-0","cdr-accordion__content-container":"cdr-accordion__content-container_11-0-0-alpha-0","cdr-accordion__content":"cdr-accordion__content_11-0-0-alpha-0","cdr-accordion--unwrap":"cdr-accordion--unwrap_11-0-0-alpha-0","cdr-accordion--border-aligned":"cdr-accordion--border-aligned_11-0-0-alpha-0","cdr-accordion--compact":"cdr-accordion--compact_11-0-0-alpha-0","cdr-accordion--focused":"cdr-accordion--focused_11-0-0-alpha-0"};
+
+export default modules_b5678f63;

package/dist/lib/src/components/accordion/styles/CdrAccordionGroup.mjs

@@ -0,0 +1,3 @@
+var modules_6e2f679e = {"cdr-accordion-group":"cdr-accordion-group_11-0-0-alpha-0","cdr-accordion":"cdr-accordion_11-0-0-alpha-0"};
+
+export default modules_6e2f679e;

package/dist/lib/src/components/banner/CdrBanner.mjs

@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+import validateProp from '../../utils/propValidator.mjs';
+import BuildClass from '../../mixins/buildClass.mjs';
+import modules_0306f71a from './styles/CdrBanner.mjs';
+
+var CdrBanner = {
+  name: 'CdrBanner',
+  mixins: [BuildClass],
+  props: {
+    type: {
+      type: String,
+      validator: function validator(value) {
+        return validateProp(value, ['info', 'warning', 'success', 'error', 'default']);
+      },
+      default: 'default'
+    }
+  },
+
+  data() {
+    return {
+      style: modules_0306f71a
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-banner';
+    },
+
+    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);
+    },
+
+    prominenceClass() {
+      return this.$slots['message-body'] ? this.modifyClassName("".concat(this.baseClass, "__wrapper"), 'prominence') : undefined;
+    },
+
+    noMsgBodyClass() {
+      return !this.$slots['message-body'] ? this.modifyClassName("".concat(this.baseClass, "__main"), 'no-msg') : undefined;
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": clsx(this.style[this.baseClass], this.borderClass)
+    }, [h("div", {
+      "class": clsx(this.style['cdr-banner__wrapper'], this.prominenceClass)
+    }, [h("div", {
+      "class": clsx(this.style['cdr-banner__main'], this.themeClass, this.noMsgBodyClass)
+    }, [this.$slots['icon-left'] && h("div", {
+      "class": clsx(this.style['cdr-banner__icon-left'], this.iconClass)
+    }, [this.$slots['icon-left']]), h("span", {
+      "class": this.style['cdr-banner__message']
+    }, [this.$slots.default]), this.$slots['icon-right'] && h("div", {
+      "class": this.style['cdr-banner__icon-right']
+    }, [this.$slots['icon-right']])]), this.$slots['message-body'] && h("div", {
+      "class": this.style['cdr-banner__message-body']
+    }, [this.$slots['message-body']])]), this.$slots['info-action'] && h("div", {
+      "class": this.style['cdr-banner__info-action']
+    }, [this.$slots['info-action']])]);
+  }
+
+};
+
+export default CdrBanner;

package/dist/lib/src/components/banner/styles/CdrBanner.mjs

@@ -0,0 +1,3 @@
+var modules_0306f71a = {"cdr-banner":"cdr-banner_11-0-0-alpha-0","cdr-banner__wrapper":"cdr-banner__wrapper_11-0-0-alpha-0","cdr-banner__wrapper--prominence":"cdr-banner__wrapper--prominence_11-0-0-alpha-0","cdr-banner__main":"cdr-banner__main_11-0-0-alpha-0","cdr-banner__main--info":"cdr-banner__main--info_11-0-0-alpha-0","cdr-banner__main--warning":"cdr-banner__main--warning_11-0-0-alpha-0","cdr-banner__main--success":"cdr-banner__main--success_11-0-0-alpha-0","cdr-banner__main--error":"cdr-banner__main--error_11-0-0-alpha-0","cdr-banner__main--default":"cdr-banner__main--default_11-0-0-alpha-0","cdr-banner__main--no-msg":"cdr-banner__main--no-msg_11-0-0-alpha-0","cdr-banner__icon-left":"cdr-banner__icon-left_11-0-0-alpha-0","cdr-banner__icon-left--info":"cdr-banner__icon-left--info_11-0-0-alpha-0","cdr-banner__icon-left--warning":"cdr-banner__icon-left--warning_11-0-0-alpha-0","cdr-banner__icon-left--success":"cdr-banner__icon-left--success_11-0-0-alpha-0","cdr-banner__icon-left--error":"cdr-banner__icon-left--error_11-0-0-alpha-0","cdr-banner__icon-left--default":"cdr-banner__icon-left--default_11-0-0-alpha-0","cdr-banner__message":"cdr-banner__message_11-0-0-alpha-0","cdr-banner__message-body":"cdr-banner__message-body_11-0-0-alpha-0","cdr-banner__icon-right":"cdr-banner__icon-right_11-0-0-alpha-0","cdr-banner__info-action":"cdr-banner__info-action_11-0-0-alpha-0","cdr-banner--default":"cdr-banner--default_11-0-0-alpha-0","cdr-banner--info":"cdr-banner--info_11-0-0-alpha-0","cdr-banner--warning":"cdr-banner--warning_11-0-0-alpha-0","cdr-banner--success":"cdr-banner--success_11-0-0-alpha-0","cdr-banner--error":"cdr-banner--error_11-0-0-alpha-0"};
+
+export default modules_0306f71a;

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.mjs

@@ -0,0 +1,170 @@
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import clsx from 'clsx';
+import modules_4b26c135 from './styles/CdrBreadcrumb.mjs';
+
+var CdrBreadcrumb = {
+  name: 'CdrBreadcrumb',
+  props: {
+    /**
+     * Required. List of source breadcrumb property objects
+     *
+     * {
+     *   displayText: Breadcrumb Display Text
+     *   url: location breadcrumb should navigate on click
+     * }
+     */
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      },
+      validator: function validator(value) {
+        if (value.length && value.length > 0) {
+          for (var i = 0; i < value.length; i += 1) {
+            if (!(typeof value[i].item === 'object')) {
+              console.error('Breadcrumb items array missing item key at index ', i); // eslint-disable-line no-console
+
+              return false;
+            }
+
+            if (!Object.hasOwnProperty.call(value[i].item, 'name')) {
+              console.error('Breadcrumb items array is missing item.name value at index ', i); // eslint-disable-line no-console
+
+              return false;
+            }
+          }
+        }
+
+        return true;
+      }
+    },
+
+    /**
+     * Flag to track container width threshold exceeded
+     */
+    truncationEnabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      truncate: this.truncationEnabled && this.items.length > 2,
+      style: modules_4b26c135,
+      componentID: Math.random().toString(36).substr(2, 9)
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-breadcrumb';
+    },
+
+    ellipsis() {
+      var _context;
+
+      var h = this.$createElement;
+      return this.truncate ? h("li", {
+        "class": this.style['cdr-breadcrumb__item']
+      }, [h("button", {
+        "on": {
+          "click": this.handleEllipsisClick
+        },
+        "ref": "ellipse",
+        "attrs": {
+          "aria-expanded": "false",
+          "aria-controls": "".concat(this.componentID, "List"),
+          "aria-label": _concatInstanceProperty(_context = "show ".concat(this.items.length - 2, " more navigation level")).call(_context, this.items.length - 2 > 1 ? 's' : '')
+        },
+        "class": this.style['cdr-breadcrumb__ellipses']
+      }, [h("span", {
+        "class": this.style['cdr-breadcrumb__ellipses-icon'],
+        "attrs": {
+          "aria-hidden": "true"
+        }
+      }, [". . ."])]), h("span", {
+        "class": this.style['cdr-breadcrumb__delimiter'],
+        "attrs": {
+          "aria-hidden": "true"
+        }
+      }, ["/"])]) : '';
+    },
+
+    listItems() {
+      var _context2,
+          _this = this;
+
+      var h = this.$createElement;
+      return _mapInstanceProperty(_context2 = this.items).call(_context2, function (breadcrumb, index) {
+        var delimiter = index < _this.items.length - 1 ? h("span", {
+          "class": _this.style['cdr-breadcrumb__delimiter'],
+          "attrs": {
+            "aria-hidden": "true"
+          }
+        }, ["/"]) : '';
+        return h("li", {
+          "class": clsx(_this.style['cdr-breadcrumb__item']),
+          "key": breadcrumb.item.id || breadcrumb.item.name.replace(/ /g, '-').toLowerCase(),
+          "directives": [{
+            name: "show",
+            value: !_this.truncate || index >= _this.items.length - 2
+          }]
+        }, [_this.$scopedSlots.link ? _this.$scopedSlots.link({
+          class: _this.style['cdr-breadcrumb__link'],
+          href: breadcrumb.item.url,
+          content: breadcrumb.item.name
+        }) : h("a", {
+          "class": _this.style['cdr-breadcrumb__link'],
+          "attrs": {
+            "href": breadcrumb.item.url
+          },
+          "on": {
+            "click": function click(e) {
+              return _this.$emit('navigate', breadcrumb, e);
+            }
+          }
+        }, [breadcrumb.item.name]), delimiter]);
+      });
+    }
+
+  },
+  watch: {
+    items() {
+      this.truncate = this.truncationEnabled && this.items.length > 2;
+    }
+
+  },
+  methods: {
+    handleEllipsisClick() {
+      var _this2 = this;
+
+      this.truncate = false;
+      setTimeout(function () {
+        _this2.$el.querySelector('li *').focus();
+      }, 1);
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    return h("nav", {
+      "ref": "container",
+      "class": clsx(this.style[this.baseClass], this.modifierClass),
+      "attrs": {
+        "aria-label": "breadcrumbs"
+      }
+    }, [h("ol", {
+      "attrs": {
+        "id": "".concat(this.componentID, "List")
+      },
+      "ref": "cdrBreadcrumbList",
+      "class": this.style['cdr-breadcrumb__list']
+    }, [this.ellipsis, this.listItems])]);
+  }
+
+};
+
+export default CdrBreadcrumb;

package/dist/lib/src/components/breadcrumb/styles/CdrBreadcrumb.mjs

@@ -0,0 +1,3 @@
+var modules_4b26c135 = {"cdr-breadcrumb":"cdr-breadcrumb_11-0-0-alpha-0","cdr-breadcrumb__list":"cdr-breadcrumb__list_11-0-0-alpha-0","cdr-breadcrumb__item":"cdr-breadcrumb__item_11-0-0-alpha-0","cdr-breadcrumb__link":"cdr-breadcrumb__link_11-0-0-alpha-0","cdr-breadcrumb__delimiter":"cdr-breadcrumb__delimiter_11-0-0-alpha-0","cdr-breadcrumb__ellipses":"cdr-breadcrumb__ellipses_11-0-0-alpha-0","cdr-breadcrumb__ellipses-icon":"cdr-breadcrumb__ellipses-icon_11-0-0-alpha-0"};
+
+export default modules_4b26c135;