mat-contenteditable
Version:
Angular contenteditable directive for Angular forms and Material Design
888 lines (853 loc) • 40.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/form-field'), require('@angular/forms'), require('@angular/material/core'), require('@angular/cdk/coercion'), require('rxjs'), require('@ckeditor/ckeditor5-angular')) :
typeof define === 'function' && define.amd ? define('mat-contenteditable', ['exports', '@angular/core', '@angular/material/form-field', '@angular/forms', '@angular/material/core', '@angular/cdk/coercion', 'rxjs', '@ckeditor/ckeditor5-angular'], factory) :
(global = global || self, factory(global['mat-contenteditable'] = {}, global.ng.core, global.ng.material['form-field'], global.ng.forms, global.ng.material.core, global.ng.cdk.coercion, global.rxjs, global.ckeditor5Angular));
}(this, (function (exports, core, formField, forms, core$1, coercion, rxjs, ckeditor5Angular) { '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) {
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) : new P(function (resolve) { resolve(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 m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
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 };
}
// Boilerplate for applying mixins to MatInput.
/** @docs-private */
var MatInputBase = /** @class */ (function () {
function MatInputBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup,
/** @docs-private */
ngControl) {
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentForm = _parentForm;
this._parentFormGroup = _parentFormGroup;
this.ngControl = ngControl;
}
return MatInputBase;
}());
var _MatInputMixinBase = core$1.mixinErrorState(MatInputBase);
var MatContenteditableDirective = /** @class */ (function (_super) {
__extends(MatContenteditableDirective, _super);
function MatContenteditableDirective(elementRef, renderer, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher) {
var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_this.elementRef = elementRef;
_this.renderer = renderer;
_this.ngControl = ngControl;
_this.stateChanges = new rxjs.Subject();
_this.id = "mat-input-" + MatContenteditableDirective_1.nextId++;
_this.focused = false;
_this.contentEmpty = ['<br>', '<div><br></div>'];
_this._required = false;
_this._disabled = false;
_this.controlType = 'mat-input';
_this.describedBy = '';
_this.propValueAccessor = 'innerHTML';
// Setting the value accessor directly (instead of using
// the providers) to avoid running into a circular import.
if (_this.ngControl != null) {
_this.ngControl.valueAccessor = _this;
}
return _this;
}
MatContenteditableDirective_1 = MatContenteditableDirective;
Object.defineProperty(MatContenteditableDirective.prototype, "value", {
get: function () { return this.elementRef.nativeElement[this.propValueAccessor]; },
set: function (value) {
if (value !== this.value) {
this.elementRef.nativeElement[this.propValueAccessor] = value;
this.stateChanges.next();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatContenteditableDirective.prototype, "placeholder", {
get: function () {
return this._placeholder;
},
set: function (plh) {
this._placeholder = plh;
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatContenteditableDirective.prototype, "empty", {
get: function () {
return !this.value || this.contentEmpty.includes(this.value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatContenteditableDirective.prototype, "shouldLabelFloat", {
get: function () { return this.focused || !this.empty; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatContenteditableDirective.prototype, "required", {
get: function () {
return this._required;
},
set: function (req) {
this._required = coercion.coerceBooleanProperty(req);
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatContenteditableDirective.prototype, "disabled", {
get: function () {
return this._disabled;
},
set: function (dis) {
this._disabled = coercion.coerceBooleanProperty(dis);
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
MatContenteditableDirective.prototype.ngDoCheck = function () {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
};
MatContenteditableDirective.prototype.callOnChange = function () {
if (typeof this.onChange === 'function') {
this.onChange(this.elementRef.nativeElement[this.propValueAccessor]);
}
};
MatContenteditableDirective.prototype.callOnFocused = function () {
if (this.focused !== true) {
this.focused = true;
this.stateChanges.next();
}
};
MatContenteditableDirective.prototype.callOnTouched = function () {
if (typeof this.onTouched === 'function') {
this.onTouched();
}
if (this.focused !== false) {
this.focused = false;
this.stateChanges.next();
}
};
MatContenteditableDirective.prototype.setDescribedByIds = function (ids) {
this.describedBy = ids.join(' ');
};
MatContenteditableDirective.prototype.onContainerClick = function () { this.elementRef.nativeElement.focus(); };
/**
* Writes a new value to the element.
* This method will be called by the forms API to write
* to the view when programmatic (model -> view) changes are requested.
*
* See: [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor#members)
*/
MatContenteditableDirective.prototype.writeValue = function (value) {
var normalizedValue = value == null ? '' : value;
this.renderer.setProperty(this.elementRef.nativeElement, this.propValueAccessor, normalizedValue);
};
/**
* Registers a callback function that should be called when
* the control's value changes in the UI.
*
* This is called by the forms API on initialization so it can update
* the form model when values propagate from the view (view -> model).
*/
MatContenteditableDirective.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
/**
* Registers a callback function that should be called when the control receives a blur event.
* This is called by the forms API on initialization so it can update the form model on blur.
*/
MatContenteditableDirective.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
/**
* This function is called by the forms API when the control status changes to or from "DISABLED".
* Depending on the value, it should enable or disable the appropriate DOM element.
*/
MatContenteditableDirective.prototype.setDisabledState = function (isDisabled) {
if (isDisabled) {
this.renderer.setAttribute(this.elementRef.nativeElement, 'disabled', 'true');
this.removeDisabledState = this.renderer.listen(this.elementRef.nativeElement, 'keydown', this.listenerDisabledState);
}
else {
if (this.removeDisabledState) {
this.renderer.removeAttribute(this.elementRef.nativeElement, 'disabled');
this.removeDisabledState();
}
}
};
MatContenteditableDirective.prototype.listenerDisabledState = function (e) {
e.preventDefault();
};
var MatContenteditableDirective_1;
/**
* Implemented as part of MatFormFieldControl.
* See https://material.angular.io/guide/creating-a-custom-form-field-control
*/
MatContenteditableDirective.nextId = 0;
MatContenteditableDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] },
{ type: forms.NgForm, decorators: [{ type: core.Optional }] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
{ type: core$1.ErrorStateMatcher }
]; };
__decorate([
core.Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], MatContenteditableDirective.prototype, "value", null);
__decorate([
core.HostBinding(),
__metadata("design:type", Object)
], MatContenteditableDirective.prototype, "id", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], MatContenteditableDirective.prototype, "placeholder", null);
__decorate([
core.Input(),
__metadata("design:type", Array)
], MatContenteditableDirective.prototype, "contentEmpty", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], MatContenteditableDirective.prototype, "required", null);
__decorate([
core.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], MatContenteditableDirective.prototype, "disabled", null);
__decorate([
core.HostBinding('attr.aria-invalid'),
__metadata("design:type", Boolean)
], MatContenteditableDirective.prototype, "errorState", void 0);
__decorate([
core.Input(),
__metadata("design:type", core$1.ErrorStateMatcher)
], MatContenteditableDirective.prototype, "errorStateMatcher", void 0);
__decorate([
core.HostBinding('attr.aria-describedby'),
__metadata("design:type", Object)
], MatContenteditableDirective.prototype, "describedBy", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], MatContenteditableDirective.prototype, "propValueAccessor", void 0);
__decorate([
core.HostListener('input'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], MatContenteditableDirective.prototype, "callOnChange", null);
__decorate([
core.HostListener('focus'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], MatContenteditableDirective.prototype, "callOnFocused", null);
__decorate([
core.HostListener('blur'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], MatContenteditableDirective.prototype, "callOnTouched", null);
MatContenteditableDirective = MatContenteditableDirective_1 = __decorate([
core.Directive({
selector: '[contenteditable]',
providers: [
{ provide: formField.MatFormFieldControl, useExisting: MatContenteditableDirective_1 },
]
}),
__param(2, core.Optional()), __param(2, core.Self()),
__param(3, core.Optional()),
__param(4, core.Optional()),
__metadata("design:paramtypes", [core.ElementRef,
core.Renderer2,
forms.NgControl,
forms.NgForm,
forms.FormGroupDirective,
core$1.ErrorStateMatcher])
], MatContenteditableDirective);
return MatContenteditableDirective;
}(_MatInputMixinBase));
var MatCkeditorDirective = /** @class */ (function (_super) {
__extends(MatCkeditorDirective, _super);
function MatCkeditorDirective(editor, viewRef, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher) {
var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_this.editor = editor;
_this.viewRef = viewRef;
_this.ngControl = ngControl;
_this.stateChanges = new rxjs.Subject();
_this.id = "mat-input-" + MatCkeditorDirective_1.nextId++;
// Need support from Ckeditor
_this.placeholder = '';
_this.contentEmpty = ['<br>', '<p> </p>'];
_this.focused = false;
_this.required = false;
_this.controlType = 'mat-input';
_this.describedBy = '';
return _this;
}
MatCkeditorDirective_1 = MatCkeditorDirective;
Object.defineProperty(MatCkeditorDirective.prototype, "value", {
get: function () {
return !!this.editor.editorInstance && this.editor.editorInstance.getData();
},
set: function (value) {
if (value !== this.value) {
this.editor.data = value;
this.stateChanges.next();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCkeditorDirective.prototype, "empty", {
get: function () {
return !this.value || this.contentEmpty.includes(this.value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCkeditorDirective.prototype, "shouldLabelFloat", {
get: function () { return this.focused || !this.empty; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatCkeditorDirective.prototype, "disabled", {
get: function () {
return this.editor.disabled;
},
set: function (isDisabled) {
this.editor.setDisabledState(isDisabled);
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
MatCkeditorDirective.prototype.ngOnInit = function () {
var _this = this;
this.editor.blur.subscribe(function () {
_this.focused = false;
_this.stateChanges.next();
});
this.editor.focus.subscribe(function () {
_this.focused = true;
_this.stateChanges.next();
});
};
MatCkeditorDirective.prototype.ngDoCheck = function () {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
};
MatCkeditorDirective.prototype.setDescribedByIds = function (ids) {
this.describedBy = ids.join(' ');
};
MatCkeditorDirective.prototype.onContainerClick = function () {
if (this.editor.editorInstance) {
this.editor.editorInstance.editing.view.focus();
this.stateChanges.next();
}
};
var MatCkeditorDirective_1;
/**
* Implemented as part of MatFormFieldControl.
* See https://material.angular.io/guide/creating-a-custom-form-field-control
*/
MatCkeditorDirective.nextId = 0;
MatCkeditorDirective.ctorParameters = function () { return [
{ type: ckeditor5Angular.CKEditorComponent, decorators: [{ type: core.Host }, { type: core.Self }, { type: core.Optional }] },
{ type: core.ViewContainerRef },
{ type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] },
{ type: forms.NgForm, decorators: [{ type: core.Optional }] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
{ type: core$1.ErrorStateMatcher }
]; };
__decorate([
core.Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], MatCkeditorDirective.prototype, "value", null);
__decorate([
core.HostBinding(),
__metadata("design:type", Object)
], MatCkeditorDirective.prototype, "id", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], MatCkeditorDirective.prototype, "placeholder", void 0);
__decorate([
core.Input(),
__metadata("design:type", Array)
], MatCkeditorDirective.prototype, "contentEmpty", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], MatCkeditorDirective.prototype, "required", void 0);
__decorate([
core.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], MatCkeditorDirective.prototype, "disabled", null);
__decorate([
core.HostBinding('attr.aria-invalid'),
__metadata("design:type", Boolean)
], MatCkeditorDirective.prototype, "errorState", void 0);
__decorate([
core.Input(),
__metadata("design:type", core$1.ErrorStateMatcher)
], MatCkeditorDirective.prototype, "errorStateMatcher", void 0);
__decorate([
core.HostBinding('attr.aria-describedby'),
__metadata("design:type", Object)
], MatCkeditorDirective.prototype, "describedBy", void 0);
MatCkeditorDirective = MatCkeditorDirective_1 = __decorate([
core.Directive({
selector: '[matCkeditor]',
providers: [
{ provide: formField.MatFormFieldControl, useExisting: MatCkeditorDirective_1 },
]
}),
__param(0, core.Host()), __param(0, core.Self()), __param(0, core.Optional()),
__param(2, core.Optional()), __param(2, core.Self()),
__param(3, core.Optional()),
__param(4, core.Optional()),
__metadata("design:paramtypes", [ckeditor5Angular.CKEditorComponent,
core.ViewContainerRef,
forms.NgControl,
forms.NgForm,
forms.FormGroupDirective,
core$1.ErrorStateMatcher])
], MatCkeditorDirective);
return MatCkeditorDirective;
}(_MatInputMixinBase));
var MatCkeditorBalloonDirective = /** @class */ (function (_super) {
__extends(MatCkeditorBalloonDirective, _super);
function MatCkeditorBalloonDirective() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatCkeditorBalloonDirective_1 = MatCkeditorBalloonDirective;
Object.defineProperty(MatCkeditorBalloonDirective.prototype, "toolbar", {
set: function (show) {
if (this.editor && show !== this.toolbarOpen) {
var balloon = this.editor.editorInstance.plugins.get('BalloonToolbar');
if (show) {
this.showToolbar(balloon);
}
else {
balloon.hide();
this.toolbarOpen = false;
}
}
},
enumerable: true,
configurable: true
});
MatCkeditorBalloonDirective.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
this.editor.ready.subscribe(function (editor) {
var balloon = editor.plugins.get('BalloonToolbar');
balloon.stopListening(editor.model.document.selection, 'change:range');
balloon.stopListening(balloon, '_selectionChangeDebounced');
});
this.editor.focus.subscribe(function () {
if (_this.toolbarOpen) {
var balloon = _this.editor.editorInstance.plugins.get('BalloonToolbar');
_this.showToolbar(balloon);
}
});
};
MatCkeditorBalloonDirective.prototype.showToolbar = function (balloon) {
if (!balloon._balloon.hasView(balloon.toolbarView)) {
balloon.listenTo(this.editor.editorInstance.ui, 'update', function () {
balloon._balloon.updatePosition(balloon._getBalloonPositionData());
});
balloon._balloon.add({
view: balloon.toolbarView,
position: balloon._getBalloonPositionData(),
balloonClassName: 'ck-toolbar-container'
});
this.toolbarOpen = true;
}
};
var MatCkeditorBalloonDirective_1;
__decorate([
core.Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], MatCkeditorBalloonDirective.prototype, "toolbar", null);
MatCkeditorBalloonDirective = MatCkeditorBalloonDirective_1 = __decorate([
core.Directive({
selector: '[matCkeditorBalloon]',
providers: [
{ provide: formField.MatFormFieldControl, useExisting: MatCkeditorBalloonDirective_1 },
]
})
], MatCkeditorBalloonDirective);
return MatCkeditorBalloonDirective;
}(MatCkeditorDirective));
var FormFieldSizerDirective = /** @class */ (function () {
function FormFieldSizerDirective(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
}
FormFieldSizerDirective.prototype.ngAfterContentInit = function () {
this.updateSize();
};
FormFieldSizerDirective.prototype.updateSize = function () {
var _this = this;
var infix = this.getElement('mat-form-field-infix');
this.renderer.removeStyle(infix, 'min-height');
setTimeout(function () {
var wrapper = _this.getElement('mat-form-field-wrapper');
var offset = _this.elementRef.nativeElement.offsetHeight -
wrapper.offsetHeight -
parseFloat(getComputedStyle(wrapper).marginTop) -
parseFloat(getComputedStyle(wrapper).marginBottom) +
parseFloat(getComputedStyle(infix).height);
_this.renderer.setStyle(infix, 'min-height', offset + "px");
});
};
FormFieldSizerDirective.prototype.getElement = function (name) {
return this.elementRef.nativeElement.getElementsByClassName(name).item(0);
};
FormFieldSizerDirective.ctorParameters = function () { return [
{ type: core.Renderer2 },
{ type: core.ElementRef }
]; };
FormFieldSizerDirective = __decorate([
core.Directive({
selector: '[formFieldSizer]'
}),
__metadata("design:paramtypes", [core.Renderer2,
core.ElementRef])
], FormFieldSizerDirective);
return FormFieldSizerDirective;
}());
var MatContenteditableModule = /** @class */ (function () {
function MatContenteditableModule() {
}
MatContenteditableModule = __decorate([
core.NgModule({
imports: [],
declarations: [MatContenteditableDirective, FormFieldSizerDirective],
exports: [MatContenteditableDirective, FormFieldSizerDirective],
})
], MatContenteditableModule);
return MatContenteditableModule;
}());
var MatCkeditorModule = /** @class */ (function () {
function MatCkeditorModule() {
}
MatCkeditorModule = __decorate([
core.NgModule({
imports: [],
declarations: [MatCkeditorDirective, MatCkeditorBalloonDirective],
exports: [MatCkeditorDirective, MatCkeditorBalloonDirective],
})
], MatCkeditorModule);
return MatCkeditorModule;
}());
function getText(html) {
if (html) {
var element = document.createElement('span');
element.innerHTML = html;
return element.textContent.replace(/\s/g, '');
}
return '';
}
/**
* @description
* Provides a set of built-in validators that can be used by form controls.
*
* A validator is a function that processes a `FormControl` or collection of
* controls and returns an error map or null. A null map means that validation has passed.
*
* @see [Form Validation](/guide/form-validation)
*
* @publicApi
*/
var HtmlValidators = /** @class */ (function () {
function HtmlValidators() {
}
/**
* @description
* Validator that requires the control have a non-empty value.
*
* @usageNotes
*
* ### Validate that the field is non-empty
*
* ```typescript
* const control = new FormControl('', Validators.required);
*
* console.log(control.errors); // {required: true}
* ```
*
* @returns An error map with the `required` property
* if the validation check fails, otherwise `null`.
*
*/
HtmlValidators.required = function (control) {
var text = getText(control.value);
return text ? null : { 'required': true };
};
/**
* @description
* Validator that requires the length of the control's value to be greater than or equal
* to the provided minimum length. This validator is also provided by default if you use the
* the HTML5 `minlength` attribute.
*
* @usageNotes
*
* ### Validate that the field has a minimum of 3 characters
*
* ```typescript
* const control = new FormControl('ng', Validators.minLength(3));
*
* console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
* ```
*
* ```html
* <input minlength="5">
* ```
*
* @returns A validator function that returns an error map with the
* `minlength` if the validation check fails, otherwise `null`.
*/
HtmlValidators.minLength = function (minLength) {
var fn = function (control) {
var text = getText(control.value);
if (text) {
return text.length < minLength ?
{ 'minlength': { 'requiredLength': minLength, 'actualLength': text.length } } :
null;
}
return null; // don't validate empty values to allow optional controls
};
return fn;
};
/**
* @description
* Validator that requires the length of the control's value to be less than or equal
* to the provided maximum length. This validator is also provided by default if you use the
* the HTML5 `maxlength` attribute.
*
* @usageNotes
*
* ### Validate that the field has maximum of 5 characters
*
* ```typescript
* const control = new FormControl('Angular', Validators.maxLength(5));
*
* console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
* ```
*
* ```html
* <input maxlength="5">
* ```
*
* @returns A validator function that returns an error map with the
* `maxlength` property if the validation check fails, otherwise `null`.
*/
HtmlValidators.maxLength = function (maxLength) {
var fn = function (control) {
var text = getText(control.value);
return text.length > maxLength ?
{ 'maxlength': { 'requiredLength': maxLength, 'actualLength': text.length } } :
null;
};
return fn;
};
return HtmlValidators;
}());
exports.FormFieldSizerDirective = FormFieldSizerDirective;
exports.HtmlValidators = HtmlValidators;
exports.MatCkeditorBalloonDirective = MatCkeditorBalloonDirective;
exports.MatCkeditorDirective = MatCkeditorDirective;
exports.MatCkeditorModule = MatCkeditorModule;
exports.MatContenteditableDirective = MatContenteditableDirective;
exports.MatContenteditableModule = MatContenteditableModule;
exports._MatInputMixinBase = _MatInputMixinBase;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=mat-contenteditable.umd.js.map