refactor(ac-pagination): improves performance and api

src/components/atoms/ac-button/readme.md

@@ -28,6 +28,7 @@
  - [ac-header](../ac-header)
  - [ac-input](../../molecules/ac-input)
  - [ac-modal](../../organisms/ac-modal)
+ - [ac-navdrawer](../ac-navdrawer)
  - [ac-select](../../molecules/ac-select)
  - [ac-upload](../../organisms/ac-upload)
 
@@ -38,6 +39,7 @@ graph TD;
   ac-header --> ac-button
   ac-input --> ac-button
   ac-modal --> ac-button
+  ac-navdrawer --> ac-button
   ac-select --> ac-button
   ac-upload --> ac-button
   style ac-button fill:#f9f,stroke:#333,stroke-width:4px

src/components/atoms/ac-input-base/ac-input-base.tsx

@@ -139,6 +139,7 @@ export class AcInputBase implements ComponentInterface {
   @Bind
   private handleBlur() {
     this.hasFocus = false;
+    this.host.dispatchEvent(new Event('blur'));
   }
 
   @Bind

src/components/atoms/ac-input-base/readme.md

@@ -38901,6 +38901,7 @@ Type: `Promise<void>`
  - [ac-date-picker](../ac-date-picker)
  - [ac-input](../../molecules/ac-input)
  - [ac-menu](../../molecules/ac-menu)
+ - [ac-pagination](../../molecules/ac-pagination)
  - [ac-select](../../molecules/ac-select)
 
 ### Graph
@@ -38909,6 +38910,7 @@ graph TD;
   ac-date-picker --> ac-input-base
   ac-input --> ac-input-base
   ac-menu --> ac-input-base
+  ac-pagination --> ac-input-base
   ac-select --> ac-input-base
   style ac-input-base fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/atoms/ac-navdrawer/ac-navdrawer-controller/readme.md

@@ -0,0 +1,53 @@
+# ac-navdrawer-controller
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                                                   | Type     | Default     |
+| -------- | --------- | --------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `bound`  | `bound`   | An optional property used to refer the parent element that the component will be attached to. | `string` | `undefined` |
+
+
+## Methods
+
+### `create(props: ControllerComponentOptions<AcNavdrawer & AcOverlay>) => Promise<any>`
+
+Setup a new navdrawer on the screen.
+
+#### Returns
+
+Type: `Promise<any>`
+
+
+
+### `dismiss() => Promise<void>`
+
+Clear all modals that are displayed.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Depends on
+
+- [ac-overlay](../../../portals/ac-overlay)
+
+### Graph
+```mermaid
+graph TD;
+  ac-navdrawer-controller --> ac-overlay
+  style ac-navdrawer-controller fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/atoms/ac-navdrawer/readme.md

@@ -159,12 +159,34 @@
 
 ## Properties
 
-| Property  | Attribute | Description      | Type      | Default     |
-| --------- | --------- | ---------------- | --------- | ----------- |
-| `compact` | `compact` | Compact mode.    | `boolean` | `undefined` |
-| `theme`   | `theme`   | The color theme. | `string`  | `undefined` |
+| Property     | Attribute     | Description                                   | Type      | Default     |
+| ------------ | ------------- | --------------------------------------------- | --------- | ----------- |
+| `compact`    | `compact`     | Compact mode.                                 | `boolean` | `undefined` |
+| `showToggle` | `show-toggle` | Show or hide toggle button                    | `boolean` | `true`      |
+| `theme`      | `theme`       | The color theme.                              | `string`  | `undefined` |
+| `title`      | `title`       | Show title in the navdrawer and toggle header | `string`  | `undefined` |
 
 
+## Events
+
+| Event   | Description | Type                |
+| ------- | ----------- | ------------------- |
+| `close` |             | `CustomEvent<void>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [ac-button](../ac-button)
+
+### Graph
+```mermaid
+graph TD;
+  ac-navdrawer --> ac-button
+  style ac-navdrawer fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

src/components/molecules/ac-menu/readme.md

@@ -29,12 +29,14 @@
 
 - [ac-input-base](../../atoms/ac-input-base)
 - [ac-menu-item](ac-menu-item)
+- [ac-menu-item](ac-menu-item)
 
 ### Graph
 ```mermaid
 graph TD;
   ac-menu --> ac-input-base
   ac-menu --> ac-menu-item
+  ac-menu --> ac-menu-item
   style ac-menu fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/molecules/ac-pagination/ac-pagination.scss

@@ -9,6 +9,22 @@ ac-pagination {
 
     }
   }
