@api-client/ui 0.0.1

package/dist/ui/date/DateTime.js

@@ -0,0 +1,498 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable class-methods-use-this */
+/**
+@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.
+*/
+/**
+ * An element to display formatted date and time.
+ *
+ * The `date` property 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.
+ *
+ * To format the date use [Intl.DateTimeFormat]
+ * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
+ * interface 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" (per spec).
+ *
+ * ### Example
+ *
+ * ```html
+ * <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.
+ */
+export default class DateTime extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'locales', 'date', 'year', 'month', 'day', 'hour', 'minute', 'second',
+            'weekday', 'time-zone-name', 'era', 'time-zone', 'hour12', 'itemprop'
+        ];
+    }
+    _observer = new MutationObserver(() => this._mutationHandler());
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this._observer.observe(this.shadowRoot, {
+            childList: true,
+            characterData: true,
+            subtree: true
+        });
+        this._updateLabel();
+    }
+    disconnectedCallback() {
+        this._observer.disconnect();
+    }
+    _mutationHandler() {
+        this.setAttribute('aria-label', this.shadowRoot.textContent || '');
+    }
+    /**
+     * 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".
+     * @attribute
+     */
+    get locales() {
+        return this.getAttribute('locales');
+    }
+    /**
+     * 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".
+     */
+    set locales(v) {
+        if (v) {
+            this.setAttribute('locales', v);
+        }
+        else {
+            this.removeAttribute('locales');
+        }
+    }
+    /**
+     * The representation of the year.
+     * Possible values are "numeric", "2-digit".
+     * @attribute
+     */
+    get year() {
+        return this.getAttribute('year');
+    }
+    /**
+     * The representation of the year.
+     * @param v Possible values are "numeric", "2-digit".
+     */
+    set year(v) {
+        if (v) {
+            this.setAttribute('year', v);
+        }
+        else {
+            this.removeAttribute('year');
+        }
+    }
+    /**
+     * The representation of the month.
+     * Possible values are "numeric", "2-digit", "narrow", "short", "long".
+     * @attribute
+     */
+    get month() {
+        return this.getAttribute('month');
+    }
+    /**
+     * The representation of the month.
+     * @param v Possible values are "numeric", "2-digit", "narrow", "short", "long".
+     */
+    set month(v) {
+        if (v) {
+            this.setAttribute('month', v);
+        }
+        else {
+            this.removeAttribute('month');
+        }
+    }
+    /**
+     * The representation of the day.
+     * Possible values are "numeric", "2-digit".
+     * @attribute
+     */
+    get day() {
+        return this.getAttribute('day');
+    }
+    /**
+     * The representation of the day.
+     * @param v Possible values are "numeric", "2-digit".
+     */
+    set day(v) {
+        if (v) {
+            this.setAttribute('day', v);
+        }
+        else {
+            this.removeAttribute('day');
+        }
+    }
+    /**
+     * The representation of the hour.
+     * Possible values are "numeric", "2-digit".
+     * @attribute
+     */
+    get hour() {
+        return this.getAttribute('hour');
+    }
+    /**
+     * The representation of the hour.
+     * @param v Possible values are "numeric", "2-digit".
+     */
+    set hour(v) {
+        if (v) {
+            this.setAttribute('hour', v);
+        }
+        else {
+            this.removeAttribute('hour');
+        }
+    }
+    /**
+     * The representation of the minute.
+     * Possible values are "numeric", "2-digit".
+     * @attribute
+     */
+    get minute() {
+        return this.getAttribute('minute');
+    }
+    /**
+     * The representation of the minute.
+     * @param v Possible values are "numeric", "2-digit".
+     */
+    set minute(v) {
+        if (v) {
+            this.setAttribute('minute', v);
+        }
+        else {
+            this.removeAttribute('minute');
+        }
+    }
+    /**
+     * The representation of the second.
+     * Possible values are "numeric", "2-digit".
+     * @attribute
+     */
+    get second() {
+        return this.getAttribute('second');
+    }
+    /**
+     * The representation of the second.
+     * @param v Possible values are "numeric", "2-digit".
+     */
+    set second(v) {
+        if (v) {
+            this.setAttribute('second', v);
+        }
+        else {
+            this.removeAttribute('second');
+        }
+    }
+    /**
+     * The representation of the weekday.
+     * Possible values are "narrow", "short", "long".
+     * @attribute
+     */
+    get weekday() {
+        return this.getAttribute('weekday');
+    }
+    /**
+     * The representation of the weekday.
+     * @param v Possible values are "narrow", "short", "long".
+     */
+    set weekday(v) {
+        if (v) {
+            this.setAttribute('weekday', v);
+        }
+        else {
+            this.removeAttribute('weekday');
+        }
+    }
+    /**
+     * The representation of the time zone name.
+     *
+     * Possible values are "short", "long".
+     * @attribute
+     */
+    get timeZoneName() {
+        return this.getAttribute('time-zone-name');
+    }
+    /**
+     * The representation of the time zone name.
+     *
+     * @param v Possible values are "short", "long".
+     */
+    set timeZoneName(v) {
+        if (v) {
+            this.setAttribute('time-zone-name', v);
+        }
+        else {
+            this.removeAttribute('time-zone-name');
+        }
+    }
+    /**
+     * 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".
+     * @attribute
+     */
+    get timeZone() {
+        return this.getAttribute('time-zone');
+    }
+    /**
+     * 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".
+     */
+    set timeZone(v) {
+        if (v) {
+            this.setAttribute('time-zone', v);
+        }
+        else {
+            this.removeAttribute('time-zone');
+        }
+    }
+    /**
+     * The representation of the era.
+     *
+     * Possible values are "narrow", "short", "long".
+     * @attribute
+     */
+    get era() {
+        return this.getAttribute('era');
+    }
+    /**
+     * The representation of the era.
+     *
+     * @param v Possible values are "narrow", "short", "long".
+     */
+    set era(v) {
+        if (v) {
+            this.setAttribute('era', v);
+        }
+        else {
+            this.removeAttribute('era');
+        }
+    }
+    __hour12set = null;
+    /**
+     * Whether to use 12-hour time (as opposed to 24-hour time).
+     * Possible values are `true` and `false`; the default is locale
+     * dependent.
+     */
+    get hour12() {
+        if (!this.hasAttribute('hour12') && !this.__hour12set) {
+            return null;
+        }
+        return this.hasAttribute('hour12');
+    }
+    /**
+     * Whether to use 12-hour time (as opposed to 24-hour time).
+     * Possible values are `true` and `false`; the default is locale
+     * dependent.
+     */
+    set hour12(v) {
+        this.__hour12set = true;
+        if (v) {
+            this.setAttribute('hour12', '');
+        }
+        else {
+            this.removeAttribute('hour12');
+        }
+    }
+    __date = null;
+    /**
+     * A date object to render.
+     * It can be a `Date` object, number representing a timestamp
+     * or valid date string. The argument is parsed by `Date` constructor
+     * to produce the value.
+     * @attribute
+     */
+    get date() {
+        if (this.__date) {
+            return this.__date;
+        }
+        return this.getAttribute('date');
+    }
+    /**
+     * A date object to render.
+     * It can be a `Date` object, number representing a timestamp
+     * or valid date string. The argument is parsed by `Date` constructor
+     * to produce the value.
+     *
+     * @param {Date|string|number} v The date to render
+     */
+    set date(v) {
+        this.__date = v;
+        if (typeof v === 'string') {
+            this.setAttribute('date', v);
+        }
+        else {
+            this._updateLabel();
+        }
+    }
+    get itemprop() {
+        return this._getTimeNode().getAttribute('itemprop');
+    }
+    set itemprop(value) {
+        const old = this.itemprop;
+        if (old === value) {
+            return;
+        }
+        if (old && value === null) {
+            // This setter moves attribute from this element to "<time>" element.
+            // When the attribute is removed from this then it becomes null.
+            return;
+        }
+        const node = this._getTimeNode();
+        if (value) {
+            node.setAttribute('itemprop', value);
+            this.removeAttribute('itemprop');
+        }
+        else {
+            node.removeAttribute('itemprop');
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'itemprop') {
+            this[name] = newValue;
+            return;
+        }
+        this._updateLabel();
+    }
+    /**
+     * Parses input `date` to a Date object.
+     * @param date A date to parse
+     */
+    _getParsableDate(date) {
+        if (!date) {
+            date = new Date();
+        }
+        else if (typeof date === 'string') {
+            try {
+                date = new Date(date);
+                if (Number.isNaN(date.getDate())) {
+                    date = new Date();
+                }
+            }
+            catch (e) {
+                date = new Date();
+            }
+        }
+        else if (!Number.isNaN(date)) {
+            date = new Date(date);
+        }
+        else if (!(date instanceof Date)) {
+            date = new Date();
+        }
+        return date;
+    }
+    _getIntlOptions() {
+        const options = {};
+        if (this.year) {
+            options.year = this.year;
+        }
+        if (this.month) {
+            options.month = this.month;
+        }
+        if (this.day) {
+            options.day = this.day;
+        }
+        if (this.hour) {
+            options.hour = this.hour;
+        }
+        if (this.minute) {
+            options.minute = this.minute;
+        }
+        if (this.second) {
+            options.second = this.second;
+        }
+        if (this.weekday) {
+            options.weekday = this.weekday;
+        }
+        if (this.era) {
+            options.era = this.era;
+        }
+        if (this.timeZoneName) {
+            options.timeZoneName = this.timeZoneName;
+        }
+        if (this.timeZone) {
+            options.timeZone = this.timeZone;
+        }
+        if (this.hour12 !== undefined && this.hour12 !== null) {
+            options.hour12 = this.hour12;
+        }
+        return options;
+    }
+    /**
+     * @returns A reference to a `<time>` element that is in the shadow DOM of this element.
+     */
+    _getTimeNode() {
+        const root = this.shadowRoot;
+        let node = root.querySelector('time');
+        if (!node) {
+            node = document.createElement('time');
+            root.appendChild(node);
+        }
+        return node;
+    }
+    _updateLabel() {
+        if (!this.parentElement) {
+            return;
+        }
+        const date = this._getParsableDate(this.date);
+        const node = this._getTimeNode();
+        node.setAttribute('datetime', date.toISOString());
+        /* istanbul ignore if */
+        if (typeof Intl === 'undefined') {
+            node.innerText = date.toString();
+            return;
+        }
+        let locales;
+        if (this.locales) {
+            locales = this.locales;
+        }
+        const options = this._getIntlOptions();
+        const value = new Intl.DateTimeFormat(locales, options).format(date);
+        node.innerText = value;
+    }
+}
+//# sourceMappingURL=DateTime.js.map

