api-console-assets/bower_components/date-time/date-time.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<!--
`<date-time>` An element to display formatted date and time.

The `date` propery accepts Date object, Number as a timestamp or string that
will be parsed to the Date object.

This element uses the `Intl` interface which is available in IE 11+ browsers.
It will throw an error in IE 10 unless you'll provide a polyfill for the `Intl`.

To format the date use [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) inteface options.

The default value for each date-time component property is undefined, but if all component properties are undefined, then year, month, and day are assumed to be "numeric".

### Example
```
<date-time date="2010-12-10T11:50:45Z" year="numeric" month="narrow" day="numeric"></date-time>
```

The element provides accessibility by using the `time` element and setting the `datetime` attribute on it.

### Styling
`<date-time>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--date-time` | Mixin applied to the element | `{}`

@group UI Elements
@element date-time
@demo demo/index.html
-->
<dom-module id="date-time">
  <template>
    <style>
    :host {
      display: inline;
      @apply(--date-time);
    }
    </style>
    <time datetime$="[[iso]]">[[display]]</time>
  </template>
  <script>
  Number.isInteger = Number.isInteger || function(value) {
    return typeof value === 'number' &&  isFinite(value) &&
      Math.floor(value) === value;
  };
  Polymer({
    is: 'date-time',
    properties: {
      /**
       * A string with a BCP 47 language tag, or an array of such strings.
       * For the general form and interpretation of the locales argument,
       * see the Intl page.
       * The following Unicode extension keys are allowed:
       * - nu - Numbering system. Possible values include: "arab", "arabext",
       * "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr",
       * "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya",
       * "tamldec", "telu", "thai", "tibt".
       * - ca - Calendar. Possible values include: "buddhist", "chinese",
       * "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian",
       * "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".
       */
      locales: {
        type: String,
        observer: '_update'
      },
      /**
       * A date object to display
       */
      date: {
        type: Date,
        observer: '_update'
      },
      /**
       * A string to display
       */
      display: String,
      /**
       * The representation of the year.
       * Possible values are "numeric", "2-digit".
       */
      year: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the month.
       * Possible values are "numeric", "2-digit", "narrow", "short", "long".
       */
      month: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the day.
       * Possible values are "numeric", "2-digit".
       */
      day: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the hour.
       * Possible values are "numeric", "2-digit".
       */
      hour: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the minute.
       * Possible values are "numeric", "2-digit".
       */
      minute: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the second.
       * Possible values are "numeric", "2-digit".
       */
      second: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the weekday.
       * Possible values are "narrow", "short", "long".
       */
      weekday: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the time zone name. Possible values are
       * "short", "long".
       */
      timeZoneName: {
        type: String,
        observer: '_update'
      },
      /**
       * The representation of the era. Possible values are "narrow",
       * "short", "long".
       */
      era: {
        type: String,
        observer: '_update'
      },
      /**
       * The time zone to use. The only value implementations must recognize
       * is "UTC"; the default is the runtime's default time zone.
       * Implementations may also recognize the time zone names of the IANA
       * time zone database, such as "Asia/Shanghai", "Asia/Kolkata",
       * "America/New_York".
       */
      timeZone: {
        type: String,
        observer: '_update'
      },
      /**
       * Whether to use 12-hour time (as opposed to 24-hour time).
       * Possible values are `true` and `false`; the default is locale
       * dependent.
       */
      hour12: {
        type: Boolean,
        observer: '_update'
      },
      /**
       * An ISO string to attach to the `<time>` element.
       */
      iso: {
        type: String,
        readOnly: true
      },
      // True when the element is ready.
      isReady: Boolean
    },

    ready: function() {
      this.isReady = true;
      this._update();
    },
    // Handler for date property change. Computes date value.
    _update: function() {
      if (!this.isReady) {
        return;
      }
      var date = this.date;
      if (!date) {
        date = new Date();
      } else if (typeof date === 'string') {
        try {
          date = new Date(date);
          var _test = date.getDate();
          if (_test !== _test) {
            date = new Date();
          }
        } catch (e) {
          date = new Date();
        }
      } else if (Number.isInteger(date)) {
        date = new Date(date);
      } else if (!(date instanceof Date)) {
        date = new Date();
      }
      var options = {
        year: this.year ? this.year : undefined,
        month: this.month ? this.month : undefined,
        day: this.day ? this.day : undefined,
        hour: this.hour ? this.hour : undefined,
        minute: this.minute ? this.minute : undefined,
        second: this.second ? this.second : undefined,
        weekday: this.weekday ? this.weekday : undefined,
        era: this.era ? this.era : undefined,
        timeZoneName: this.timeZoneName ? this.timeZoneName : undefined,
        timeZone: this.timeZone ? this.timeZone : undefined
      };

      if (this.hour12 !== undefined) {
        options.hour12 = this.hour12;
      }
      var locales;
      if (this.locales) {
        locales = this.locales;
      }
      var value = new Intl.DateTimeFormat(locales, options).format(date);
      this.set('display', value);
      this._setIso(date.toISOString());
    }
  });
  </script>
</dom-module>