Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 30x 33x 33x 33x 39x 66x 66x 66x 33x 33x | import Component from '@ember/component';
import { classNames, attributeBindings, classNameBindings, tagName, layout as templateLayout } from '@ember-decorators/component';
import layout from '../../templates/components/nucleus-tabs/tab-panel';
import { get, computed } from '@ember/object';
import defaultProp from '@freshworks/core/utils/default-decorator';
/**
__Usage:__
[Refer component page](/docs/components/nucleus-tabs)
@class Nucleus Tab Panel
@namespace Components
@extends Ember.Component
@public
*/
@tagName('div')
@templateLayout(layout)
@classNames('nucleus-tabs__panel')
@classNameBindings('isActive:is-active')
@attributeBindings('tabindex', 'role', 'aria-labelledby', 'testId:data-test-panel-id')
class TabPanel extends Component {
/**
* disabled
*
* @field disabled
* @type string
* @default 'false'
* @readonly
* @public
*/
@defaultProp
disabled = 'false';
/**
* testId
*
* @field testId
* @type string|null
* @default null
* @readonly
* @public
*/
@defaultProp
testId = null;
/**
* tabindex
*
* @field tabindex
* @default '0'
* @type string
* @public
*/
tabindex = '0';
/**
* role
*
* @field role
* @type string
* @public
*/
role = 'tabpanel'
/**
* isActive
*
* @field isActive
* @type boolean
* @public
*/
@computed('selected', function() {
return (get(this, 'selected') === get(this, 'name'));
})
isActive;
/**
* aria-labelledby
*
* @field aria-labelledby
* @type string
* @public
*/
@computed('tabListItems.[]', function() {
const tabListItems = get(this, 'tabListItems');
const tabList = tabListItems.findBy('name', get(this, 'name'));
return (tabList)? tabList.id : '';
})
'aria-labelledby';
/**
* data-test-pane-id
*
* @field data-test-pane-id
* @type string
* @public
*/
@computed('testId', function() {
return get(this, 'testId');
})
'data-test-panel-id';
/**
* didInsertElement
*
* @method didInsertElement
* @description lifecycle event
* @public
*
*/
didInsertElement() {
get(this, 'registerPanel').call(this, {
id: get(this, 'elementId'),
name: get(this, 'name'),
disabled: get(this, 'disabled'),
testId: get(this, 'testId')
});
}
}
export default TabPanel;
|