@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/src/components/pagination/pagination.hbs

@@ -0,0 +1,67 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<div class="{{@root.prefix}}--pagination" data-pagination>
+  <div class="{{@root.prefix}}--pagination__left">
+    <label id="select-id-pagination-count-label{{#if disabledPaginationButton}}--disabled-example{{/if}}"
+      class="{{@root.prefix}}--pagination__text"
+      for="select-id-pagination-count{{#if disabledPaginationButton}}--disabled-example{{/if}}">
+      Items per page:
+    </label>
+    <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline {{@root.prefix}}--select__item-count">
+      <select class="{{@root.prefix}}--select-input"
+        id="select-id-pagination-count{{#if disabledPaginationButton}}--disabled-example{{/if}}"
+        aria-label="Items per page" tabindex="0" data-items-per-page>
+        {{#each itemsPerPageChoices}}
+        <option class="{{@root.prefix}}--select-option" value="{{value}}">
+          {{label}}
+        </option>
+        {{/each}}
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
+    </div>
+    <span class="{{@root.prefix}}--pagination__text">
+      <span data-displayed-item-range>1 – 10</span> of
+      <span data-total-items>
+        {{#if disabledPaginationButton}}
+        10
+        {{else}}
+        40
+        {{/if}}
+      </span> items
+    </span>
+  </div>
+  <div class="{{@root.prefix}}--pagination__right">
+    <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline {{@root.prefix}}--select__page-number">
+      <select class="{{@root.prefix}}--select-input"
+        id="select-id-pagination-page{{#if disabledPaginationButton}}--disabled-example{{/if}}"
+        aria-label="page number, of {{totalPages}} pages" tabindex="0" data-page-number-input>
+        {{#each pageNumberChoices}}
+        <option class="{{@root.prefix}}--select-option" value="{{value}}">
+          {{label}}
+        </option>
+        {{/each}}
+      </select>
+      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow')}}
+    </div>
+    <label id="select-id-pagination-page-label{{#if disabledPaginationButton}}--disabled-example{{/if}}"
+      class="{{@root.prefix}}--pagination__text"
+      for="select-id-pagination-page{{#if disabledPaginationButton}}--disabled-example{{/if}}">
+      of {{totalPages}} pages
+    </label>
+    <button
+      class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--backward {{#if disabledPaginationButton}}{{@root.prefix}}--pagination__button--no-index{{/if}}"
+      tabindex="0" data-page-backward aria-label="previous page">
+      {{ carbon-icon 'CaretLeft20' class=(add @root.prefix '--pagination__nav-arrow')}}
+    </button>
+    <button
+      class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--forward {{#if disabledPaginationButton}}{{@root.prefix}}--pagination__button--no-index{{/if}}"
+      tabindex="0" data-page-forward aria-label="next page">
+      {{ carbon-icon 'CaretRight20' class=(add @root.prefix '--pagination__nav-arrow')}}
+    </button>
+  </div>
+</div>

package/styles/vendor/carbon-components/src/components/pagination/pagination.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
+import handles from '../../globals/js/mixins/handles';
+import eventMatches from '../../globals/js/misc/event-matches';
+import on from '../../globals/js/misc/on';
+
+class Pagination extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
+  /**
+   * Pagination component.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @param {HTMLElement} element The element working as a pagination component.
+   * @param {object} [options] The component options.
+   * @property {string} [selectorInit] The CSS selector to find pagination components.
+   * @property {string} [selectorItemsPerPageInput]
+   *   The CSS selector to find the input that determines the number of items per page.
+   * @property {string} [selectorPageNumberInput] The CSS selector to find the input that changes the page displayed.
+   * @property {string} [selectorPageBackward] The CSS selector to find the button that goes back a page.
+   * @property {string} [selectorPageForward] The CSS selector to find the button that goes forward a page.
+   * @property {string} [eventItemsPerPage]
+   *   The name of the custom event fired when a user changes the number of items per page.
+   *   event.detail.value contains the number of items a user wishes to see.
+   * @property {string} [eventPageNumber]
+   *   The name of the custom event fired when a user inputs a specific page number.
+   *   event.detail.value contains the value that the user input.
+   * @property {string} [eventPageChange]
+   *   The name of the custom event fired when a user goes forward or backward a page.
+   *   event.detail.direction contains the direction a user wishes to go.
+   */
+  constructor(element, options) {
+    super(element, options);
+
+    this.manage(
+      on(this.element, 'click', evt => {
+        if (eventMatches(evt, this.options.selectorPageBackward)) {
+          const detail = {
+            initialEvt: evt,
+            element: evt.target,
+            direction: 'backward',
+          };
+          this._emitEvent(this.options.eventPageChange, detail);
+        } else if (eventMatches(evt, this.options.selectorPageForward)) {
+          const detail = {
+            initialEvt: evt,
+            element: evt.target,
+            direction: 'forward',
+          };
+          this._emitEvent(this.options.eventPageChange, detail);
+        }
+      })
+    );
+
+    this.manage(
+      on(this.element, 'input', evt => {
+        if (eventMatches(evt, this.options.selectorItemsPerPageInput)) {
+          const detail = {
+            initialEvt: evt,
+            element: evt.target,
+            value: evt.target.value,
+          };
+          this._emitEvent(this.options.eventItemsPerPage, detail);
+        } else if (eventMatches(evt, this.options.selectorPageNumberInput)) {
+          const detail = {
+            initialEvt: evt,
+            element: evt.target,
+            value: evt.target.value,
+          };
+          this._emitEvent(this.options.eventPageNumber, detail);
+        }
+      })
+    );
+  }
+
+  /**
+   * Dispatches a custom event
+   * @param {string} evtName name of the event to be dispatched.
+   * @param {object} detail contains the original event and any other necessary details.
+   */
+  _emitEvent = (evtName, detail) => {
+    const event = new CustomEvent(`${evtName}`, {
+      bubbles: true,
+      cancelable: true,
+      detail,
+    });
+
+    this.element.dispatchEvent(event);
+  };
+
+  /**
+   * The map associating DOM element and pagination instance.
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor,
+   * {@linkcode Pagination.create .create()}, or {@linkcode Pagination.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode Pagination.init .init()} works.
+   * @property {string} [selectorInit] The CSS selector to find pagination components.
+   * @property {string} [selectorItemsPerPageInput] The CSS selector to find the input that determines
+   * the number of items per page.
+   * @property {string} [selectorPageNumberInput] The CSS selector to find the input that changes the page displayed.
+   * @property {string} [selectorPageBackward] The CSS selector to find the button that goes back a page.
+   * @property {string} [selectorPageForward] The CSS selector to find the button that goes forward a page.
+   * @property {string} [eventItemsPerPage]
+   *   The name of the custom event fired when a user changes the number of items per page.
+   *   event.detail.value contains the number of items a user wishes to see.
+   * @property {string} [eventPageNumber]
+   *   The name of the custom event fired when a user inputs a specific page number.
+   *   event.detail.value contains the value that the user input.
+   * @property {string} [eventPageChange]
+   *   The name of the custom event fired when a user goes forward or backward a page.
+   *   event.detail.direction contains the direction a user wishes to go.
+   */
+  static options /* #__PURE_CLASS_PROPERTY__ */ = {
+    selectorInit: '[data-pagination]',
+    selectorItemsPerPageInput: '[data-items-per-page]',
+    selectorPageNumberInput: '[data-page-number-input]',
+    selectorPageBackward: '[data-page-backward]',
+    selectorPageForward: '[data-page-forward]',
+    eventItemsPerPage: 'itemsPerPage',
+    eventPageNumber: 'pageNumber',
+    eventPageChange: 'pageChange',
+  };
+}
+
+export default Pagination;

package/styles/vendor/carbon-components/src/components/pagination-nav/README.md

@@ -0,0 +1,30 @@
+### SCSS
+
+#### Modifiers
+
+Use these modifiers with `.bx--pagination-nav` class.
+
+| Selector                               | Description                                                     |
+| -------------------------------------- | --------------------------------------------------------------- |
+| `.bx--pagination-nav--active`          | Applies active styles to page element                           |
+| `.bx--pagination-nav--disabled`        | Applies disabled styles to page element when using anchor links |
+| `.bx--pagination-nav__page--select`    | Applies select override styles to page element                  |
+| `.bx--pagination-nav__page--direction` | Applies previous/next button styles to page element             |
+
+### JavaScript
+
+#### Options
+
+| Option                 | Default Selector                     | Description                                               |
+| ---------------------- | ------------------------------------ | --------------------------------------------------------- |
+| `selectorInit`         | `[data-pagination-nav]`              | The selector to find the pagination nav.                  |
+| `selectorPageElement`  | `[data-page]`                        | The data attribute to find page elements.                 |
+| `selectorPageButton`   | `[data-page-button]`                 | The data attribute to find page ui elements.              |
+| `selectorPagePrevious` | `[data-page-previous]`               | The selector to find the 'previous' ui element.           |
+| `selectorPageNext`     | `[data-page-next]`                   | The selector to find the 'next' ui element.               |
+| `selectorPageSelect`   | `[data-page-select]`                 | The selector to find the overflow select element.         |
+| `selectorPageActive`   | `[data-page-active="true"]`          | The data attribute to find active page element.           |
+| `attribPage`           | `data-page`                          | The data attribute key for accessing page number.         |
+| `attribActive`         | `data-page-active`                   | The data attribute key for accessing active page element. |
+| `classActive`          | `bx--pagination-nav__page--active`   | The CSS class for pages's selected state.                 |
+| `classDisabled`        | `bx--pagination-nav__page--disabled` | The CSS class for pages's disabled state.                 |

package/styles/vendor/carbon-components/src/components/pagination-nav/_pagination-nav.scss

@@ -0,0 +1,201 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Pagination Nav
+//-----------------------------
+
+@import '../../globals/scss/colors';
+@import '../../globals/scss/vars';
+@import '../../globals/scss/theme';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/css--reset';
+
+/// Pseudo underline
+/// @access private
+/// @group pagination-nav
+@mixin pseudo-underline() {
+  &:not(.#{$prefix}--pagination-nav__page--direction) {
+    &::after {
+      background-color: $interactive-01;
+      bottom: 0;
+      content: '';
+      display: block;
+      height: $carbon--spacing-02;
+      left: 50%;
+      position: absolute;
+      opacity: 0;
+      transition: width $duration--fast-02 motion(standard, productive);
+      width: 0;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__page--active + &::after,
+  &.#{$prefix}--pagination-nav__page--active::after {
+    left: calc(50% - #{$carbon--spacing-05/2});
+    opacity: 1;
+    width: $carbon--spacing-05;
+  }
+}
+
+/// Pagination nav base styles
+/// @access private
+/// @group pagination-nav
+/// @param {Color} $text-color [$text-02]
+/// @param {Color} $text-color-active [$text-02]
+/// @param {Color} $background-color-hover [$hover-ui]
+/// @param {Color} $background-color-active [initial]
+/// @param {Number} $font-weight [400]
+/// @param {Number} $item-padding [0]
+/// @param {Number} $button-min-width [$carbon--spacing-09]
+/// @param {Value} $button-padding [1.0625rem $carbon--spacing-02]
+/// @param {Number} $button-direction-size [$carbon--spacing-09]
+/// @param {Number} $select-icon-top-position [$carbon--spacing-05]
+/// @param {Number} $select-icon-left-position [$carbon--spacing-05]
+@mixin pagination-nav(
+  $text-color: $text-02,
+  $text-color-active: $text-02,
+  $background-color-hover: $hover-ui,
+  $background-color-active: initial,
+  $font-weight: 400,
+  $item-padding: 0,
+  $button-min-width: $carbon--spacing-09,
+  $button-padding: 1.0625rem $carbon--spacing-02,
+  $button-direction-size: $carbon--spacing-09,
+  $select-icon-top-position: $carbon--spacing-05,
+  $select-icon-left-position: $carbon--spacing-05
+) {
+  .#{$prefix}--pagination-nav {
+    @include reset;
+    @include type-style('body-short-01');
+    line-height: 0;
+  }
+
+  .#{$prefix}--pagination-nav__list {
+    align-items: center;
+    display: flex;
+    list-style: none;
+  }
+
+  .#{$prefix}--pagination-nav__list-item {
+    padding: $item-padding;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__page {
+    @include type-style('body-short-01');
+    @include button-reset($width: false);
+    border-radius: 0;
+    color: $text-color;
+    display: block;
+    font-weight: $font-weight;
+    line-height: 1;
+    min-width: $button-min-width;
+    outline: 0;
+    padding: $button-padding;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color, color;
+    transition: $duration--fast-02 motion(standard, productive);
+    user-select: none;
+
+    &:hover {
+      background-color: $background-color-hover;
+      color: $text-color;
+    }
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+
+    &:disabled,
+    &.#{$prefix}--pagination-nav__page--disabled {
+      background: none;
+      color: rgba($text-color, 0.5);
+      outline: none;
+      pointer-events: none;
+    }
+
+    @include pseudo-underline();
+
+    &.#{$prefix}--pagination-nav__page--active {
+      background-color: $background-color-active;
+      color: $text-color-active;
+      font-weight: 600;
+      outline: none;
+    }
+
+    .#{$prefix}--pagination-nav__icon {
+      fill: currentColor;
+      pointer-events: none;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__page--direction {
+    align-items: center;
+    display: flex;
+    height: $button-direction-size;
+    justify-content: center;
+    line-height: 0;
+    width: $button-direction-size;
+  }
+
+  .#{$prefix}--pagination-nav__select {
+    position: relative;
+  }
+
+  .#{$prefix}--pagination-nav__page--select {
+    appearance: none;
+    max-height: $button-min-width;
+    text-indent: calc(50% - 4.5px);
+    // Override some Firefox user-agent styles
+    @-moz-document url-prefix() {
+      text-indent: 0;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__select-icon-wrapper {
+    height: 100%;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    @include pseudo-underline();
+
+    .#{$prefix}--pagination-nav__page--active + & {
+      .#{$prefix}--pagination-nav__select-icon {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--pagination-nav__select-icon {
+    left: calc(50% - #{$select-icon-top-position/2});
+    pointer-events: none;
+    position: absolute;
+    top: calc(50% - #{$select-icon-top-position/2});
+  }
+
+  .#{$prefix}--pagination-nav__accessibility-label {
+    @include hidden();
+  }
+}
+
+@include exports('pagination-nav') {
+  @include pagination-nav;
+}

package/styles/vendor/carbon-components/src/components/pagination-nav/pagination-nav.hbs

@@ -0,0 +1,129 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<nav class="{{@root.prefix}}--pagination-nav" aria-label="pagination" data-pagination-nav>
+  <ul class="{{@root.prefix}}--pagination-nav__list">
+    {{#if showPagePrevious}}
+      <li class="{{@root.prefix}}--pagination-nav__list-item">
+        {{#unless elementAsAnchor}}
+          <button
+            class="{{@root.prefix}}--pagination-nav__page {{@root.prefix}}--pagination-nav__page--direction {{#if showPagePrevious.disabled}} {{@root.prefix}}--pagination-nav__page--disabled{{/if}}"
+            data-page-previous
+            {{#if showPagePrevious.disabled}}
+              aria-disabled="true"
+            {{/if}}
+          >
+        {{else}}
+          <a
+            class="{{@root.prefix}}--pagination-nav__page {{@root.prefix}}--pagination-nav__page--direction{{#if showPagePrevious.disabled}} {{@root.prefix}}--pagination-nav__page--disabled{{/if}}"
+            data-page-previous
+            href="javascript:void(0)"
+            {{#if showPagePrevious.disabled}}
+              aria-disabled="true"
+            {{/if}}
+          >
+        {{/unless}}
+          <span class="{{@root.prefix}}--pagination-nav__accessibility-label">Previous page </span>
+          {{ carbon-icon 'CaretLeftGlyph' class=(add @root.prefix '--pagination-nav__icon') }}
+        {{#unless elementAsAnchor }}
+          </button>
+        {{else}}
+          </a>
+        {{/unless}}
+      </li>
+    {{/if}}
+    {{#each pages}}
+      <li class="{{@root.prefix}}--pagination-nav__list-item">
+        {{#if select}}
+          <div class="{{@root.prefix}}--pagination-nav__select">
+            <select
+              class="{{@root.prefix}}--pagination-nav__page {{@root.prefix}}--pagination-nav__page--select"
+              data-page-select
+              aria-label="select page number"
+            >
+              {{#each select}}
+                <option
+                  value="{{value}}"
+                  {{#unless value}}
+                    hidden
+                  {{else}}
+                    data-page="{{page}}"
+                  {{/unless}}
+                >
+                  {{page}}
+                </option>
+              {{/each}}
+            </select>
+            <div class="{{@root.prefix}}--pagination-nav__select-icon-wrapper">
+              {{ carbon-icon 'OverflowMenuHorizontal16' class=(add @root.prefix '--pagination-nav__select-icon') }}
+            </div>
+          </div>
+        {{else}}
+          {{#unless @root.elementAsAnchor}}
+            <button
+              class="{{@root.prefix}}--pagination-nav__page{{#if active}} {{@root.prefix}}--pagination-nav__page--active {{@root.prefix}}--pagination-nav__page--disabled{{/if}}"
+              data-page="{{page}}"
+              data-page-button
+              {{#if active}}
+                data-page-active="true"
+                aria-current="page"
+                aria-disabled="true"
+              {{/if}}
+            >
+          {{else}}
+            <a
+              class="{{@root.prefix}}--pagination-nav__page{{#if active}} {{@root.prefix}}--pagination-nav__page--active {{@root.prefix}}--pagination-nav__page--disabled{{/if}}"
+              data-page="{{page}}"
+              data-page-button
+              href="javascript:void(0)"
+              {{#if active}}
+                data-page-active="true"
+                aria-current="page"
+                aria-disabled="true"
+              {{/if}}
+            >
+          {{/unless}}
+            <span class="{{@root.prefix}}--pagination-nav__accessibility-label">page </span>{{page}}
+          {{#unless @root.elementAsAnchor}}
+            </button>
+          {{else}}
+            </a>
+          {{/unless}}
+        {{/if}}
+      </li>
+    {{/each}}
+    {{#if showPageNext}}
+      <li class="{{@root.prefix}}--pagination-nav__list-item">
+        {{#unless @root.elementAsAnchor}}
+          <button
+            class="{{@root.prefix}}--pagination-nav__page {{@root.prefix}}--pagination-nav__page--direction{{#if showPageNext.disabled}} {{@root.prefix}}--pagination-nav__page--is-disabled{{/if}}"
+            data-page-next
+            {{#if showPageNext.disabled}}
+              aria-disabled="true"
+            {{/if}}
+          >
+        {{else}}
+          <a
+            class="{{@root.prefix}}--pagination-nav__page {{@root.prefix}}--pagination-nav__page--direction{{#if showPageNext.disabled}} {{@root.prefix}}--pagination-nav__page--is-disabled{{/if}}"
+            data-page-next
+            href="javascript:void(0)"
+            {{#if showPageNext.disabled}}
+              aria-disabled="true"
+            {{/if}}
+          >
+        {{/unless}}
+          <span class="{{@root.prefix}}--pagination-nav__accessibility-label">Next page </span>
+          {{ carbon-icon 'CaretRightGlyph' class=(add @root.prefix '--pagination-nav__icon') }}
+        {{#unless @root.elementAsAnchor}}
+          </button>
+        {{else}}
+          </a>
+        {{/unless}}
+      </li>
+    {{/if}}
+  </ul>
+</nav>