@rei/cedar 9.1.1-beta.0

package/dist/lib/src/components/link/CdrLink.mjs

@@ -0,0 +1,77 @@
+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 modifier from '../../mixins/modifier.mjs';
+import modules_ec342341 from './styles/CdrLink.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 CdrLink = {
+  name: 'CdrLink',
+  mixins: [modifier],
+  props: {
+    tag: {
+      type: String,
+      default: 'a'
+    },
+    href: {
+      type: String,
+      default: '#'
+    },
+    inheritColor: {
+      type: Boolean,
+      default: false
+    },
+
+    /** @ignore */
+    target: String,
+
+    /** @ignore */
+    rel: String
+  },
+
+  data() {
+    return {
+      style: modules_ec342341
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-link';
+    },
+
+    computedRel() {
+      if (this.target === '_blank') {
+        return this.rel || 'noopener noreferrer';
+      }
+
+      return this.rel;
+    },
+
+    inheritColorClass() {
+      return this.inheritColor ? this.style['cdr-link--inherit-color'] : '';
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    var Component = this.tag;
+    return h(Component, {
+      "class": clsx(this.style[this.baseClass], this.modifierClass, this.inheritColorClass),
+      "attrs": {
+        "target": this.target,
+        "rel": this.computedRel,
+        "href": this.tag === 'a' ? this.href : null
+      },
+      "on": _objectSpread({}, this.$listeners)
+    }, [this.$slots.default || this.href]);
+  }
+
+};
+
+export default CdrLink;

package/dist/lib/src/components/link/styles/CdrLink.mjs

@@ -0,0 +1,3 @@
+var modules_ec342341 = {"cdr-link":"cdr-link_9-1-1-beta-0","cdr-link--standalone":"cdr-link--standalone_9-1-1-beta-0","cdr-link--inherit-color":"cdr-link--inherit-color_9-1-1-beta-0"};
+
+export default modules_ec342341;

