@nova-ui/bits
Version:
SolarWinds Nova Framework
62 lines • 12.3 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, } from "@angular/core";
import * as i0 from "@angular/core";
/** @ignore */
export class TabHeadingComponent {
/** This adds 'disabled' class to the host component depending on the 'disabled' @Input to properly style disabled tabs */
get isDisabled() {
return this.disabled;
}
/** Tab active state toggle */
set active(isActive) {
this._active = isActive;
this.changeDetector.detectChanges();
}
get active() {
return this._active;
}
constructor(changeDetector) {
this.changeDetector = changeDetector;
/** Event is fired when tab became active, $event:Tab equals to selected instance of Tab component */
this.selected = new EventEmitter();
}
selectTab() {
this.selected.emit(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabHeadingComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TabHeadingComponent, selector: "nui-tab-heading", inputs: { disabled: "disabled", active: "active", tabId: "tabId" }, outputs: { selected: "selected" }, host: { attributes: { "role": "tab" }, properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"nui-tab-heading\" [class.active]=\"active\">\n <span class=\"tab-link\" (click)=\"selectTab()\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [":host{max-width:250px;min-height:37px;background-color:var(--nui-color-bg-transparent,transparent)}:host .nui-tab-heading{white-space:nowrap}:host .nui-tab-heading.active{border-left:none;border-bottom:3px solid;border-bottom-color:var(--nui-color-selected-contrast,#00c4d2)}:host .nui-tab-heading.active>.tab-link{color:var(--nui-color-text-default,#111);background-color:var(--nui-color-bg-content,#fff)}:host .nui-tab-heading .tab-link{background:var(--nui-color-bg-transparent,transparent);color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));line-height:var(--nui-line-height-default,18px);font-weight:var(--nui-font-weight-semibold,600);font-size:var(--nui-font-size-default,13px);display:block;padding:10px 15px;text-transform:uppercase;min-height:37px;cursor:pointer}:host .nui-tab-heading .tab-link:hover{background:var(--transparent,transparent)}:host.disabled>.nui-tab-heading .tab-link{cursor:not-allowed;color:var(--nui-color-text-disabled,rgba(17, 17, 17, .3))}:host.disabled>.nui-tab-heading .tab-link:hover{background:transparent}:host.disabled:hover{background:transparent}:host:hover{background:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}:host:focus{outline:none}:host-context(nui-tab-heading-group.vertical) .nui-tab-heading{max-width:250px;min-height:40px;border-left:3px solid transparent}:host-context(nui-tab-heading-group.vertical) .nui-tab-heading.active{border-bottom:none;border-left:3px solid;border-left-color:var(--nui-color-selected-contrast,#00c4d2)}:host-context(nui-tab-heading-group.vertical) .nui-tab-heading .tab-link{min-height:40px}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabHeadingComponent, decorators: [{
type: Component,
args: [{ selector: "nui-tab-heading", host: { role: "tab" }, template: "<div class=\"nui-tab-heading\" [class.active]=\"active\">\n <span class=\"tab-link\" (click)=\"selectTab()\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [":host{max-width:250px;min-height:37px;background-color:var(--nui-color-bg-transparent,transparent)}:host .nui-tab-heading{white-space:nowrap}:host .nui-tab-heading.active{border-left:none;border-bottom:3px solid;border-bottom-color:var(--nui-color-selected-contrast,#00c4d2)}:host .nui-tab-heading.active>.tab-link{color:var(--nui-color-text-default,#111);background-color:var(--nui-color-bg-content,#fff)}:host .nui-tab-heading .tab-link{background:var(--nui-color-bg-transparent,transparent);color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));line-height:var(--nui-line-height-default,18px);font-weight:var(--nui-font-weight-semibold,600);font-size:var(--nui-font-size-default,13px);display:block;padding:10px 15px;text-transform:uppercase;min-height:37px;cursor:pointer}:host .nui-tab-heading .tab-link:hover{background:var(--transparent,transparent)}:host.disabled>.nui-tab-heading .tab-link{cursor:not-allowed;color:var(--nui-color-text-disabled,rgba(17, 17, 17, .3))}:host.disabled>.nui-tab-heading .tab-link:hover{background:transparent}:host.disabled:hover{background:transparent}:host:hover{background:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}:host:focus{outline:none}:host-context(nui-tab-heading-group.vertical) .nui-tab-heading{max-width:250px;min-height:40px;border-left:3px solid transparent}:host-context(nui-tab-heading-group.vertical) .nui-tab-heading.active{border-bottom:none;border-left:3px solid;border-left-color:var(--nui-color-selected-contrast,#00c4d2)}:host-context(nui-tab-heading-group.vertical) .nui-tab-heading .tab-link{min-height:40px}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isDisabled: [{
type: HostBinding,
args: ["class.disabled"]
}], disabled: [{
type: Input
}], active: [{
type: Input
}], tabId: [{
type: Input
}], selected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWhlYWRpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi90YWJncm91cC90YWItaGVhZGluZy90YWItaGVhZGluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3RhYmdyb3VwL3RhYi1oZWFkaW5nL3RhYi1oZWFkaW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlEQUF5RDtBQUN6RCxFQUFFO0FBQ0YsK0VBQStFO0FBQy9FLDRFQUE0RTtBQUM1RSw4RUFBOEU7QUFDOUUsK0VBQStFO0FBQy9FLDhFQUE4RTtBQUM5RSw0REFBNEQ7QUFDNUQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSx1REFBdUQ7QUFDdkQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSw0RUFBNEU7QUFDNUUsK0VBQStFO0FBQy9FLDBFQUEwRTtBQUMxRSxpRkFBaUY7QUFDakYsNkVBQTZFO0FBQzdFLGlCQUFpQjtBQUVqQixPQUFPLEVBQ0gsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osV0FBVyxFQUNYLEtBQUssRUFDTCxNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7O0FBRXZCLGNBQWM7QUFRZCxNQUFNLE9BQU8sbUJBQW1CO0lBQzVCLDBIQUEwSDtJQUMxSCxJQUNJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDekIsQ0FBQztJQUtELDhCQUE4QjtJQUM5QixJQUNJLE1BQU0sQ0FBQyxRQUFpQjtRQUN4QixJQUFJLENBQUMsT0FBTyxHQUFHLFFBQVEsQ0FBQztRQUN4QixJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFDRCxJQUFJLE1BQU07UUFDTixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDeEIsQ0FBQztJQVVELFlBQW9CLGNBQWlDO1FBQWpDLG1CQUFjLEdBQWQsY0FBYyxDQUFtQjtRQUxyRCxxR0FBcUc7UUFDM0YsYUFBUSxHQUFzQyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBSW5CLENBQUM7SUFFbEQsU0FBUztRQUNaLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdCLENBQUM7K0dBaENRLG1CQUFtQjttR0FBbkIsbUJBQW1CLDRQQ3JDaEMsNEtBS0E7OzRGRGdDYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0ksaUJBQWlCLFFBR3JCLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRTtzRkFLakIsVUFBVTtzQkFEYixXQUFXO3VCQUFDLGdCQUFnQjtnQkFNcEIsUUFBUTtzQkFBaEIsS0FBSztnQkFJRixNQUFNO3NCQURULEtBQUs7Z0JBVUcsS0FBSztzQkFBYixLQUFLO2dCQUdJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvLyDCqSAyMDIyIFNvbGFyV2luZHMgV29ybGR3aWRlLCBMTEMuIEFsbCByaWdodHMgcmVzZXJ2ZWQuXG4vL1xuLy8gUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weVxuLy8gIG9mIHRoaXMgc29mdHdhcmUgYW5kIGFzc29jaWF0ZWQgZG9jdW1lbnRhdGlvbiBmaWxlcyAodGhlIFwiU29mdHdhcmVcIiksIHRvXG4vLyAgZGVhbCBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGVcbi8vICByaWdodHMgdG8gdXNlLCBjb3B5LCBtb2RpZnksIG1lcmdlLCBwdWJsaXNoLCBkaXN0cmlidXRlLCBzdWJsaWNlbnNlLCBhbmQvb3Jcbi8vICBzZWxsIGNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpc1xuLy8gIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vICBhbGwgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS5cbi8vXG4vLyBUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgXCJBUyBJU1wiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SXG4vLyAgSU1QTElFRCwgSU5DTFVESU5HIEJVVCBOT1QgTElNSVRFRCBUTyBUSEUgV0FSUkFOVElFUyBPRiBNRVJDSEFOVEFCSUxJVFksXG4vLyAgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyAgQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUlxuLy8gIExJQUJJTElUWSwgV0hFVEhFUiBJTiBBTiBBQ1RJT04gT0YgQ09OVFJBQ1QsIFRPUlQgT1IgT1RIRVJXSVNFLCBBUklTSU5HIEZST00sXG4vLyAgT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gIFRIRSBTT0ZUV0FSRS5cblxuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuLyoqIEBpZ25vcmUgKi9cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwibnVpLXRhYi1oZWFkaW5nXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi90YWItaGVhZGluZy5jb21wb25lbnQuaHRtbFwiLFxuICAgIHN0eWxlVXJsczogW1wiLi90YWItaGVhZGluZy5jb21wb25lbnQubGVzc1wiXSxcbiAgICBob3N0OiB7IHJvbGU6IFwidGFiXCIgfSxcbn0pXG5leHBvcnQgY2xhc3MgVGFiSGVhZGluZ0NvbXBvbmVudCB7XG4gICAgLyoqIFRoaXMgYWRkcyAnZGlzYWJsZWQnIGNsYXNzIHRvIHRoZSBob3N0IGNvbXBvbmVudCBkZXBlbmRpbmcgb24gdGhlICdkaXNhYmxlZCcgQElucHV0IHRvIHByb3Blcmx5IHN0eWxlIGRpc2FibGVkIHRhYnMgKi9cbiAgICBASG9zdEJpbmRpbmcoXCJjbGFzcy5kaXNhYmxlZFwiKVxuICAgIGdldCBpc0Rpc2FibGVkKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5kaXNhYmxlZDtcbiAgICB9XG5cbiAgICAvKiogSWYgdHJ1ZSB0YWIgY2FuIG5vdCBiZSBhY3RpdmF0ZWQgICovXG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW47XG5cbiAgICAvKiogVGFiIGFjdGl2ZSBzdGF0ZSB0b2dnbGUgKi9cbiAgICBASW5wdXQoKVxuICAgIHNldCBhY3RpdmUoaXNBY3RpdmU6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5fYWN0aXZlID0gaXNBY3RpdmU7XG4gICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3IuZGV0ZWN0Q2hhbmdlcygpO1xuICAgIH1cbiAgICBnZXQgYWN0aXZlKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5fYWN0aXZlO1xuICAgIH1cblxuICAgIC8qKiBUYWIgaWQgKi9cbiAgICBASW5wdXQoKSB0YWJJZDogc3RyaW5nO1xuXG4gICAgLyoqIEV2ZW50IGlzIGZpcmVkIHdoZW4gdGFiIGJlY2FtZSBhY3RpdmUsICRldmVudDpUYWIgZXF1YWxzIHRvIHNlbGVjdGVkIGluc3RhbmNlIG9mIFRhYiBjb21wb25lbnQgKi9cbiAgICBAT3V0cHV0KCkgc2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjxUYWJIZWFkaW5nQ29tcG9uZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIHByb3RlY3RlZCBfYWN0aXZlOiBib29sZWFuO1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBjaGFuZ2VEZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgICBwdWJsaWMgc2VsZWN0VGFiKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodGhpcyk7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm51aS10YWItaGVhZGluZ1wiIFtjbGFzcy5hY3RpdmVdPVwiYWN0aXZlXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJ0YWItbGlua1wiIChjbGljayk9XCJzZWxlY3RUYWIoKVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9zcGFuPlxuPC9kaXY+XG4iXX0=