@spectric/ui 0.0.20 → 0.0.22

package/src/components/input.ts

@@ -85,7 +85,7 @@ export interface InputProps {
 @customElement("spectric-input")
 export class SpectricInput extends LitElement implements InputProps {
   @property({ type: Boolean, reflect: true })
-  checked?: boolean;
+  checked?: boolean = false;
   size?: ButtonSizesTypes;
   files: FileList | null = null;
   //static styles?: CSSResultGroup | undefined = style;
@@ -246,7 +246,10 @@ export class SpectricInput extends LitElement implements InputProps {
     this.requestUpdate();
   };
   protected updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has("checked")) {
+    if (
+      changedProperties.has("checked") &&
+      changedProperties.get("checked") !== undefined
+    ) {
       this.dispatchEvent(new Event("change", { bubbles: true }));
     }
   }
@@ -261,14 +264,14 @@ export class SpectricInput extends LitElement implements InputProps {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   protected render(): unknown {
-    const calendar = html`<spectric-calendar 
-                        .popup=${this.variant === InputVariants.datePopup}
-                        @select=${(e: CustomEvent<Date>) => {
+    const calendar = html`<spectric-calendar
+      .popup=${this.variant === InputVariants.datePopup}
+      @select=${(e: CustomEvent<Date>) => {
         this.value = e.detail.toISOString();
-        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
-      }
-      }>
-              </spectric-calendar>`
+        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover();
+      }}
+    >
+    </spectric-calendar>`;
     switch (this.variant) {
       case InputVariants.Text:
       case InputVariants.password:
@@ -287,8 +290,8 @@ export class SpectricInput extends LitElement implements InputProps {
               <div class="--text-input__label-wrapper">
                 ${this.label}
                 ${this.maxCount > 0 && this._value
-            ? `${(this._value as String).length}/${this.maxCount}`
-            : null}
+                  ? `${(this._value as String).length}/${this.maxCount}`
+                  : null}
               </div>
             </div>
             <div class="fieldwrapper">
@@ -306,24 +309,28 @@ export class SpectricInput extends LitElement implements InputProps {
                   ?readonly="${this.readonly}"
                   ?required="${this.required}"
                   type="${ifNonEmpty(
-              this.variant !== InputVariants.password
-                ? this.variant !== InputVariants.date ? this.variant : InputVariants.Text
-                : this._showPassword
-                  ? InputVariants.Text
-                  : InputVariants.password
-            )}"
+                    this.variant !== InputVariants.password
+                      ? this.variant !== InputVariants.date
+                        ? this.variant
+                        : InputVariants.Text
+                      : this._showPassword
+                      ? InputVariants.Text
+                      : InputVariants.password
+                  )}"
                   .value="${this._value as string}"
                   maxlength="${ifNonEmpty(
-              this.maxCount > 0 ? this.maxCount : undefined
-            )}"
+                    this.maxCount > 0 ? this.maxCount : undefined
+                  )}"
                   @input="${this._handleInput}"
                   @change=${this._handleChange}
                 />
 
-            ${this.variant === String(InputVariants.datePopup) ? calendar : null}
+                ${this.variant === String(InputVariants.datePopup)
+                  ? calendar
+                  : null}
                 ${this.variant === String(InputVariants.password) &&
-            this.showPasswordVisibilityToggle
-            ? html`
+                this.showPasswordVisibilityToggle
+                  ? html`
                       <spectric-button
                         icon
                         class="input-button-right"
@@ -333,11 +340,11 @@ export class SpectricInput extends LitElement implements InputProps {
                         @click=${this.handleTogglePasswordVisibility}
                       >
                         ${this._showPassword
-                ? this.hidePasswordLabel
-                : this.showPasswordLabel}
+                          ? this.hidePasswordLabel
+                          : this.showPasswordLabel}
                       </spectric-button>
                     `
-            : null}
+                  : null}
               </div>
               <div
                 id="helper-text"
@@ -355,10 +362,11 @@ export class SpectricInput extends LitElement implements InputProps {
         return html`<div class="inputWrapper">
                 <div class="text-input__label-helper-wrapper">
                     <div class="--text-input__label-wrapper">
-                        ${this.label} ${this.maxCount > 0 && this._value
+                        ${this.label} ${
+          this.maxCount > 0 && this._value
             ? `${(this._value as String).length}/${this.maxCount}`
             : null
-          }
+        }
                     </div> 
                 </div>
               <div class="fieldwrapper">
@@ -366,20 +374,21 @@ export class SpectricInput extends LitElement implements InputProps {
                   <input type="hidden" .value=${String(this.value)} > </input>
                   <spectric-colorpicker 
                   @cancel=${(e: DomEvent<SpectricColorPicker>) => {
-            this.value = e.target.value;
-          }}
+                    this.value = e.target.value;
+                  }}
                   @change=${(e: DomEvent<SpectricColorPicker>) => {
-            e.stopPropagation();
-            this.value = e.target.value;
-            this._handleChange(e);
-          }} .value=${String(this.value)}></spectric-colorpicker>
+                    e.stopPropagation();
+                    this.value = e.target.value;
+                    this._handleChange(e);
+                  }} .value=${String(this.value)}></spectric-colorpicker>
                 </div>
                 <div
                     id="helper-text"
                     class="${this.helperText || this.invalid ? "" : "hidden"}"
                     >