package/dist/ui/date/DateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../src/ui/date/DateTime.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\n/* eslint-disable class-methods-use-this */\n/**\n@license\nCopyright 2016 The Advanced REST client authors <arc@mulesoft.com>\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not\nuse this file except in compliance with the License. You may obtain a copy of\nthe License at\nhttp://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\nWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\nLicense for the specific language governing permissions and limitations under\nthe License.\n*/\n\nexport type DateTimeTextOptions = \"long\" | \"short\" | \"narrow\";\nexport type DateTimeNumberOptions = \"numeric\" | \"2-digit\";\nexport type DateTimeTimezoneOptions = \"long\" | \"short\";\nexport type DateTimeTextNumberOptions = DateTimeTextOptions | DateTimeNumberOptions;\n\n/**\n * An element to display formatted date and time.\n *\n * The `date` property accepts Date object, Number as a timestamp or string\n * that will be parsed to the Date object.\n *\n * This element uses the `Intl` interface which is available in IE 11+ browsers.\n *\n * To format the date use [Intl.DateTimeFormat]\n * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)\n * interface options.\n *\n * The default value for each date-time component property is undefined,\n * but if all component properties are undefined, then year, month, and day\n * are assumed to be \"numeric\" (per spec).\n *\n * ### Example\n *\n * ```html\n * <date-time date=\"2010-12-10T11:50:45Z\" year=\"numeric\" month=\"narrow\" day=\"numeric\"></date-time>\n * ```\n *\n * The element provides accessibility by using the `time` element and setting\n * the `datetime` attribute on it.\n */\nexport default class DateTime extends HTMLElement {\n  static get observedAttributes(): string[] {\n    return [\n      'locales', 'date', 'year', 'month', 'day', 'hour', 'minute', 'second',\n      'weekday', 'time-zone-name', 'era', 'time-zone', 'hour12', 'itemprop'\n    ];\n  }\n\n  protected _observer = new MutationObserver(() => this._mutationHandler());\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback(): void {\n    this._observer.observe(this.shadowRoot as ShadowRoot, {\n      childList: true,\n      characterData: true,\n      subtree: true\n    });\n    this._updateLabel();\n  }\n\n  disconnectedCallback(): void {\n    this._observer.disconnect();\n  }\n\n  _mutationHandler(): void {\n    this.setAttribute('aria-label', (this.shadowRoot as ShadowRoot).textContent || '');\n  }\n\n  /**\n   * A string with a BCP 47 language tag, or an array of such strings.\n   * For the general form and interpretation of the locales argument,\n   * see the Intl page.\n   * The following Unicode extension keys are allowed:\n   * - nu - Numbering system. Possible values include: \"arab\", \"arabext\",\n   * \"bali\", \"beng\", \"deva\", \"fullwide\", \"gujr\", \"guru\", \"hanidec\", \"khmr\",\n   * \"knda\", \"laoo\", \"latn\", \"limb\", \"mlym\", \"mong\", \"mymr\", \"orya\",\n   * \"tamldec\", \"telu\", \"thai\", \"tibt\".\n   * - ca - Calendar. Possible values include: \"buddhist\", \"chinese\",\n   * \"coptic\", \"ethioaa\", \"ethiopic\", \"gregory\", \"hebrew\", \"indian\",\n   * \"islamic\", \"islamicc\", \"iso8601\", \"japanese\", \"persian\", \"roc\".\n   * @attribute\n   */\n  get locales(): string | null {\n    return this.getAttribute('locales');\n  }\n\n  /**\n   * A string with a BCP 47 language tag, or an array of such strings.\n   * For the general form and interpretation of the locales argument,\n   * see the Intl page.\n   * The following Unicode extension keys are allowed:\n   * - nu - Numbering system. Possible values include: \"arab\", \"arabext\",\n   * \"bali\", \"beng\", \"deva\", \"fullwide\", \"gujr\", \"guru\", \"hanidec\", \"khmr\",\n   * \"knda\", \"laoo\", \"latn\", \"limb\", \"mlym\", \"mong\", \"mymr\", \"orya\",\n   * \"tamldec\", \"telu\", \"thai\", \"tibt\".\n   * - ca - Calendar. Possible values include: \"buddhist\", \"chinese\",\n   * \"coptic\", \"ethioaa\", \"ethiopic\", \"gregory\", \"hebrew\", \"indian\",\n   * \"islamic\", \"islamicc\", \"iso8601\", \"japanese\", \"persian\", \"roc\".\n   */\n  set locales(v: string | null) {\n    if (v) {\n      this.setAttribute('locales', v);\n    } else {\n      this.removeAttribute('locales');\n    }\n  }\n\n  /**\n   * The representation of the year.\n   * Possible values are \"numeric\", \"2-digit\".\n   * @attribute\n   */\n  get year(): DateTimeNumberOptions | null {\n    return this.getAttribute('year') as DateTimeNumberOptions;\n  }\n\n  /**\n   * The representation of the year.\n   * @param v Possible values are \"numeric\", \"2-digit\".\n   */\n  set year(v: DateTimeNumberOptions | null) {\n    if (v) {\n      this.setAttribute('year', v);\n    } else {\n      this.removeAttribute('year');\n    }\n  }\n\n  /**\n   * The representation of the month.\n   * Possible values are \"numeric\", \"2-digit\", \"narrow\", \"short\", \"long\".\n   * @attribute\n   */\n  get month(): DateTimeTextNumberOptions | null {\n    return this.getAttribute('month') as DateTimeTextNumberOptions;\n  }\n\n  /**\n   * The representation of the month.\n   * @param v Possible values are \"numeric\", \"2-digit\", \"narrow\", \"short\", \"long\".\n   */\n  set month(v: DateTimeTextNumberOptions | null) {\n    if (v) {\n      this.setAttribute('month', v);\n    } else {\n      this.removeAttribute('month');\n    }\n  }\n\n  /**\n   * The representation of the day.\n   * Possible values are \"numeric\", \"2-digit\".\n   * @attribute\n   */\n  get day(): DateTimeNumberOptions | null {\n    return this.getAttribute('day') as DateTimeNumberOptions;\n  }\n\n  /**\n   * The representation of the day.\n   * @param v Possible values are \"numeric\", \"2-digit\".\n   */\n  set day(v: DateTimeNumberOptions | null) {\n    if (v) {\n      this.setAttribute('day', v);\n    } else {\n      this.removeAttribute('day');\n    }\n  }\n\n  /**\n   * The representation of the hour.\n   * Possible values are \"numeric\", \"2-digit\".\n   * @attribute\n   */\n  get hour(): DateTimeNumberOptions | null {\n    return this.getAttribute('hour') as DateTimeNumberOptions;\n  }\n\n  /**\n   * The representation of the hour.\n   * @param v Possible values are \"numeric\", \"2-digit\".\n   */\n  set hour(v: DateTimeNumberOptions | null) {\n    if (v) {\n      this.setAttribute('hour', v);\n    } else {\n      this.removeAttribute('hour');\n    }\n  }\n\n  /**\n   * The representation of the minute.\n   * Possible values are \"numeric\", \"2-digit\".\n   * @attribute\n   */\n  get minute(): DateTimeNumberOptions | null {\n    return this.getAttribute('minute') as DateTimeNumberOptions;\n  }\n\n  /**\n   * The representation of the minute.\n   * @param v Possible values are \"numeric\", \"2-digit\".\n   */\n  set minute(v: DateTimeNumberOptions | null) {\n    if (v) {\n      this.setAttribute('minute', v);\n    } else {\n      this.removeAttribute('minute');\n    }\n  }\n\n  /**\n   * The representation of the second.\n   * Possible values are \"numeric\", \"2-digit\".\n   * @attribute\n   */\n  get second(): DateTimeNumberOptions | null {\n    return this.getAttribute('second') as DateTimeNumberOptions;\n  }\n\n  /**\n   * The representation of the second.\n   * @param v Possible values are \"numeric\", \"2-digit\".\n   */\n  set second(v: DateTimeNumberOptions | null) {\n    if (v) {\n      this.setAttribute('second', v);\n    } else {\n      this.removeAttribute('second');\n    }\n  }\n\n  /**\n   * The representation of the weekday.\n   * Possible values are \"narrow\", \"short\", \"long\".\n   * @attribute\n   */\n  get weekday(): DateTimeTextOptions | null {\n    return this.getAttribute('weekday') as DateTimeTextOptions;\n  }\n\n  /**\n   * The representation of the weekday.\n   * @param v Possible values are \"narrow\", \"short\", \"long\".\n   */\n  set weekday(v: DateTimeTextOptions | null) {\n    if (v) {\n      this.setAttribute('weekday', v);\n    } else {\n      this.removeAttribute('weekday');\n    }\n  }\n\n  /**\n   * The representation of the time zone name.\n   *\n   * Possible values are \"short\", \"long\".\n   * @attribute\n   */\n  get timeZoneName(): DateTimeTimezoneOptions | null {\n    return this.getAttribute('time-zone-name') as DateTimeTimezoneOptions;\n  }\n\n  /**\n   * The representation of the time zone name.\n   *\n   * @param v Possible values are \"short\", \"long\".\n   */\n  set timeZoneName(v: DateTimeTimezoneOptions | null) {\n    if (v) {\n      this.setAttribute('time-zone-name', v);\n    } else {\n      this.removeAttribute('time-zone-name');\n    }\n  }\n\n  /**\n   * The time zone to use. The only value implementations must recognize\n   * is \"UTC\"; the default is the runtime's default time zone.\n   * Implementations may also recognize the time zone names of the IANA\n   * time zone database, such as \"Asia/Shanghai\", \"Asia/Kolkata\",\n   * \"America/New_York\".\n   * @attribute\n   */\n  get timeZone(): string | null {\n    return this.getAttribute('time-zone');\n  }\n\n  /**\n   * The time zone to use. The only value implementations must recognize\n   * is \"UTC\"; the default is the runtime's default time zone.\n   * Implementations may also recognize the time zone names of the IANA\n   * time zone database, such as \"Asia/Shanghai\", \"Asia/Kolkata\",\n   * \"America/New_York\".\n   */\n  set timeZone(v: string | null) {\n    if (v) {\n      this.setAttribute('time-zone', v);\n    } else {\n      this.removeAttribute('time-zone');\n    }\n  }\n\n  /**\n   * The representation of the era.\n   *\n   * Possible values are \"narrow\", \"short\", \"long\".\n   * @attribute\n   */\n  get era(): DateTimeTextOptions | null {\n    return this.getAttribute('era') as DateTimeTextOptions;\n  }\n\n  /**\n   * The representation of the era.\n   *\n   * @param v Possible values are \"narrow\", \"short\", \"long\".\n   */\n  set era(v: DateTimeTextOptions | null) {\n    if (v) {\n      this.setAttribute('era', v);\n    } else {\n      this.removeAttribute('era');\n    }\n  }\n\n  private __hour12set: boolean | null = null;\n\n  /**\n   * Whether to use 12-hour time (as opposed to 24-hour time).\n   * Possible values are `true` and `false`; the default is locale\n   * dependent.\n   */\n  get hour12(): boolean | null {\n    if (!this.hasAttribute('hour12') && !this.__hour12set) {\n      return null;\n    }\n    return this.hasAttribute('hour12');\n  }\n\n  /**\n   * Whether to use 12-hour time (as opposed to 24-hour time).\n   * Possible values are `true` and `false`; the default is locale\n   * dependent.\n   */\n  set hour12(v: boolean | null) {\n    this.__hour12set = true;\n    if (v) {\n      this.setAttribute('hour12', '');\n    } else {\n      this.removeAttribute('hour12');\n    }\n  }\n\n  private __date: Date | string | number | null = null;\n\n  /**\n   * A date object to render.\n   * It can be a `Date` object, number representing a timestamp\n   * or valid date string. The argument is parsed by `Date` constructor\n   * to produce the value.\n   * @attribute\n   */\n  get date(): Date | string | number | null {\n    if (this.__date) {\n      return this.__date;\n    }\n    return this.getAttribute('date');\n  }\n\n  /**\n   * A date object to render.\n   * It can be a `Date` object, number representing a timestamp\n   * or valid date string. The argument is parsed by `Date` constructor\n   * to produce the value.\n   *\n   * @param {Date|string|number} v The date to render\n   */\n  set date(v: Date | string | number | null) {\n    this.__date = v;\n    if (typeof v === 'string') {\n      this.setAttribute('date', v);\n    } else {\n      this._updateLabel();\n    }\n  }\n\n  get itemprop(): string | null {\n    return this._getTimeNode().getAttribute('itemprop');\n  }\n\n  set itemprop(value: string | null) {\n    const old = this.itemprop;\n    if (old === value) {\n      return;\n    }\n    if (old && value === null) {\n      // This setter moves attribute from this element to \"<time>\" element.\n      // When the attribute is removed from this then it becomes null.\n      return;\n    }\n    const node = this._getTimeNode();\n    if (value) {\n      node.setAttribute('itemprop', value);\n      this.removeAttribute('itemprop');\n    } else {\n      node.removeAttribute('itemprop');\n    }\n  }\n\n  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {\n    if (name === 'itemprop') {\n      this[name] = newValue;\n      return;\n    }\n    this._updateLabel();\n  }\n\n  /**\n   * Parses input `date` to a Date object.\n   * @param date A date to parse\n   */\n  protected _getParsableDate(date: string | number | Date | null): Date {\n    if (!date) {\n      date = new Date();\n    } else if (typeof date === 'string') {\n      try {\n        date = new Date(date);\n        if (Number.isNaN(date.getDate())) {\n          date = new Date();\n        }\n      } catch (e) {\n        date = new Date();\n      }\n    } else if (!Number.isNaN(date)) {\n      date = new Date(date);\n    } else if (!(date instanceof Date)) {\n      date = new Date();\n    }\n    return date;\n  }\n\n  _getIntlOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n    if (this.year) {\n      options.year = this.year;\n    }\n    if (this.month) {\n      options.month = this.month;\n    }\n    if (this.day) {\n      options.day = this.day;\n    }\n    if (this.hour) {\n      options.hour = this.hour;\n    }\n    if (this.minute) {\n      options.minute = this.minute;\n    }\n    if (this.second) {\n      options.second = this.second;\n    }\n    if (this.weekday) {\n      options.weekday = this.weekday;\n    }\n    if (this.era) {\n      options.era = this.era;\n    }\n    if (this.timeZoneName) {\n      options.timeZoneName = this.timeZoneName;\n    }\n    if (this.timeZone) {\n      options.timeZone = this.timeZone;\n    }\n    if (this.hour12 !== undefined && this.hour12 !== null) {\n      options.hour12 = this.hour12;\n    }\n    return options;\n  }\n\n  /**\n   * @returns A reference to a `<time>` element that is in the shadow DOM of this element.\n   */\n  _getTimeNode(): HTMLTimeElement {\n    const root = this.shadowRoot as ShadowRoot;\n    let node = root.querySelector('time');\n    if (!node) {\n      node = document.createElement('time');\n      root.appendChild(node);\n    }\n    return node;\n  }\n\n  _updateLabel(): void {\n    if (!this.parentElement) {\n      return;\n    }\n    const date = this._getParsableDate(this.date);\n    const node = this._getTimeNode();\n    node.setAttribute('datetime', date.toISOString());\n    /* istanbul ignore if */\n    if (typeof Intl === 'undefined') {\n      node.innerText = date.toString();\n      return;\n    }\n    let locales;\n    if (this.locales) {\n      locales = this.locales;\n    }\n    const options = this._getIntlOptions();\n    const value = new Intl.DateTimeFormat(locales, options).format(date);\n    node.innerText = value;\n  }\n}\n"]}

