@blox/material
Version:
Material Components for Angular
1,090 lines (1,078 loc) • 508 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@material/ripple'), require('@material/dom'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@material/checkbox'), require('@material/chips'), require('@material/dialog'), require('@material/drawer'), require('@material/list'), require('@material/radio'), require('@material/floating-label'), require('@material/form-field'), require('@material/icon-button'), require('@material/linear-progress'), require('@material/menu'), require('@material/menu-surface'), require('@material/notched-outline'), require('@material/line-ripple'), require('@material/select'), require('@material/slider'), require('@material/snackbar'), require('@material/switch'), require('@material/tab-bar'), require('@material/tab-scroller'), require('@material/tab'), require('@material/tab-indicator'), require('@angular/router'), require('@material/textfield'), require('@material/top-app-bar')) :
typeof define === 'function' && define.amd ? define('@blox/material', ['exports', '@angular/core', '@angular/common', '@material/ripple', '@material/dom', '@angular/forms', 'rxjs', 'rxjs/operators', '@material/checkbox', '@material/chips', '@material/dialog', '@material/drawer', '@material/list', '@material/radio', '@material/floating-label', '@material/form-field', '@material/icon-button', '@material/linear-progress', '@material/menu', '@material/menu-surface', '@material/notched-outline', '@material/line-ripple', '@material/select', '@material/slider', '@material/snackbar', '@material/switch', '@material/tab-bar', '@material/tab-scroller', '@material/tab', '@material/tab-indicator', '@angular/router', '@material/textfield', '@material/top-app-bar'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.blox = global.blox || {}, global.blox.material = {}), global.ng.core, global.ng.common, global.mdc.ripple, global.mdc.dom, global.ng.forms, global.rxjs, global.rxjs.operators, global.mdc.checkbox, global.mdc.chips, global.mdc.dialog, global.mdc.drawer, global.mdc.list, global.mdc.radio, global.mdc.floatingLabel, global.mdc.formField, global.mdc.iconButton, global.mdc.linearProgress, global.mdc.menu, global.mdc.menuSurface, global.mdc.notchedOutline, global.mdc.lineRipple, global.mdc.select, global.mdc.slider, global.mdc.snackbar, global.mdc.switch, global.mdc.tabBar, global.mdc.tabScroller, global.mdc.tab, global.mdc.tabIndicator, global.ng.router, global.mdc.textfield, global.mdc.topAppBar));
}(this, (function (exports, i0, i1, ripple, dom, forms, rxjs, operators, checkbox, chips, dialog, drawer, list, radio, floatingLabel, formField, iconButton, linearProgress, menu, menuSurface, notchedOutline, lineRipple, select, slider, snackbar, _switch, tabBar, tabScroller, tab, tabIndicator, router, textfield, topAppBar) { '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 (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 __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
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 () { 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 };
}
}
function __exportStar(m, exports) {
for (var p in m)
if (!exports.hasOwnProperty(p))
exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (Object.hasOwnProperty.call(mod, k))
result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
function asBoolean(value) {
return value != null && "" + value !== 'false';
}
function asBooleanOrNull(value) {
if (value == null)
return value;
return "" + value !== 'false';
}
function asNumberOrNull(value) {
if (value == null)
return value;
return +value;
}
var unlisteners = new Map();
var MdcEventRegistry = /** @class */ (function () {
function MdcEventRegistry() {
}
MdcEventRegistry.prototype.listen = function (renderer, type, listener, ref, options) {
this.listenElm(renderer, type, listener, ref.nativeElement, options);
};
MdcEventRegistry.prototype.listenElm = function (renderer, type, listener, el, options) {
el.addEventListener(type, listener, options);
var unlistener = function () {
el.removeEventListener(type, listener, options);
};
this.registerUnlisten(type, listener, unlistener);
};
MdcEventRegistry.prototype.registerUnlisten = function (type, listener, unlistener) {
if (!unlisteners.has(type))
unlisteners.set(type, new WeakMap());
unlisteners.get(type).set(listener, unlistener);
};
MdcEventRegistry.prototype.unlisten = function (type, listener) {
if (!unlisteners.has(type))
return;
var unlistenerMap = unlisteners.get(type);
if (!unlistenerMap.has(listener))
return;
unlistenerMap.get(listener)();
unlistenerMap.delete(listener);
};
return MdcEventRegistry;
}());
MdcEventRegistry.ɵprov = i0.ɵɵdefineInjectable({ factory: function MdcEventRegistry_Factory() { return new MdcEventRegistry(); }, token: MdcEventRegistry, providedIn: "root" });
MdcEventRegistry.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
MdcEventRegistry.ctorParameters = function () { return []; };
/** @docs-private */
var AbstractMdcRipple = /** @class */ (function () {
function AbstractMdcRipple(_rippleElm, _renderer, _registry, doc) {
var _this = this;
this._rippleElm = _rippleElm;
this._renderer = _renderer;
this._registry = _registry;
this.mdcRippleAdapter = {
browserSupportsCssVars: function () { return ripple.util.supportsCssVariables(_this.document.defaultView); },
isUnbounded: function () { return _this._unbounded; },
isSurfaceActive: function () { return _this.isRippleSurfaceActive(); },
isSurfaceDisabled: function () { return _this.isRippleSurfaceDisabled(); },
addClass: function (className) { return _this.addClassToRipple(className); },
removeClass: function (className) { return _this.removeClassFromRipple(className); },
containsEventTarget: function (target) { return _this._rippleElm.nativeElement.contains(target); },
registerInteractionHandler: function (type, handler) {
if (_this.getRippleInteractionElement())
_this._registry.listenElm(_this._renderer, type, handler, _this.getRippleInteractionElement().nativeElement, dom.events.applyPassive());
},
deregisterInteractionHandler: function (type, handler) {
_this._registry.unlisten(type, handler);
},
registerDocumentInteractionHandler: function (type, handler) { return _this._registry.listenElm(_this._renderer, type, handler, _this.document, dom.events.applyPassive()); },
deregisterDocumentInteractionHandler: function (type, handler) { return _this._registry.unlisten(type, handler); },
registerResizeHandler: function (handler) {
_this._registry.listenElm(_this._renderer, 'resize', handler, _this.document.defaultView);
},
deregisterResizeHandler: function (handler) {
_this._registry.unlisten('resize', handler);
},
updateCssVariable: function (name, value) { _this.getRippleStylingElement().nativeElement.style.setProperty(name, value); },
computeBoundingRect: function () { return _this.computeRippleBoundingRect(); },
getWindowPageOffset: function () { return ({ x: _this.document.defaultView.pageXOffset, y: _this.document.defaultView.pageYOffset }); }
};
/** @internal */
this._rippleFoundation = null;
this._unbounded = false;
this._rippleSurface = null;
// workaround compiler bug when using ViewEngine. Type Document fails compilation
this.document = doc;
}
/** @internal */
AbstractMdcRipple.prototype.initRipple = function (unbounded) {
if (unbounded === void 0) { unbounded = false; }
if (this._rippleFoundation)
throw new Error('initRipple() is called multiple times');
this._unbounded = unbounded;
this._rippleFoundation = new ripple.MDCRippleFoundation(this.mdcRippleAdapter);
this._rippleFoundation.init();
};
/** @internal */
AbstractMdcRipple.prototype.destroyRipple = function () {
if (this._rippleFoundation) {
this._rippleFoundation.destroy();
this._rippleFoundation = null;
}
};
/** @internal */
AbstractMdcRipple.prototype.reinitRipple = function () {
if (this._rippleFoundation) {
this.destroyRipple();
this.initRipple(this._unbounded);
}
};
/** @internal */
AbstractMdcRipple.prototype.isRippleInitialized = function () {
return this._rippleFoundation != null;
};
/** @internal */
AbstractMdcRipple.prototype.addRippleSurface = function (clazz, firstElement) {
if (firstElement === void 0) { firstElement = false; }
this.destroyRippleSurface();
this._rippleSurface = this._renderer.createElement('div');
this._renderer.addClass(this._rippleSurface, clazz);
if (firstElement && this._rippleElm.nativeElement.children.length > 0) {
var firstChild = this._rippleElm.nativeElement.children.item(0);
this._renderer.insertBefore(this._rippleElm.nativeElement, this._rippleSurface, firstChild);
}
else
this._renderer.appendChild(this._rippleElm.nativeElement, this._rippleSurface);
return this._rippleSurface;
};
/** @internal */
AbstractMdcRipple.prototype.destroyRippleSurface = function () {
if (this._rippleSurface) {
this._renderer.removeChild(this._rippleElm.nativeElement, this._rippleSurface);
this._rippleSurface = null;
}
};
AbstractMdcRipple.prototype.activateRipple = function () {
if (this._rippleFoundation)
this._rippleFoundation.activate();
};
AbstractMdcRipple.prototype.deactivateRipple = function () {
if (this._rippleFoundation)
this._rippleFoundation.deactivate();
};
AbstractMdcRipple.prototype.layout = function () {
if (this._rippleFoundation)
this._rippleFoundation.layout();
};
Object.defineProperty(AbstractMdcRipple.prototype, "rippleSurface", {
get: function () {
return new i0.ElementRef(this._rippleSurface);
},
enumerable: false,
configurable: true
});
AbstractMdcRipple.prototype.getRippleInteractionElement = function () {
return this._rippleElm;
};
AbstractMdcRipple.prototype.getRippleStylingElement = function () {
return this._rippleElm;
};
AbstractMdcRipple.prototype.isRippleUnbounded = function () {
return this._unbounded;
};
/** @internal */
AbstractMdcRipple.prototype.setRippleUnbounded = function (value) {
if (!!value !== this._unbounded) {
this._unbounded = !!value;
// despite what the documentation seems to indicate, you can't
// just change the unbounded property of an already initialized
// ripple. The initialization registers different handlers, and won't
// change those registrations when you change the unbounded property.
// Hence we destroy and re-init the whole thing:
this.reinitRipple();
}
};
AbstractMdcRipple.prototype.isRippleSurfaceActive = function () {
var interactionElm = this.getRippleInteractionElement();
return !!interactionElm && this.isActiveElement(interactionElm.nativeElement);
};
AbstractMdcRipple.prototype.isActiveElement = function (element) {
return element == null ? false : dom.ponyfill.matches(element, ':active');
};
AbstractMdcRipple.prototype.isRippleSurfaceDisabled = function () {
var interactionElm = this.getRippleInteractionElement();
return !!interactionElm && !!interactionElm.nativeElement.attributes.getNamedItem('disabled');
};
/** @internal */
AbstractMdcRipple.prototype.addClassToRipple = function (name) {
this._renderer.addClass(this.getRippleStylingElement().nativeElement, name);
};
/** @internal */
AbstractMdcRipple.prototype.removeClassFromRipple = function (name) {
this._renderer.removeClass(this.getRippleStylingElement().nativeElement, name);
};
AbstractMdcRipple.prototype.computeRippleBoundingRect = function () {
return this._rippleElm.nativeElement.getBoundingClientRect();
};
/** @internal */
AbstractMdcRipple.prototype.onFocus = function () {
if (this._rippleFoundation)
this._rippleFoundation.handleFocus();
};
/** @internal */
AbstractMdcRipple.prototype.onBlur = function () {
if (this._rippleFoundation)
this._rippleFoundation.handleBlur();
};
return AbstractMdcRipple;
}());
AbstractMdcRipple.decorators = [
{ type: i0.Directive }
];
AbstractMdcRipple.ctorParameters = function () { return [
{ type: i0.ElementRef },
{ type: i0.Renderer2 },
{ type: MdcEventRegistry },
{ type: undefined }
]; };
AbstractMdcRipple.propDecorators = {
onFocus: [{ type: i0.HostListener, args: ['focusin',] }],
onBlur: [{ type: i0.HostListener, args: ['focusout',] }]
};
/**
* Use this directive for adding an icon to an <code>mdcButton</code>. This directive can be
* added to font-style icons (such as <a href="https://material.io/icons/" target="_blank">material icons</a>
* from Google fonts), or with <code>svg</code> elements for svg based icons.
*/
var MdcButtonIconDirective = /** @class */ (function () {
function MdcButtonIconDirective() {
/** @internal */
this._cls = true;
/** @internal */
this._ariaHidden = true;
}
return MdcButtonIconDirective;
}());
MdcButtonIconDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcButtonIcon]'
},] }
];
MdcButtonIconDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-button__icon',] }],
_ariaHidden: [{ type: i0.HostBinding, args: ['attr.aria-hidden',] }]
};
/**
* Directive for the label of an <code>mdcButton</code>. Must be a direct child
* of <code>mdcButton</code>.
*/
var MdcButtonLabelDirective = /** @class */ (function () {
function MdcButtonLabelDirective() {
/** @internal */
this._cls = true;
}
return MdcButtonLabelDirective;
}());
MdcButtonLabelDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcButtonLabel]'
},] }
];
MdcButtonLabelDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-button__label',] }]
};
/**
* Material design button. Anchors can also be styled as buttons with this directive.
* Defaults to a button that is flushed with the surface.
* Use the input modifiers to alter the styling, or create your own style
* based on the provided sass-mixins.
*
* For buttons with a trailing icon, you must put the label inside an `mdcButtonLabel`
* directive. For all other buttons it is also recommnded to put the label inside
* an `mdcButtonLabel`, because future version of material-components-web may make
* it's use mandatory.
*
* A ripple (and the required DOM elements for the ripple) will be added automatically.
*/
var MdcButtonDirective = /** @class */ (function (_super) {
__extends(MdcButtonDirective, _super);
function MdcButtonDirective(_elm, renderer, registry, doc) {
var _this = _super.call(this, _elm, renderer, registry, doc) || this;
_this._elm = _elm;
/** @internal */
_this._cls = true;
_this._raised = false;
_this._unelevated = false;
_this._outlined = false;
_this.addRippleSurface('mdc-button__ripple');
return _this;
}
MdcButtonDirective.prototype.ngAfterContentInit = function () {
this.initRipple();
};
MdcButtonDirective.prototype.ngOnDestroy = function () {
this.destroyRipple();
};
Object.defineProperty(MdcButtonDirective.prototype, "raised", {
/**
* When this input is defined and does not have value false, the button will be elevated
* upon the surface.
*/
get: function () {
return this._raised;
},
set: function (val) {
this._raised = asBoolean(val);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MdcButtonDirective.prototype, "outlined", {
/**
* When this input is defined and does not have value false, the button will be styled
* flush with the surface and have a visible border.
*/
get: function () {
return this._outlined;
},
set: function (val) {
this._outlined = asBoolean(val);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MdcButtonDirective.prototype, "unelevated", {
/**
* Set this property to a non false value for a contained button
* flush with the surface.
*/
get: function () {
return this._unelevated;
},
set: function (val) {
this._unelevated = asBoolean(val);
},
enumerable: false,
configurable: true
});
return MdcButtonDirective;
}(AbstractMdcRipple));
MdcButtonDirective.decorators = [
{ type: i0.Directive, args: [{
selector: 'button[mdcButton],a[mdcButton]',
providers: [{ provide: AbstractMdcRipple, useExisting: i0.forwardRef(function () { return MdcButtonDirective; }) }]
},] }
];
MdcButtonDirective.ctorParameters = function () { return [
{ type: i0.ElementRef },
{ type: i0.Renderer2 },
{ type: MdcEventRegistry },
{ type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] }
]; };
MdcButtonDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-button',] }],
raised: [{ type: i0.HostBinding, args: ['class.mdc-button--raised',] }, { type: i0.Input }],
outlined: [{ type: i0.HostBinding, args: ['class.mdc-button--outlined',] }, { type: i0.Input }],
unelevated: [{ type: i0.HostBinding, args: ['class.mdc-button--unelevated',] }, { type: i0.Input }]
};
var BUTTON_DIRECTIVES = [
MdcButtonIconDirective,
MdcButtonLabelDirective,
MdcButtonDirective
];
/** @docs-private */
var AbstractMdcIcon = /** @class */ (function (_super) {
__extends(AbstractMdcIcon, _super);
function AbstractMdcIcon(_elm, renderer, registry, doc) {
var _this = _super.call(this, _elm, renderer, registry, doc) || this;
_this._elm = _elm;
return _this;
}
return AbstractMdcIcon;
}(AbstractMdcRipple));
AbstractMdcIcon.decorators = [
{ type: i0.Directive }
];
AbstractMdcIcon.ctorParameters = function () { return [
{ type: i0.ElementRef },
{ type: i0.Renderer2 },
{ type: MdcEventRegistry },
{ type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] }
]; };
/**
* Directive for an area that displays a custom background-image. See the <code>size</code>
* property for the sizing of the image.
* If used, this directive should be put inside the card itself (<code>MdcCardDirective</code>).
* Add an <code>mdcCardMediaContent</code> as sub-element for displaying a title, text,
* or icon on top of the background image.
*/
var MdcCardMediaDirective = /** @class */ (function () {
function MdcCardMediaDirective() {
/** @internal */
this._cls = true;
this._size = 'cover';
}
Object.defineProperty(MdcCardMediaDirective.prototype, "_square", {
/** @internal */
get: function () {
return this._size === 'square';
},
enumerable: false,
configurable: true
});
Object.defineProperty(MdcCardMediaDirective.prototype, "_size2", {
/** @internal */
get: function () {
return this._size === '16:9';
},
enumerable: false,
configurable: true
});
Object.defineProperty(MdcCardMediaDirective.prototype, "size", {
/**
* Directive to select size to which this element's background-image should
* be scaled. Can be one of 'cover', '16:9', or 'square'. The default value
* is 'cover'.
*/
get: function () {
return this._size;
},
set: function (val) {
this._size = val;
},
enumerable: false,
configurable: true
});
return MdcCardMediaDirective;
}());
MdcCardMediaDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCardMedia]',
},] }
];
MdcCardMediaDirective.ctorParameters = function () { return []; };
MdcCardMediaDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card__media',] }],
_square: [{ type: i0.HostBinding, args: ['class.mdc-card__media--square',] }],
_size2: [{ type: i0.HostBinding, args: ['class.mdc-card__media--16-9',] }],
size: [{ type: i0.Input }]
};
/**
* Directive for displaying text on top of a <code>mdcCardMedia</code> element.
* This directive should be used as child element of the <code>mdcCardMedia</code>, and
* creates an absolutely positioned box the same size as the media area.
*/
var MdcCardMediaContentDirective = /** @class */ (function () {
function MdcCardMediaContentDirective() {
/** @internal */
this._cls = true;
}
return MdcCardMediaContentDirective;
}());
MdcCardMediaContentDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCardMediaContent]'
},] }
];
MdcCardMediaContentDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card__media-content',] }]
};
/**
* Directive for displaying the button card actions. Composed of one or more
* card actions, which must be buttons that have the <code>MdcButtonDirective</code>.
* This directive should be placed inside an <code>MdcCardActionsDirective</code>.
*/
var MdcCardActionButtonsDirective = /** @class */ (function () {
function MdcCardActionButtonsDirective() {
/** @internal */
this._cls = true;
}
return MdcCardActionButtonsDirective;
}());
MdcCardActionButtonsDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCardActionButtons]'
},] }
];
MdcCardActionButtonsDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card__action-buttons',] }]
};
/**
* Directive for displaying the icon card actions. Composed of one or more
* card actions, which must be icons (for instance <code>mdcIconButton</code>.
* This directive should be placed inside an <code>MdcCardActionsDirective</code>.
*/
var MdcCardActionIconsDirective = /** @class */ (function () {
function MdcCardActionIconsDirective() {
/** @internal */
this._cls = true;
}
return MdcCardActionIconsDirective;
}());
MdcCardActionIconsDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCardActionIcons]'
},] }
];
MdcCardActionIconsDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card__action-icons',] }]
};
/**
* Directive for showing the different actions a user can take. Use
* <code>mdcButton</code>, or <code>mdcIconButton</code> as child elements.
* If you want to use both buttons and icons in the same row, wrap them in
* <code>mdcCardActionButtons</code>, and <code>mdcCardActionIcons</code> directives.
*/
var MdcCardActionsDirective = /** @class */ (function () {
function MdcCardActionsDirective(renderer) {
this.renderer = renderer;
/** @internal */
this._cls = true;
this._initialized = false;
this._fullBleed = false;
}
MdcCardActionsDirective.prototype.ngAfterContentInit = function () {
var _this = this;
this._initialized = true;
this._initButtons();
this._initIcons();
this._buttons.changes.subscribe(function () {
_this._initButtons();
});
this._icons.changes.subscribe(function () {
_this._initIcons();
});
};
MdcCardActionsDirective.prototype._initButtons = function () {
var _this = this;
if (this._initialized)
this._buttons.forEach(function (btn) {
_this.renderer.addClass(btn._elm.nativeElement, 'mdc-card__action');
_this.renderer.addClass(btn._elm.nativeElement, 'mdc-card__action--button');
});
};
MdcCardActionsDirective.prototype._initIcons = function () {
var _this = this;
if (this._initialized)
this._icons.forEach(function (icon) {
_this.renderer.addClass(icon._elm.nativeElement, 'mdc-card__action');
_this.renderer.addClass(icon._elm.nativeElement, 'mdc-card__action--icon');
});
};
Object.defineProperty(MdcCardActionsDirective.prototype, "fullBleed", {
/**
* When this input is defined and does not have value false, the contained
* button takes up the entire width of the action row. This should be used only when
* there is a single button contained in the directive.
*/
get: function () {
return this._fullBleed;
},
set: function (val) {
this._fullBleed = asBoolean(val);
},
enumerable: false,
configurable: true
});
return MdcCardActionsDirective;
}());
MdcCardActionsDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCardActions]',
},] }
];
MdcCardActionsDirective.ctorParameters = function () { return [
{ type: i0.Renderer2 }
]; };
MdcCardActionsDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card__actions',] }],
_buttons: [{ type: i0.ContentChildren, args: [MdcButtonDirective, { descendants: true },] }],
_icons: [{ type: i0.ContentChildren, args: [AbstractMdcIcon, { descendants: true },] }],
fullBleed: [{ type: i0.HostBinding, args: ['class.mdc-card__actions--full-bleed',] }, { type: i0.Input }]
};
/**
* Directive for the main tappable area of the card (so should be a child of <code>mdcCard</code>).
* Typically contains most (or all) card content except <code>mdcCardActions</code>.
* Only applicable to cards that have a primary action that the main surface should trigger.
*/
var MdcCardPrimaryActionDirective = /** @class */ (function (_super) {
__extends(MdcCardPrimaryActionDirective, _super);
function MdcCardPrimaryActionDirective(elm, renderer, registry, doc) {
var _this = _super.call(this, elm, renderer, registry, doc) || this;
_this.elm = elm;
/** @internal */
_this._cls = true;
return _this;
}
MdcCardPrimaryActionDirective.prototype.ngAfterContentInit = function () {
if (!this.elm.nativeElement.hasAttribute('tabindex'))
// unless overridden, make the action tabbable:
this.elm.nativeElement.tabIndex = 0;
this.initRipple();
};
MdcCardPrimaryActionDirective.prototype.ngOnDestroy = function () {
this.destroyRipple();
};
return MdcCardPrimaryActionDirective;
}(AbstractMdcRipple));
MdcCardPrimaryActionDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCardPrimaryAction]',
},] }
];
MdcCardPrimaryActionDirective.ctorParameters = function () { return [
{ type: i0.ElementRef },
{ type: i0.Renderer2 },
{ type: MdcEventRegistry },
{ type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] }
]; };
MdcCardPrimaryActionDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card__primary-action',] }]
};
/**
* Directive for a material designed card. The card can be composed with the following directives:
* <code>MdcCardMediaDirective</code>, <code>MdcCardActionsDirective</code>
*/
var MdcCardDirective = /** @class */ (function () {
function MdcCardDirective() {
/** @internal */
this._cls = true;
this._outlined = false;
}
Object.defineProperty(MdcCardDirective.prototype, "outlined", {
/**
* When this input is set to a value other than false, the card will have a
* hairline stroke instead of a shadow.
*/
get: function () {
return this._outlined;
},
set: function (val) {
this._outlined = asBoolean(val);
},
enumerable: false,
configurable: true
});
return MdcCardDirective;
}());
MdcCardDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[mdcCard]'
},] }
];
MdcCardDirective.propDecorators = {
_cls: [{ type: i0.HostBinding, args: ['class.mdc-card',] }],
outlined: [{ type: i0.HostBinding, args: ['class.mdc-card--outlined',] }, { type: i0.Input }]
};
var CARD_DIRECTIVES = [
MdcCardMediaDirective,
MdcCardMediaContentDirective,
MdcCardActionButtonsDirective,
MdcCardActionIconsDirective,
MdcCardActionsDirective,
MdcCardPrimaryActionDirective,
MdcCardDirective
];
/** @docs-private */
var AbstractMdcInput = /** @class */ (function () {
function AbstractMdcInput() {
}
return AbstractMdcInput;
}());
/**
* Directive for the input element of an <code>MdcCheckboxDirective</code>.
*/
var MdcCheckboxInputDirective = /** @class */ (function (_super) {
__extends(MdcCheckboxInputDirective, _super);
function MdcCheckboxInputDirective(_elm, _cntr) {
var _this = _super.call(this) || this;
_this._elm = _elm;
_this._cntr = _cntr;
/** @internal */
_this._cls = true;
_this.onDestroy$ = new rxjs.Subject();
_this._id = null;
_this._disabled = false;
_this._checked = false;
_this._indeterminate = false;
/** @internal */
_this._checkedChange = new i0.EventEmitter();
/** @internal */
_this._indeterminateChange = new i0.EventEmitter();
/** @internal */
_this._disabledChange = new i0.EventEmitter();
return _this;
}
MdcCheckboxInputDirective.prototype.ngOnInit = function () {
var _this = this;
var _a;
(_a = this._cntr) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(operators.takeUntil(this.onDestroy$)).subscribe(function (value) {
_this.updateValue(value, true);
});
};
MdcCheckboxInputDirective.prototype.ngOnDestroy = function () {
this.onDestroy$.next();
this.onDestroy$.complete();
};
Object.defineProperty(MdcCheckboxInputDirective.prototype, "id", {
/** @docs-private */
get: function () {
return this._id;
},
set: function (value) {
this._id = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MdcCheckboxInputDirective.prototype, "disabled", {
/** @docs-private */
get: function () {
return this._cntr ? !!this._cntr.disabled : this._disabled;
},
set: function (value) {
var newVal = asBoolean(value);
if (newVal != this._disabled) {
this._disabled = asBoolean(newVal);
this._disabledChange.emit(newVal);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(MdcCheckboxInputDirective.prototype, "checked", {
/** @docs-private */
get: function () {
return this._checked;
},
set: function (value) {
this.updateValue(value, false);
},
enumerable: false,
configurable: true
});
MdcCheckboxInputDirective.prototype.updateValue = function (value, fromControl) {
// When the 'checked' property is the source of the change, we want to coerce boolean
// values using asBoolean, so that initializing with an attribute with no value works
// as expected.
// When the NgControl is the source of the change we don't want that. The value should
// be interpreted like NgControl/NgForms handles non-boolean values when binding.
var newVal = fromControl ? !!value : asBoolean(value);
if (newVal !== this._checked) {
this._checked = newVal;
this._checkedChange.emit(newVal);
}
if (!fromControl && this._cntr && newVal !== this._cntr.value) {
this._cntr.control.setValue(newVal);
}
};
Object.defineProperty(MdcCheckboxInputDirective.prototype, "indeterminate", {
/** @docs-private */
get: function () {
return this._indeterminate;
},
set: function (value) {
var _this = this;
var newVal = asBoolean(value);
if (newVal !== this._indeterminate) {
this._indeterminate = newVal;
Promise.resolve().then(function () { return _this._indeterminateChange.emit(newVal); });
}
},
enumerable: false,
configurable: true
});
// We listen to click-event instead of change-event, because IE doesn't fire the
// change-event when an indeterminate checkbox is clicked. There's no need to
// also listen to change-events.
MdcCheckboxInputDirective.prototype._onChange = function () {
// only update the checked state from click if there is no control for which we already
// listen to value changes:
if (!this._cntr)
this.checked = this._elm.nativeElement.checked;
this.indeterminate = this._elm.nativeElement.indeterminate;
};
return MdcCheckboxInputDirective;
}(AbstractMdcInput));
MdcCheckboxInputDirective.decorators = [
{ type: i0.Directive, args: [{
selector: 'input[mdcCheckboxInput][type=checkbox]',
providers: [{ provide: AbstractMdcInput, useExisting: i0.forwardRef(function () { return MdcCheckboxInputDirective; }) }]
},] }
];
MdcCheckboxInputDirective.ctorParameters = function () { return [
{ type: i0.ElementRef },