+
+  .page-counter__container {
+    color: var-color("primary", "normal");
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: flex-end;
+    .page-counter__container--icon {
+      fill: var-color("primary", "normal");
+    }
+  }
+  .page-counter__container--expand {
+    flex: 0 0 84px;
+    align-items: center;
+  }
+
   .skip-pages {
     display: flex;
     align-items: center;

src/components/molecules/ac-pagination/ac-pagination.tsx

@@ -1,10 +1,10 @@
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
-import { Component, Event, EventEmitter, Listen, Prop, Watch, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Listen, Prop, Watch, h, State, Element } from '@stencil/core';
 
 import { Bind } from '../../../utils/lang/bind';
-import { count } from '../../../utils/lang/count';
 import { AcFaIcon } from '../../utils/ac-fa-icon';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   tag: 'ac-pagination',
@@ -14,6 +14,12 @@ import { AcFaIcon } from '../../utils/ac-fa-icon';
 export class AcPagination {
   private skipPagesNext: HTMLDivElement;
   private skipPagesPrevious: HTMLDivElement;
+
+
+  @Element() host: HTMLElement;
+
+  @State() showPageEditor = false;
+  @State() pageCount = [ 1, 2, 3 ,4 , 5 ];
 
   /**
    * The amount of pages.
@@ -63,6 +69,7 @@ export class AcPagination {
   @Watch('totalPages')
   @Watch('selected')
   definePages() {
+    this.updatePageCount();
     if (this.selected === 1 && this.skipPagesPrevious) {
       this.skipPagesPrevious.classList.add('skip-pages__disable');
     } else if (this.skipPagesPrevious) {
@@ -72,14 +79,19 @@ export class AcPagination {
       this.skipPagesNext.classList.add('skip-pages__disable');
     } else if (this.skipPagesNext) {
       this.skipPagesNext.classList.remove('skip-pages__disable');
-
+    }
+  }
+  componentDidUpdate() {
+    const tabs = this.host.querySelector('ac-tabs');
+    if (tabs) {
+      tabs.selected = this.selected;
     }
   }
 
   render() {
     return [
       this.totalPages > 0 &&
-      <ac-tabs selected={this.selected} compact>
+      <ac-tabs compact>
         <div
           class="skip-pages skip-pages__disable"
           onClick={this.handleAfterPage}
@@ -88,16 +100,61 @@ export class AcPagination {
           <AcFaIcon class="skip-pages--icon" icon={faAngleLeft} size={12}/>
           <span>{this.previousLabel}</span>
         </div>
-        {
-          ...count(this.totalPages).map(i =>
-            <ac-tab id={i + 1} compact>{i + 1}</ac-tab>
-          )
+        {this.pageCount.map(this.renderAcTabWithPageNumber)}
+        {this.totalPages > 5 &&
+          <div class={{'page-counter__container': true, 'page-counter__container--expand': this.showPageEditor }} >
+            {this.showPageEditor
+                ? <ac-input-base
+                      size="small"
+                      type="number"
+                      step={1}
+                      onBlur={(this.goTo)}
+                      value={this.selected}
+                    > 
+                  </ac-input-base>
+                : <AcFaIcon class="page-counter__container--icon" 
+                            icon={faEllipsisH} 
+                            size={12} 
+                            onClick={this.showFocusGoToInput} />
+            }
+          </div>
         }
+        {this.renderAcTabWithPageNumber(this.totalPages)}
         <div class="skip-pages" ref={skipPagesNext => this.skipPagesNext = skipPagesNext as any}>
           <span onClick={this.handleNextPage}>{this.nextLabel}</span>
           <AcFaIcon class="skip-pages--icon" icon={faAngleRight} size={12}/>
         </div>
       </ac-tabs>
     ]
   }
+
+  @Bind
+  showFocusGoToInput() {
+    this.showPageEditor = true;
+  }
+
+  @Bind
+  private goTo(evt) {
+    const pageNumber: number = parseInt(evt.target.value);
+    this.showPageEditor = false;
+    if (pageNumber > this.totalPages || pageNumber < 1) {
+      return;
+    }
+    this.selected = pageNumber;
+  }
+
+  private renderAcTabWithPageNumber(number: number) {
+    return <ac-tab id={number.toString()} compact>{number}</ac-tab>
+  }
+
+  private updatePageCount() {
+    if (this.selected <= 5) {
+      this.pageCount = [1,2,3,4,5];
+    } else {
+      const pageNumber = this.selected === this.totalPages
+        ? this.selected - 1
+        : this.selected;
+      this.pageCount = this.pageCount.map(x => x + (pageNumber - this.pageCount[this.pageCount.length -1]))
+    }
+  }
 }

src/components/molecules/ac-pagination/readme.md

@@ -27,12 +27,14 @@
 ### Depends on
 
 - [ac-tabs](../ac-tabs)
+- [ac-input-base](../../atoms/ac-input-base)
 - [ac-tab](../ac-tabs/ac-tab)
 
 ### Graph
 ```mermaid
 graph TD;
   ac-pagination --> ac-tabs
+  ac-pagination --> ac-input-base
   ac-pagination --> ac-tab
   style ac-pagination fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/portals/ac-overlay/readme.md

@@ -41,12 +41,14 @@ Type: `Promise<void>`
 ### Used by
 
  - [ac-modal-controller](../../organisms/ac-modal/ac-modal-controller)
+ - [ac-navdrawer-controller](../../atoms/ac-navdrawer/ac-navdrawer-controller)
  - [ac-toast-controller](../../atoms/ac-toast/ac-toast-controller)
 
 ### Graph
 ```mermaid
 graph TD;
   ac-modal-controller --> ac-overlay
+  ac-navdrawer-controller --> ac-overlay
   ac-toast-controller --> ac-overlay
   style ac-overlay fill:#f9f,stroke:#333,stroke-width:4px
 ```