-                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText
-          } </slot>
+                    <slot name="helper-text"> ${
+                      this.invalid ? this.invalidText : this.helperText
+                    } </slot>
                   </div>
 
               </div>
@@ -393,10 +402,11 @@ export class SpectricInput extends LitElement implements InputProps {
         <spectric-button 
         .tooltip=${this.helperText}
         @click=${() => {
-            this.checked = !this.checked;
-            this.value = Boolean(this.checked);
-          }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"
-          }>${this.checked ? "✓" : "\u00A0"}</spectric-button>
+          this.checked = !this.checked;
+          this.value = Boolean(this.checked);
+        }} icon size=${this.size || "xxsmall"} variant=${
+          this.checked ? "primary" : "secondary"
+        }>${this.checked ? "✓" : "\u00A0"}</spectric-button>
           
           ${this.label}
         </div>

package/src/components/pagination/pagination.ts

@@ -1,146 +1,200 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from "lit";
 import "../Button";
-import { customElement, property, query, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const PaginationElementTag = "spectric-pagination"
-import "./pagination.css"
-import { ButtonSizesTypes } from '../Button';
-export type { PaginationProps, PaginationChangeProps, PaginationEvents }
+import { customElement, property, query } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export const PaginationElementTag = "spectric-pagination";
+import "./pagination.css";
+import { ButtonSizesTypes } from "../Button";
+import { ARROW_LEFT, ARROW_RIGHT } from "../symbols";
+export type { PaginationProps, PaginationChangeProps, PaginationEvents };
 
 interface PaginationChangeProps {
-    page?: number;
-    pageSize?: number;
+  page?: number;
+  pageSize?: number;
 }
 
 interface PaginationProps extends PaginationChangeProps {
-    size?: ButtonSizesTypes
-    totalItems?: number
-    pageSizeOptions?: number[]
+  size?: ButtonSizesTypes;
+  totalItems?: number;
+  pageSizeOptions?: number[];
 }
 
-
 /**
  * Pagination Element
  */
 @customElement(PaginationElementTag)
 export class PaginationElement extends LitElement implements PaginationProps {
-    @property({ type: Number, reflect: true })
-    page: number = 1;
+  @property({ type: Number, reflect: true })
+  page: number = 1;
 
-    @property({ type: Number, reflect: true })
-    pageSize: number = 10;
+  @property({ type: Number, reflect: true })
+  pageSize: number = 10;
 
-    @property({ type: Number, reflect: true })
-    totalItems?: number;
+  @property({ type: Number, reflect: true })
+  totalItems?: number;
 
-    @property({ type: Array })
-    pageSizeOptions = [10, 20, 50, 100, 1000];
+  @property({ type: Array })
+  pageSizeOptions = [10, 20, 50, 100, 1000];
 
-    @query("select")
-    select?: HTMLSelectElement
-    /**
-     * Size of the pagination buttons
-     */
-    @property({ type: String, reflect: true })
-    size: ButtonSizesTypes = "xsmall"
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
-    }
-    protected update(_changedProperties: PropertyValues): void {
-        if (_changedProperties.has("pageSize") && !this.pageSizeOptions.includes(this.pageSize)) {
-            this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b)
-            /**
-             * If an option isn't present in the select options list it cannot update its value until after the option is present.
-             * We requests an animation frame to make sure we the value was set correctly after the option is added. We update it if the value is incorrect
-             */
-            requestAnimationFrame(() => {
-                if (this.select && this.select.value !== String(this.pageSize)) {
-                    this.select.value = String(this.pageSize)
-                }
-            })
+  @query("select")
+  select?: HTMLSelectElement;
+  /**
+   * Size of the pagination buttons
+   */
+  @property({ type: String, reflect: true })
+  size: ButtonSizesTypes = "xsmall";
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  protected update(_changedProperties: PropertyValues): void {
+    if (
+      _changedProperties.has("pageSize") &&
+      !this.pageSizeOptions.includes(this.pageSize)
+    ) {
+      this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort(
+        (a, b) => a - b
+      );
+      /**
+       * If an option isn't present in the select options list it cannot update its value until after the option is present.
+       * We requests an animation frame to make sure we the value was set correctly after the option is added. We update it if the value is incorrect
+       */
+      requestAnimationFrame(() => {
+        if (this.select && this.select.value !== String(this.pageSize)) {
+          this.select.value = String(this.pageSize);
         }
-        super.update(_changedProperties)
-    }
-    private _handlePageUp = () => {
-        this.page += 1
-        this._emitChange()
-    }
-    private _handlePageDown = () => {
-        this.page -= 1
-        this._emitChange()
+      });
     }
-    private _handleSizeChange = (e: any) => {
-        e.stopPropagation()
-        e.preventDefault()
-        let value = parseInt(e.target.value)
-        this.pageSize = value
-        this._emitChange()
+    super.update(_changedProperties);
+  }
+  private _handlePageUp = () => {
+    this.page += 1;
+    this._emitChange();
+  };
+  private _handlePageDown = () => {
+    this.page -= 1;
+    this._emitChange();
+  };
+  private _handleSizeChange = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    let value = parseInt(e.target.value);
+    this.pageSize = value;
+    this._emitChange();
+  };
+  private _emitChange = () => {
+    let { page, pageSize } = this;
+    this.dispatchEvent(
+      new CustomEvent<PaginationChangeProps>("change", {
+        detail: { page, pageSize },
+      })
+    );
+  };
+  protected render(): unknown {
+    let nextPage = this.page * this.pageSize;
+    let nextPageDisabled = true;
+
+    if (this.totalItems && nextPage < this.totalItems) {
+      nextPageDisabled = false;
     }
-    private _emitChange = () => {
-        let { page, pageSize } = this
-        this.dispatchEvent(new CustomEvent<PaginationChangeProps>("change", { detail: { page, pageSize } }))
+    let pageText = "";
+    if (this.totalItems) {
+      pageText = `${this.page} of ${Math.ceil(
+        this.totalItems / this.pageSize
+      )}`;
     }
-    protected render(): unknown {
-        let nextPage = (this.page) * this.pageSize
-        let nextPageDisabled = true
-
-        if (this.totalItems && nextPage < this.totalItems) {
-            nextPageDisabled = false
-        }
-        let pageText = ""
-        if (this.totalItems) {
-            pageText = `${this.page} of ${Math.ceil(this.totalItems / this.pageSize)}`
-        }
-        return html`
-        <div class="spectric-pagination-container">
+    return html`
+      <div class="spectric-pagination-container">
+        <div>
+          <!-- TODO/FIXME Make a select component and use it for cross browser styling-->
+          <select
+            @change=${this._handleSizeChange}
+            .value=${String(this.pageSize)}
+          >
+            ${this.pageSizeOptions.map(
+              (size) =>
+                html`<option
+                  .value=${String(size)}
+                  class=${String(size) === String(this.pageSize)
+                    ? "selected"
+                    : ""}
+                >
+                  ${size}
+                </option>`
+            )}
+          </select>
+        </div>
+        ${this.totalItems
+          ? html`
+              <div class="spectric-pagination-text">
+                ${`Items ${(this.page - 1) * this.pageSize}-${Math.min(
+                  this.page * this.pageSize,
+                  this.totalItems
+                )} of ${this.totalItems}`}
+              </div>
+              <div class="spectric-pagination-container">
+                <div>${pageText}</div>
                 <div>
-                    <!-- TODO/FIXME Make a select component and use it for cross browser styling-->
-                    <select @change=${this._handleSizeChange} .value=${String(this.pageSize)}>
-                        ${this.pageSizeOptions.map(size => html`<option .value=${String(size)} class=${String(size) === String(this.pageSize) ? "selected" : ""}>${size}</option>`)}
-                    </select>
-                </div>
-                ${this.totalItems ? html`
-                    <div class="spectric-pagination-text">${`Items ${(this.page - 1) * this.pageSize}-${Math.min(this.page * this.pageSize, this.totalItems)} of ${this.totalItems}`}</div>
-                <div class="spectric-pagination-container">
-                    <div>
-                    ${pageText}
-                    </div>
-                    <div>
-                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon>🠈</spectric-button>
-                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>🠊</spectric-button>
-                    </div>
+                  <spectric-button
+                    size=${this.size}
+                    ?disabled=${this.page === 1}
+                    @click=${this._handlePageDown}
+                    icon
+                    >${ARROW_LEFT}</spectric-button
+                  >
+                  <spectric-button
+                    size=${this.size}
+                    ?disabled=${nextPageDisabled}
+                    @click=${this._handlePageUp}
+                    icon
+                    >${ARROW_RIGHT}</spectric-button
+                  >
                 </div>
-                `: null}
-        </div>
-        `;
-    }
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
 }
 
 interface PaginationEvents {
-    'change': (event: CustomEvent<PaginationChangeProps>) => void;
+  change: (event: CustomEvent<PaginationChangeProps>) => void;
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [PaginationElementTag]: HTMLElementTagWithEvents<PaginationElement, PaginationEvents>
-
+  interface HTMLElementTagNameMap {
+    [PaginationElementTag]: HTMLElementTagWithEvents<
+      PaginationElement,
+      PaginationEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link PaginationElement}
+       */
+      [PaginationElementTag]: ReactElementWithPropsAndEvents<
+        PaginationElement,
+        PaginationProps,
+        PaginationEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link PaginationElement}
-             */
-            [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link PaginationElement}
-                 */
-                [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link PaginationElement}
+         */
+        [PaginationElementTag]: ReactElementWithPropsAndEvents<
+          PaginationElement,
+          PaginationProps,
+          PaginationEvents
+        >;
+      }
     }
+  }
 }