@esri/calcite-components 1.0.0-beta.7 → 1.0.0-beta.73

package/dist/esm/calcite-notice.entry.js

@@ -0,0 +1,108 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9de00868.js';
+import { S as StatusIcons } from './interfaces-51dc4e1b.js';
+import { s as setRequestedIcon, g as getSlotted } from './dom-e55f9eaf.js';
+import './guid-196bd5ea.js';
+
+const TEXT = {
+  close: "Close"
+};
+const SLOTS = {
+  title: "title",
+  message: "message",
+  link: "link",
+  actionsEnd: "actions-end"
+};
+const CSS = {
+  actionsEnd: "actions-end",
+  close: "notice-close",
+  container: "container",
+  content: "notice-content",
+  icon: "notice-icon"
+};
+
+const calciteNoticeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-notice-spacing-token-small:0.5rem;--calcite-notice-spacing-token-large:0.75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:0.5rem}:host([scale=m]){--calcite-notice-spacing-token-small:0.75rem;--calcite-notice-spacing-token-large:1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small:1rem;--calcite-notice-spacing-token-large:1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width:auto}:host([width=half]){--calcite-notice-width:50%}:host([width=full]){--calcite-notice-width:100%}:host{margin-left:auto;margin-right:auto;display:none;max-width:100%;-ms-flex-align:center;align-items:center;width:var(--calcite-notice-width)}.container{pointer-events:none;margin-top:0px;margin-bottom:0px;-webkit-box-sizing:border-box;box-sizing:border-box;display:none;width:100%;background-color:var(--calcite-ui-foreground-1);opacity:0;max-height:0;text-align:start;-webkit-transition:var(--calcite-animation-timing);transition:var(--calcite-animation-timing);-webkit-border-start:0px solid;border-inline-start:0px solid;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}.notice-close{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.notice-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host{display:-ms-flexbox;display:flex}:host([active]) .container{pointer-events:auto;display:-ms-flexbox;display:flex;max-height:100%;-ms-flex-align:center;align-items:center;border-width:2px;opacity:1;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0px;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:var(--calcite-notice-spacing-token-small);margin-inline-end:var(--calcite-notice-spacing-token-small)}.notice-content{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);display:-ms-flexbox;display:flex;min-width:0px;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;-ms-flex:1 1 0px;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-notice-spacing-token-large);padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large)}.notice-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto}.notice-close{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-appearance:none}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.notice-close:active{background-color:var(--calcite-ui-foreground-3)}.actions-end{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch}:host([color=blue]) .container{border-color:var(--calcite-ui-brand)}:host([color=blue]) .container .notice-icon{color:var(--calcite-ui-brand)}:host([color=red]) .container{border-color:var(--calcite-ui-danger)}:host([color=red]) .container .notice-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .notice-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-color:var(--calcite-ui-success)}:host([color=green]) .container .notice-icon{color:var(--calcite-ui-success)}";
+
+let CalciteNotice = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 7);
+    this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //---------------------------------------------------------------------------
+    /** Is the notice currently active or not */
+    this.active = false;
+    /** Color for the notice (will apply to top border and icon) */
+    this.color = "blue";
+    /** Optionally show a button the user can click to dismiss the notice */
+    this.dismissible = false;
+    /** String for the close button.
+     * @default "Close"
+     */
+    this.intlClose = TEXT.close;
+    /** specify the scale of the notice, defaults to m */
+    this.scale = "m";
+    /** specify the width of the notice, defaults to auto */
+    this.width = "auto";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.close = () => {
+      this.active = false;
+      this.calciteNoticeClose.emit();
+    };
+  }
+  updateRequestedIcon() {
+    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+  }
+  componentDidLoad() {
+    this.noticeLinkEl = this.el.querySelector("calcite-link");
+  }
+  render() {
+    const { el } = this;
+    const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
+    return (h("div", { class: CSS.container }, this.requestedIcon ? (h("div", { class: CSS.icon }, h("calcite-icon", { icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: CSS.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null, this.dismissible ? closeButton : null));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    if (!this.closeButton && !this.noticeLinkEl) {
+      return;
+    }
+    if (this.noticeLinkEl) {
+      this.noticeLinkEl.setFocus();
+    }
+    else if (this.closeButton) {
+      this.closeButton.focus();
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "icon": ["updateRequestedIcon"],
+    "color": ["updateRequestedIcon"]
+  }; }
+};
+CalciteNotice.style = calciteNoticeCss;
+
+export { CalciteNotice as calcite_notice };

package/dist/esm/calcite-option_3.entry.js

@@ -0,0 +1,331 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { r as registerInstance, c as createEvent, h, g as getElement, F as Fragment } from './index-9de00868.js';
+import { c as createObserver } from './observers-8f0bc419.js';
+import { f as focusElement } from './dom-e55f9eaf.js';
+import { c as connectLabel, d as disconnectLabel } from './label-240ef148.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-147bc6d7.js';
+import './guid-196bd5ea.js';
+
+const calciteOptionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}";
+
+let CalciteOption = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteOptionChange = createEvent(this, "calciteOptionChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When true, it prevents the option from being selected.
+     */
+    this.disabled = false;
+    this.mutationObserver = createObserver("mutation", () => {
+      this.ensureTextContentDependentProps();
+      this.calciteOptionChange.emit();
+    });
+  }
+  handlePropChange(_newValue, _oldValue, propName) {
+    if (propName === "label" || propName === "value") {
+      this.ensureTextContentDependentProps();
+    }
+    this.calciteOptionChange.emit();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  ensureTextContentDependentProps() {
+    const { el: { textContent } } = this;
+    if (!this.label || this.label === this.internallySetLabel) {
+      this.label = textContent;
+      this.internallySetLabel = textContent;
+    }
+    if (!this.value || this.value === this.internallySetValue) {
+      this.value = textContent;
+      this.internallySetValue = textContent;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.ensureTextContentDependentProps();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
+      attributeFilter: ["label", "value"],
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return h("slot", null, this.label);
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["handlePropChange"],
+    "label": ["handlePropChange"],
+    "selected": ["handlePropChange"],
+    "value": ["handlePropChange"]
+  }; }
+};
+CalciteOption.style = calciteOptionCss;
+
+const calciteOptionGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}";
+
+let CalciteOptionGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteOptionGroupChange = createEvent(this, "calciteOptionGroupChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When true, it prevents selection from any of its associated options.
+     */
+    this.disabled = false;
+  }
+  handlePropChange() {
+    this.calciteOptionGroupChange.emit();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Fragment, null, h("div", null, this.label), h("slot", null)));
+  }
+  static get watchers() { return {
+    "disabled": ["handlePropChange"],
+    "label": ["handlePropChange"]
+  }; }
+};
+CalciteOptionGroup.style = calciteOptionGroupCss;
+
+const CSS = {
+  icon: "icon",
+  iconContainer: "icon-container",
+  select: "select"
+};
+
+const calciteSelectCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:var(--select-width)}:host([scale=s]){height:1.5rem;--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .icon-container{padding-left:0.5rem;padding-right:0.5rem}:host([scale=m]){height:2rem;--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .icon-container{padding-left:0.75rem;padding-right:0.75rem}:host([scale=l]){height:44px;--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .icon-container{padding-left:1rem;padding-right:1rem}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}.select{margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);font-family:inherit;color:var(--calcite-ui-text-2);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.select:hover{background-color:var(--calcite-ui-foreground-2)}select:disabled{border-color:var(--calcite-ui-border-input);--tw-bg-opacity:1}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}.icon-container{pointer-events:none;position:absolute;top:0px;bottom:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:transparent;color:var(--calcite-ui-text-2);inset-inline-end:0px;border-inline-width:0px 1px}.select:focus~.icon-container{border-color:transparent}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+
+function isOption(optionOrGroup) {
+  return optionOrGroup.tagName === "CALCITE-OPTION";
+}
+function isOptionGroup(optionOrGroup) {
+  return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
+}
+let CalciteSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteSelectChange = createEvent(this, "calciteSelectChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When true, it prevents the option from being selected.
+     */
+    this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
+    /**
+     * The component scale.
+     */
+    this.scale = "m";
+    /** The value of the selectedOption */
+    this.value = null;
+    /**
+     * The component width.
+     */
+    this.width = "auto";
+    this.componentToNativeEl = new Map();
+    this.mutationObserver = createObserver("mutation", () => this.populateInternalSelect());
+    this.handleInternalSelectChange = () => {
+      const selected = this.selectEl.selectedOptions[0];
+      this.selectFromNativeOption(selected);
+      requestAnimationFrame(() => this.emitChangeEvent());
+    };
+    this.populateInternalSelect = () => {
+      const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
+      this.clearInternalSelect();
+      optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
+    };
+    this.storeSelectRef = (node) => {
+      this.selectEl = node;
+      this.populateInternalSelect();
+      const selected = this.selectEl.selectedOptions[0];
+      this.selectFromNativeOption(selected);
+    };
+    this.emitChangeEvent = () => {
+      this.calciteSelectChange.emit();
+    };
+  }
+  valueHandler(value) {
+    const items = this.el.querySelectorAll("calcite-option");
+    items.forEach((item) => (item.selected = item.value === value));
+  }
+  selectedOptionHandler(selectedOption) {
+    this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    const { el } = this;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
+      subtree: true,
+      childList: true
+    });
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.selectEl);
+  }
+  handleOptionOrGroupChange(event) {
+    event.stopPropagation();
+    const optionOrGroup = event.target;
+    const nativeEl = this.componentToNativeEl.get(optionOrGroup);
+    if (!nativeEl) {
+      return;
+    }
+    this.updateNativeElement(optionOrGroup, nativeEl);
+    if (isOption(optionOrGroup) && optionOrGroup.selected) {
+      this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
+  updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
+    nativeOptionOrGroup.disabled = optionOrGroup.disabled;
+    nativeOptionOrGroup.label = optionOrGroup.label;
+    if (isOption(optionOrGroup)) {
+      const option = nativeOptionOrGroup;
+      option.selected = optionOrGroup.selected;
+      option.value = optionOrGroup.value;
+      // need to set innerText for mobile
+      // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701
+      option.innerText = optionOrGroup.label;
+    }
+  }
+  clearInternalSelect() {
+    this.componentToNativeEl.forEach((value) => value.remove());
+    this.componentToNativeEl.clear();
+  }
+  selectFromNativeOption(nativeOption) {
+    if (!nativeOption) {
+      return;
+    }
+    let futureSelected;
+    this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {
+      if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {
+        optionOrGroup.selected = true;
+        futureSelected = optionOrGroup;
+        this.deselectAllExcept(optionOrGroup);
+      }
+    });
+    if (futureSelected) {
+      this.selectedOption = futureSelected;
+    }
+  }
+  toNativeElement(optionOrGroup) {
+    if (isOption(optionOrGroup)) {
+      const option = document.createElement("option");
+      this.updateNativeElement(optionOrGroup, option);
+      this.componentToNativeEl.set(optionOrGroup, option);
+      return option;
+    }
+    if (isOptionGroup(optionOrGroup)) {
+      const group = document.createElement("optgroup");
+      this.updateNativeElement(optionOrGroup, group);
+      Array.from(optionOrGroup.children).forEach((option) => {
+        const nativeOption = this.toNativeElement(option);
+        group.append(nativeOption);
+        this.componentToNativeEl.set(optionOrGroup, nativeOption);
+      });
+      this.componentToNativeEl.set(optionOrGroup, group);
+      return group;
+    }
+    throw new Error("unsupported element child provided");
+  }
+  deselectAllExcept(except) {
+    this.el.querySelectorAll("calcite-option").forEach((option) => {
+      if (option === except) {
+        return;
+      }
+      option.selected = false;
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderChevron() {
+    return (h("div", { class: CSS.iconContainer }, h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: "s" })));
+  }
+  render() {
+    return (h(Fragment, null, h("select", { "aria-label": this.label, class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", null)), this.renderChevron(), h(HiddenFormInputSlot, { component: this })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueHandler"],
+    "selectedOption": ["selectedOptionHandler"]
+  }; }
+};
+CalciteSelect.style = calciteSelectCss;
+
+export { CalciteOption as calcite_option, CalciteOptionGroup as calcite_option_group, CalciteSelect as calcite_select };

package/dist/esm/calcite-pagination.entry.js

@@ -0,0 +1,173 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-9de00868.js';
+
+const CSS = {
+  page: "page",
+  selected: "is-selected",
+  previous: "previous",
+  next: "next",
+  disabled: "is-disabled",
+  ellipsis: "ellipsis",
+  ellipsisStart: "ellipsis--start",
+  ellipsisEnd: "ellipsis--end"
+};
+const TEXT = {
+  nextLabel: "Next",
+  previousLabel: "Previous"
+};
+
+const calcitePaginationCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-pagination-spacing:0.25rem 0.5rem}:host([scale=s]) .previous,:host([scale=s]) .next,:host([scale=s]) .page{height:1.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .previous,:host([scale=s]) .next{padding-left:0.25rem;padding-right:0.25rem}:host([scale=m]){--calcite-pagination-spacing:0.5rem 0.75rem}:host([scale=m]) .previous,:host([scale=m]) .next,:host([scale=m]) .page{height:2rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .previous,:host([scale=m]) .next{padding-left:0.5rem;padding-right:0.5rem}:host([scale=l]){--calcite-pagination-spacing:0.75rem 1rem}:host([scale=l]) .previous,:host([scale=l]) .next,:host([scale=l]) .page{height:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .previous,:host([scale=l]) .next{padding-left:1rem;padding-right:1rem}:host{display:-ms-flexbox;display:flex;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb}:host button{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host button:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.previous,.next,.page{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;border-style:none;--tw-border-opacity:0;background-color:transparent;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3);border-top:2px solid transparent;border-bottom:2px solid transparent}.previous:hover,.next:hover,.page:hover{color:var(--calcite-ui-text-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.page:hover{border-bottom-color:var(--calcite-ui-border-2)}.page.is-selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-bottom-color:var(--calcite-ui-brand)}.previous:hover,.next:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.previous:active,.next:active{background-color:var(--calcite-ui-foreground-3)}.previous.is-disabled,.next.is-disabled{pointer-events:none;background-color:transparent}.previous.is-disabled>calcite-icon,.next.is-disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}.next{margin-right:0px}.page,.ellipsis{padding:var(--calcite-pagination-spacing)}.ellipsis{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;color:var(--calcite-ui-text-3)}";
+
+const maxPagesDisplayed = 5;
+let CalcitePagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calcitePaginationUpdate = createEvent(this, "calcitePaginationUpdate", 7);
+    this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** number of items per page */
+    this.num = 20;
+    /** index of item that should begin the page */
+    this.start = 1;
+    /** total number of items */
+    this.total = 0;
+    /** Used as an accessible label (aria-label) for the next button
+     * @default "Next"
+     */
+    this.textLabelNext = TEXT.nextLabel;
+    /** Used as an accessible label (aria-label) of the previous button
+     * @default "Previous"
+     */
+    this.textLabelPrevious = TEXT.previousLabel;
+    /** The scale of the pagination */
+    this.scale = "m";
+    this.previousClicked = () => {
+      this.previousPage().then();
+      this.emitUpdate();
+    };
+    this.nextClicked = () => {
+      this.nextPage();
+      this.emitUpdate();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Go to the next page of results */
+  async nextPage() {
+    this.start = Math.min(this.getLastStart(), this.start + this.num);
+  }
+  /** Go to the previous page of results */
+  async previousPage() {
+    this.start = Math.max(1, this.start - this.num);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  getLastStart() {
+    const { total, num } = this;
+    const lastStart = total % num === 0 ? total - num : Math.floor(total / num) * num;
+    return lastStart + 1;
+  }
+  showLeftEllipsis() {
+    return Math.floor(this.start / this.num) > 3;
+  }
+  showRightEllipsis() {
+    return (this.total - this.start) / this.num > 3;
+  }
+  emitUpdate() {
+    const changePayload = {
+      start: this.start,
+      total: this.total,
+      num: this.num
+    };
+    this.calcitePaginationChange.emit(changePayload);
+    this.calcitePaginationUpdate.emit(changePayload);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderPages() {
+    const lastStart = this.getLastStart();
+    let end;
+    let nextStart;
+    // if we don't need ellipses render the whole set
+    if (this.total / this.num <= maxPagesDisplayed) {
+      nextStart = 1 + this.num;
+      end = lastStart - this.num;
+    }
+    else {
+      // if we're within max pages of page 1
+      if (this.start / this.num < maxPagesDisplayed - 1) {
+        nextStart = 1 + this.num;
+        end = 1 + 4 * this.num;
+      }
+      else {
+        // if we're within max pages of last page
+        if (this.start + 3 * this.num >= this.total) {
+          nextStart = lastStart - 4 * this.num;
+          end = lastStart - this.num;
+        }
+        else {
+          nextStart = this.start - this.num;
+          end = this.start + this.num;
+        }
+      }
+    }
+    const pages = [];
+    while (nextStart <= end) {
+      pages.push(nextStart);
+      nextStart = nextStart + this.num;
+    }
+    return pages.map((page) => this.renderPage(page));
+  }
+  renderPage(start) {
+    const page = Math.floor(start / this.num) + (this.num === 1 ? 0 : 1);
+    return (h("button", { class: {
+        [CSS.page]: true,
+        [CSS.selected]: start === this.start
+      }, onClick: () => {
+        this.start = start;
+        this.emitUpdate();
+      } }, page));
+  }
+  renderLeftEllipsis() {
+    if (this.total / this.num > maxPagesDisplayed && this.showLeftEllipsis()) {
+      return h("span", { class: `${CSS.ellipsis} ${CSS.ellipsisStart}` }, "\u2026");
+    }
+  }
+  renderRightEllipsis() {
+    if (this.total / this.num > maxPagesDisplayed && this.showRightEllipsis()) {
+      return h("span", { class: `${CSS.ellipsis} ${CSS.ellipsisEnd}` }, "\u2026");
+    }
+  }
+  render() {
+    const { total, num, start } = this;
+    const prevDisabled = num === 1 ? start <= num : start < num;
+    const nextDisabled = num === 1 ? start + num > total : start + num > total;
+    return (h(Fragment, null, h("button", { "aria-label": this.textLabelPrevious, class: {
+        [CSS.previous]: true,
+        [CSS.disabled]: prevDisabled
+      }, disabled: prevDisabled, onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: "s" })), total > num ? this.renderPage(1) : null, this.renderLeftEllipsis(), this.renderPages(), this.renderRightEllipsis(), this.renderPage(this.getLastStart()), h("button", { "aria-label": this.textLabelNext, class: {
+        [CSS.next]: true,
+        [CSS.disabled]: nextDisabled
+      }, disabled: nextDisabled, onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
+  }
+  get el() { return getElement(this); }
+};
+CalcitePagination.style = calcitePaginationCss;
+
+export { CalcitePagination as calcite_pagination };