carbon-components-angular
Version:
Next generation components
110 lines (107 loc) • 4.3 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | overflow-menu-option.component.js
*
* Copyright 2014, 2018 IBM
*
* 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.
*/
import { HostBinding, Component, Input, ElementRef } from "@angular/core";
/**
* `OverflowMenuOption` represents a single option in an overflow menu
*
* Presently it has three possible states - normal, disabled, and danger:
* ```
* <ibm-overflow-menu-option>Simple option</ibm-overflow-menu-option>
* <ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
* <ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
* ```
*
* For content that expands beyod the overflow menu `OverflowMenuOption` automatically adds a title attribute.
*/
var OverflowMenuOption = /** @class */ (function () {
function OverflowMenuOption(elementRef) {
this.elementRef = elementRef;
this.optionClass = "bx--overflow-menu-options__option";
this.role = "presentation";
/**
* toggles between `normal` and `danger` states
*/
this.type = "normal";
/**
* disable/enable interactions
*/
this.disabled = false;
this.tabIndex = -1;
}
Object.defineProperty(OverflowMenuOption.prototype, "isDanger", {
get: function () {
return this.type === "danger";
},
enumerable: true,
configurable: true
});
Object.defineProperty(OverflowMenuOption.prototype, "isDisabled", {
get: function () {
return this.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OverflowMenuOption.prototype, "titleEnabled", {
/**
* Returns true if the content string is longer than the width of the containing button
*
* note: getter ties into the view check cycle so we always get an accurate value
*/
get: function () {
var button = this.elementRef.nativeElement.querySelector("button");
if (button.scrollWidth > button.offsetWidth) {
return true;
}
return false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OverflowMenuOption.prototype, "content", {
/**
* Returns the text content projected into the component
*/
get: function () {
return this.elementRef.nativeElement.querySelector("button").textContent;
},
enumerable: true,
configurable: true
});
OverflowMenuOption.decorators = [
{ type: Component, args: [{
selector: "ibm-overflow-menu-option",
template: "\n\t\t<button\n\t\t\tclass=\"bx--overflow-menu-options__btn\"\n\t\t\trole=\"menuitem\"\n\t\t\t[tabindex]=\"tabIndex\"\n\t\t\t(focus)=\"tabIndex = 0\"\n\t\t\t(blur)=\"tabIndex = -1\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[title]=\"(titleEnabled ? content : '')\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t"
},] },
];
/** @nocollapse */
OverflowMenuOption.ctorParameters = function () { return [
{ type: ElementRef }
]; };
OverflowMenuOption.propDecorators = {
optionClass: [{ type: HostBinding, args: ["class",] }],
role: [{ type: HostBinding, args: ["attr.role",] }],
isDanger: [{ type: HostBinding, args: ["class.bx--overflow-menu-options__option--danger",] }],
isDisabled: [{ type: HostBinding, args: ["class.bx--overflow-menu-options__option--disabled",] }],
type: [{ type: Input }],
disabled: [{ type: Input }]
};
return OverflowMenuOption;
}());
export { OverflowMenuOption };
//# sourceMappingURL=overflow-menu-option.component.js.map