@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/collection/components/menu/menu.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,46 +26,35 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   /**
-   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'
-   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'
-   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'
-   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'
-
-   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0
-   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0
-
-   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #f2f7f9;
-   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #f2f7f9;
-   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #f2f7f9;
-
-   * @prop --color-hover: text hover color of nav-items. Defaults to #007495
-   * @prop --color-selected: text selected color of nav-items. Defaults to #007495
-   * @prop --color-focus: text focus color of nav-items. Defaults to #007495
-
-   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'
-   * @prop --font-size: default font-size for all items. Defaults .9em;
-  */
-  --padding-start: var(--nano-spacing-medium, 16px);
-  --padding-end: var(--nano-spacing-medium, 16px);
-  --padding-top: var(--nano-spacing-small, 8px);
-  --padding-bottom: var(--nano-spacing-small, 8px);
-  --secondary-padding-top: 0;
-  --secondary-padding-bottom: 0;
-  --bg-color-hover: #f2f7f9;
-  --bg-color-focus: #f2f7f9;
-  --bg-color-selected: #f2f7f9;
-  --color-hover: #007495;
-  --color-selected: #007495;
-  --color-focus: #007495;
-  --focus-outline: none;
-  --font-size: 0.9em;
+   * @prop --width: width of the menu. Defaults to 'auto'
+   * @prop --padding: padding of the menu. Default to 'var(--nano-spacing-sm) var(--nano-spacing-sm)';
+   * @prop --font-size: font size of the menu. Default to '1rem';
+   * @prop --background: background color of the menu. Default to 'var(--nano-color-neutral-75)';
+   */
+  --padding: var(--nano-spacing-sm) var(--nano-spacing-sm);
+  --font-size: 1rem;
+  --background: var(--nano-color-neutral-75);
+  --nav-item-padding: var(--padding);
   display: block;
+  background: var(--background);
+  color: var(--nano-color-neutral-1400);
+  overflow-x: clip;
 }
 
 .menu {
-  font-size: var(--font-size, 0.9em);
+  font-size: var(--font-size);
   overscroll-behavior: none;
   min-inline-size: var(--width);
   position: relative;
@@ -70,8 +63,7 @@
   outline: none;
 }
 
-::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)) {
-  padding-inline: var(--padding-start) var(--padding-end);
-  padding-block: var(--padding-top) var(--padding-bottom);
+::slotted(*:not(.nano-nav-item, .nano-option, hr, slot)) {
+  padding: var(--padding);
   display: block;
 }

package/dist/collection/components/menu/menu.js

@@ -1,15 +1,21 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, Build, } from "@stencil/core";
 import { h, transformTag } from "../../utils/renderer";
 import { getActiveElement } from "../../utils/active-element";
 import { getDirectChildren } from "../../utils/dom";
 import { getTextContent } from "../../utils/slot";
+import { getTabbableElements } from "../../utils/tabbable";
 /**
- * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
- * Manages focus state / active.
- * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.
+ * Menus provide a list of options for the user to choose from.
+ *
+ * @slot - The menu's content; `nano-option`, `nano-nav-item`, `a`, `nano-content-links` elements as well as `hr` and more.
+ *
+ * @part base - The base element of the menu.
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export class Menu {
     ignoreMouseEvents = false;
@@ -24,8 +30,11 @@ export class Menu {
         return this._hasFocus;
     }
     _hasFocus = false;
-    /** changes the role of the underlying control - sometimes required for semantics */
-    type = 'menu';
+    /** changes the role of the underlying control (required for accessibility semantics).
+     * By default this will be set via the frequency of element type (e.g. `<button>` vs `<a>`) */
+    type;
+    // we'll use this internally if it's not set externally
+    _type;
     /** an accessible label */
     label;
     // Events
