UNPKG

@taiga-ui/kit

Version:
16 lines (14 loc) 14.1 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@taiga-ui/cdk"),require("@taiga-ui/core"),require("@taiga-ui/kit/abstract"),require("@angular/common"),require("@taiga-ui/kit/components/slider"),require("angular2-text-mask")):"function"==typeof define&&define.amd?define("@taiga-ui/kit/components/input-slider",["exports","@angular/core","@angular/forms","@taiga-ui/cdk","@taiga-ui/core","@taiga-ui/kit/abstract","@angular/common","@taiga-ui/kit/components/slider","angular2-text-mask"],t):t(((e=e||self)["taiga-ui"]=e["taiga-ui"]||{},e["taiga-ui"].kit=e["taiga-ui"].kit||{},e["taiga-ui"].kit.components=e["taiga-ui"].kit.components||{},e["taiga-ui"].kit.components["input-slider"]={}),e.ng.core,e.ng.forms,e.cdk,e.core$1,e["taiga-ui"].kit.abstract,e.ng.common,e["taiga-ui"].kit.components.slider,e.angular2TextMask)}(this,(function(e,t,o,n,i,a,r,l,s){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */var u=function(e,t){return(u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])})(e,t)};function d(e,t,o,n){var i,a=arguments.length,r=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(r=(a<3?i(r):a>3?i(t,o,r):i(t,o))||r);return a>3&&r&&Object.defineProperty(t,o,r),r}function c(e,t){return function(o,n){t(o,n,e)}}var p=function(e){function a(t,o,n,i){var a=e.call(this,t,o)||this;return a.modeDirective=n,a.hintController=i,a.secondary="",a}var r;return function(e,t){function o(){this.constructor=e}u(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}(a,e),r=a,Object.defineProperty(a.prototype,"nativeFocusableElement",{get:function(){return!this.focusableElement||this.computedDisabled?null:this.focusableElement.nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"focused",{get:function(){return n.isNativeFocused(this.nativeFocusableElement)},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"hasTooltip",{get:function(){return!!this.hintController.content&&!this.disabled},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"showMinLabel",{get:function(){return!this.focused&&this.value===this.min&&!!this.minLabel},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"showMaxLabel",{get:function(){return!this.focused&&this.value===this.max&&!!this.maxLabel},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"computedValue",{get:function(){return this.focused&&this.isInputValueNotFinished?this.inputValue:this.formattedValue},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"showValue",{get:function(){return!this.showMinLabel&&!this.showMaxLabel},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"inputValue",{get:function(){return this.focusableElement?this.focusableElement.nativeElement.value:""},set:function(e){this.focusableElement&&(this.focusableElement.nativeElement.value=e)},enumerable:!0,configurable:!0}),a.prototype.onMouseDown=function(){this.focusableElement&&n.setNativeFocused(this.focusableElement.nativeElement)},a.prototype.onKeyDownArrowUp=function(e){this.readOnly||(e.preventDefault(),this.processStep(!0),this.inputValue=this.formattedValue)},a.prototype.onKeyDownArrowDown=function(e){this.readOnly||(e.preventDefault(),this.processStep(!1),this.inputValue=this.formattedValue)},a.prototype.onFocused=function(e){if(this.updateFocused(e),!e){var t=i.maskedNumberStringToNumber(this.computedValue),o=isNaN(t)?this.min:this.valueGuard(t);this.updateValue(o),this.inputValue=this.formattedValue}},a.prototype.onValue=function(e){var t=this.capInputValue(e),o=","===e.slice(-1)[0]?",":"";if(!i.maskedMoneyValueIsEmpty(e)&&null!==t){var n=i.formatNumber(t)+o;e!==n&&(this.inputValue=n),this.updateValue(t)}},a.prototype.onSliderValue=function(e){this.updateValue(this.valueGuard(e)),this.inputValue=this.formattedValue},a.prototype.getFallbackValue=function(){return 0},Object.defineProperty(a.prototype,"formattedValue",{get:function(){return i.formatNumber(this.value)},enumerable:!0,configurable:!0}),Object.defineProperty(a.prototype,"isInputValueNotFinished",{get:function(){if(""===this.inputValue)return!0;var e=i.maskedNumberStringToNumber(this.inputValue);return e<0?e>this.max:e<this.min},enumerable:!0,configurable:!0}),a.prototype.processStep=function(e){var t=this.valueGuard(e?this.value+this.step:this.value-this.step);t!==this.value&&this.updateValue(t)},a.ctorParameters=function(){return[{type:o.NgControl,decorators:[{type:t.Optional},{type:t.Self},{type:t.Inject,args:[o.NgControl]}]},{type:t.ChangeDetectorRef,decorators:[{type:t.Inject,args:[t.ChangeDetectorRef]}]},{type:i.TuiModeDirective,decorators:[{type:t.Optional},{type:t.Inject,args:[i.TuiModeDirective]}]},{type:i.TuiHintControllerDirective,decorators:[{type:t.Inject,args:[i.TUI_HINT_WATCHED_CONTROLLER]}]}]},d([t.Input(),n.tuiDefaultProp()],a.prototype,"secondary",void 0),d([t.ViewChild("focusableElement")],a.prototype,"focusableElement",void 0),d([t.HostBinding("class._has-tooltip")],a.prototype,"hasTooltip",null),d([t.HostBinding("class._min-label")],a.prototype,"showMinLabel",null),d([t.HostBinding("class._max-label")],a.prototype,"showMaxLabel",null),a=r=d([t.Component({selector:"tui-input-slider",template:'<tui-wrapper\n appearance="textfield"\n [readOnly]="readOnly"\n [disabled]="disabled"\n [focused]="computedFocused"\n [hovered]="computedHovered"\n [invalid]="computedInvalid"\n>\n <span\n *ngIf="hasPlaceholder"\n class="placeholder"\n automation-id="tui-input-slider__placeholder"\n >\n <ng-content></ng-content>\n </span>\n <input\n #focusableElement\n class="native"\n automation-id="tui-input-slider__native"\n [disabled]="disabled"\n [readOnly]="readOnly"\n [tuiInputMode]="inputMode"\n [tuiFocusable]="focusable"\n [textMask]="quantum | tuiMapper: mask: min"\n [ngModel]="computedValue"\n (ngModelChange)="onValue($event)"\n (tuiFocusedChange)="onFocused($event)"\n (tuiHoveredChange)="onHovered($event)"\n (keydown.arrowUp)="onKeyDownArrowUp($event)"\n (keydown.arrowDown)="onKeyDownArrowDown($event)"\n />\n <div class="content">\n <span *ngIf="showValue" class="label">\n <span class="value">{{computedValue}}</span>\n <span\n *ngIf="isPluralized(pluralize)"\n automation-id="tui-input-slider__pluralize"\n >\n {{value | tuiPluralize: pluralize}}\n </span>\n </span>\n <span\n *ngIf="showMinLabel"\n class="label"\n automation-id="tui-input-slider__min-label"\n >\n {{minLabel}}\n </span>\n <span\n *ngIf="showMaxLabel"\n class="label"\n automation-id="tui-input-slider__max-label"\n >\n {{maxLabel}}\n </span>\n <span class="secondary" automation-id="tui-input-slider__secondary">\n {{secondary}}\n <tui-tooltip\n *ngIf="hasTooltip"\n automation-id="tui-input-slider__tooltip"\n class="tooltip"\n describeId="placeholer_until_accesibility_is_added"\n [content]="hintController.content"\n [direction]="hintController.direction"\n [mode]="hintController.mode"\n (mousedown.prevent)="onMouseDown()"\n ></tui-tooltip>\n </span>\n </div>\n</tui-wrapper>\n<tui-slider\n class="slider"\n [min]="min"\n [max]="max"\n [steps]="computedSteps"\n [segments]="segments"\n [keySteps]="keySteps"\n [pluralize]="segmentsPluralize"\n [focusable]="false"\n [disabled]="readOnly || disabled"\n [ngModel]="value"\n (ngModelChange)="onSliderValue($event)"\n (mousedown)="onMouseDown()"\n></tui-slider>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:n.TUI_FOCUSABLE_ITEM_ACCESSOR,useExisting:t.forwardRef((function(){return r}))},i.HINT_CONTROLLER_PROVIDER],styles:[":host{font:var(--tui-font-text-m);position:relative;z-index:0;display:block;border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host._segmented{border-bottom:26px solid transparent}.native{position:absolute;top:0;left:0;height:100%;padding:0 16px;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;width:100%;color:var(--tui-text-01);box-sizing:border-box;outline:0}.native:-webkit-autofill,.native:-webkit-autofill:focus,.native:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}:host._disabled .native{color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._max-label .native,:host._min-label .native{opacity:0}:host[data-tui-host-size='l'] .native{padding:20px 16px 0}:host[data-mode=onDark] .native{color:var(--tui-text-01-night)}:host[data-mode=onDark]._disabled .native{color:var(--tui-text-03-night)}.content{display:flex;align-items:center;height:var(--tui-height-m);padding:0 16px;justify-content:space-between}:host[data-tui-host-size='l'] .content{height:var(--tui-height-l);padding:0 16px}.placeholder{transition-property:transform,min-width,color,letter-spacing;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:13px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;color:var(--tui-text-02);transform-origin:left;letter-spacing:normal;text-transform:none;position:absolute;top:0;width:100%;height:100%;left:16px;transform:translateY(-10px) scale(.87);line-height:var(--tui-height-l);max-width:calc(114% - 32px)}.placeholder_raised{width:114%;transform:translateY(-10px) scale(.87)}:host[data-tui-host-size='m'] .placeholder_raised{width:118%;transform:translateY(-8px) scale(.85);letter-spacing:.4px}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-tui-host-size='l']._focused._label-outside .placeholder,:host[data-tui-host-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-tui-host-size='l'] .placeholder{font-size:15px}:host[data-tui-host-size='l']._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-tui-host-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}:host._has-tooltip .placeholder{max-width:calc(114% - 60px)}.value{visibility:hidden}.label{line-height:15px;overflow:hidden;text-overflow:ellipsis}:host[data-tui-host-size='l'] .label{padding-top:20px}.secondary{color:var(--tui-text-01)}:host._disabled .secondary{color:var(--tui-text-03)}:host[data-mode=onDark]._disabled .secondary{color:var(--tui-text-03-night)}.tooltip{margin-left:12px}.slider{position:absolute;top:100%;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0;margin:-9px 0 0;color:transparent}:host._disabled .slider,:host._readonly .slider{pointer-events:none}"]}),c(0,t.Optional()),c(0,t.Self()),c(0,t.Inject(o.NgControl)),c(1,t.Inject(t.ChangeDetectorRef)),c(2,t.Optional()),c(2,t.Inject(i.TuiModeDirective)),c(3,t.Inject(i.TUI_HINT_WATCHED_CONTROLLER))],a)}(a.AbstractTuiInputSlider),h=function(){function e(){}return e=d([t.NgModule({imports:[r.CommonModule,o.FormsModule,o.ReactiveFormsModule,s.TextMaskModule,n.TuiFocusableModule,n.TuiFocusedModule,n.TuiHoveredModule,n.TuiPressedModule,n.TuiMapperPipeModule,n.TuiInputModeModule,i.TuiPluralizePipeModule,i.TuiTooltipModule,l.TuiSliderModule,i.TuiWrapperModule],declarations:[p],exports:[p]})],e)}();e.TuiInputSliderComponent=p,e.TuiInputSliderModule=h,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=taiga-ui-kit-components-input-slider.umd.min.js.map