package/dist/ui/dialog/UiDialog.d.ts

@@ -0,0 +1,126 @@
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import { UiElement } from "../UiElement.js";
+import '../../define/ui/ui-button.js';
+export interface UiDialogClosingReason {
+    /**
+     * Whether the dialog was cancelled by either activating the `dismiss` button
+     * or by pressing escape.
+     */
+    cancelled: boolean;
+    /**
+     * This is used in cases when the dialog has more complex purpose.
+     * This is the value expected from the dialog.
+     */
+    value?: unknown;
+}
+/**
+ * Styled dialog using a native `<dialog>` element under the hood.
+ * Note, since native dialog renders in the top layer it is not necessary
+ * to place the dialog in the `<body>`.
+ *
+ * ## Using buttons
+ *
+ * The dialog automatically recognizes buttons with values `confirm` and `dismiss`
+ * to close the dialog and dispatch the `close` event. The event has additional
+ * closing reason detail.
+ *
+ * ```javascript
+ * <ui-button value="dismiss">Cancel</ui-button>
+ * <ui-button value="confirm">Take action</ui-button>
+ * ```
+ *
+ * ```javascript
+ * <button value="dismiss">Cancel</button>
+ * <button value="confirm">Take action</button>
+ * ```
+ *
+ * The detail object of the `close` event has the following properties:
+ * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.
+ *
+ * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the
+ * dialog won't trigger the close button.
+ *
+ * ## Full example
+ *
+ * ```javascript
+ * <ui-dialog modal>
+ *  <ui-icon slot="icon" icon="delete"></ui-icon>
+ *
+ *  <span slot="title">Delete photos?</span>
+ *  <p>This action will permanently remove the selected pictures from your account.</p>
+ *
+ *  <ui-button slot="button" value="dismiss" type="text">Cancel</ui-button>
+ *  <ui-button slot="button" value="confirm" type="text">Confirm</ui-button>
+ * </ui-dialog>
+ * ```
+ *
+ * @slot - The slot for the content of the dialog.
+ * @slot icon - The slot to place the dialog icon
+ * @slot title - The slot to place the dialog title. Do not put elements here, just the text.
+ * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss` buttons to automatically close the dialog.
+ * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.
+ */
+export default class UiDialog extends UiElement {
+    get disabled(): boolean;
+    /**
+     * When set, the button is a disabled state.
+     * @attribute
+     */
+    set disabled(value: boolean);
+    /**
+     * Opens the dialog as modal when toggling dialog's open state.
+     * @attribute
+     */
+    modal: boolean;
+    /**
+     * Toggles visibility of the dialog.
+     * Note, the dialog is opened asynchronously after the update is performed.
+     * @attribute
+     */
+    open: boolean;
+    /**
+     * Imperative access to create a dismiss button.
+     * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.
+     * @attribute
+     */
+    dismissLabel?: string;
+    /**
+     * Imperative access to create a confirm button.
+     * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.
+     * @attribute
+     */
+    confirmLabel?: string;
+    /**
+     * A reference to the underlying dialog element.
+     */
+    readonly dialog: HTMLDialogElement;
+    protected hasIcon: boolean;
+    protected hasTitle: boolean;
+    protected hasButton: boolean;
+    protected readonly icons: HTMLElement[];
+    protected readonly titles: HTMLElement[];
+    protected readonly buttons: HTMLElement[];
+    /**
+     * To be set by a child class when closing the dialog.
+     * This is passed to the close event.
+     */
+    protected dialogValue?: unknown;
+    constructor();
+    handleClick(e: MouseEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    protected controlVisibility(): void;
+    protected handleSlotChange(): void;
+    protected handleInteraction(value: 'dismiss' | 'confirm'): void;
+    protected handleDialogClose(): void;
+    protected handleDismiss(): void;
+    protected handleConfirm(): void;
+    render(): TemplateResult;
+    protected renderIcon(): TemplateResult;
+    protected renderTitle(): TemplateResult;
+    protected renderBody(): TemplateResult;
+    protected renderButtons(): TemplateResult;
+    protected renderDismissButton(): TemplateResult | typeof nothing;
+    protected renderConfirmButton(): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=UiDialog.d.ts.map

package/dist/ui/dialog/UiDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiDialog.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,8BAA8B,CAAA;AAErC,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC7C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;;OAIG;IAC0B,IAAI,UAAS;IAE1C;;;;OAIG;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElD;;;;OAIG;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElD;;OAEG;IACc,QAAQ,CAAC,MAAM,EAAG,iBAAiB,CAAC;IAE5C,SAAS,CAAC,OAAO,UAAS;IAE1B,SAAS,CAAC,QAAQ,UAAS;IAE3B,SAAS,CAAC,SAAS,UAAS;IAEmB,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,WAAW,EAAE,CAAC;IAE3C,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,WAAW,EAAE,CAAC;IAEtC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAC;IAErG;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;;IASvB,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAYhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;cAO3B,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzE,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAgBnC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAiB/D,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,SAAS,CAAC,aAAa,IAAI,IAAI;IAItB,MAAM,IAAI,cAAc;IAWjC,SAAS,CAAC,UAAU,IAAI,cAAc;IAUtC,SAAS,CAAC,WAAW,IAAI,cAAc;IAUvC,SAAS,CAAC,UAAU,IAAI,cAAc;IAMtC,SAAS,CAAC,aAAa,IAAI,cAAc;IAazC,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAUhE,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;CASjE"}