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 125 126 127 | 10x 7x 10x 12x 12x 12x 10x 10x 2x 1x 1x 1x | import defaultProp from '@freshworks/core/utils/default-decorator';
import { classNames, attributeBindings, classNameBindings, layout as templateLayout } from '@ember-decorators/component';
import Component from '@ember/component';
import { set, action } from '@ember/object';
import { computed } from '@ember/object';
import layout from '../templates/components/nucleus-inline-banner';
import { ICON_MAP } from '../constants/nucleus-inline-banner';
/**
__Usage:__
[Refer component page](/docs/components/nucleus-inline-banner)
@class Nucleus Inline Banner
@namespace Components
@extends Ember.Component
@public
*/
@templateLayout(layout)
@classNames('nucleus-inline-banner')
@classNameBindings('_typeClass', '_isOpen:nucleus-active:nucleus-inactive')
@attributeBindings('data-test-id')
class NucleusInlineBanner extends Component {
/**
* data-test-id
*
* @field data-test-id
* @type string
* @private
*/
'data-test-id' = 'nucleus-inline-banner';
/**
* Type of the inline banner.
* [`info`, `success`, `warning`, `danger`]
*
* @field type
* @type string
* @public
* @default `info`
*/
@defaultProp
type = 'info';
/**
* Show or hide the close button
*
* @field isDismissible
* @type boolean
* @public
* @default true
*/
@defaultProp
isDismissible = true;
/**
* Open/close state management
*
* @field _isOpen
* @type boolean
* @private
*/
_isOpen = true;
/**
* Title of the banner. Can be plain text or HTML.
*
* @field title
* @type string
* @public
*/
@defaultProp
title = null;
/**
* _typeClass
*
* @computed _typeClass
* @private
*/
@computed('type', '_isOpen', function () {
let type = this.get('type');
let _isOpen = this._isOpen;
return type && _isOpen ? `nucleus-inline-banner--${type}` : null;
})
_typeClass;
/**
* _icon
*
* @computed _icon
* @private
*/
@computed('type', function () {
let iconType = this.get('type');
return (iconType in ICON_MAP) ? ICON_MAP[iconType] : null;
})
_icon;
/**
* Closure action that gets invoked on clicking the close button.
*
* @method onClose
* @public
*/
@defaultProp
onClose;
/**
* The action that gets invoked on clicking the close button.
*
* @method onCloseTip
* @public
*
*/
@action
onCloseTip() {
if (this.get('onClose')) {
set(this, '_isOpen', false);
return this.get('onClose')();
}
set(this, '_isOpen', false);
}
}
export default NucleusInlineBanner;
|