@angular-mdc/web
Version:
922 lines (884 loc) • 30.2 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@material/slider')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/slider', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@material/slider'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.slider = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.mdc.slider));
}(this, (function (exports, core, common, forms, coercion, platform, rxjs, operators, base, slider) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) {
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
}
/**
* @fileoverview added by tsickle
* Generated from: slider/slider.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var MDC_SLIDER_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return MdcSlider; })),
multi: true
};
var MdcSliderChange = /** @class */ (function () {
function MdcSliderChange(source, value) {
this.source = source;
this.value = value;
}
return MdcSliderChange;
}());
var MdcSlider = /** @class */ (function (_super) {
__extends(MdcSlider, _super);
function MdcSlider(_platform, _ngZone, _changeDetectorRef, elementRef, tabIndex) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._ngZone = _ngZone;
_this._changeDetectorRef = _changeDetectorRef;
_this.elementRef = elementRef;
/**
* Emits whenever the component is destroyed.
*/
_this._destroyed = new rxjs.Subject();
_this._initialized = false;
_this.tabIndex = 0;
_this._discrete = false;
_this._markers = false;
_this._min = 0;
_this._max = 100;
_this._step = 1;
_this._value = null;
_this._disabled = false;
_this.change = new core.EventEmitter();
_this.input = new core.EventEmitter();
/**
* Emits when the raw value of the slider changes. This is here primarily
* to facilitate the two-way binding for the `value` input.
*/
_this.valueChange = new core.EventEmitter();
/**
* Function when touched
*/
_this._onTouched = (/**
* @return {?}
*/
function () { });
/**
* Function when changed
*/
_this._controlValueAccessorChangeFn = (/**
* @return {?}
*/
function () { });
_this.tabIndex = parseInt(tabIndex, 10) || 0;
_this._root = _this.elementRef.nativeElement;
return _this;
}
Object.defineProperty(MdcSlider.prototype, "discrete", {
get: /**
* @return {?}
*/
function () {
return this._discrete;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._discrete = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSlider.prototype, "markers", {
get: /**
* @return {?}
*/
function () {
return this._markers;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._markers = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSlider.prototype, "min", {
get: /**
* @return {?}
*/
function () {
return this._min;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var min = coercion.coerceNumberProperty(value);
if (min !== this._min) {
this._min = min;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSlider.prototype, "max", {
get: /**
* @return {?}
*/
function () {
return this._max;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var max = coercion.coerceNumberProperty(value);
if (max !== this._max) {
this._max = max;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSlider.prototype, "step", {
get: /**
* @return {?}
*/
function () {
return this._step;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var step = coercion.coerceNumberProperty(value, this._step);
if (step !== this._step) {
this._step = step;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSlider.prototype, "value", {
get: /**
* @return {?}
*/
function () {
if (this._value === null) {
this.value = this.min;
}
return this._value;
},
set: /**
* @param {?} newValue
* @return {?}
*/
function (newValue) {
this._value = coercion.coerceNumberProperty(newValue, null);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSlider.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDisabledState(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcSlider.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.contains(className); }),
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.remove(className); }),
getAttribute: (/**
* @param {?} name
* @return {?}
*/
function (name) { return _this._root.getAttribute(name); }),
setAttribute: (/**
* @param {?} name
* @param {?} value
* @return {?}
*/
function (name, value) { return _this._root.setAttribute(name, value); }),
removeAttribute: (/**
* @param {?} name
* @return {?}
*/
function (name) { return _this._root.removeAttribute(name); }),
computeBoundingRect: (/**
* @return {?}
*/
function () { return _this._root.getBoundingClientRect(); }),
getTabIndex: (/**
* @return {?}
*/
function () { return ((/** @type {?} */ (_this._root))).tabIndex; }),
registerInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return ((/** @type {?} */ (_this._root))).addEventListener(evtType, handler);
}),
deregisterInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return ((/** @type {?} */ (_this._root))).removeEventListener(evtType, handler);
}),
registerThumbContainerInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
_this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.thumbContainer.nativeElement.addEventListener(evtType, handler, platform.supportsPassiveEventListeners());
}));
}),
deregisterThumbContainerInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this.thumbContainer.nativeElement.removeEventListener(evtType, handler, platform.supportsPassiveEventListeners());
}),
registerBodyInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return document.body.addEventListener(evtType, handler);
}),
deregisterBodyInteractionHandler: (/**
* @template K
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return document.body.removeEventListener(evtType, handler);
}),
registerResizeHandler: (/**
* @return {?}
*/
function () { }),
deregisterResizeHandler: (/**
* @return {?}
*/
function () { }),
notifyInput: (/**
* @return {?}
*/
function () {
/** @type {?} */
var newValue = _this._foundation.getValue();
if (newValue !== _this.value) {
_this.value = newValue;
_this.input.emit(_this._createChangeEvent(newValue));
}
}),
notifyChange: (/**
* @return {?}
*/
function () {
_this.value = _this._foundation.getValue();
_this._emitChangeEvent((/** @type {?} */ (_this.value)));
}),
setThumbContainerStyleProperty: (/**
* @param {?} propertyName
* @param {?} value
* @return {?}
*/
function (propertyName, value) {
return _this.thumbContainer.nativeElement.style.setProperty(propertyName, value);
}),
setTrackStyleProperty: (/**
* @param {?} propertyName
* @param {?} value
* @return {?}
*/
function (propertyName, value) {
return _this.track.nativeElement.style.setProperty(propertyName, value);
}),
setMarkerValue: (/**
* @param {?} value
* @return {?}
*/
function (value) {
_this._changeDetectorRef.markForCheck();
(/** @type {?} */ (_this.pinValueMarker)).nativeElement.innerText = value !== null ? value.toString() : null;
}),
setTrackMarkers: (/**
* @param {?} step
* @param {?} max
* @param {?} min
* @return {?}
*/
function (step, max, min) {
return (/** @type {?} */ (_this.trackMarkerContainer)).nativeElement.style.setProperty('background', _this._getTrackMarkersBackground(step, min, max));
}),
isRTL: (/**
* @return {?}
*/
function () { return _this._platform.isBrowser ?
window.getComputedStyle(_this._root).getPropertyValue('direction') === 'rtl' : false; }),
};
return new slider.MDCSliderFoundation(adapter);
};
/**
* @param {?} changes
* @return {?}
*/
MdcSlider.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (!this._initialized) {
return;
}
if (changes['step']) {
this._syncStepWithFoundation();
}
if (changes['max']) {
this._syncMaxWithFoundation();
}
if (changes['min']) {
this._syncMinWithFoundation();
}
if (changes['value']) {
this._syncValueWithFoundation();
}
if (changes['markers'] || changes['discrete']) {
this._refreshTrackMarkers();
}
};
/**
* @return {?}
*/
MdcSlider.prototype._asyncInitializeFoundation = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this._foundation.init();
return [2 /*return*/];
});
});
};
/**
* @return {?}
*/
MdcSlider.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._platform.isBrowser) {
this._initialized = true;
this._asyncInitializeFoundation()
.then((/**
* @return {?}
*/
function () {
_this._syncStepWithFoundation();
_this._syncMaxWithFoundation();
_this._syncMinWithFoundation();
_this._syncValueWithFoundation();
_this._foundation.setupTrackMarker();
_this._loadListeners();
_this._changeDetectorRef.markForCheck();
}));
}
};
/**
* @return {?}
*/
MdcSlider.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroyed.next();
this._destroyed.complete();
this.destroy();
};
/**
* @param {?} value
* @return {?}
*/
MdcSlider.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this._syncValueWithFoundation();
};
/**
* @param {?} fn
* @return {?}
*/
MdcSlider.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._controlValueAccessorChangeFn = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MdcSlider.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* @param {?} disabled
* @return {?}
*/
MdcSlider.prototype.setDisabledState = /**
* @param {?} disabled
* @return {?}
*/
function (disabled) {
this._disabled = coercion.coerceBooleanProperty(disabled);
this._foundation.setDisabled(disabled);
this._changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MdcSlider.prototype.layout = /**
* @return {?}
*/
function () {
this._foundation.layout();
};
/**
* @private
* @return {?}
*/
MdcSlider.prototype._loadListeners = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return rxjs.fromEvent(window, 'resize')
.pipe(operators.auditTime(16), operators.takeUntil(_this._destroyed))
.subscribe((/**
* @return {?}
*/
function () { return _this.layout(); }));
}));
};
/**
* @private
* @return {?}
*/
MdcSlider.prototype._syncValueWithFoundation = /**
* @private
* @return {?}
*/
function () {
this._foundation.setValue((/** @type {?} */ (this.value)));
};
/**
* @private
* @return {?}
*/
MdcSlider.prototype._syncStepWithFoundation = /**
* @private
* @return {?}
*/
function () {
this._foundation.setStep(this.step);
};
/**
* @private
* @return {?}
*/
MdcSlider.prototype._syncMinWithFoundation = /**
* @private
* @return {?}
*/
function () {
this._foundation.setMin(this.min);
};
/**
* @private
* @return {?}
*/
MdcSlider.prototype._syncMaxWithFoundation = /**
* @private
* @return {?}
*/
function () {
this._foundation.setMax(this.max);
};
/**
* @private
* @param {?} newValue
* @return {?}
*/
MdcSlider.prototype._createChangeEvent = /**
* @private
* @param {?} newValue
* @return {?}
*/
function (newValue) {
return new MdcSliderChange(this, newValue);
};
/**
* @private
* @param {?} newValue
* @return {?}
*/
MdcSlider.prototype._emitChangeEvent = /**
* @private
* @param {?} newValue
* @return {?}
*/
function (newValue) {
this._controlValueAccessorChangeFn(newValue);
this.valueChange.emit(newValue);
this.change.emit(this._createChangeEvent(newValue));
};
/** Keep calculation in css for better rounding/subpixel behavior. */
/**
* Keep calculation in css for better rounding/subpixel behavior.
* @private
* @param {?} step
* @param {?} min
* @param {?} max
* @return {?}
*/
MdcSlider.prototype._getTrackMarkersBackground = /**
* Keep calculation in css for better rounding/subpixel behavior.
* @private
* @param {?} step
* @param {?} min
* @param {?} max
* @return {?}
*/
function (step, min, max) {
/** @type {?} */
var stepStr = step.toLocaleString();
/** @type {?} */
var maxStr = max.toLocaleString();
/** @type {?} */
var minStr = min.toLocaleString();
/** @type {?} */
var markerAmount = "((" + maxStr + " - " + minStr + ") / " + stepStr + ")";
/** @type {?} */
var markerWidth = "2px";
/** @type {?} */
var markerBkgdImage = "linear-gradient(to right, currentColor " + markerWidth + ", transparent 0)";
/** @type {?} */
var markerBkgdLayout = "0 center / calc((100% - " + markerWidth + ") / " + markerAmount + ") 100% repeat-x";
return markerBkgdImage + " " + markerBkgdLayout;
};
/** Method that ensures that track markers are refreshed. */
/**
* Method that ensures that track markers are refreshed.
* @private
* @return {?}
*/
MdcSlider.prototype._refreshTrackMarkers = /**
* Method that ensures that track markers are refreshed.
* @private
* @return {?}
*/
function () {
((/** @type {?} */ (this._foundation))).hasTrackMarker_ = this.markers;
this._foundation.setupTrackMarker();
};
MdcSlider.decorators = [
{ type: core.Component, args: [{selector: 'mdc-slider',
exportAs: 'mdcSlider',
host: {
'role': 'slider',
'aria-orientation': 'horizontal',
'[attr.tabindex]': 'tabIndex || 0',
'class': 'mdc-slider',
'[class.mdc-slider--discrete]': 'discrete',
'[class.mdc-slider--display-markers]': 'markers && discrete',
'(blur)': '_onTouched()',
},
template: "\n <div class=\"mdc-slider__track-container\">\n <div #track class=\"mdc-slider__track\"></div>\n <div #markercontainer *ngIf=\"markers\" class=\"mdc-slider__track-marker-container\"></div>\n </div>\n <div #thumbcontainer class=\"mdc-slider__thumb-container\">\n <div *ngIf=\"discrete\" class=\"mdc-slider__pin\">\n <span #pin class=\"mdc-slider__pin-value-marker\"></span>\n </div>\n <svg #sliderThumb\n class=\"mdc-slider__thumb\"\n width=\"21\" height=\"21\"\n focusable=\"false\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"7.875\"></circle>\n </svg>\n <div class=\"mdc-slider__focus-ring\"></div>\n </div>",
providers: [MDC_SLIDER_CONTROL_VALUE_ACCESSOR],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcSlider.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }
]; };
MdcSlider.propDecorators = {
tabIndex: [{ type: core.Input }],
discrete: [{ type: core.Input }],
markers: [{ type: core.Input }],
min: [{ type: core.Input }],
max: [{ type: core.Input }],
step: [{ type: core.Input }],
value: [{ type: core.Input }],
disabled: [{ type: core.Input }],
change: [{ type: core.Output }],
input: [{ type: core.Output }],
valueChange: [{ type: core.Output }],
thumbContainer: [{ type: core.ViewChild, args: ['thumbcontainer', { static: false },] }],
_sliderThumb: [{ type: core.ViewChild, args: ['sliderThumb', { static: false },] }],
track: [{ type: core.ViewChild, args: ['track', { static: false },] }],
pinValueMarker: [{ type: core.ViewChild, args: ['pin', { static: false },] }],
trackMarkerContainer: [{ type: core.ViewChild, args: ['markercontainer', { static: false },] }]
};
return MdcSlider;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: slider/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcSliderModule = /** @class */ (function () {
function MdcSliderModule() {
}
MdcSliderModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
exports: [MdcSlider],
declarations: [MdcSlider]
},] },
];
return MdcSliderModule;
}());
exports.MDC_SLIDER_CONTROL_VALUE_ACCESSOR = MDC_SLIDER_CONTROL_VALUE_ACCESSOR;
exports.MdcSlider = MdcSlider;
exports.MdcSliderChange = MdcSliderChange;
exports.MdcSliderModule = MdcSliderModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-slider.umd.js.map