kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/chip/readme.md

@@ -0,0 +1,323 @@
+# Chips
+
+Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
+
+<!-- component -->
+<div class="chip">
+  <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
+</div>
+<div class="chip">
+  Tag
+  <i class="close material-icons">close</i>
+</div>
+<div class="chip">
+  <i class="material-icons">check</i>
+  Filter
+  <i class="close material-icons">close</i>
+</div>
+<div class="chip outlined">Information</div>
+<div class="chip outlined">
+  <i class="material-icons">check</i>
+  Filter
+  <i class="close material-icons">close</i>
+</div>
+<!-- /component -->
+
+```html
+<div class="chip">
+  <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
+</div>
+<div class="chip">
+  Tag
+  <i class="close material-icons">close</i>
+</div>
+<div class="chip">
+  <i class="material-icons">check</i>
+  Filter
+  <i class="close material-icons">close</i>
+</div>
+<div class="chip outlined">Information</div>
+<div class="chip outlined">
+  <i class="material-icons">check</i>
+  Filter
+  <i class="close material-icons">close</i>
+</div>
+```
+
+## Contacts
+
+To create a contact chip just add an img inside.
+
+<!-- component -->
+<div class="chip">
+  <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
+</div>
+<!-- /component -->
+
+```html
+<div class="chip">
+  <img src="images/yuna.jpg" alt="Contact Person">
+  Jane Doe
+</div>
+```
+
+## Tags
+
+To create a tag chip just add a close icon inside with the class `close`.
+
+<!-- component -->
+<div class="chip">
+  Tag
+  <i class="close material-icons">close</i>
+</div>
+<!-- /component -->
+
+```html
+<div class="chip">
+  Tag
+  <i class="close material-icons">close</i>
+</div>
+```
+
+## Javascript Plugin
+
+To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by
+  using your delete button.
+
+<!-- Update Info -->
+<p class="red-text"><strong>ATTENTION:</strong> Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.</p>
+
+Normal:
+
+<!-- component -->
+<div class="chips"></div>
+<!-- /component -->
+
+Set initial tags:
+
+<!-- component -->
+<div class="chips chips-initial"></div>
+<!-- /component -->
+
+Use placeholders and override hint texts:
+
+<!-- component -->
+<div class="chips chips-placeholder"></div>
+<!-- /component -->
+
+Use autocomplete with chips:
+
+<!-- component -->
+<div class="chips chips-autocomplete"></div>
+<!-- /component -->
+
+```html
+<!-- Default with no input (automatically generated)  -->
+<div class="chips"></div>
+<div class="chips chips-initial"></div>
+<div class="chips chips-placeholder"></div>
+<div class="chips chips-autocomplete"></div>
+<!-- Customizable input  -->
+<div class="chips">
+  <input class="custom-class">
+</div>
+```
+
+## Initialization
+
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.chips');
+  const instances = M.Chips.init(elems, {
+    // specify options here
+    autocompleteOptions: {
+      data: [
+        {id: 12, text: "Apple"},
+        {id: 13, text: "Microsoft"},
+        {id: 42, text: "Google", image: 'http://placehold.it/250x250'}
+      ]
+    },
+    placeholder: 'Enter a tag',
+    secondaryPlaceholder: '+Tag',
+  });
+});
+```
+
+Chip data object:
+
+```javascript
+const chip = {
+  id: '4711', // unique identifier (can be a string too)
+  text: 'Title' // optional Text
+  image: '', // optional Image-Url
+};
+```
+        
+## Options
+
+Note: This could be generated from the JSDocs
+
+<table class="table highlight">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>data</td>
+      <td>Array</td>
+      <td>[]</td>
+      <td>Set the chip data (look at the Chip data object)</td>
+    </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>String</td>
+      <td>''</td>
+      <td>Set first placeholder when there are no tags.</td>
+    </tr>
+    <tr>
+      <td>secondaryPlaceholder</td>
+      <td>String</td>
+      <td>''</td>
+      <td>Set second placeholder when adding additional tags.</td>
+    </tr>
+    <tr>
+      <td>closeIconClass</td>
+      <td>String</td>
+      <td>'material-icons'</td>
+      <td>Specifies class to be used in "close" button (useful when working with Material Symbols icon set).</td>
+    </tr>
+    <tr>
+      <td>allowUserInput</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Specifies option to render user input field</td>
+    </tr>
+    <tr>
+      <td>autocompleteOptions</td>
+      <td>Object</td>
+      <td>{}</td>
+      <td>Set autocomplete options.</td>
+    </tr>
+    <tr>
+      <td>autocompleteOnly</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Toggles abililty to add custom value not in autocomplete list.</td>
+    </tr>
+    <tr>
+      <td>limit</td>
+      <td>Integer</td>
+      <td>Infinity</td>
+      <td>Set chips limit.</td>
+    </tr>
+    <tr>
+      <td>onChipAdd</td>
+      <td>Function</td>
+      <td>null</td>
+      <td>Callback for chip add.</td>
+    </tr>
+    <tr>
+      <td>onChipSelect</td>
+      <td>Function</td>
+      <td>null</td>
+      <td>Callback for chip select.</td>
+    </tr>
+    <tr>
+      <td>onChipDelete</td>
+      <td>Function</td>
+      <td>null</td>
+      <td>Callback for chip delete.</td>
+    </tr>
+    <tr>
+  </tbody>
+</table>
+
+## Methods
+
+Use these methods to interact with chips. All the methods are called on the plugin instance. You can get the plugin instance like this:
+
+```javascript
+const instance = M.Chips.getInstance(elem);
+```
+
+
+### .addChip();
+Add chip to input.
+
+#### Arguments
+<b>Chip:</b> Chip data object.
+
+```javascript
+instance.addChip({
+  id: 1337,
+  text: 'John Doe', // optional
+  image: '', // optional
+});
+```
+
+
+### .deleteChip();
+Delete nth chip.
+
+#### Arguments
+<b>Integer:</b> Index of chip.
+
+```javascript
+instance.deleteChip(3); // Delete 3rd chip.
+```
+
+### .selectChip();
+Select nth chip.
+
+#### Arguments
+<b>Integer:</b> Index of chip.
+
+```javascript
+instance.selectChip(2); // Select 2nd chip
+```
+
+## Properties
+
+Note: This could be generated from JSDocs.
+
+<table class="striped">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>el</td>
+      <td>Element</td>
+      <td>The DOM element the plugin was initialized with.</td>
+    </tr>
+    <tr>
+      <td>options</td>
+      <td>Object</td>
+      <td>The options the instance was initialized with.</td>
+    </tr>
+    <tr>
+      <td>chipsData</td>
+      <td>Array</td>
+      <td>Array of the current chips data.</td>
+    </tr>
+    <tr>
+      <td>hasAutocomplete</td>
+      <td>Boolean</td>
+      <td>If the chips has autocomplete enabled.</td>
+    </tr>
+    <tr>
+      <td>autocomplete</td>
+      <td>Object</td>
+      <td><a href="autocomplete.html">Autocomplete</a> instance, if any.</td>
+    </tr>
+  </tbody>
+</table>

package/components/collapsible/_collapsible.scss

@@ -0,0 +1,82 @@
+@use '../../sass/variables' as *;
+@use '../../sass/global' as *;
+
+.collapsible {
+  padding-left: 0;
+  list-style-type: none;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  border-right: 1px solid var(--md-sys-color-outline-variant);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  @extend .z-depth-1;
+}
+
+.collapsible-header {
+  display: flex;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.5;
+  padding: 1rem;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+
+  &:focus {
+    outline: 0
+  }
+
+  i {
+    width: 2rem;
+    font-size: 1.6rem;
+    display: inline-block;
+    text-align: center;
+    margin-right: 1rem;
+  }
+}
+
+.collapsible-header::after {
+  content: '\e5cf';
+  margin-left: .5rem;
+  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  font-size: 25px;
+  line-height: .9;
+  -webkit-font-smoothing: antialiased;
+}
+
+.active .collapsible-header::after {
+  content: '\e5ce';
+}
+
+.keyboard-focused .collapsible-header:focus {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.collapsible-header-content {
+  flex-grow: 1;
+}
+
+.collapsible-body {
+  max-height: 0;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  box-sizing: border-box;
+  padding: 0 2rem;
+  overflow: hidden;
+}
+
+// Popout Collapsible
+
+.collapsible.popout {
+  border: none;
+  box-shadow: none;
+
+  > li {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    // transform: scaleX(.92);
+    margin: 0 24px;
+    transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
+  }
+
+  > li.active {
+    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+    margin: 16px 0;
+    // transform: scaleX(1);
+  }
+}

package/components/collapsible/collapsible.ts

@@ -0,0 +1,230 @@
+import { Utils } from '../../src/utils';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+export interface CollapsibleOptions extends BaseOptions {
+  /**
+   * If accordion versus collapsible.
+   * @default true
+   */
+  accordion: boolean;
+  /**
+   * Transition in duration in milliseconds.
+   * @default 300
+   */
+  inDuration: number;
+  /**
+   * Transition out duration in milliseconds.
+   * @default 300
+   */
+  outDuration: number;
+  /**
+   * Callback function called before collapsible is opened.
+   * @default null
+   */
+  onOpenStart: (el: Element) => void;
+  /**
+   * Callback function called after collapsible is opened.
+   * @default null
+   */
+  onOpenEnd: (el: Element) => void;
+  /**
+   * Callback function called before collapsible is closed.
+   * @default null
+   */
+  onCloseStart: (el: Element) => void;
+  /**
+   * Callback function called after collapsible is closed.
+   * @default null
+   */
+  onCloseEnd: (el: Element) => void;
+}
+
+const _defaults: CollapsibleOptions = {
+  accordion: true,
+  onOpenStart: null,
+  onOpenEnd: null,
+  onCloseStart: null,
+  onCloseEnd: null,
+  inDuration: 300,
+  outDuration: 300
+};
+
+export class Collapsible extends Component<CollapsibleOptions> {
+  private _headers: HTMLElement[];
+
+  constructor(el: HTMLElement, options: Partial<CollapsibleOptions>) {
+    super(el, options, Collapsible);
+    this.el['M_Collapsible'] = this;
+
+    this.options = {
+      ...Collapsible.defaults,
+      ...options
+    };
+
+    // Setup tab indices
+    this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
+    this._headers.forEach((el) => (el.tabIndex = 0));
+    this._setupEventHandlers();
+
+    // Open active
+    const activeBodies: HTMLElement[] = Array.from(
+      this.el.querySelectorAll('li.active > .collapsible-body')
+    );
+    if (this.options.accordion) {
+      if (activeBodies.length > 0) {
+        // Accordion => open first active only
+        this._setExpanded(activeBodies[0]);
+      }
+    } else {
+      // Expandables => all active
+      activeBodies.forEach((el) => this._setExpanded(el));
+    }
+  }
+
+  static get defaults(): CollapsibleOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Collapsible.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLElement, options?: Partial<CollapsibleOptions>): Collapsible;
+  /**
+   * Initializes instances of Collapsible.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els: InitElements<MElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
+  /**
+   * Initializes instances of Collapsible.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<CollapsibleOptions> = {}
+  ): Collapsible | Collapsible[] {
+    return super.init(els, options, Collapsible);
+  }
+
+  static getInstance(el: HTMLElement): Collapsible {
+    return el['M_Collapsible'];
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    this.el['M_Collapsible'] = undefined;
+  }
+
+  _setupEventHandlers() {
+    this.el.addEventListener('click', this._handleCollapsibleClick);
+    this._headers.forEach((header) =>
+      header.addEventListener('keydown', this._handleCollapsibleKeydown)
+    );
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleCollapsibleClick);
+    this._headers.forEach((header) =>
+      header.removeEventListener('keydown', this._handleCollapsibleKeydown)
+    );
+  }
+
+  _handleCollapsibleClick = (e: MouseEvent | KeyboardEvent) => {
+    const header = (e.target as HTMLElement).closest('.collapsible-header');
+    if (e.target && header) {
+      const collapsible = header.closest('.collapsible');
+      if (collapsible !== this.el) return;
+
+      const li = header.closest('li');
+      const isActive = li.classList.contains('active');
+      const index = [...li.parentNode.children].indexOf(li);
+
+      if (isActive) this.close(index);
+      else this.open(index);
+    }
+  };
+
+  _handleCollapsibleKeydown = (e: KeyboardEvent) => {
+    if (Utils.keys.ENTER.includes(e.key)) {
+      this._handleCollapsibleClick(e);
+    }
+  };
+
+  private _setExpanded(li: HTMLElement): void {
+    li.style.maxHeight = li.scrollHeight + 'px';
+  }
+
+  _animateIn(index: number) {
+    const li = <HTMLLIElement>this.el.children[index];
+    if (!li) return;
+    const body: HTMLElement = li.querySelector('.collapsible-body');
+    const duration = this.options.inDuration; // easeInOutCubic
+    body.style.transition = `max-height ${duration}ms ease-out`;
+    this._setExpanded(body);
+    setTimeout(() => {
+      if (typeof this.options.onOpenEnd === 'function') {
+        this.options.onOpenEnd.call(this, li);
+      }
+    }, duration);
+  }
+
+  _animateOut(index: number) {
+    const li = this.el.children[index];
+    if (!li) return;
+    const body: HTMLElement = li.querySelector('.collapsible-body');
+    const duration = this.options.outDuration; // easeInOutCubic
+    body.style.transition = `max-height ${duration}ms ease-out`;
+    body.style.maxHeight = '0';
+    setTimeout(() => {
+      if (typeof this.options.onCloseEnd === 'function') {
+        this.options.onCloseEnd.call(this, li);
+      }
+    }, duration);
+  }
+
+  /**
+   * Open collapsible section.
+   * @param n Nth section to open.
+   */
+  open = (index: number) => {
+    const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
+    const li = listItems[index];
+    if (li && !li.classList.contains('active')) {
+      // onOpenStart callback
+      if (typeof this.options.onOpenStart === 'function') {
+        this.options.onOpenStart.call(this, li);
+      }
+      // Handle accordion behavior
+      if (this.options.accordion) {
+        const activeLis = listItems.filter((li) => li.classList.contains('active'));
+        activeLis.forEach((activeLi) => {
+          const index = listItems.indexOf(activeLi);
+          this.close(index);
+        });
+      }
+      // Animate in
+      li.classList.add('active');
+      this._animateIn(index);
+    }
+  };
+
+  /**
+   * Close collapsible section.
+   * @param n Nth section to close.
+   */
+  close = (index: number) => {
+    const li = Array.from(this.el.children).filter((c) => c.tagName === 'LI')[index];
+    if (li && li.classList.contains('active')) {
+      // onCloseStart callback
+      if (typeof this.options.onCloseStart === 'function') {
+        this.options.onCloseStart.call(this, li);
+      }
+      // Animate out
+      li.classList.remove('active');
+      this._animateOut(index);
+    }
+  };
+}