package/dist/lib/src/components/list/CdrList.mjs

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+import modifier from '../../mixins/modifier.mjs';
+import modules_c3de6696 from './styles/CdrList.mjs';
+
+var CdrList = {
+  name: 'CdrList',
+  mixins: [modifier],
+  props: {
+    /**
+     * Tag accepts a user defined element and expects either: 'ul' = Unordered List or 'ol' = Ordered List.
+     */
+    tag: {
+      type: String,
+      default: 'ul',
+      validator: function validator(value) {
+        return ['ul', 'ol'].indexOf(value) >= 0 || false;
+      }
+    }
+  },
+
+  data() {
+    return {
+      style: modules_c3de6696
+    };
+  },
+
+  computed: {
+    baseClass() {
+      return 'cdr-list';
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    var Component = this.tag;
+    return h(Component, {
+      "class": clsx(this.style[this.baseClass], this.modifierClass)
+    }, [this.$slots.default]);
+  }
+
+};
+
+export default CdrList;

package/dist/lib/src/components/list/styles/CdrList.mjs

@@ -0,0 +1,3 @@
+var modules_c3de6696 = {"cdr-list":"cdr-list_9-1-1-beta-0","cdr-list--compact":"cdr-list--compact_9-1-1-beta-0","cdr-list--ordered":"cdr-list--ordered_9-1-1-beta-0","cdr-list--unordered":"cdr-list--unordered_9-1-1-beta-0","cdr-list--inline":"cdr-list--inline_9-1-1-beta-0"};
+
+export default modules_c3de6696;

package/dist/lib/src/components/modal/CdrModal.mjs

@@ -0,0 +1,377 @@
+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 debounce from 'lodash-es/debounce';
+import tabbable from 'tabbable';
+import clsx from 'clsx';
+import { CdrBreakpointSm, CdrSpaceTwoX, CdrSpaceOneX } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.mjs';
+import modules_11cadc74 from './styles/CdrModal.mjs';
+import onTransitionEnd from './onTransitionEnd.mjs';
+import CdrButton from '../button/CdrButton.mjs';
+import IconXLg from '../icon/comps/x-lg.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 CdrModal = {
+  name: 'CdrModal',
+  components: {
+    CdrButton,
+    IconXLg
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    role: {
+      type: String,
+      required: false,
+      default: 'dialog'
+    },
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: null
+    },
+    id: {
+      type: String,
+      required: false,
+      default: null
+    },
+    overlayClass: String,
+    wrapperClass: String,
+    contentClass: String,
+    animationDuration: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  data() {
+    return {
+      style: modules_11cadc74,
+      unsubscribe: null,
+      keyHandler: null,
+      lastActive: null,
+      focusHandler: null,
+      resizeHandler: null,
+      isOpening: false,
+      offset: null,
+      headerHeight: 0,
+      totalHeight: 0,
+      isScrolling: false,
+      hasScrollbar: false,
+      fullscreen: false
+    };
+  },
+
+  computed: {
+    dialogAttrs() {
+      return {
+        'aria-describedby': this.ariaDescribedby,
+        'aria-modal': 'true',
+        id: this.id
+      };
+    },
+
+    scrollPadding() {
+      if (this.isScrolling && this.hasScrollbar) {
+        // content is scrolling, scrollbar is always present
+        return 4;
+      }
+
+      if (this.isScrolling) {
+        // content is scrolling, scrollbar only appears on scroll
+        return 12;
+      }
+
+      return 0;
+    },
+
+    verticalSpace() {
+      // contentWrap vertical padding
+      var fullscreen = Number(CdrSpaceTwoX);
+      var windowed = Number(CdrSpaceTwoX) + Number(CdrSpaceOneX);
+      return this.fullscreen ? fullscreen : windowed + fullscreen; // fullscreen, here, would account for outerWrap padding, which is the same CdrSpaceTwoX
+    },
+
+    scrollMaxHeight() {
+      return this.totalHeight - this.headerHeight - this.verticalSpace;
+    }
+
+  },
+  watch: {
+    opened(newValue, oldValue) {
+      if (!!newValue === !!oldValue) return;
+
+      if (newValue) {
+        this.handleOpened();
+      } else {
+        this.handleClosed();
+      }
+    }
+
+  },
+
+  mounted() {
+    var _this = this;
+
+    if (this.opened) {
+      this.handleOpened();
+    }
+
+    this.resizeHandler = debounce(function () {
+      _this.measureContent();
+    }, 300);
+    window.addEventListener('resize', this.resizeHandler);
+  },
+
+  beforeDestroy() {
+    if (this.unsubscribe) this.unsubscribe();
+    if (this.opened) this.removeNoScroll();
+    document.removeEventListener('focusin', this.focusHandler, true);
+    document.removeEventListener('keydown', this.keyHandler);
+    window.removeEventListener('resize', this.resizeHandler);
+  },
+
+  methods: {
+    measureContent() {
+      var _this2 = this;
+
+      this.$nextTick(function () {
+        var _this2$$refs$header, _this2$$refs$content, _this2$$refs$content2, _this2$$refs$content3, _this2$$refs$content4;
+
+        _this2.totalHeight = window.innerHeight;
+        _this2.fullscreen = window.innerWidth < CdrBreakpointSm;
+        _this2.headerHeight = (_this2$$refs$header = _this2.$refs.header) === null || _this2$$refs$header === void 0 ? void 0 : _this2$$refs$header.offsetHeight;
+        _this2.isScrolling = ((_this2$$refs$content = _this2.$refs.content) === null || _this2$$refs$content === void 0 ? void 0 : _this2$$refs$content.scrollHeight) > ((_this2$$refs$content2 = _this2.$refs.content) === null || _this2$$refs$content2 === void 0 ? void 0 : _this2$$refs$content2.offsetHeight);
+        _this2.hasScrollbar = ((_this2$$refs$content3 = _this2.$refs.content) === null || _this2$$refs$content3 === void 0 ? void 0 : _this2$$refs$content3.offsetWidth) - ((_this2$$refs$content4 = _this2.$refs.content) === null || _this2$$refs$content4 === void 0 ? void 0 : _this2$$refs$content4.clientWidth) > 0;
+      });
+    },
+
+    handleKeyDown(_ref) {
+      var key = _ref.key;
+
+      switch (key) {
+        case 'Escape':
+        case 'Esc':
+          this.onClick();
+          break;
+      }
+    },
+
+    handleFocus(e) {
+      var _document = document,
+          documentElement = _document.documentElement;
+      if (this.$refs.modal.contains(e.target) || !documentElement) return;
+      var tabbables = tabbable(documentElement);
+      var these = tabbable(this.$refs.modal);
+      var nextIx = tabbables.indexOf(e.target);
+      var firstModalIx = tabbables.indexOf(these[0]);
+      var nextRef = nextIx < firstModalIx ? these[these.length - 1] : these[0];
+      if (nextRef) nextRef.focus();
+      documentElement.scrollTop = this.scrollTop;
+      documentElement.scrollLeft = this.scrollLeft;
+    },
+
+    handleOpened() {
+      var _this3 = this;
+
+      var _document2 = document,
+          activeElement = _document2.activeElement;
+      this.addNoScroll();
+      this.isOpening = true;
+      this.lastActive = activeElement;
+      this.$nextTick(function () {
+        if (_this3.$refs.modal) _this3.$refs.modal.focus(); // wrapped in if so testing error isn't thrown
+
+        _this3.measureContent();
+
+        _this3.addHandlers();
+
+        setTimeout(function () {
+          // for some reason Safari scrolls the wrapper down a bit?
+          // doesn't work without setTimeout for some unknown reason
+          if (_this3.$refs.wrapper) _this3.$refs.wrapper.scrollTop = 0; // there is a race condition for measuring overflow when modal defaults to open,
+          // this seems to cover that
+
+          _this3.measureContent();
+        });
+      });
+    },
+
+    handleClosed() {
+      var _this4 = this;
+
+      var _document3 = document,
+          documentElement = _document3.documentElement;
+      document.removeEventListener('keydown', this.keyHandler);
+      document.removeEventListener('focusin', this.focusHandler, true);
+      this.isOpening = false;
+      this.unsubscribe = onTransitionEnd(this.$refs.wrapper, function () {
+        if (_this4.isOpening) return;
+
+        _this4.unsubscribe();
+
+        _this4.removeNoScroll();
+
+        _this4.unsubscribe = null; // handle scroll-behavior: smooth
+
+        if (documentElement) documentElement.style.scrollBehavior = 'auto'; // restore previous scroll position
+
+        window.scrollTo(_this4.offset.x, _this4.offset.y);
+        if (documentElement) documentElement.style.scrollBehavior = '';
+        if (_this4.lastActive) _this4.lastActive.focus();
+      }, this.animationDuration + 16);
+    },
+
+    addNoScroll() {
+      var _document4 = document,
+          documentElement = _document4.documentElement,
+          body = _document4.body;
+      var offset = {
+        x: window.scrollX || (documentElement || {}).scrollLeft || (body || {}).scrollLeft || 0,
+        y: window.scrollY || (documentElement || {}).scrollTop || (body || {}).scrollTop || 0
+      };
+      this.offset = offset;
+
+      if (documentElement) {
+        documentElement.classList.add(modules_11cadc74['cdr-modal__noscroll']); // keep current scroll position manually
+
+        documentElement.style.top = "-".concat(offset.y, "px");
+        documentElement.style.left = "-".concat(offset.x, "px");
+      }
+
+      if (body) {
+        body.classList.add(modules_11cadc74['cdr-modal__noscroll']);
+      }
+    },
+
+    removeNoScroll() {
+      var _document5 = document,
+          documentElement = _document5.documentElement,
+          body = _document5.body;
+
+      if (body) {
+        body.classList.remove(modules_11cadc74['cdr-modal__noscroll']);
+      }
+
+      if (documentElement) {
+        documentElement.classList.remove(modules_11cadc74['cdr-modal__noscroll']);
+        documentElement.style.top = '';
+        documentElement.style.left = '';
+      }
+    },
+
+    addHandlers() {
+      this.focusHandler = this.handleFocus.bind(this);
+      this.keyHandler = this.handleKeyDown.bind(this);
+      document.addEventListener('focusin', this.focusHandler, true);
+      document.addEventListener('keydown', this.keyHandler);
+    },
+
+    onClick(e) {
+      this.$emit('closed', e);
+    }
+
+  },
+
+  render() {
+    var h = arguments[0];
+    var onClick = this.onClick,
+        opened = this.opened,
+        label = this.label,
+        wrapperClass = this.wrapperClass,
+        overlayClass = this.overlayClass,
+        contentClass = this.contentClass;
+    return h("div", {
+      "class": clsx(this.style['cdr-modal'], {
+        [this.style.closed]: !opened
+      }),
+      "ref": "wrapper"
+    }, [h("div", {
+      "class": clsx(this.style['cdr-modal__outerWrap'], wrapperClass)
+    }, [h("div", {
+      "attrs": {
+        "aria-hidden": "true"
+      },
+      "on": {
+        "click": onClick
+      },
+      "class": clsx(this.style['cdr-modal__overlay'], overlayClass)
+    }), h("div", {
+      "attrs": {
+        "tabIndex": opened ? '0' : undefined
+      }
+    }), h("div", {
+      "ref": "modal",
+      "class": clsx(this.style['cdr-modal__contentWrap'], this.style['cdr-modal__dialog']),
+      "attrs": _objectSpread({
+        "tabIndex": "-1",
+        "role": this.role,
+        "aria-modal": !!opened,
+        "aria-label": label
+      }, this.dialogAttrs)
+    }, [this.$slots.modal || h("div", {
+      "class": clsx(this.style['cdr-modal__innerWrap'], contentClass),
+      "style": !opened ? {
+        display: 'none'
+      } : undefined
+    }, [h("section", [h("div", {
+      "class": this.style['cdr-modal__content']
+    }, [h("div", {
+      "class": this.style['cdr-modal__header'],
+      "ref": "header"
+    }, [h("div", {
+      "class": this.style['cdr-modal__title']
+    }, [this.showTitle && this.$slots.title, this.showTitle && !this.$slots.title && h("h1", [this.label])]), h("cdr-button", {
+      "class": this.style['cdr-modal__close-button'],
+      "attrs": {
+        "icon-only": true,
+        "with-background": true,
+        "aria-label": "Close"
+      },
+      "on": {
+        "click": onClick
+      }
+    }, [h(IconXLg, {
+      "slot": "icon",
+      "attrs": {
+        "inherit-color": true
+      }
+    })])]), h("div", {
+      "attrs": {
+        "role": "document"
+      },
+      "class": this.style['cdr-modal__text']
+    }, [h("div", {
+      "class": this.style['cdr-modal__text-content'],
+      "style": {
+        maxHeight: "".concat(this.scrollMaxHeight, "px"),
+        paddingRight: "".concat(this.scrollPadding, "px")
+      },
+      "ref": "content",
+      "attrs": {
+        "tabindex": "0"
+      }
+    }, [this.$slots.default])])])])])]), h("div", {
+      "attrs": {
+        "tabIndex": opened ? '0' : undefined
+      }
+    })])]);
+  }
+
+};
+
+export default CdrModal;

