mirror of
https://github.com/datahub-project/datahub.git
synced 2025-08-11 10:46:52 +00:00
36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
|
import Component from '@ember/component';
|
||
|
|
// @ts-ignore: Ignore import of compiled template
|
||
|
|
import layout from '../templates/components/expandable-content';
|
||
|
|
import { classNames } from '@ember-decorators/component';
|
||
|
|
import { action } from '@ember/object';
|
||
|
|
|
||
|
|
const baseComponentClass = 'expandable-content';
|
||
|
|
|
||
|
|
@classNames(`${baseComponentClass}__container`)
|
||
|
|
export default class ExpandableContent extends Component {
|
||
|
|
layout = layout;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Leads to ease of use in the template level
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
baseComponentClass = baseComponentClass;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The expanded state of this component. When the user clicks on the button trigger, it'll toggle this
|
||
|
|
* between expanded and unexpanded. Can optionally be passed in as a parameter, or defaulted to being
|
||
|
|
* a local property
|
||
|
|
* @type {boolean}
|
||
|
|
*/
|
||
|
|
isExpanded = false;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Toggles the expanded state of this component, which will then reveal the yielded content in an
|
||
|
|
* "expanded" window
|
||
|
|
*/
|
||
|
|
@action
|
||
|
|
toggleExpanded(): void {
|
||
|
|
this.toggleProperty('isExpanded');
|
||
|
|
}
|
||
|
|
}
|