@zanichelli/albe-web-components 2.48.1 → 3.1.1

package/dist/collection/components/modal/z-modal-login/styles.css

@@ -15,9 +15,9 @@
   align-items: stretch;
 }
 
-z-button,
+z-button-deprecated,
 z-input,
-::slotted(z-button),
+::slotted(z-button-deprecated),
 ::slotted(z-input) {
   display: inline-block;
   width: 100%;
@@ -48,8 +48,8 @@ div.wrapper > form > div.password::slotted(z-input),
   align-self: flex-end;
 }
 
-div.wrapper > form > div.login::slotted(z-button),
-:host div.wrapper > form > div.login z-button {
+div.wrapper > form > div.login::slotted(z-button-deprecated),
+:host div.wrapper > form > div.login z-button-deprecated {
   margin: calc(var(--space-unit) * 3) 0;
   align-self: flex-start;
 }
@@ -62,8 +62,8 @@ div.wrapper > form > div.login::slotted(z-button),
   margin-block-start: unset;
 }
 
-div.wrapper > div.signup::slotted(z-button),
-:host div.wrapper > div.signup z-button {
+div.wrapper > div.signup::slotted(z-button-deprecated),
+:host div.wrapper > div.signup z-button-deprecated {
   display: inline-block;
   margin: calc(var(--space-unit) * 2) 0;
 }
@@ -101,8 +101,8 @@ slot-fb[name="provider"] {
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-  z-button,
-  ::slotted(z-button) {
+  z-button-deprecated,
+  ::slotted(z-button-deprecated) {
     width: initial;
   }
 

package/dist/collection/components/notification/z-cookiebar/index.js

@@ -28,10 +28,10 @@ export class ZCookiebar {
             "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0",
             h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"),
             "."))),
-      h("z-button", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+      h("z-button-deprecated", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
-    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+    return (h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot()));
   }
   static get is() { return "z-cookiebar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/z-cookiebar/styles.css

@@ -15,7 +15,7 @@ z-candybar.hidden {
   align-items: stretch;
   align-content: space-between;
   color: var(--text-grey-800);
-  border-radius: calc(var(--space-unit) * .5);
+  border-radius: calc(var(--space-unit) * 0.5);
   font-size: 16px;
   letter-spacing: 0px;
   line-height: 24px;
@@ -58,7 +58,7 @@ z-candybar.hidden {
   z-index: 1000;
 }
 
-.content > z-button {
+.content > z-button-deprecated {
   margin: 0;
   width: 100%;
 }
@@ -87,7 +87,7 @@ z-candybar.hidden {
     padding: 0;
   }
 
-  .content > z-button {
+  .content > z-button-deprecated {
     margin: 0;
     width: initial;
   }

package/dist/collection/components/notification/z-toast-notification/styles.css

@@ -172,7 +172,10 @@
   font-weight: 600;
 }
 
-:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
+:host
+  > #external-container.mobile-wrapped
+  #button
+  ::slotted(z-button-deprecated) {
   margin-top: calc(var(--space-unit) * 2);
 }
 
@@ -219,7 +222,6 @@
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-
   :host {
     width: unset;
     max-width: 50vw;

package/dist/collection/components/z-date-picker/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Event, State, } from "@stencil/core";
+import { Component, Prop, Element, h, Event, Listen, State, } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { Italian } from "flatpickr/dist/l10n/it.js";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
@@ -13,16 +13,55 @@ export class ZDatePicker {
   emitDateSelect(date) {
     this.dateSelect.emit(date);
   }
+  handleKeyDown(ev) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      let isPrevArrowEntered = document.activeElement.classList.contains("flatpickr-prev-month");
+      let isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
+      let arrowPressed = isPrevArrowEntered || isNextArrowEntered;
+      arrowPressed && ev.key === " " && ev.preventDefault();
+      if (this.mode === ZDatePickerMode.months) {
+        isPrevArrowEntered &&
+          this.flatpickrInstance.changeYear(this.flatpickrInstance.currentYear - 1);
+        isNextArrowEntered &&
+          this.flatpickrInstance.changeYear(this.flatpickrInstance.currentYear + 1);
+        if (arrowPressed) {
+          let calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
+          let months = calendar.querySelectorAll(".flatpickr-monthSelect-month");
+          months.forEach((element) => {
+            element.setAttribute("aria-label", `${element.innerHTML} ${this.flatpickrInstance.currentYear}`);
+          });
+          //Force check of the current day
+          Array.from(months).forEach((element, index) => {
+            let curMonth = new Date().getMonth();
+            let curYear = new Date().getFullYear();
+            if (index === curMonth) {
+              if (this.flatpickrInstance.currentYear === curYear) {
+                element.setAttribute("class", "flatpickr-monthSelect-month today");
+              }
+              else {
+                element.setAttribute("class", "flatpickr-monthSelect-month");
+              }
+            }
+          });
+        }
+      }
+      else {
+        isPrevArrowEntered && this.flatpickrInstance.changeMonth(-1);
+        isNextArrowEntered && this.flatpickrInstance.changeMonth(1);
+      }
+    }
+  }
   componentWillLoad() {
     let customToggle = this.element.querySelector("[slot=toggle]");
     this.hasChildren = !!customToggle;
     this.hasChildren && customToggle.setAttribute("data-toggle", "data-toggle");
   }
   componentDidLoad() {
-    flatpickr(`.${this.datepickerid}`, {
+    this.flatpickrInstance = flatpickr(`.${this.datepickerid}`, {
       appendTo: this.element.children[0],
       enableTime: this.mode === ZDatePickerMode.dateTime,
       locale: Italian,
+      allowInput: true,
       dateFormat: this.mode === ZDatePickerMode.dateTime ? "d-m-Y - H:i" : "d-m-Y",
       ariaDateFormat: this.mode === ZDatePickerMode.months ? "F Y" : "d F Y",
       minuteIncrement: 1,
@@ -30,6 +69,13 @@ export class ZDatePicker {
       onChange: (_selectedDates, dateStr) => {
         this.emitDateSelect(dateStr);
       },
+      onOpen: () => {
+        this.setAriaOptions();
+        this.setFlatpickrPosition();
+      },
+      onKeyDown: () => {
+        this.setAriaOptions();
+      },
       wrap: this.hasChildren,
       plugins: this.mode === ZDatePickerMode.months && [
         monthSelectPlugin({
@@ -42,6 +88,60 @@ export class ZDatePicker {
       element.innerHTML = element.innerHTML.trim().charAt(0);
     });
   }
+  setAriaOptions() {
+    let calendar = this.element.getElementsByClassName("flatpickr-calendar")[0];
+    let prevMonthArrow = calendar.getElementsByClassName("flatpickr-prev-month")[0];
+    let nextMonthArrow = calendar.getElementsByClassName("flatpickr-next-month")[0];
+    let tabindexElements = calendar.querySelectorAll('[tabindex = "-1"]');
+    tabindexElements.forEach((element) => element.setAttribute("tabindex", "0"));
+    prevMonthArrow.setAttribute("tabindex", "0");
+    nextMonthArrow.setAttribute("tabindex", "0");
+    prevMonthArrow.setAttribute("role", "button");
+    nextMonthArrow.setAttribute("role", "button");
+    calendar
+      .getElementsByClassName("cur-year")[0]
+      .setAttribute("aria-label", "Anno");
+    if (this.mode === ZDatePickerMode.months) {
+      this.setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
+    }
+    if (this.mode === ZDatePickerMode.date) {
+      this.setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
+    }
+    if (this.mode === ZDatePickerMode.dateTime) {
+      this.setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow);
+    }
+  }
+  setMonthsAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+    Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-months")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    Array.from(calendar.getElementsByClassName("flatpickr-monthSelect-month")).forEach((element) => element.setAttribute("role", "button"));
+    prevMonthArrow.setAttribute("aria-label", "Anno precedente");
+    nextMonthArrow.setAttribute("aria-label", "Anno successivo");
+  }
+  setDateAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+    Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
+    calendar
+      .getElementsByClassName("flatpickr-monthDropdown-months")[0]
+      .setAttribute("aria-label", "Mese");
+    prevMonthArrow.setAttribute("aria-label", "Mese precedente");
+    nextMonthArrow.setAttribute("aria-label", "Mese successivo");
+  }
+  setDateTimeAriaOptions(calendar, prevMonthArrow, nextMonthArrow) {
+    Array.from(calendar.getElementsByClassName("flatpickr-days")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    Array.from(calendar.getElementsByClassName("flatpickr-day")).forEach((element) => element.setAttribute("role", "button"));
+    calendar
+      .getElementsByClassName("flatpickr-monthDropdown-months")[0]
+      .setAttribute("aria-label", "Mese");
+    prevMonthArrow.setAttribute("aria-label", "Mese precedente");
+    nextMonthArrow.setAttribute("aria-label", "Mese successivo");
+    Array.from(calendar.getElementsByClassName("time24hr")).forEach((element) => element.setAttribute("tabindex", "-1"));
+    calendar
+      .getElementsByClassName("flatpickr-hour")[0]
+      .setAttribute("aria-label", "Ora");
+    calendar
+      .getElementsByClassName("flatpickr-minute")[0]
+      .setAttribute("aria-label", "Minuti");
+  }
   setFlatpickrPosition() {
     const toggleHeight = this.element.children[0].clientHeight;
     this.element.style.setProperty("--toggle-height", `${toggleHeight}px`);
@@ -66,10 +166,10 @@ export class ZDatePicker {
       h("slot", { name: "toggle" })));
   }
   renderZInput() {
-    return (h("z-input", { class: classNames(this.datepickerid), type: "text", name: "datepicker", icon: "event", hasmessage: false }));
+    return (h("z-input", { class: classNames(this.datepickerid), type: "text", icon: "event", hasmessage: false, tabindex: "0" }));
   }
   render() {
-    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode), onClick: () => this.setFlatpickrPosition() }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
+    return (h("div", { class: classNames("flatpickr-toggle-container", this.hasChildren && this.datepickerid, this.flatpickrPosition, this.mode) }, this.hasChildren ? this.renderSlottedContent() : this.renderZInput()));
   }
   static get is() { return "z-date-picker"; }
   static get originalStyleUrls() { return {
@@ -140,4 +240,11 @@ export class ZDatePicker {
       }
     }]; }
   static get elementRef() { return "element"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleKeyDown",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/z-date-picker/styles.css

@@ -257,11 +257,15 @@ z-date-picker > div > * {
 }
 
 .flatpickr-next-month:hover,
-.flatpickr-prev-month:hover {
+.flatpickr-prev-month:hover,
+.flatpickr-next-month:focus,
+.flatpickr-prev-month:focus {
   border-radius: var(--border-radius);
   background-color: var(--color-primary03) !important;
   border-color: var(--color-primary03) !important;
   color: var(--color-hover-primary) !important;
+  border: none !important;
+  outline: none !important;
 }
 
 .flatpickr-next-month:hover svg,
@@ -296,7 +300,8 @@ z-date-picker > div > * {
   padding-left: var(--space-unit) !important;
 }
 
-.flatpickr-monthDropdown-months:hover {
+.flatpickr-monthDropdown-months:hover,
+.flatpickr-monthDropdown-months:focus {
   outline: 1px solid var(--color-primary01) !important;
 }
 
@@ -311,7 +316,8 @@ z-date-picker > div > * {
   width: calc(var(--space-unit) * 10);
 }
 
-.flatpickr-current-month > .numInputWrapper:hover {
+.flatpickr-current-month > .numInputWrapper:hover,
+.flatpickr-current-month > .numInputWrapper:focus-within {
   outline: 1px solid var(--color-primary01) !important;
 }
 
@@ -368,7 +374,8 @@ z-date-picker > div > * {
 .flatpickr-day:hover,
 .flatpickr-day.prevMonthDay:hover,
 .flatpickr-day.selected:hover,
-.flatpickr-monthSelect-month:hover {
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
   background-color: var(--myz-blue-dark) !important;
   border-color: var(--myz-blue-dark) !important;
   color: var(--color-white) !important;
@@ -441,6 +448,9 @@ z-date-picker > div > * {
 
 .flatpickr-minute,
 .flatpickr-hour {
+  font-size: var(--font-size-3) !important;
+  font-weight: var(--font-rg) !important;
+
   outline: 1px solid black !important;
 }
 

package/dist/collection/components/z-table/z-table/index.js

@@ -66,15 +66,15 @@ export class ZTable {
           h("div", { class: tableContentClass },
             h("slot", { name: "table-body" }),
             h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-              !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-              !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+              !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+              !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
     }
     return (h(Host, null,
       h("div", { class: tableClass },
         h("slot", { name: "table-header" })),
       h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-        !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-        !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+        !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+        !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
   }
   render() {
     const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}

package/dist/collection/components/z-table/z-table-cell/index.js

@@ -19,7 +19,7 @@ export class ZTableCell {
           visible: this.isMenuOpened,
         }) },
         h("div", { class: "button-content" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
           h("div", { class: classNames("contextual-menu-container", {
               visible: this.isMenuOpened,
             }) },

package/dist/collection/components/z-table/z-table-header/index.js

@@ -74,7 +74,7 @@ export class ZTableHeader {
           visible: this.isMenuOpened,
         }) },
         h("z-popover", { position: PopoverPosition["below-center"], "background-color": "gray200" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
           h("div", { slot: "popover" },
             h("slot", { name: "contextual-menu" })))))));
   }

package/dist/collection/deprecated/z-button-deprecated/index.js

@@ -0,0 +1,218 @@
+import { Component, Prop, h, Element } from "@stencil/core";
+import classNames from "classnames";
+import { ButtonVariantEnum, ButtonTypeEnum, ButtonSizeEnum, } from "../../beans";
+/**
+ * @slot - button label
+ */
+export class ZButtonDeprecated {
+  constructor() {
+    /** HTML button disabled attribute. */
+    this.disabled = false;
+    /** HTML button type attribute. */
+    this.type = ButtonTypeEnum.button;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    this.variant = ButtonVariantEnum.primary;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ButtonSizeEnum.big;
+    /** Reduce button size (deprecated).
+     * @deprecated Use `size` prop.
+     */
+    this.issmall = false;
+    /** Spy to render square button. */
+    this.square = false;
+  }
+  render() {
+    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
+    return (h("slot", { name: "element" },
+      h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classNames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) },
+        this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
+        h("slot", null))));
+  }
+  static get is() { return "z-button-deprecated"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "htmlid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Identifier, should be unique."
+      },
+      "attribute": "htmlid",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button name attribute."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button disabled attribute."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLButtonElement[\"type\"]",
+        "resolved": "string",
+        "references": {
+          "HTMLButtonElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML button type attribute."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "ButtonTypeEnum.button"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonVariantBean",
+        "resolved": "ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary | typeof ButtonVariantEnum[\"dark-bg\"]",
+        "references": {
+          "ButtonVariantBean": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`."
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "ButtonVariantEnum.primary"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "`z-icon` name to use (optional)."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonSizeEnum",
+        "resolved": "ButtonSizeEnum.big | ButtonSizeEnum.small | typeof ButtonSizeEnum[\"x-small\"]",
+        "references": {
+          "ButtonSizeEnum": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "ButtonSizeEnum.big"
+    },
+    "issmall": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `size` prop."
+          }],
+        "text": "Reduce button size (deprecated)."
+      },
+      "attribute": "issmall",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "square": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Spy to render square button."
+      },
+      "attribute": "square",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}