package/dist/lib/src/components/modal/onTransitionEnd.mjs

@@ -0,0 +1,42 @@
+/* eslint-env browser */
+var transitions = {
+  transition: 'transitionend',
+  WebkitTransition: 'webkitTransitionEnd',
+  MozTransition: 'transitionend',
+  OTransition: 'oTransitionEnd otransitionend'
+};
+var transitionEvent;
+
+if (typeof document !== 'undefined') {
+  var _document$createEleme = document.createElement('div'),
+      style = _document$createEleme.style;
+
+  var keys = Object.keys(transitions);
+
+  for (var i = 0, key = keys[i]; i < keys.length; i += 1, key = keys[i]) {
+    if (key in style) {
+      transitionEvent = transitions[key];
+      break;
+    }
+  }
+}
+
+var onTransitionEnd = (function (element, callback, timeout) {
+  element.addEventListener(transitionEvent, callback);
+  var timeoutId;
+
+  if (timeout) {
+    // console.log('onTransitionEnd timeout', timeout);
+    timeoutId = setTimeout(function () {
+      element.removeEventListener(transitionEvent, callback);
+      callback();
+    }, timeout);
+  }
+
+  return function () {
+    clearTimeout(timeoutId);
+    element.removeEventListener(transitionEvent, callback);
+  };
+});
+
+export default onTransitionEnd;

