@hug/ngx-numeric-stepper
Version:
HUG Angular - numeric stepper component
228 lines (224 loc) • 35.2 kB
JavaScript
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, ChangeDetectorRef, DestroyRef, HostBinding, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatIcon } from '@angular/material/icon';
import { filterMap } from '@hug/ngx-core';
import { Subject, ReplaySubject, timer, map, filter, shareReplay, debounceTime, withLatestFrom, tap, switchMap, fromEvent, mergeWith, startWith, delay, combineLatestWith } from 'rxjs';
// TODO sdil refactor rxjs flows
class NgxNumericStepperComponent {
static TYPE_ERROR = 'Input element on the same mat-form-field must be type="number". With other input type, use increment or decrement events and implement your proper functions to change the value.';
static STEP_FN_ERROR = 'Input element on the same mat-form-field must implement stepDown/stepUp functions.';
static INPUT_ERROR = 'To use the automatic binding, you must specify the input field with a matInput reference. [input]="matInputRef"';
layout = 'vertical';
increment = new EventEmitter();
decrement = new EventEmitter();
input;
set arrowIcons(value) {
this._arrowIcons = coerceBooleanProperty(value);
}
get arrowIcons() {
return this._arrowIcons;
}
set showOnInit(value) {
this._showOnInit = coerceBooleanProperty(value);
}
get showOnInit() {
return this._showOnInit;
}
hover = null;
leftUp = undefined;
leftDown = undefined;
topUp = undefined;
topDown = undefined;
leftShadow = undefined;
topShadow = undefined;
widthShadow = undefined;
heightShadow = undefined;
disableUp = false;
disableDown = false;
clickArrow$ = new Subject();
show$ = new ReplaySubject(1);
elementRef = inject(ElementRef);
changeDetectorRef = inject(ChangeDetectorRef);
destroyRef = inject(DestroyRef);
validateArrows$ = new Subject();
_arrowIcons = false;
_showOnInit = false;
arrowSize = 32;
parentAppearance;
ngOnInit() {
const calcPositions = (inputElement, formFieldElement, containerElement) => {
const containerBounds = containerElement?.getBoundingClientRect();
const formFieldBounds = formFieldElement?.getBoundingClientRect() ?? {};
const inputBounds = inputElement?.getBoundingClientRect() ?? formFieldBounds;
const bounds = this.elementRef.nativeElement.getBoundingClientRect();
this.validateArrows$.next();
// Ensure delayed hover in case of the mouse leave accidentally
formFieldElement?.setAttribute('hover', '');
if (this.layout === 'horizontal') {
const height = containerBounds?.height || formFieldBounds.height;
this.heightShadow = Math.min(54, height) + 2;
this.topShadow = (containerBounds?.top ?? inputBounds.top + (inputBounds.height - this.heightShadow) / 2 - 5) - bounds.top;
this.leftDown = this.leftShadow = formFieldBounds.left - bounds.left - 28;
this.leftUp = formFieldBounds.right - bounds.left;
this.widthShadow = this.leftUp - this.leftDown + 28;
if (this.parentAppearance === 'FILL') {
this.heightShadow -= 2;
}
this.topUp = this.topDown = inputBounds.top + (inputBounds.height - this.arrowSize) / 2 - bounds.top;
}
else if (this.layout === 'horizontal-inlay') {
this.heightShadow = Math.min(54, containerBounds?.height || formFieldBounds.height) + 4;
this.topShadow = containerBounds?.top ?? (inputBounds.top + (inputBounds.height - this.heightShadow) / 2 - 5) - bounds.top;
this.leftDown = this.leftShadow = formFieldBounds.left - bounds.left;
this.leftUp = formFieldBounds.right - bounds.left - 28;
this.widthShadow = this.leftUp - this.leftDown + 28;
if (this.parentAppearance === 'FILL') {
this.heightShadow -= 2;
}
this.topUp = this.topDown = inputBounds.top + (inputBounds.height - this.arrowSize) / 2 - bounds.top;
}
else {
this.heightShadow = 90;
this.topShadow = inputBounds.top - bounds.top + (inputBounds.height - this.heightShadow) / 2;
this.leftShadow = (containerBounds?.left ?? formFieldBounds.left) - bounds.left;
this.topUp = this.topShadow;
this.topDown = this.topShadow + this.heightShadow - this.arrowSize;
this.widthShadow = containerBounds?.width || formFieldBounds.width;
this.leftUp = this.leftDown = formFieldBounds.left + (formFieldBounds.width - this.arrowSize) / 2 - bounds.left;
}
this.changeDetectorRef.markForCheck();
};
const linkedElements$ = timer(100).pipe(map(() => {
// Find form field
let parentElement = this.elementRef.nativeElement.parentElement;
let formFieldElement;
let containerElement;
let inputElement;
// eslint-disable-next-line no-loops/no-loops
while (parentElement) {
if (parentElement.tagName === 'MAT-FORM-FIELD' || parentElement.hasAttribute('ngx-numeric-stepper-form-field')) {
formFieldElement = parentElement;
}
if (parentElement.hasAttribute('ngx-numeric-stepper-container')) {
containerElement = parentElement;
}
if (containerElement && formFieldElement) {
break;
}
parentElement = parentElement.parentElement;
}
if (formFieldElement) {
formFieldElement.setAttribute('ngx-numeric-stepper-form-field', this.layout);
this.parentAppearance = formFieldElement.getAttribute('appearance')?.toUpperCase();
}
if (!formFieldElement) {
console.error('ngx-numeric-stepper work only inside a mat-form-field or a [ngx-numeric-stepper-form-field] element');
}
else {
inputElement = formFieldElement.getElementsByTagName('INPUT')?.[0] || null;
if (!inputElement) {
console.error('ngx-numeric-stepper work only inside a mat-form-field or a [ngx-numeric-stepper-form-field] element containing an input element');
}
}
return [inputElement, formFieldElement, containerElement];
}), filter(([inputElement, formFieldElement]) => !!formFieldElement && !!inputElement), shareReplay({ bufferSize: 1, refCount: false }));
const step = (inputElement, event, fn) => {
if (this[event].observed) {
this[event].emit();
}
else {
if (inputElement?.type !== 'number') {
throw new Error(NgxNumericStepperComponent.TYPE_ERROR);
}
if (!inputElement[fn]) {
throw new Error(NgxNumericStepperComponent.STEP_FN_ERROR);
}
if (!this.input?.ngControl?.control) {
throw new Error(NgxNumericStepperComponent.INPUT_ERROR);
}
inputElement[fn]();
this.input.ngControl.control.setValue(+inputElement.value);
}
this.validateArrows$.next();
};
const step$ = this.clickArrow$.pipe(debounceTime(10), withLatestFrom(linkedElements$), tap(([isUp, [inputElement]]) => {
if (isUp && !this.disableUp && inputElement) {
step(inputElement, 'increment', 'stepUp');
}
if (!isUp && !this.disableDown && inputElement) {
step(inputElement, 'decrement', 'stepDown');
}
}), shareReplay({ bufferSize: 1, refCount: false }));
const valueChange$ = linkedElements$.pipe(filterMap(([inputElement]) => inputElement), switchMap(inputElement => fromEvent(inputElement, 'input').pipe(mergeWith(step$, fromEvent(inputElement, 'paste'), fromEvent(inputElement, 'keypress')))), debounceTime(50), startWith(undefined));
linkedElements$.pipe(switchMap(([inputElement, formFieldElement, containerElement]) => {
const element = containerElement ?? formFieldElement;
if (!element) {
return [];
}
return fromEvent(element, 'mouseenter').pipe(switchMap(() => valueChange$), mergeWith(this.show$.pipe(delay(200))), tap(() => calcPositions(inputElement, formFieldElement, containerElement)), switchMap(() => fromEvent(element, 'mouseleave')), delay(400), tap(() => {
formFieldElement?.removeAttribute('hover');
}));
}), takeUntilDestroyed(this.destroyRef)).subscribe();
linkedElements$.pipe(filterMap(([_, formFieldElement]) => formFieldElement), switchMap(formFieldElement => fromEvent(formFieldElement, 'keydown')), filter(e => {
const keyCode = (e.code || e.key);
if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
this.clickArrow$.next(keyCode === 'ArrowUp');
return true;
}
return false;
}), takeUntilDestroyed(this.destroyRef)).subscribe(event => {
event.preventDefault();
return false;
});
linkedElements$.pipe(combineLatestWith(this.validateArrows$), filterMap(([[inputElement]]) => inputElement), debounceTime(1), takeUntilDestroyed(this.destroyRef)).subscribe(inputElement => {
if (inputElement.disabled) {
this.disableDown = true;
this.disableUp = true;
}
else {
const min = inputElement.min;
this.disableDown = min !== '' && !isNaN(+min) && +inputElement.value <= +min;
const max = inputElement.max;
this.disableUp = max !== '' && !isNaN(+max) && +inputElement.value >= +max;
}
this.changeDetectorRef.markForCheck();
});
step$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
if (this.showOnInit) {
this.show$.next();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxNumericStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NgxNumericStepperComponent, isStandalone: true, selector: "ngx-numeric-stepper", inputs: { layout: "layout", input: "input", arrowIcons: "arrowIcons", showOnInit: "showOnInit" }, outputs: { increment: "increment", decrement: "decrement" }, host: { properties: { "attr.layout": "this.layout", "attr.hover": "this.hover" } }, ngImport: i0, template: "@if (leftUp !== null) {\n <mat-icon\n class=\"arrow noselect increment\"\n [attr.disabled]=\"disableUp || null\"\n [style.left.px]=\"leftUp\"\n [style.top.px]=\"topUp\"\n (click)=\"clickArrow$.next(true)\">\n {{ (!arrowIcons && 'add') || (layout === 'vertical' && 'keyboard_arrow_up') || 'keyboard_arrow_right' }}\n </mat-icon>\n}\n@if (leftDown !== null) {\n <mat-icon\n class=\"arrow noselect decrement\"\n [attr.disabled]=\"disableDown || null\"\n [style.left.px]=\"leftDown\"\n [style.top.px]=\"topDown\"\n (click)=\"clickArrow$.next(false)\">\n {{ (!arrowIcons && 'remove') || (layout === 'vertical' && 'keyboard_arrow_down') || 'keyboard_arrow_left' }}\n </mat-icon>\n}\n@if (widthShadow !== null) {\n <div\n class=\"shadow\"\n [style.left.px]=\"leftShadow\"\n [style.width.px]=\"widthShadow\"\n [style.top.px]=\"topShadow\"\n [style.height.px]=\"heightShadow\"></div>\n}\n", styles: ["[ngx-numeric-stepper-container]{width:max-content}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled{overflow:visible;background-color:transparent}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdcform-field-focus-overlay,[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mdc-line-ripple,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mat-mdcform-field-focus-overlay,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mdc-line-ripple{transition:opacity ease-out;opacity:0}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-flex,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mat-mdc-form-field-flex{background-color:transparent}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .shadow,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .shadow{background-color:#f5f5f5}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align,[ngx-numeric-stepper-form-field]:hover .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{visibility:hidden}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover .mdc-floating-label,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover .mdc-floating-label{opacity:0!important}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover.mat-mdc-form-field-invalid .mat-mdc-form-field-subscript-wrapper,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover.mat-mdc-form-field-invalid .mat-mdc-form-field-subscript-wrapper{visibility:hidden}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled) input:not([ngx-input-autosize]),[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled) input:not([ngx-input-autosize]){width:calc(100% - 64px)}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([float-label=always]) .mdc-floating-label.mat-mdc-empty,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([float-label=always]) .mdc-floating-label.mat-mdc-empty{padding-left:23px}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field] .mat-mdc-form-field-infix,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field] .mat-mdc-form-field-infix{padding:1em 23px}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field].mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field].mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix{padding:1em 18px}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([ngx-input-autosize-form-field]).mat-mdc-form-field-appearance-fill input,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([ngx-input-autosize-form-field]).mat-mdc-form-field-appearance-fill input{margin:0 18px}[ngx-numeric-stepper-container] .mat-mdc-form-field .noselect,[ngx-numeric-stepper-form-field] .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[ngx-numeric-stepper-container] .mat-mdc-form-field *,[ngx-numeric-stepper-form-field] *{transition:opacity .25s ease-out}[ngx-numeric-stepper-container] .mat-mdc-form-field input::-webkit-inner-spin-button,[ngx-numeric-stepper-container] .mat-mdc-form-field input::-webkit-outer-spin-button,[ngx-numeric-stepper-form-field] input::-webkit-inner-spin-button,[ngx-numeric-stepper-form-field] input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important;-moz-appearance:textfield!important}[ngx-numeric-stepper-container] .mat-mdc-form-field .mat-mdc-input-element,[ngx-numeric-stepper-form-field] .mat-mdc-input-element{text-align:center}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover input,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover input{z-index:10001}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .shadow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .arrow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .shadow{opacity:1}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mdc-notched-outline__trailing,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mdc-notched-outline__leading,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mdc-notched-outline__notch,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mdc-notched-outline__trailing,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mdc-notched-outline__leading,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mdc-notched-outline__notch{border:0!important}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mat-mdc-form-field-text-suffix,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mat-mdc-form-field-text-prefix,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mat-mdc-form-field-text-suffix,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mat-mdc-form-field-text-prefix{opacity:0}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover input,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-form-field]:not(.disabled):hover input{z-index:10003}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover input,[ngx-numeric-stepper-form-field]:not(.disabled):hover input{position:relative}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .shadow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled)[hover] .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled)[hover] .shadow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .arrow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .shadow,[ngx-numeric-stepper-form-field]:not(.disabled)[hover] .arrow,[ngx-numeric-stepper-form-field]:not(.disabled)[hover] .shadow{visibility:visible}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper,[ngx-numeric-stepper-form-field] ngx-numeric-stepper{z-index:10002;position:relative}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .shadow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .arrow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .shadow{position:absolute;visibility:hidden;opacity:0}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .arrow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .arrow{cursor:pointer;display:flex;justify-content:center;align-items:center;box-sizing:border-box;z-index:10004;height:32px;width:32px}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .arrow[disabled=true],[ngx-numeric-stepper-form-field] ngx-numeric-stepper .arrow[disabled=true]{cursor:default}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .shadow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .shadow{border-radius:4px;box-shadow:0 2px 4px #0000004d}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .increment,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .increment{border-radius:4px 4px 0 0}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .decrement,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .decrement{border-radius:0 0 4px 4px}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal] .increment,[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal-inlay] .increment,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal] .increment,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal-inlay] .increment{border-radius:0 4px 4px 0}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal] .decrement,[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal-inlay] .decrement,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal] .decrement,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal-inlay] .decrement{border-radius:4px 0 0 4px}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .shadow:after,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .shadow:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxNumericStepperComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-numeric-stepper', imports: [
MatIcon
], encapsulation: ViewEncapsulation.None, template: "@if (leftUp !== null) {\n <mat-icon\n class=\"arrow noselect increment\"\n [attr.disabled]=\"disableUp || null\"\n [style.left.px]=\"leftUp\"\n [style.top.px]=\"topUp\"\n (click)=\"clickArrow$.next(true)\">\n {{ (!arrowIcons && 'add') || (layout === 'vertical' && 'keyboard_arrow_up') || 'keyboard_arrow_right' }}\n </mat-icon>\n}\n@if (leftDown !== null) {\n <mat-icon\n class=\"arrow noselect decrement\"\n [attr.disabled]=\"disableDown || null\"\n [style.left.px]=\"leftDown\"\n [style.top.px]=\"topDown\"\n (click)=\"clickArrow$.next(false)\">\n {{ (!arrowIcons && 'remove') || (layout === 'vertical' && 'keyboard_arrow_down') || 'keyboard_arrow_left' }}\n </mat-icon>\n}\n@if (widthShadow !== null) {\n <div\n class=\"shadow\"\n [style.left.px]=\"leftShadow\"\n [style.width.px]=\"widthShadow\"\n [style.top.px]=\"topShadow\"\n [style.height.px]=\"heightShadow\"></div>\n}\n", styles: ["[ngx-numeric-stepper-container]{width:max-content}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled{overflow:visible;background-color:transparent}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdcform-field-focus-overlay,[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mdc-line-ripple,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mat-mdcform-field-focus-overlay,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mdc-line-ripple{transition:opacity ease-out;opacity:0}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-flex,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .mat-mdc-form-field-flex{background-color:transparent}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mdc-text-field--filled .shadow,[ngx-numeric-stepper-form-field]:hover .mdc-text-field--filled .shadow{background-color:#f5f5f5}[ngx-numeric-stepper-container] .mat-mdc-form-field:hover .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align,[ngx-numeric-stepper-form-field]:hover .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{visibility:hidden}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover .mdc-floating-label,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover .mdc-floating-label{opacity:0!important}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover.mat-mdc-form-field-invalid .mat-mdc-form-field-subscript-wrapper,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=vertical]:not(.disabled):hover.mat-mdc-form-field-invalid .mat-mdc-form-field-subscript-wrapper{visibility:hidden}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled) input:not([ngx-input-autosize]),[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled) input:not([ngx-input-autosize]){width:calc(100% - 64px)}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([float-label=always]) .mdc-floating-label.mat-mdc-empty,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([float-label=always]) .mdc-floating-label.mat-mdc-empty{padding-left:23px}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field] .mat-mdc-form-field-infix,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field] .mat-mdc-form-field-infix{padding:1em 23px}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field].mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover[ngx-input-autosize-form-field].mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix{padding:1em 18px}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([ngx-input-autosize-form-field]).mat-mdc-form-field-appearance-fill input,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover:not([ngx-input-autosize-form-field]).mat-mdc-form-field-appearance-fill input{margin:0 18px}[ngx-numeric-stepper-container] .mat-mdc-form-field .noselect,[ngx-numeric-stepper-form-field] .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[ngx-numeric-stepper-container] .mat-mdc-form-field *,[ngx-numeric-stepper-form-field] *{transition:opacity .25s ease-out}[ngx-numeric-stepper-container] .mat-mdc-form-field input::-webkit-inner-spin-button,[ngx-numeric-stepper-container] .mat-mdc-form-field input::-webkit-outer-spin-button,[ngx-numeric-stepper-form-field] input::-webkit-inner-spin-button,[ngx-numeric-stepper-form-field] input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important;-moz-appearance:textfield!important}[ngx-numeric-stepper-container] .mat-mdc-form-field .mat-mdc-input-element,[ngx-numeric-stepper-form-field] .mat-mdc-input-element{text-align:center}[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-container] .mat-mdc-form-field[ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover input,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-form-field][ngx-numeric-stepper-form-field=horizontal-inlay]:not(.disabled):hover input{z-index:10001}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .shadow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .arrow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .shadow{opacity:1}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mdc-notched-outline__trailing,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mdc-notched-outline__leading,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mdc-notched-outline__notch,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mdc-notched-outline__trailing,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mdc-notched-outline__leading,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mdc-notched-outline__notch{border:0!important}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mat-mdc-form-field-text-suffix,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mat-mdc-form-field-text-prefix,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mat-mdc-form-field-text-suffix,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mat-mdc-form-field-text-prefix{opacity:0}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover input,[ngx-numeric-stepper-form-field]:not(.disabled):hover .mat-mdc-floating-label,[ngx-numeric-stepper-form-field]:not(.disabled):hover input{z-index:10003}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover input,[ngx-numeric-stepper-form-field]:not(.disabled):hover input{position:relative}[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled):hover .shadow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled)[hover] .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field:not(.disabled)[hover] .shadow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .arrow,[ngx-numeric-stepper-form-field]:not(.disabled):hover .shadow,[ngx-numeric-stepper-form-field]:not(.disabled)[hover] .arrow,[ngx-numeric-stepper-form-field]:not(.disabled)[hover] .shadow{visibility:visible}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper,[ngx-numeric-stepper-form-field] ngx-numeric-stepper{z-index:10002;position:relative}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .arrow,[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .shadow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .arrow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .shadow{position:absolute;visibility:hidden;opacity:0}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .arrow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .arrow{cursor:pointer;display:flex;justify-content:center;align-items:center;box-sizing:border-box;z-index:10004;height:32px;width:32px}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .arrow[disabled=true],[ngx-numeric-stepper-form-field] ngx-numeric-stepper .arrow[disabled=true]{cursor:default}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .shadow,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .shadow{border-radius:4px;box-shadow:0 2px 4px #0000004d}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .increment,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .increment{border-radius:4px 4px 0 0}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .decrement,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .decrement{border-radius:0 0 4px 4px}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal] .increment,[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal-inlay] .increment,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal] .increment,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal-inlay] .increment{border-radius:0 4px 4px 0}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal] .decrement,[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper[ngx-layout=horizontal-inlay] .decrement,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal] .decrement,[ngx-numeric-stepper-form-field] ngx-numeric-stepper[ngx-layout=horizontal-inlay] .decrement{border-radius:4px 0 0 4px}[ngx-numeric-stepper-container] .mat-mdc-form-field ngx-numeric-stepper .shadow:after,[ngx-numeric-stepper-form-field] ngx-numeric-stepper .shadow:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%}\n"] }]
}], propDecorators: { layout: [{
type: HostBinding,
args: ['attr.layout']
}, {
type: Input
}], increment: [{
type: Output
}], decrement: [{
type: Output
}], input: [{
type: Input
}], arrowIcons: [{
type: Input
}], showOnInit: [{
type: Input
}], hover: [{
type: HostBinding,
args: ['attr.hover']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgxNumericStepperComponent };
//# sourceMappingURL=hug-ngx-numeric-stepper.mjs.map