@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>
104 lines (100 loc) • 15.4 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { ElementRef, ChangeDetectorRef, Component, ChangeDetectionStrategy, Input, HostBinding, ContentChild, ViewChild } from '@angular/core';
import { NgDocBaseInput } from '@ng-doc/ui-kit/classes/base-input';
import { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';
import { NgDocFloatedBorderComponent } from '@ng-doc/ui-kit/components/floated-border';
import { NgDocFloatedContentComponent } from '@ng-doc/ui-kit/components/floated-content';
import { NgDocWrapperComponent } from '@ng-doc/ui-kit/components/wrapper';
import { ngDocMakePure } from '@ng-doc/ui-kit/decorators';
import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
import { UntilDestroy } from '@ngneat/until-destroy';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
let NgDocInputWrapperComponent = class NgDocInputWrapperComponent {
constructor(elementRef, changeDetectorRef) {
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.blurContent = '';
this.blurContext = null;
this.align = 'left';
}
ngAfterViewChecked() {
this.changeDetectorRef.markForCheck();
}
getBlurContext($implicit) {
return { $implicit };
}
get disabled() {
return !!this.inputControl?.disabled;
}
inputHasValue() {
return !!this.inputControl?.hasValue;
}
get blurContentIsVisible() {
return !!this.blurContent && (!this.input?.isFocused || this.input?.isReadonly);
}
// eslint-disable-next-line @typescript-eslint/no-empty-function
emptyEvent() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocInputWrapperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocInputWrapperComponent, isStandalone: true, selector: "ng-doc-input-wrapper", inputs: { blurContent: "blurContent", blurContext: "blurContext", align: "align" }, host: { properties: { "attr.data-ng-doc-align": "this.align", "attr.data-ng-doc-input-disabled": "this.disabled" } }, providers: [
{
provide: NgDocInputHost,
useExisting: NgDocInputWrapperComponent,
},
], queries: [{ propertyName: "input", first: true, predicate: NgDocBaseInput, descendants: true }, { propertyName: "inputControl", first: true, predicate: NgDocBaseInput, descendants: true }], viewQueries: [{ propertyName: "focusCatcher", first: true, predicate: NgDocFocusCatcherDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-doc-wrapper ngDocFocusCatcher>\n <ng-doc-floated-border>\n <label\n class=\"ng-doc-input-container\"\n (focusin)=\"emptyEvent()\"\n (focusout)=\"emptyEvent()\"\n [class.-input-hidden]=\"blurContentIsVisible\">\n <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n <div class=\"ng-doc-original-input\">\n <ng-content></ng-content>\n <div class=\"ng-doc-blur-container ng-doc-input\" *ngIf=\"blurContentIsVisible\">\n <div class=\"ng-doc-blur-content\">\n <ng-container\n *polymorpheusOutlet=\"blurContent as text; context: getBlurContext(blurContext)\">\n {{ text }}\n </ng-container>\n </div>\n </div>\n </div>\n <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n </label>\n </ng-doc-floated-border>\n</ng-doc-wrapper>\n", styles: [":host{position:relative;display:block;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);--ng-doc-icon-width: 40px;--ng-doc-icon-height: var(--ng-doc-input-height)}:host:hover:not([data-ng-doc-input-disabled=true]){--ng-doc-input-border: var(--ng-doc-input-border-hover)}:host:not([data-ng-doc-input-disabled=true]) ::ng-deep .ng-doc-input:read-only{--ng-doc-input-cursor: pointer}:host[data-ng-doc-align=left]{--ng-doc-input-text-align: left}:host[data-ng-doc-align=center]{--ng-doc-input-text-align: center}:host[data-ng-doc-align=right]{--ng-doc-input-text-align: right}:host .ng-doc-input-container{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);position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);background-color:var(--ng-doc-input-background-color);border-radius:var(--ng-doc-floated-border-radius);--ng-doc-line-height: 22px}:host .ng-doc-input-container:after{position:absolute;content:\"\";left:0;top:0;z-index:2;width:100%;height:100%;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);pointer-events:none}:host .ng-doc-input-container.-input-hidden ::ng-deep input{opacity:0}:host .ng-doc-input-container .ng-doc-original-input{width:100%;padding:var(--ng-doc-base-gutter) var(--ng-doc-input-padding-right) var(--ng-doc-base-gutter) var(--ng-doc-input-padding-left)}:host .ng-doc-input-container .ng-doc-original-input:first-child{padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-original-input:last-child{padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-input,:host .ng-doc-input-container ::ng-deep .ng-doc-input{width:100%;height:100%;overflow:hidden;box-sizing:border-box;outline:none;text-align:var(--ng-doc-input-text-align);border:0;border-radius:var(--ng-doc-floated-border-radius);background-color:transparent;cursor:var(--ng-doc-input-cursor);color:var(--ng-doc-input-color, var(--ng-doc-text));font-family:var(--ng-doc-input-font-family, var(--ng-doc-font-family));font-size:var(--ng-doc-input-font-size, var(--ng-doc-font-size));font-weight:var(--ng-doc-input-font-weight, var(--ng-doc-font-weight))}:host .ng-doc-input-container .ng-doc-input::placeholder,:host .ng-doc-input-container ::ng-deep .ng-doc-input::placeholder{color:var(--ng-doc-text-muted)}:host .ng-doc-input-container .ng-doc-input.-blink,:host .ng-doc-input-container ::ng-deep .ng-doc-input.-blink{animation:blink-animation .3s}@keyframes blink-animation{0%{background-color:rgba(var(--ng-doc-primary-rgb),.1)}to{background-color:initial}}:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-outer-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .ng-doc-content{--ng-doc-icon-width: 40px;--ng-doc-icon-height: 40px}ng-doc-floated-border{width:var(--ng-doc-input-width);height:var(--ng-doc-input-height)}.ng-doc-button-content{display:flex}.ng-doc-blur-container{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none}.ng-doc-blur-container .ng-doc-blur-content{width:100%;white-space:nowrap;overflow:hidden;padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2));padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}\n"], dependencies: [{ kind: "component", type: NgDocWrapperComponent, selector: "ng-doc-wrapper" }, { kind: "directive", type: NgDocFocusCatcherDirective, selector: "[ngDocFocusCatcher]", outputs: ["focusEvent", "blurEvent"], exportAs: ["ngDocFocusCatcher"] }, { kind: "component", type: NgDocFloatedBorderComponent, selector: "ng-doc-floated-border" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
};
__decorate([
ngDocMakePure,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", Object)
], NgDocInputWrapperComponent.prototype, "getBlurContext", null);
NgDocInputWrapperComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [ElementRef,
ChangeDetectorRef])
], NgDocInputWrapperComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocInputWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-input-wrapper', providers: [
{
provide: NgDocInputHost,
useExisting: NgDocInputWrapperComponent,
},
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocWrapperComponent,
NgDocFocusCatcherDirective,
NgDocFloatedBorderComponent,
NgIf,
PolymorpheusModule,
NgDocFloatedContentComponent,
], template: "<ng-doc-wrapper ngDocFocusCatcher>\n <ng-doc-floated-border>\n <label\n class=\"ng-doc-input-container\"\n (focusin)=\"emptyEvent()\"\n (focusout)=\"emptyEvent()\"\n [class.-input-hidden]=\"blurContentIsVisible\">\n <ng-content select=\"[ngDocInputWrapperLeft]\"></ng-content>\n <div class=\"ng-doc-original-input\">\n <ng-content></ng-content>\n <div class=\"ng-doc-blur-container ng-doc-input\" *ngIf=\"blurContentIsVisible\">\n <div class=\"ng-doc-blur-content\">\n <ng-container\n *polymorpheusOutlet=\"blurContent as text; context: getBlurContext(blurContext)\">\n {{ text }}\n </ng-container>\n </div>\n </div>\n </div>\n <ng-content select=\"[ngDocInputWrapperRight]\"></ng-content>\n </label>\n </ng-doc-floated-border>\n</ng-doc-wrapper>\n", styles: [":host{position:relative;display:block;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);--ng-doc-icon-width: 40px;--ng-doc-icon-height: var(--ng-doc-input-height)}:host:hover:not([data-ng-doc-input-disabled=true]){--ng-doc-input-border: var(--ng-doc-input-border-hover)}:host:not([data-ng-doc-input-disabled=true]) ::ng-deep .ng-doc-input:read-only{--ng-doc-input-cursor: pointer}:host[data-ng-doc-align=left]{--ng-doc-input-text-align: left}:host[data-ng-doc-align=center]{--ng-doc-input-text-align: center}:host[data-ng-doc-align=right]{--ng-doc-input-text-align: right}:host .ng-doc-input-container{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);position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--ng-doc-input-width);height:var(--ng-doc-input-height);background-color:var(--ng-doc-input-background-color);border-radius:var(--ng-doc-floated-border-radius);--ng-doc-line-height: 22px}:host .ng-doc-input-container:after{position:absolute;content:\"\";left:0;top:0;z-index:2;width:100%;height:100%;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);pointer-events:none}:host .ng-doc-input-container.-input-hidden ::ng-deep input{opacity:0}:host .ng-doc-input-container .ng-doc-original-input{width:100%;padding:var(--ng-doc-base-gutter) var(--ng-doc-input-padding-right) var(--ng-doc-base-gutter) var(--ng-doc-input-padding-left)}:host .ng-doc-input-container .ng-doc-original-input:first-child{padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-original-input:last-child{padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}:host .ng-doc-input-container .ng-doc-input,:host .ng-doc-input-container ::ng-deep .ng-doc-input{width:100%;height:100%;overflow:hidden;box-sizing:border-box;outline:none;text-align:var(--ng-doc-input-text-align);border:0;border-radius:var(--ng-doc-floated-border-radius);background-color:transparent;cursor:var(--ng-doc-input-cursor);color:var(--ng-doc-input-color, var(--ng-doc-text));font-family:var(--ng-doc-input-font-family, var(--ng-doc-font-family));font-size:var(--ng-doc-input-font-size, var(--ng-doc-font-size));font-weight:var(--ng-doc-input-font-weight, var(--ng-doc-font-weight))}:host .ng-doc-input-container .ng-doc-input::placeholder,:host .ng-doc-input-container ::ng-deep .ng-doc-input::placeholder{color:var(--ng-doc-text-muted)}:host .ng-doc-input-container .ng-doc-input.-blink,:host .ng-doc-input-container ::ng-deep .ng-doc-input.-blink{animation:blink-animation .3s}@keyframes blink-animation{0%{background-color:rgba(var(--ng-doc-primary-rgb),.1)}to{background-color:initial}}:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container .ng-doc-input[type=number]::-webkit-outer-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-inner-spin-button,:host .ng-doc-input-container ::ng-deep .ng-doc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .ng-doc-content{--ng-doc-icon-width: 40px;--ng-doc-icon-height: 40px}ng-doc-floated-border{width:var(--ng-doc-input-width);height:var(--ng-doc-input-height)}.ng-doc-button-content{display:flex}.ng-doc-blur-container{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none}.ng-doc-blur-container .ng-doc-blur-content{width:100%;white-space:nowrap;overflow:hidden;padding-left:var(--ng-doc-input-padding-left, calc(var(--ng-doc-base-gutter) * 2));padding-right:var(--ng-doc-input-padding-right, calc(var(--ng-doc-base-gutter) * 2))}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { blurContent: [{
type: Input
}], blurContext: [{
type: Input
}], align: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-align']
}], input: [{
type: ContentChild,
args: [NgDocBaseInput]
}], inputControl: [{
type: ContentChild,
args: [NgDocBaseInput]
}], focusCatcher: [{
type: ViewChild,
args: [NgDocFocusCatcherDirective, { static: true }]
}], getBlurContext: [], disabled: [{
type: HostBinding,
args: ['attr.data-ng-doc-input-disabled']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocInputWrapperComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-input-wrapper.mjs.map