package/dist/lib/src/components/modal/styles/CdrModal.mjs

@@ -0,0 +1,3 @@
+var modules_11cadc74 = {"cdr-modal":"cdr-modal_9-1-1-beta-0","cdr-modal__overlay":"cdr-modal__overlay_9-1-1-beta-0","cdr-modal__outerWrap":"cdr-modal__outerWrap_9-1-1-beta-0","cdr-modal__contentWrap":"cdr-modal__contentWrap_9-1-1-beta-0","cdr-modal__innerWrap":"cdr-modal__innerWrap_9-1-1-beta-0","cdr-modal__dialog":"cdr-modal__dialog_9-1-1-beta-0","cdr-modal__content":"cdr-modal__content_9-1-1-beta-0","cdr-modal__header":"cdr-modal__header_9-1-1-beta-0","cdr-modal__title":"cdr-modal__title_9-1-1-beta-0","cdr-modal__close-button":"cdr-modal__close-button_9-1-1-beta-0","cdr-modal__text":"cdr-modal__text_9-1-1-beta-0","cdr-modal__text-content":"cdr-modal__text-content_9-1-1-beta-0","closed":"closed_9-1-1-beta-0","cdr-modal__noscroll":"cdr-modal__noscroll_9-1-1-beta-0"};
+
+export default modules_11cadc74;