node_modules/mdl-ext/src/collapsible/collapsible.js - hores-external - Gitiles

 /**
  * @license
  * Copyright 2016-2017 Leif Olsen. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
  * This code is built with Google Material Design Lite,
  * which is Licensed under the Apache License, Version 2.0
  */


 /**
  * A collapsible is a component to mark expandable and collapsible regions.
  * The component use the aria-expanded state to indicate whether regions of
  * the content are collapsible, and to expose whether a region is currently
  * expanded or collapsed.
  * @see https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions
  */

 import {
   IS_UPGRADED,
   VK_SPACE,
   VK_ENTER,
 } from '../utils/constants';

 import { randomString } from '../utils/string-utils';
 import { getParentElements, isFocusable } from '../utils/dom-utils';

 const JS_COLLAPSIBLE = 'mdlext-js-collapsible';
 const COLLAPSIBLE_CONTROL_CLASS = 'mdlext-collapsible';
 const COLLAPSIBLE_GROUP_CLASS = 'mdlext-collapsible-group';
 const COLLAPSIBLE_REGION_CLASS = 'mdlext-collapsible-region';

 /**
  * The collapsible component
  */

 class Collapsible {
   element_ = null;
   controlElement_ = null;

   /**
    * @constructor
    * @param {HTMLElement} element The element that this component is connected to.
    */
   constructor(element) {
     this.element_ = element;
     this.init();
   }

   keyDownHandler = event => {
     if (event.keyCode === VK_ENTER || event.keyCode === VK_SPACE) {
       event.preventDefault();

       // Trigger click
       (event.target || this.controlElement).dispatchEvent(
         new MouseEvent('click', {
           bubbles: true,
           cancelable: true,
           view: window
         })
       );
     }
   };

   clickHandler = event => {
     if(!this.isDisabled) {
       if(event.target !== this.controlElement) {
         // Do not toggle if a focusable element inside the control element triggered the event
         const p = getParentElements(event.target, this.controlElement);
         p.push(event.target);
         if(p.find( el => isFocusable(el))) {
           return;
         }
       }
       this.toggle();
     }
   };

   get element() {
     return this.element_;
   }

   get controlElement() {
     return this.controlElement_;
   }

   get isDisabled() {
     return (this.controlElement.hasAttribute('disabled') &&
       this.controlElement.getAttribute('disabled').toLowerCase() !== 'false') ||
       (this.controlElement.hasAttribute('aria-disabled') &&
       this.controlElement.getAttribute('aria-disabled').toLowerCase() !== 'false');
   }

   get isExpanded() {
     return this.controlElement.hasAttribute('aria-expanded') &&
       this.controlElement.getAttribute('aria-expanded').toLowerCase() === 'true';
   }

   get regionIds() {
     return this.controlElement.hasAttribute('aria-controls')
       ? this.controlElement.getAttribute('aria-controls').split(' ')
       : [];
   }

   get regionElements() {
     return this.regionIds
       .map(id => document.querySelector(`#${id}`))
       .filter( el => el != null);
   }

   collapse() {
     if(!this.isDisabled && this.isExpanded) {
       if(this.dispatchToggleEvent('collapse')) {
         this.controlElement.setAttribute('aria-expanded', 'false');
         const regions = this.regionElements.slice(0);
         for (let i = regions.length - 1; i >= 0; --i) {
           regions[i].setAttribute('hidden', '');
         }
       }
     }
   }

   expand() {
     if(!this.isDisabled && !this.isExpanded) {
       if(this.dispatchToggleEvent('expand')) {
         this.controlElement.setAttribute('aria-expanded', 'true');
         this.regionElements.forEach(region => region.removeAttribute('hidden'));
       }
     }
   }

   toggle() {
     if (this.isExpanded) {
       this.collapse();
     }
     else {
       this.expand();
     }
   }

   dispatchToggleEvent(action) {
     return this.element.dispatchEvent(
       new CustomEvent('toggle', {
         bubbles: true,
         cancelable: true,
         detail: {
           action: action
         }
       })
     );
   }

   disableToggle() {
     this.controlElement.setAttribute('aria-disabled', true);
   }

   enableToggle() {
     this.controlElement.removeAttribute('aria-disabled');
   }

   addRegionId(regionId) {
     const ids = this.regionIds;
     if(!ids.find(id => regionId === id)) {
       ids.push(regionId);
       this.controlElement.setAttribute('aria-controls', ids.join(' '));
     }
   }

   addRegionElement(region) {
     if(!(region.classList.contains(COLLAPSIBLE_GROUP_CLASS) ||
       region.classList.contains(COLLAPSIBLE_REGION_CLASS))) {
       region.classList.add(COLLAPSIBLE_GROUP_CLASS);
     }

     if(!region.hasAttribute('role')) {
       const role = region.classList.contains(COLLAPSIBLE_GROUP_CLASS) ? 'group' : 'region';
       region.setAttribute('role', role);
     }

     if(!region.hasAttribute('id')) {
       region.id = `${region.getAttribute('role')}-${randomString()}`;
     }

     if(this.isExpanded) {
       region.removeAttribute('hidden');
     }
     else {
       region.setAttribute('hidden', '');
     }
     this.addRegionId(region.id);
   }

   removeRegionElement(region) {
     if(region && region.id) {
       const ids = this.regionIds.filter(id => id === region.id);
       this.controlElement.setAttribute('aria-controls', ids.join(' '));
     }
   }

   removeListeners() {
     this.controlElement.removeEventListener('keydown', this.keyDownHandler);
     this.controlElement.removeEventListener('click', this.clickHandler);
   }

   init() {
     const initControl = () => {
       // Find the button element
       this.controlElement_ = this.element.querySelector(`.${COLLAPSIBLE_CONTROL_CLASS}`) || this.element;

       // Add "aria-expanded" attribute if not present
       if(!this.controlElement.hasAttribute('aria-expanded')) {
         this.controlElement.setAttribute('aria-expanded', 'false');
       }

       // Add role=button if control != <button>
       if(this.controlElement.nodeName.toLowerCase() !== 'button') {
         this.controlElement.setAttribute('role', 'button');
       }

       // Add tabindex
       if(!isFocusable(this.controlElement) && !this.controlElement.hasAttribute('tabindex')) {
         this.controlElement.setAttribute('tabindex', '0');
       }
     };

     const initRegions = () => {
       let regions = [];
       if(!this.controlElement.hasAttribute('aria-controls')) {
         // Add siblings as collapsible region(s)
         let r = this.element.nextElementSibling;
         while(r) {
           if(r.classList.contains(COLLAPSIBLE_GROUP_CLASS) ||
             r.classList.contains(COLLAPSIBLE_REGION_CLASS)) {
             regions.push(r);
           }
           else if(r.classList.contains(JS_COLLAPSIBLE)) {
             // A new collapsible component
             break;
           }
           r = r.nextElementSibling;
         }
       }
       else {
         regions = this.regionElements;
       }
       regions.forEach(region => this.addRegionElement(region));
     };

     const addListeners = () => {
       this.controlElement.addEventListener('keydown', this.keyDownHandler);
       this.controlElement.addEventListener('click', this.clickHandler);
     };

     initControl();
     initRegions();
     this.removeListeners();
     addListeners();
   }

   downgrade() {
     this.removeListeners();
   }

 }

 (function() {
   'use strict';

   /**
    * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
   const MaterialExtCollapsible = function MaterialExtCollapsible(element) {
     this.element_ = element;
     this.collapsible = null;

     // Initialize instance.
     this.init();
   };
   window['MaterialExtCollapsible'] = MaterialExtCollapsible;

   /**
    * Initialize component
    */
   MaterialExtCollapsible.prototype.init = function() {
     if (this.element_) {
       this.collapsible = new Collapsible(this.element_);
       this.element_.classList.add(IS_UPGRADED);

       // Listen to 'mdl-componentdowngraded' event
       this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this));
     }
   };

   /*
    * Downgrade component
    * E.g remove listeners and clean up resources
    */
   MaterialExtCollapsible.prototype.mdlDowngrade_ = function() {
     this.collapsible.downgrade();
   };


   // Public methods.

   /**
    * Get control element.
    * @return {HTMLElement} element The element that controls the collapsible region.
    * @public
    */
   MaterialExtCollapsible.prototype.getControlElement = function() {
     return this.collapsible.controlElement;
   };
   MaterialExtCollapsible.prototype['getControlElement'] = MaterialExtCollapsible.prototype.getControlElement;

   /**
    * Get region elements controlled by this collapsible
    * @returns {Array<HTMLElement>} the collapsible region elements
    * @public
    */
   MaterialExtCollapsible.prototype.getRegionElements = function() {
     return this.collapsible.regionElements;
   };
   MaterialExtCollapsible.prototype['getRegionElements'] = MaterialExtCollapsible.prototype.getRegionElements;

   /**
    * Add region elements.
    * @param {Array<HTMLElement>} elements The element that will be upgraded.
    * @return {void}
    * @public
    */
   MaterialExtCollapsible.prototype.addRegionElements = function(...elements) {
     elements.forEach(element => this.collapsible.addRegionElement(element));
   };
   MaterialExtCollapsible.prototype['addRegionElements'] = MaterialExtCollapsible.prototype.addRegionElements;

   /**
    * Remove collapsible region(s) from component.
    * Note: This operation does not delete the element from the DOM tree.
    * @param {Array<HTMLElement>} elements The element that will be upgraded.
    * @public
    */
   MaterialExtCollapsible.prototype.removeRegionElements = function(...elements) {
     elements.forEach(element => this.collapsible.removeRegionElement(element));
   };
   MaterialExtCollapsible.prototype['removeRegionElements'] = MaterialExtCollapsible.prototype.removeRegionElements;

   /**
    * Expand collapsible region(s)
    * @return {void}
    * @public
    */
   MaterialExtCollapsible.prototype.expand = function() {
     this.collapsible.expand();
   };
   MaterialExtCollapsible.prototype['expand'] = MaterialExtCollapsible.prototype.expand;

   /**
    * Collapse collapsible region(s)
    * @return {void}
    * @public
    */
   MaterialExtCollapsible.prototype.collapse = function() {
     this.collapsible.collapse();
   };
   MaterialExtCollapsible.prototype['collapse'] = MaterialExtCollapsible.prototype.collapse;

   /**
    * Toggle collapsible region(s)
    * @return {void}
    * @public
    */
   MaterialExtCollapsible.prototype.toggle = function() {
     this.collapsible.toggle();
   };
   MaterialExtCollapsible.prototype['toggle'] = MaterialExtCollapsible.prototype.toggle;

   /**
    * Check whether component has aria-expanded state true
    * @return {Boolean} true if aria-expanded="true", otherwise false
    */
   MaterialExtCollapsible.prototype.isExpanded = function() {
     return this.collapsible.isExpanded;
   };
   MaterialExtCollapsible.prototype['isExpanded'] = MaterialExtCollapsible.prototype.isExpanded;

   /**
    * Check whether component has aria-disabled state set to true
    * @return {Boolean} true if aria-disabled="true", otherwise false
    */
   MaterialExtCollapsible.prototype.isDisabled = function() {
     return this.collapsible.isDisabled;
   };
   MaterialExtCollapsible.prototype['isDisabled'] = MaterialExtCollapsible.prototype.isDisabled;

   /**
    * Disables toggling of collapsible region(s)
    * @return {void}
    * @public
    */
   MaterialExtCollapsible.prototype.disableToggle = function() {
     this.collapsible.disableToggle();
   };
   MaterialExtCollapsible.prototype['disableToggle'] = MaterialExtCollapsible.prototype.disableToggle;

   /**
    * Enables toggling of collapsible region(s)
    * @return {void}
    * @public
    */
   MaterialExtCollapsible.prototype.enableToggle = function() {
     this.collapsible.enableToggle();
   };
   MaterialExtCollapsible.prototype['enableToggle'] = MaterialExtCollapsible.prototype.enableToggle;

   // The component registers itself. It can assume componentHandler is available
   // in the global scope.
   /* eslint no-undef: 0 */
   componentHandler.register({
     constructor: MaterialExtCollapsible,
     classAsString: 'MaterialExtCollapsible',
     cssClass: JS_COLLAPSIBLE,
     widget: true
   });

 })();
	/**
	* @license
	* Copyright 2016-2017 Leif Olsen. All Rights Reserved.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*
	* This code is built with Google Material Design Lite,
	* which is Licensed under the Apache License, Version 2.0
	*/


	/**
	* A collapsible is a component to mark expandable and collapsible regions.
	* The component use the aria-expanded state to indicate whether regions of
	* the content are collapsible, and to expose whether a region is currently
	* expanded or collapsed.
	* @see https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions
	*/

	import {
	IS_UPGRADED,
	VK_SPACE,
	VK_ENTER,
	} from '../utils/constants';

	import { randomString } from '../utils/string-utils';
	import { getParentElements, isFocusable } from '../utils/dom-utils';

	const JS_COLLAPSIBLE = 'mdlext-js-collapsible';
	const COLLAPSIBLE_CONTROL_CLASS = 'mdlext-collapsible';
	const COLLAPSIBLE_GROUP_CLASS = 'mdlext-collapsible-group';
	const COLLAPSIBLE_REGION_CLASS = 'mdlext-collapsible-region';

	/**
	* The collapsible component
	*/

	class Collapsible {
	element_ = null;
	controlElement_ = null;

	/**
	* @constructor
	* @param {HTMLElement} element The element that this component is connected to.
	*/
	constructor(element) {
	this.element_ = element;
	this.init();
	}

	keyDownHandler = event => {
	if (event.keyCode === VK_ENTER \|\| event.keyCode === VK_SPACE) {
	event.preventDefault();

	// Trigger click
	(event.target \|\| this.controlElement).dispatchEvent(
	new MouseEvent('click', {
	bubbles: true,
	cancelable: true,
	view: window
	})
	);
	}
	};

	clickHandler = event => {
	if(!this.isDisabled) {
	if(event.target !== this.controlElement) {
	// Do not toggle if a focusable element inside the control element triggered the event
	const p = getParentElements(event.target, this.controlElement);
	p.push(event.target);
	if(p.find( el => isFocusable(el))) {
	return;
	}
	}
	this.toggle();
	}
	};

	get element() {
	return this.element_;
	}

	get controlElement() {
	return this.controlElement_;
	}

	get isDisabled() {
	return (this.controlElement.hasAttribute('disabled') &&
	this.controlElement.getAttribute('disabled').toLowerCase() !== 'false') \|\|
	(this.controlElement.hasAttribute('aria-disabled') &&
	this.controlElement.getAttribute('aria-disabled').toLowerCase() !== 'false');
	}

	get isExpanded() {
	return this.controlElement.hasAttribute('aria-expanded') &&
	this.controlElement.getAttribute('aria-expanded').toLowerCase() === 'true';
	}

	get regionIds() {
	return this.controlElement.hasAttribute('aria-controls')
	? this.controlElement.getAttribute('aria-controls').split(' ')
	: [];
	}

	get regionElements() {
	return this.regionIds
	.map(id => document.querySelector(`#${id}`))
	.filter( el => el != null);
	}

	collapse() {
	if(!this.isDisabled && this.isExpanded) {
	if(this.dispatchToggleEvent('collapse')) {
	this.controlElement.setAttribute('aria-expanded', 'false');
	const regions = this.regionElements.slice(0);
	for (let i = regions.length - 1; i >= 0; --i) {
	regions[i].setAttribute('hidden', '');
	}
	}
	}
	}

	expand() {
	if(!this.isDisabled && !this.isExpanded) {
	if(this.dispatchToggleEvent('expand')) {
	this.controlElement.setAttribute('aria-expanded', 'true');
	this.regionElements.forEach(region => region.removeAttribute('hidden'));
	}
	}
	}

	toggle() {
	if (this.isExpanded) {
	this.collapse();
	}
	else {
	this.expand();
	}
	}

	dispatchToggleEvent(action) {
	return this.element.dispatchEvent(
	new CustomEvent('toggle', {
	bubbles: true,
	cancelable: true,
	detail: {
	action: action
	}
	})
	);
	}

	disableToggle() {
	this.controlElement.setAttribute('aria-disabled', true);
	}

	enableToggle() {
	this.controlElement.removeAttribute('aria-disabled');
	}

	addRegionId(regionId) {
	const ids = this.regionIds;
	if(!ids.find(id => regionId === id)) {
	ids.push(regionId);
	this.controlElement.setAttribute('aria-controls', ids.join(' '));
	}
	}

	addRegionElement(region) {
	if(!(region.classList.contains(COLLAPSIBLE_GROUP_CLASS) \|\|
	region.classList.contains(COLLAPSIBLE_REGION_CLASS))) {
	region.classList.add(COLLAPSIBLE_GROUP_CLASS);
	}

	if(!region.hasAttribute('role')) {
	const role = region.classList.contains(COLLAPSIBLE_GROUP_CLASS) ? 'group' : 'region';
	region.setAttribute('role', role);
	}

	if(!region.hasAttribute('id')) {
	region.id = `${region.getAttribute('role')}-${randomString()}`;
	}

	if(this.isExpanded) {
	region.removeAttribute('hidden');
	}
	else {
	region.setAttribute('hidden', '');
	}
	this.addRegionId(region.id);
	}

	removeRegionElement(region) {
	if(region && region.id) {
	const ids = this.regionIds.filter(id => id === region.id);
	this.controlElement.setAttribute('aria-controls', ids.join(' '));
	}
	}

	removeListeners() {
	this.controlElement.removeEventListener('keydown', this.keyDownHandler);
	this.controlElement.removeEventListener('click', this.clickHandler);
	}

	init() {
	const initControl = () => {
	// Find the button element
	this.controlElement_ = this.element.querySelector(`.${COLLAPSIBLE_CONTROL_CLASS}`) \|\| this.element;

	// Add "aria-expanded" attribute if not present
	if(!this.controlElement.hasAttribute('aria-expanded')) {
	this.controlElement.setAttribute('aria-expanded', 'false');
	}

	// Add role=button if control != <button>
	if(this.controlElement.nodeName.toLowerCase() !== 'button') {
	this.controlElement.setAttribute('role', 'button');
	}

	// Add tabindex
	if(!isFocusable(this.controlElement) && !this.controlElement.hasAttribute('tabindex')) {
	this.controlElement.setAttribute('tabindex', '0');
	}
	};

	const initRegions = () => {
	let regions = [];
	if(!this.controlElement.hasAttribute('aria-controls')) {
	// Add siblings as collapsible region(s)
	let r = this.element.nextElementSibling;
	while(r) {
	if(r.classList.contains(COLLAPSIBLE_GROUP_CLASS) \|\|
	r.classList.contains(COLLAPSIBLE_REGION_CLASS)) {
	regions.push(r);
	}
	else if(r.classList.contains(JS_COLLAPSIBLE)) {
	// A new collapsible component
	break;
	}
	r = r.nextElementSibling;
	}
	}
	else {
	regions = this.regionElements;
	}
	regions.forEach(region => this.addRegionElement(region));
	};

	const addListeners = () => {
	this.controlElement.addEventListener('keydown', this.keyDownHandler);
	this.controlElement.addEventListener('click', this.clickHandler);
	};

	initControl();
	initRegions();
	this.removeListeners();
	addListeners();
	}

	downgrade() {
	this.removeListeners();
	}

	}

	(function() {
	'use strict';

	/**
	* @constructor
	* @param {HTMLElement} element The element that will be upgraded.
	*/
	const MaterialExtCollapsible = function MaterialExtCollapsible(element) {
	this.element_ = element;
	this.collapsible = null;

	// Initialize instance.
	this.init();
	};
	window['MaterialExtCollapsible'] = MaterialExtCollapsible;

	/**
	* Initialize component
	*/
	MaterialExtCollapsible.prototype.init = function() {
	if (this.element_) {
	this.collapsible = new Collapsible(this.element_);
	this.element_.classList.add(IS_UPGRADED);

	// Listen to 'mdl-componentdowngraded' event
	this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this));
	}
	};

	/*
	* Downgrade component
	* E.g remove listeners and clean up resources
	*/
	MaterialExtCollapsible.prototype.mdlDowngrade_ = function() {
	this.collapsible.downgrade();
	};


	// Public methods.

	/**
	* Get control element.
	* @return {HTMLElement} element The element that controls the collapsible region.
	* @public
	*/
	MaterialExtCollapsible.prototype.getControlElement = function() {
	return this.collapsible.controlElement;
	};
	MaterialExtCollapsible.prototype['getControlElement'] = MaterialExtCollapsible.prototype.getControlElement;

	/**
	* Get region elements controlled by this collapsible
	* @returns {Array<HTMLElement>} the collapsible region elements
	* @public
	*/
	MaterialExtCollapsible.prototype.getRegionElements = function() {
	return this.collapsible.regionElements;
	};
	MaterialExtCollapsible.prototype['getRegionElements'] = MaterialExtCollapsible.prototype.getRegionElements;

	/**
	* Add region elements.
	* @param {Array<HTMLElement>} elements The element that will be upgraded.
	* @return {void}
	* @public
	*/
	MaterialExtCollapsible.prototype.addRegionElements = function(...elements) {
	elements.forEach(element => this.collapsible.addRegionElement(element));
	};
	MaterialExtCollapsible.prototype['addRegionElements'] = MaterialExtCollapsible.prototype.addRegionElements;

	/**
	* Remove collapsible region(s) from component.
	* Note: This operation does not delete the element from the DOM tree.
	* @param {Array<HTMLElement>} elements The element that will be upgraded.
	* @public
	*/
	MaterialExtCollapsible.prototype.removeRegionElements = function(...elements) {
	elements.forEach(element => this.collapsible.removeRegionElement(element));
	};
	MaterialExtCollapsible.prototype['removeRegionElements'] = MaterialExtCollapsible.prototype.removeRegionElements;

	/**
	* Expand collapsible region(s)
	* @return {void}
	* @public
	*/
	MaterialExtCollapsible.prototype.expand = function() {
	this.collapsible.expand();
	};
	MaterialExtCollapsible.prototype['expand'] = MaterialExtCollapsible.prototype.expand;

	/**
	* Collapse collapsible region(s)
	* @return {void}
	* @public
	*/
	MaterialExtCollapsible.prototype.collapse = function() {
	this.collapsible.collapse();
	};
	MaterialExtCollapsible.prototype['collapse'] = MaterialExtCollapsible.prototype.collapse;

	/**
	* Toggle collapsible region(s)
	* @return {void}
	* @public
	*/
	MaterialExtCollapsible.prototype.toggle = function() {
	this.collapsible.toggle();
	};
	MaterialExtCollapsible.prototype['toggle'] = MaterialExtCollapsible.prototype.toggle;

	/**
	* Check whether component has aria-expanded state true
	* @return {Boolean} true if aria-expanded="true", otherwise false
	*/
	MaterialExtCollapsible.prototype.isExpanded = function() {
	return this.collapsible.isExpanded;
	};
	MaterialExtCollapsible.prototype['isExpanded'] = MaterialExtCollapsible.prototype.isExpanded;

	/**
	* Check whether component has aria-disabled state set to true
	* @return {Boolean} true if aria-disabled="true", otherwise false
	*/
	MaterialExtCollapsible.prototype.isDisabled = function() {
	return this.collapsible.isDisabled;
	};
	MaterialExtCollapsible.prototype['isDisabled'] = MaterialExtCollapsible.prototype.isDisabled;

	/**
	* Disables toggling of collapsible region(s)
	* @return {void}
	* @public
	*/
	MaterialExtCollapsible.prototype.disableToggle = function() {
	this.collapsible.disableToggle();
	};
	MaterialExtCollapsible.prototype['disableToggle'] = MaterialExtCollapsible.prototype.disableToggle;

	/**
	* Enables toggling of collapsible region(s)
	* @return {void}
	* @public
	*/
	MaterialExtCollapsible.prototype.enableToggle = function() {
	this.collapsible.enableToggle();
	};
	MaterialExtCollapsible.prototype['enableToggle'] = MaterialExtCollapsible.prototype.enableToggle;

	// The component registers itself. It can assume componentHandler is available
	// in the global scope.
	/* eslint no-undef: 0 */
	componentHandler.register({
	constructor: MaterialExtCollapsible,
	classAsString: 'MaterialExtCollapsible',
	cssClass: JS_COLLAPSIBLE,
	widget: true
	});

	})();