@rei/cedar 11.0.0-alpha.0

package/dist/lib/src/components/pagination/CdrPagination.mjs

@@ -0,0 +1,479 @@
+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 _sliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/slice';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import clsx from 'clsx';
+import IconCaretLeft from '../icon/comps/caret-left.mjs';
+import IconCaretRight from '../icon/comps/caret-right.mjs';
+import CdrSelect from '../select/CdrSelect.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import modules_951394a1 from './styles/CdrPagination.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 CdrPagination = {
+  name: 'CdrPagination',
+  components: {
+    IconCaretLeft,
+    IconCaretRight,
+    CdrSelect
+  },
+  model: {
+    prop: 'value',
+    event: 'update-pagination'
+  },
+  props: {
+    /**
+     * Total number of pages. Sometimes the total number of pages is different than total page data
+     * and this prop allows for that.
+     */
+    totalPages: {
+      type: Number,
+      default: null
+    },
+
+    /**
+     * Array of objects. Objects have structure of { page: Number, url: String }
+     */
+    pages: {
+      type: Array,
+      required: true,
+      validator: function validator(value) {
+        var result = value.every(function (obj) {
+          if (!Object.prototype.hasOwnProperty.call(obj, 'page') || typeof obj.page !== 'number') {
+            console.error('Property "page" is missing or is not a number', obj); // eslint-disable-line
+
+            return false;
+          }
+
+          if (!Object.prototype.hasOwnProperty.call(obj, 'url') || typeof obj.url !== 'string') {
+            console.error('Property "url" is missing or is not a string', obj); // eslint-disable-line
+
+            return false;
+          }
+
+          return true;
+        });
+        return result;
+      }
+    },
+    linkTag: {
+      type: String,
+      default: 'a',
+      validator: function validator(value) {
+        return validateProp(value, ['a', 'button']);
+      }
+    },
+    forLabel: {
+      type: String,
+      default: ''
+    },
+
+    /** @ignore used for binding v-model, represents the current page */
+    value: {
+      type: Number
+    }
+  },
+
+  data() {
+    return {
+      style: modules_951394a1,
+      componentID: Math.random().toString(36).substr(2, 9),
+      currentIdx: 0
+    };
+  },
+
+  computed: {
+    // track value internally (for use with select vmodel) and update external value when internal changes
+    innerValue: {
+      get() {
+        return this.value;
+      },
+
+      set(newValue) {
+        this.setCurrentIdx(newValue);
+        this.$emit('update-pagination', newValue);
+      }
+
+    },
+
+    currentUrl() {
+      return this.pages[this.currentIdx].url;
+    },
+
+    totalPageData() {
+      return this.pages.length;
+    },
+
+    prevPageIdx() {
+      return this.currentIdx - 1;
+    },
+
+    nextPageIdx() {
+      return this.currentIdx + 1;
+    },
+
+    ariaLabel() {
+      return this.forLabel || 'Pagination';
+    },
+
+    /**
+     * Creates an array of the pages that should be shown as links with logic for truncation.
+     *
+     * If total = 20 ([#] indicates current page)
+     * [1] 2 3 4 5 ... 20
+     * 1 2 3 [4] 5 ... 20
+     * 1 ... 4 [5] 6 ... 20
+     * 1 ... 15 [16] 17 ... 20
+     * 1 ... 16 [17] 18 19 20
+     *
+     * If total 5 (or anything <= 7)
+     * [1] 2 3 4 5
+     * 1 2 [3] 4 5
+     * 1 2 3 4 [5]
+     *
+     * Degrades for prev/next only scenario
+     * urls = {"4": "url4", "5": "url5", "6": "url6"} (assuming current page is 5)
+     * 4 [5] 6
+     */
+    paginationData() {
+      var total = this.totalPageData;
+      var current = this.innerValue;
+      var delta = 1;
+      var range = [];
+      var over5 = true;
+      var over5remain = true;
+
+      if (total <= 7) {
+        // all pages
+        return this.pages;
+      }
+
+      if (current < 5) {
+        var _context;
+
+        // if first 5 pages
+        over5 = false; // [2-5]
+
+        range = _sliceInstanceProperty(_context = this.pages).call(_context, 1, 5);
+      } else if (total - current < 4) {
+        var _context2;
+
+        // if last 5 pages
+        over5remain = false;
+        range = _sliceInstanceProperty(_context2 = this.pages).call(_context2, -5, -1);
+      } else {
+        // else in between
+        for (var i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i += 1) {
+          range.push(this.pages[i - 1]);
+        }
+      }
+
+      if (current - delta > 2 && over5) {
+        range.unshift('&hellip;');
+      }
+
+      if (current + delta < total - 1 && over5remain) {
+        range.push('&hellip;');
+      }
+
+      range.unshift(this.pages[0]);
+      range.push(this.pages[total - 1]);
+      return range;
+    },
+
+    prevElAttrs() {
+      var _this = this;
+
+      var prevPageData = this.pages[this.prevPageIdx];
+      return {
+        // things that we want to be able to easily bulk bind to scoped slot (for a11y, styling, etc.)
+        attrs: {
+          class: clsx(this.style['cdr-pagination__link'], this.style['cdr-pagination__prev']),
+          'aria-label': 'Go to previous Page',
+          ref: "prev-link-".concat(this.componentID)
+        },
+        // The rest of this is available for binding if needed by user (i.e. optional with vue-router)
+        href: prevPageData === undefined ? null : prevPageData.url,
+        page: prevPageData === undefined ? null : prevPageData.page,
+        content: 'Prev',
+        iconClass: this.style['cdr-pagination__caret--prev'],
+        iconComponent: 'icon-caret-left',
+        iconPath: '#caret-left',
+        click: function click(e) {
+          return _this.navigate(prevPageData.page, e);
+        }
+      };
+    },
+
+    prevEl() {
+      var h = this.$createElement;
+      var LinkTag = this.linkTag;
+      return this.innerValue > this.pages[0].page ? h("li", [this.$scopedSlots.prevLink ? this.$scopedSlots.prevLink(this.prevElAttrs) : h(LinkTag, {
+        "attrs": _objectSpread(_objectSpread({}, this.prevElAttrs.attrs), {}, {
+          "href": LinkTag === 'a' && this.prevElAttrs.href
+        }),
+        "ref": this.prevElAttrs.attrs.ref,
+        "on": {
+          "click": this.prevElAttrs.click
+        }
+      }, [h(this.prevElAttrs.iconComponent, {
+        "class": this.prevElAttrs.iconClass
+      }), this.prevElAttrs.content])]) : h("li", {
+        "attrs": {
+          "aria-hidden": "true"
+        }
+      }, [h("span", {
+        "attrs": {
+          "aria-disabled": "true"
+        },
+        "class": [this.prevElAttrs.attrs.class, this.style['cdr-pagination__link--disabled']]
+      }, [h(this.prevElAttrs.iconComponent, {
+        "class": this.prevElAttrs.iconClass,
+        "attrs": {
+          "inherit-color": true
+        }
+      }), this.prevElAttrs.content])]);
+    },
+
+    nextElAttrs() {
+      var _this2 = this;
+
+      var nextPageData = this.pages[this.nextPageIdx];
+      return {
+        // things that we want to be able to easily bulk bind to scoped slot (for a11y, styling, etc.)
+        attrs: {
+          class: clsx(this.style['cdr-pagination__link'], this.style['cdr-pagination__next']),
+          'aria-label': 'Go to next page',
+          ref: "next-link-".concat(this.componentID)
+        },
+        // The rest of this is available for binding if needed by user (i.e. optional with vue-router)
+        href: nextPageData === undefined ? null : nextPageData.url,
+        page: nextPageData === undefined ? null : nextPageData.page,
+        content: 'Next',
+        iconClass: this.style['cdr-pagination__caret--next'],
+        iconComponent: 'icon-caret-right',
+        iconPath: '#caret-right',
+        click: function click(e) {
+          return _this2.navigate(nextPageData.page, e);
+        }
+      };
+    },
+
+    nextEl() {
+      var h = this.$createElement;
+      var LinkTag = this.linkTag;
+      return this.innerValue < this.pages[this.totalPageData - 1].page ? h("li", [this.$scopedSlots.nextLink ? this.$scopedSlots.nextLink(this.nextElAttrs) : h(LinkTag, {
+        "attrs": _objectSpread(_objectSpread({}, this.nextElAttrs.attrs), {}, {
+          "href": LinkTag === 'a' && this.nextElAttrs.href
+        }),
+        "ref": this.nextElAttrs.attrs.ref,
+        "on": {
+          "click": this.nextElAttrs.click
+        }
+      }, [this.nextElAttrs.content, h(this.nextElAttrs.iconComponent, {
+        "class": this.nextElAttrs.iconClass
+      })])]) : h("li", {
+        "attrs": {
+          "aria-hidden": "true"
+        }
+      }, [h("span", {
+        "attrs": {
+          "aria-disabled": "true"
+        },
+        "class": [this.nextElAttrs.attrs.class, this.style['cdr-pagination__link--disabled']]
+      }, [this.nextElAttrs.content, h(this.nextElAttrs.iconComponent, {
+        "class": this.nextElAttrs.iconClass,
+        "attrs": {
+          "inherit-color": true
+        }
+      })])]);
+    },
+
+    desktopEl() {
+      var _context3,
+          _this3 = this;
+
+      var h = this.$createElement;
+      return _mapInstanceProperty(_context3 = this.paginationData).call(_context3, function (n) {
+        var _context4;
+
+        return h("li", {
+          "key": _concatInstanceProperty(_context4 = "".concat(n, "-")).call(_context4, _this3.guid()),
+          "class": _this3.style['cdr-pagination__li--links']
+        }, [n === '&hellip;' && h("span", {
+          "class": _this3.style['cdr-pagination__ellipse'],
+          "domProps": {
+            "innerHTML": n
+          }
+        }), n !== '&hellip;' && _this3.renderLinkEl(n)]);
+      });
+    },
+
+    mobileEl() {
+      var _this4 = this,
+          _context5;
+
+      var h = this.$createElement;
+      return h("li", {
+        "class": this.style['cdr-pagination__li--select']
+      }, [h("cdr-select", {
+        "attrs": {
+          "label": "Navigate to page",
+          "hide-label": true,
+          "id": "select-".concat(this.componentID)
+        },
+        "on": {
+          "change": this.select
+        },
+        "ref": "select-".concat(this.componentID),
+        "model": {
+          value: _this4.innerValue,
+          callback: function callback($$v) {
+            _this4.innerValue = $$v;
+          }
+        }
+      }, [_mapInstanceProperty(_context5 = this.paginationData).call(_context5, function (n) {
+        var _context6;
+
+        return n !== '&hellip;' && h("option", {
+          "key": _concatInstanceProperty(_context6 = "".concat(n, "-")).call(_context6, _this4.guid()),
+          "domProps": {
+            "value": n.page
+          }
+        }, ["Page ", n.page, _this4.totalPages === null ? '' : " of ".concat(_this4.totalPages)]);
+      })])]);
+    }
+
+  },
+  watch: {
+    pages() {
+      this.setCurrentIdx(this.innerValue);
+    }
+
+  },
+
+  beforeMount() {
+    this.setCurrentIdx(this.innerValue);
+  },
+
+  methods: {
+    setCurrentIdx(page) {
+      var _context7;
+
+      this.currentIdx = _mapInstanceProperty(_context7 = this.pages).call(_context7, function (x) {
+        return x.page;
+      }).indexOf(page);
+    },
+
+    navigate(pageNum, e) {
+      // Dont do anything if clicking the current active page
+      if (pageNum === this.innerValue) {
+        e.preventDefault();
+        return;
+      }
+
+      this.innerValue = pageNum;
+      this.$emit('navigate', pageNum, this.currentUrl, e);
+      this.$nextTick(function () {
+        // Done in a nextTick() to ensure rendering complete
+        try {
+          // Emulate native link click page reloading behaviour by blurring the
+          // paginator and returning focus to the document
+          var target = e.currentTarget || e.target;
+          target.blur();
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+        }
+      });
+    },
+
+    select(page, e) {
+      e.preventDefault();
+
+      if (this.$scopedSlots.link) {
+        var _context8;
+
+        var ref = this.$scopedSlots.link()[0].context.$refs[_concatInstanceProperty(_context8 = "page-link-".concat(page, "-")).call(_context8, this.componentID)]; // eslint-disable-line max-len
+
+
+        if (ref.$el) {
+          // it's a component (like vue-router)
+          ref.$el.click();
+        } else {
+          // it's standard markup
+          ref.click();
+        }
+      } else {
+        var _context9;
+
+        this.$refs[_concatInstanceProperty(_context9 = "page-link-".concat(page, "-")).call(_context9, this.componentID)].click();
+      }
+    },
+
+    guid() {
+      var _context10, _context11, _context12, _context13, _context14, _context15, _context16;
+
+      function s4() {
+        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+      }
+
+      return _concatInstanceProperty(_context10 = _concatInstanceProperty(_context11 = _concatInstanceProperty(_context12 = _concatInstanceProperty(_context13 = _concatInstanceProperty(_context14 = _concatInstanceProperty(_context15 = _concatInstanceProperty(_context16 = "".concat(s4())).call(_context16, s4(), "-")).call(_context15, s4(), "-")).call(_context14, s4(), "-")).call(_context13, s4(), "-")).call(_context12, s4())).call(_context11, s4())).call(_context10, s4());
+    },
+
+    renderLinkEl(n) {
+      var _context17,
+          _this5 = this;
+
+      var h = this.$createElement;
+      var linkData = {
+        // things that we want to be able to easily bulk bind to scoped slot (for a11y, styling, etc.)
+        attrs: {
+          class: clsx(this.style['cdr-pagination__link'], {
+            current: n.page === this.innerValue
+          }),
+          'aria-label': n.page === this.innerValue ? "Current page, page ".concat(n.page) : "Go to page ".concat(n.page),
+          'aria-current': n.page === this.innerValue ? 'page' : null,
+          ref: _concatInstanceProperty(_context17 = "page-link-".concat(n.page, "-")).call(_context17, this.componentID)
+        },
+        // The rest of this is available for binding if needed by user (i.e. optional with vue-router)
+        href: n.url,
+        click: function click(e) {
+          return _this5.navigate(n.page, e);
+        },
+        page: n.page,
+        content: n.page
+      };
+      var LinkTag = this.linkTag;
+      return this.$scopedSlots.link ? this.$scopedSlots.link(linkData) : h(LinkTag, {
+        "attrs": _objectSpread(_objectSpread({}, linkData.attrs), {}, {
+          "href": LinkTag === 'a' && linkData.href
+        }),
+        "on": {
+          "click": linkData.click
+        },
+        "ref": linkData.attrs.ref
+      }, [linkData.content]);
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    return h("nav", {
+      "attrs": {
+        "aria-label": this.ariaLabel
+      }
+    }, [h("ol", {
+      "class": this.style['cdr-pagination']
+    }, [this.prevEl, this.desktopEl, this.mobileEl, this.nextEl])]);
+  }
+
+};
+
+export default CdrPagination;

package/dist/lib/src/components/pagination/styles/CdrPagination.mjs

@@ -0,0 +1,3 @@
+var modules_951394a1 = {"cdr-pagination":"cdr-pagination_11-0-0-alpha-0","cdr-pagination__li--links":"cdr-pagination__li--links_11-0-0-alpha-0","cdr-pagination__li--select":"cdr-pagination__li--select_11-0-0-alpha-0","cdr-pagination__link":"cdr-pagination__link_11-0-0-alpha-0","cdr-pagination__link--disabled":"cdr-pagination__link--disabled_11-0-0-alpha-0","cdr-pagination__ellipse":"cdr-pagination__ellipse_11-0-0-alpha-0","cdr-pagination__prev":"cdr-pagination__prev_11-0-0-alpha-0","cdr-pagination__next":"cdr-pagination__next_11-0-0-alpha-0","cdr-pagination__caret--prev":"cdr-pagination__caret--prev_11-0-0-alpha-0","cdr-pagination__caret--next":"cdr-pagination__caret--next_11-0-0-alpha-0"};
+
+export default modules_951394a1;

package/dist/lib/src/components/popover/CdrPopover.mjs

@@ -0,0 +1,158 @@
+import tabbable from 'tabbable';
+import clsx from 'clsx';
+import modules_36d90b1f from './styles/CdrPopover.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import IconXSm from '../icon/comps/x-sm.mjs';
+import CdrButton from '../button/CdrButton.mjs';
+import CdrPopup from '../popup/CdrPopup.mjs';
+
+var CdrPopover = {
+  name: 'CdrPopover',
+  components: {
+    CdrPopup,
+    CdrButton,
+    IconXSm
+  },
+  props: {
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: function validator(value) {
+        return validateProp(value, ['top', 'bottom', 'left', 'right']);
+      }
+    },
+    autoPosition: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    contentClass: {
+      type: String,
+      required: false
+    },
+    open: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+
+  data() {
+    return {
+      style: modules_36d90b1f,
+      isOpen: false,
+      openHandler: undefined,
+      lastActive: undefined
+    };
+  },
+
+  watch: {
+    open() {
+      if (this.open) {
+        this.openPopover();
+      } else {
+        this.closePopover();
+      }
+    }
+
+  },
+
+  mounted() {
+    this.addHandlers();
+    var trigger = this.$refs.trigger.children[0];
+
+    if (trigger) {
+      trigger.setAttribute('aria-controls', this.id);
+      trigger.setAttribute('aria-haspopup', 'dialog');
+    }
+  },
+
+  methods: {
+    openPopover(e) {
+      var _this = this;
+
+      var _document = document,
+          activeElement = _document.activeElement;
+      this.lastActive = activeElement;
+      this.isOpen = true;
+      this.$emit('opened', e);
+      this.$nextTick(function () {
+        var tabbables = tabbable(_this.$refs.popup.$el);
+        if (tabbables[0]) tabbables[0].focus();
+      });
+    },
+
+    closePopover(e) {
+      this.isOpen = false;
+      this.$emit('closed', e);
+      if (this.lastActive) this.lastActive.focus();
+    },
+
+    addHandlers() {
+      this.openHandler = this.openPopover.bind(this);
+      var triggerElement = this.$refs.trigger.children[0];
+
+      if (triggerElement) {
+        triggerElement.addEventListener('click', this.openHandler);
+      }
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": clsx(this.style['cdr-popover--wrapper'], this.$slots.trigger ? this.style['cdr-popover--position'] : '')
+    }, [h("div", {
+      "ref": "trigger"
+    }, [this.$slots.trigger]), h("cdr-popup", {
+      "class": this.style['cdr-popover'],
+      "attrs": {
+        "role": "dialog",
+        "position": this.position,
+        "autoPosition": this.autoPosition,
+        "opened": this.isOpen,
+        "aria-expanded": "".concat(this.isOpen),
+        "id": this.id,
+        "contentClass": this.contentClass
+      },
+      "ref": "popup",
+      "on": {
+        "closed": this.closePopover
+      }
+    }, [h("div", {
+      "class": this.style['cdr-popover__container']
+    }, [h("div", {
+      "class": this.style['cdr-popover__content']
+    }, [(this.$slots.title || this.label) && h("div", {
+      "class": this.style['cdr-popover__title']
+    }, [this.$slots.title, !this.$slots.title && this.label && h("span", [this.label])]), this.$slots.default]), h("cdr-button", {
+      "class": this.style['cdr-popover__close-button'],
+      "attrs": {
+        "icon-only": true,
+        "aria-label": "Close",
+        "size": "small"
+      },
+      "on": {
+        "click": this.closePopover
+      }
+    }, [h("icon-x-sm", {
+      "slot": "icon",
+      "attrs": {
+        "inherit-color": true
+      }
+    })])])])]);
+  }
+
+};
+
+export default CdrPopover;

package/dist/lib/src/components/popover/styles/CdrPopover.mjs

@@ -0,0 +1,3 @@
+var modules_36d90b1f = {"cdr-popover--position":"cdr-popover--position_11-0-0-alpha-0","cdr-popover--wrapper":"cdr-popover--wrapper_11-0-0-alpha-0","cdr-popup--closed":"cdr-popup--closed_11-0-0-alpha-0","cdr-popover__title":"cdr-popover__title_11-0-0-alpha-0","cdr-popover__container":"cdr-popover__container_11-0-0-alpha-0","cdr-popover__content":"cdr-popover__content_11-0-0-alpha-0","cdr-popover__close-button":"cdr-popover__close-button_11-0-0-alpha-0"};
+
+export default modules_36d90b1f;