@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
68 lines (64 loc) • 4.11 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Component, ChangeDetectionStrategy, HostBinding, HostListener } from '@angular/core';
import { NgDocListItem } from '@ng-doc/ui-kit/classes/list-item';
import { NgDocListComponent } from '@ng-doc/ui-kit/components/list';
import { DIStateControl, injectHostControl, DICompareHost } from 'di-controls';
class NgDocOptionComponent extends DIStateControl {
constructor() {
super({
host: injectHostControl({ optional: true }),
compareHost: inject(DICompareHost, { optional: true }),
});
this.hovered = false;
this.elementRef = inject(ElementRef);
this.list = inject(NgDocListComponent, {
optional: true,
});
this.list?.registerItem(this);
}
clickEvent() {
this.check();
}
selectByUser() {
const anchor = this.elementRef.nativeElement.querySelector('a');
anchor ? anchor.click() : this.check();
}
setActiveStyles() {
this.hovered = true;
this.changeDetectorRef.markForCheck();
}
setInactiveStyles() {
this.hovered = false;
this.changeDetectorRef.markForCheck();
}
ngOnDestroy() {
this.list?.unregisterItem(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocOptionComponent, isStandalone: true, selector: "ng-doc-option", host: { listeners: { "click": "clickEvent()" }, properties: { "attr.data-ng-doc-hover": "this.hovered" } }, providers: [
{
provide: NgDocListItem,
useExisting: NgDocOptionComponent,
},
], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:block;padding:var(--ng-doc-option-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2))}:host:hover:not([data-disabled=true]),:host[data-ng-doc-hover=true]:not([data-disabled=true]){background:var(--ng-doc-hover-background);cursor:pointer}:host[data-checked=true]{background-color:rgba(var(--ng-doc-primary-rgb),.2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-option', template: '<ng-content></ng-content>', providers: [
{
provide: NgDocListItem,
useExisting: NgDocOptionComponent,
},
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:block;padding:var(--ng-doc-option-padding, var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2))}:host:hover:not([data-disabled=true]),:host[data-ng-doc-hover=true]:not([data-disabled=true]){background:var(--ng-doc-hover-background);cursor:pointer}:host[data-checked=true]{background-color:rgba(var(--ng-doc-primary-rgb),.2)}\n"] }]
}], ctorParameters: () => [], propDecorators: { hovered: [{
type: HostBinding,
args: ['attr.data-ng-doc-hover']
}], clickEvent: [{
type: HostListener,
args: ['click']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocOptionComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-option.mjs.map