@@ -38,8 +47,9 @@ export class Menu {
     // Public Methods
     /** Sets focus on the menu. */
     async setFocus() {
-        if (this.menu?.focus)
+        if (this.menu?.focus) {
             this.menu.focus({ preventScroll: true });
+        }
     }
     /** Removes focus from the menu. */
     async removeFocus() {
@@ -60,13 +70,12 @@ export class Menu {
     // Private methods
     get getItems() {
         let items;
-        const opened = this.el.querySelectorAll(`${transformTag('nano-nav-item')}.secondary-open`);
-        if (opened.length) {
-            const ctx = opened[opened.length - 1];
-            items = Array.from(ctx.querySelectorAll(`${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`));
+        if (this._type === 'listbox') {
+            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
         }
         else {
-            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
+            const opened = this.el.querySelectorAll('[open]');
+            items = getTabbableElements(opened[opened.length - 1] || this.el);
         }
         return items.filter((el) => !el.disabled && !el.hidden);
     }
@@ -74,6 +83,7 @@ export class Menu {
         const activeElement = getActiveElement();
         return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
             i === activeElement ||
+            i === document.activeElement ||
             i.classList.contains('has-focus'));
     }
     get selectedItem() {
@@ -81,7 +91,9 @@ export class Menu {
     }
     async setActiveFocusItem(item, focus = true) {
         const items = this.getItems;
-        const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;
+        const activeItem = !item
+            ? items.find((i) => i.selected) || items[0]
+            : item;
         items
             .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
             .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
@@ -103,14 +115,16 @@ export class Menu {
         const kev = e;
         let found;
         if (kev.key) {
-            if (kev.key !== 'Tab')
+            if (kev.key !== 'Tab') {
                 return;
+            }
             found =
                 getActiveElement() &&
                     getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
         }
-        else
+        else {
             found = !!e.composedPath().find((el) => el === this.el);
+        }
         if (!found) {
             this.resetActiveItem();
             this._hasFocus = false;
@@ -139,8 +153,12 @@ export class Menu {
         // Make a selection when pressing enter
         switch (event.key) {
             case ' ':
-                if (this.activeItem)
-                    this.activeItem.click();
+                if (this.activeItem) {
+                    event.stopPropagation();
+                    if (this.activeItem.nodeName !== 'BUTTON') {
+                        this.activeItem.click();
+                    }
+                }
                 break;
             case 'ArrowDown':
             case 'ArrowUp':
@@ -184,8 +202,7 @@ export class Menu {
             this.typeToSelect += event.key;
             const items = this.getItems;
             for (const item of items) {
-                const slot = item.shadowRoot.querySelector('slot:not([name])');
-                const label = getTextContent(slot).toLowerCase().trim();
+                const label = getTextContent(item).toLowerCase().trim();
                 if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
                     this.setActiveFocusItem(item);
                     break;
@@ -196,23 +213,60 @@ export class Menu {
     handleMouseOver = (event) => {
         const target = event.target;
         const item = target.closest(transformTag('nano-nav-item')) ||
-            target.closest(transformTag('nano-option'));
+            target.closest(transformTag('nano-option')) ||
+            target.closest('a');
         if (item && !this.ignoreMouseEvents) {
             this.setActiveFocusItem(item);
         }
     };
-    // Component Lifecycle
-    componentDidLoad() {
-        if (Build.isBrowser) {
-            getDirectChildren(this.el, ':not(nano-nav-item):not(nano-option):not([role])', true).forEach((el) => el.setAttribute('role', 'none'));
+    handleSlotContent = () => {
+        if (!Build.isBrowser)
+            return;
+        this._type = this.type || null;
+        if (!this._type) {
+            let linkCount, btnCount = 0;
+            getTabbableElements(this.el).forEach((item) => {
+                if (item.tagName === 'A' || item.role === 'link') {
+                    linkCount++;
+                }
+                else {
+                    btnCount++;
+                }
+            });
+            this._type = linkCount > btnCount ? 'nav' : 'menu';
         }
+        // a nav role can have any type of children
+        if (this._type === 'nav')
+            return;
+        // any direct children of a role="menu|listbox" need an explicit role, other a role of 'none'
+        getDirectChildren(this.el, `*:not(${transformTag('nano-nav-item')}, a, ${transformTag('nano-option')}, ${transformTag('nano-dropdown')})`, true).forEach((el) => {
+            if (this.getItems.indexOf(el) < 0) {
+                el.setAttribute('role', 'none');
+            }
+        });
+        this.el
+            .querySelectorAll(`a, ${transformTag('nano-dropdown')}`)
+            .forEach((el) => {
+            if (el.tagName === 'A') {
+                // links need to be set to role="menuitem" to be valid
+                el.setAttribute('role', 'menuitem');
+            }
+            else {
+                // nested dropdowns need to be set to role="group" to be valid
+                el.setAttribute('role', 'group');
+            }
+        });
+    };
+    // Component Lifecycle
+    componentWillLoad() {
+        this.handleSlotContent();
     }
     render() {
-        return (h(Host, { key: '78d73e5aceb8bc9890134c9253834d37c0faf1c3', role: this.type === 'menu' ? 'menu' : 'group', class: "nano-menu" }, h("div", { key: 'e38c5896dc520623bf97392954f278f5ea1b0450', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
+        return (h(Host, { key: 'f3908b74fc21b630402f06fac95a75f5a6b2ff27', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, h("div", { key: '451b5fb6151135ab4cb73d9141086be43d9eaf93', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
                 menu: true,
-                ['menu--' + this.type]: true,
+                ['menu--' + this._type]: true,
                 'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, h("slot", { key: '213aae294bd3f00e968561ed98716b67c76387a6' }))));
+            }, tabIndex: -1, role: "group" }, h("slot", { key: '37f40b06d1dc66c46130468c3de79dfeeb38c29c', onSlotchange: this.handleSlotContent }))));
     }
     static get is() { return "nano-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -230,6 +284,7 @@ export class Menu {
         return {
             "hasFocus": {
                 "type": "boolean",
+                "attribute": "has-focus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -247,32 +302,31 @@ export class Menu {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "has-focus",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
-                    "original": "'menu' | 'listbox'",
-                    "resolved": "\"listbox\" | \"menu\"",
+                    "original": "'menu' | 'listbox' | 'nav'",
+                    "resolved": "\"listbox\" | \"menu\" | \"nav\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "changes the role of the underlying control - sometimes required for semantics"
+                    "text": "changes the role of the underlying control (required for accessibility semantics).\nBy default this will be set via the frequency of element type (e.g. `<button>` vs `<a>`)"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
-                "reflect": false,
-                "defaultValue": "'menu'"
+                "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -287,11 +341,15 @@ export class Menu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "_type": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "nanoFocus",
@@ -438,4 +496,3 @@ export class Menu {
             }];
     }
 }
-//# sourceMappingURL=menu.js.map

package/dist/collection/components/menu-drawer/menu-drawer.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   --padding-top: 13px;
   --padding-end: 12px;
   --padding-bottom: 13px;

package/dist/collection/components/menu-drawer/menu-drawer.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, writeTask, Build, } from "@stencil/core";
 import { closestElement } from "../../utils/dom";
@@ -172,13 +172,13 @@ export class MenuDrawer {
         }
     }
     render() {
-        return (h(Host, { key: '977db4e79201de998a87723002144d9204789091', class: {
+        return (h(Host, { key: 'ce58d5db4ed3a23557189fbc3eb2cf0a0ad32edd', class: {
                 open: this.open,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '7bc2a2d85dfc8c7ff749f129fe11e5df0d935d94', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'd1ed040d7097e465f029b6cc12501df8003f7dbb', class: "content-wrap" }, h("nav", { key: '4e09d7672d80e481475042fd4cc8ab44cda7cd6f', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '5e58c9f3c21d0827545483ef0c6c65bf007a1c0e', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '40948e236760b128caa0f5c99d630642cc207cc4', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '337162928f8f99f2e6933d9c7afbf3b64bdda765' }), h("div", { key: 'd24cbc327b9d2fa1f1dff2332301741f110f3c48', class: "foot" }, h("div", { key: '8efedd05e75e0030cb3cb56a19feb86c14b94328', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '1214dfbbf736eb5afeb7de299fd3280beebef7e1', name: "foot" })))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'a68d7698be7747a6a191a44364b615c3866f8160', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'f6c92461b79e0b3e44f138736ef65089680101a8', class: "content-wrap" }, h("nav", { key: '51ce192b7cbb38233baced954f4228e756052026', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '5662329d6320ef44d837afc823c09beb1563c0fe', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '77d0e152d06593f3999072a1b557673a8ddc8a72', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '8369d8882e41547e088ec41401cc2273efb2b59a' }), h("div", { key: '90c996a4d1debfd4965353e5e60548605418dfbd', class: "foot" }, h("div", { key: '3ca7e34bde41f742d20edbef571400c875179858', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '1b5d32415c0e727788186bd9011de394cb7b5759', name: "foot" })))))));
     }
     static get is() { return "nano-menu-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -196,6 +196,7 @@ export class MenuDrawer {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -210,12 +211,12 @@ export class MenuDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "saveState": {
                 "type": "boolean",
+                "attribute": "save-state",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -230,12 +231,12 @@ export class MenuDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "save-state",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "hideWidth": {
                 "type": "number",
+                "attribute": "hide-width",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -250,12 +251,12 @@ export class MenuDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-width",
                 "reflect": false,
                 "defaultValue": "576"
             },
             "hideHeight": {
                 "type": "boolean",
+                "attribute": "hide-height",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -270,7 +271,6 @@ export class MenuDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-height",
                 "reflect": false,
                 "defaultValue": "true"
             }
@@ -320,4 +320,3 @@ export class MenuDrawer {
             }];
     }
 }
-//# sourceMappingURL=menu-drawer.js.map

package/dist/collection/components/more-less/more-less.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -62,8 +62,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'ea8fe47faa76ad680aa1c87865db6c04ff0228b6', class: "nano-more-less" }, h("slot", { key: '69b79b49c00677a08fbcc2143e6efd99520c7ae4', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: '2972c854e94cc04cd41cb8c19afdade3d3decc8b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'b3f7e2cf17d0c447d26cf1de996194910381bc35', name: "less" }, h("button", { key: 'dd079d36070438e93bd9cce9bf914139bb9f6f74', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '7f46f40188321a9cd630f92e0722c386f8f150cd', class: "nano-more-less" }, h("slot", { key: 'f0cb809863400df4431e6781c1f119563fea95b6', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'fccb42c61cbef50e41ca19ec572bceb4cb3257be', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'ec04633371ae61f4a33131ab8bfe98a7e408150f', name: "less" }, h("button", { key: 'f7382a01305934711d7f6471369aa29523f99d9d', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }
@@ -74,6 +74,7 @@ export class Rating {
         return {
             "show": {
                 "type": "boolean",
+                "attribute": "show",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -88,12 +89,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "childrenSelector": {
                 "type": "string",
+                "attribute": "children-selector",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -108,11 +109,11 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "children-selector",
                 "reflect": false
             },
             "maxToShow": {
                 "type": "number",
+                "attribute": "max-to-show",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -127,12 +128,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-to-show",
                 "reflect": false,
                 "defaultValue": "3"
             },
             "noHideBtn": {
                 "type": "boolean",
+                "attribute": "no-hide-btn",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,7 +148,6 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-hide-btn",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -167,4 +167,3 @@ export class Rating {
             }];
     }
 }
-//# sourceMappingURL=more-less.js.map