clarity-angular
Version:
Angular components for Clarity
1,408 lines (1,407 loc) • 562 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs/Subject'), require('@angular/forms'), require('rxjs/BehaviorSubject'), require('rxjs/add/operator/map'), require('@angular/animations'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'rxjs/Subject', '@angular/forms', 'rxjs/BehaviorSubject', 'rxjs/add/operator/map', '@angular/animations', '@angular/platform-browser'], factory) :
(factory((global['clarity-angular'] = {}),global.ng.core,global.ng.common,global.Rx,global.ng.forms,global.Rx,global.Rx.Observable.prototype,global.ng.animations,global.ng.platformBrowser));
}(this, (function (exports,core,common,Subject,forms,BehaviorSubject,map,animations,platformBrowser) { 'use strict';
var __extends = (this && this.__extends) || (function () {
var 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 function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var IconCustomTag = (function () {
function IconCustomTag() {
}
return IconCustomTag;
}());
// No behavior
// The only purpose is to "declare" the tag in Angular
IconCustomTag.decorators = [
{ type: core.Directive, args: [{ selector: "clr-icon" },] },
];
/**
* @nocollapse
*/
IconCustomTag.ctorParameters = function () { return []; };
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ICON_DIRECTIVES = [IconCustomTag];
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrIconModule = (function () {
function ClrIconModule() {
}
return ClrIconModule;
}());
ClrIconModule.decorators = [
{ type: core.NgModule, args: [{ imports: [common.CommonModule], declarations: [ICON_DIRECTIVES], exports: [ICON_DIRECTIVES] },] },
];
/**
* @nocollapse
*/
ClrIconModule.ctorParameters = function () { return []; };
/*
* Copyright (c) 2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var Point = {};
Point.RIGHT_CENTER = 0;
Point.RIGHT_TOP = 1;
Point.RIGHT_BOTTOM = 2;
Point.TOP_CENTER = 3;
Point.TOP_RIGHT = 4;
Point.TOP_LEFT = 5;
Point.BOTTOM_CENTER = 6;
Point.BOTTOM_RIGHT = 7;
Point.BOTTOM_LEFT = 8;
Point.LEFT_CENTER = 9;
Point.LEFT_TOP = 10;
Point.LEFT_BOTTOM = 11;
Point[Point.RIGHT_CENTER] = "RIGHT_CENTER";
Point[Point.RIGHT_TOP] = "RIGHT_TOP";
Point[Point.RIGHT_BOTTOM] = "RIGHT_BOTTOM";
Point[Point.TOP_CENTER] = "TOP_CENTER";
Point[Point.TOP_RIGHT] = "TOP_RIGHT";
Point[Point.TOP_LEFT] = "TOP_LEFT";
Point[Point.BOTTOM_CENTER] = "BOTTOM_CENTER";
Point[Point.BOTTOM_RIGHT] = "BOTTOM_RIGHT";
Point[Point.BOTTOM_LEFT] = "BOTTOM_LEFT";
Point[Point.LEFT_CENTER] = "LEFT_CENTER";
Point[Point.LEFT_TOP] = "LEFT_TOP";
Point[Point.LEFT_BOTTOM] = "LEFT_BOTTOM";
var POSITION_RELATIVE = "relative";
var POSITION_ABSOLUTE = "absolute";
var POSITION_FIXED = "fixed";
var OVERFLOW_SCROLL = "scroll";
var OVERFLOW_AUTO = "auto";
var Popover = (function () {
/**
* @param {?} element
*/
function Popover(element) {
this.element = element;
this.scrollableElements = [];
this.boundOnScrollListener = this.emitScrollEvent.bind(this);
// Browsers don't agree with what to do if some of these are not specified, so we set them all to be safe.
element.style.position = POSITION_ABSOLUTE;
element.style.top = 0;
element.style.bottom = "auto";
element.style.left = 0;
element.style.right = "auto";
}
/**
* @param {?} anchor
* @param {?} anchorAlign
* @param {?} popoverAlign
* @param {?=} __3
* @return {?}
*/
Popover.prototype.anchor = function (anchor, anchorAlign, popoverAlign, _a) {
var _b = _a === void 0 ? {} : _a, _c = _b.offsetX, offsetX = _c === void 0 ? 0 : _c, _d = _b.offsetY, offsetY = _d === void 0 ? 0 : _d, _e = _b.useAnchorParent, useAnchorParent = _e === void 0 ? false : _e;
// TODO: we are assuming here that the popover is inside or next to the anchor.
// We'd need to go up the popover tree too otherwise
this.addScrollEventListeners(anchor);
if (useAnchorParent) {
anchor = anchor.parentNode;
}
// explicitly override anchor's style to static
anchor.style.position = "static";
var /** @type {?} */ anchorRect = anchor.getBoundingClientRect();
var /** @type {?} */ popoverRect = this.element.getBoundingClientRect();
// position of left top corner of anchor + the offset
var /** @type {?} */ leftDiff = anchorRect.left - popoverRect.left + offsetX;
var /** @type {?} */ topDiff = anchorRect.top - popoverRect.top + offsetY;
// first, adjust positioning based on anchor's align point
switch (anchorAlign) {
case Point.LEFT_TOP:
case Point.TOP_LEFT:
break;
case Point.TOP_CENTER:
leftDiff += anchorRect.width / 2;
break;
case Point.TOP_RIGHT:
leftDiff += anchorRect.width;
break;
case Point.RIGHT_TOP:
leftDiff += anchorRect.width;
break;
case Point.LEFT_BOTTOM:
topDiff += anchorRect.height;
break;
case Point.BOTTOM_LEFT:
topDiff += anchorRect.height;
break;
case Point.BOTTOM_CENTER:
topDiff += anchorRect.height;
leftDiff += anchorRect.width / 2;
break;
case Point.BOTTOM_RIGHT:
topDiff += anchorRect.height;
leftDiff += anchorRect.width;
break;
case Point.RIGHT_BOTTOM:
topDiff += anchorRect.height;
leftDiff += anchorRect.width;
break;
case Point.LEFT_CENTER:
topDiff += anchorRect.height / 2;
break;
case Point.RIGHT_CENTER:
topDiff += anchorRect.height / 2;
leftDiff += anchorRect.width;
break;
default:
}
// second, adjust positioning based on popover's align point
switch (popoverAlign) {
case Point.LEFT_TOP:
case Point.TOP_LEFT:
break;
case Point.TOP_CENTER:
leftDiff -= popoverRect.width / 2;
break;
case Point.TOP_RIGHT:
leftDiff -= popoverRect.width;
break;
case Point.RIGHT_TOP:
leftDiff -= popoverRect.width;
break;
case Point.LEFT_BOTTOM:
topDiff -= popoverRect.height;
break;
case Point.BOTTOM_LEFT:
topDiff -= popoverRect.height;
break;
case Point.BOTTOM_CENTER:
topDiff -= popoverRect.height;
leftDiff -= popoverRect.width / 2;
break;
case Point.BOTTOM_RIGHT:
topDiff -= popoverRect.height;
leftDiff -= popoverRect.width;
break;
case Point.RIGHT_BOTTOM:
topDiff -= popoverRect.height;
leftDiff -= popoverRect.width;
break;
case Point.LEFT_CENTER:
topDiff -= popoverRect.height / 2;
break;
case Point.RIGHT_CENTER:
topDiff -= popoverRect.height / 2;
leftDiff -= popoverRect.width;
break;
default:
}
// Third, adjust with popover's margins based on the two align points.
// Here, we make an assumption that popover is primarily positioned outside the
// anchor with minor offset. Without this assumption, it's impossible to apply
// the popover's margins in a predictable way. For example, assume that a popover
// and its anchor are exactly the same size. if a popover is positioned inside the
// anchor (which is technically possible), then it becomes impossible to know what to do
// if the popover has a non-zero margin value all around (because applying the margin in
// all four directions will result in no margin visually, which isn't what we want).
// Therefore, our logic makes assumptions about margins of interest given the points,
// and only covers the cases where popover is outside the anchor.
var /** @type {?} */ popoverComputedStyle = getComputedStyle(this.element);
var /** @type {?} */ marginLeft = parseInt(popoverComputedStyle.marginLeft, 10);
var /** @type {?} */ marginRight = parseInt(popoverComputedStyle.marginRight, 10);
var /** @type {?} */ marginTop = parseInt(popoverComputedStyle.marginTop, 10);
var /** @type {?} */ marginBottom = parseInt(popoverComputedStyle.marginBottom, 10);
switch (anchorAlign) {
case Point.LEFT_TOP:
case Point.TOP_LEFT:
case Point.TOP_RIGHT:
case Point.RIGHT_TOP:
if (popoverAlign === Point.BOTTOM_RIGHT || popoverAlign === Point.RIGHT_BOTTOM) {
topDiff -= marginBottom;
leftDiff -= marginRight;
}
if (popoverAlign === Point.BOTTOM_LEFT || popoverAlign === Point.LEFT_BOTTOM) {
topDiff -= marginTop;
leftDiff += marginLeft;
}
if (popoverAlign === Point.TOP_LEFT || popoverAlign === Point.LEFT_TOP) {
topDiff += marginTop;
leftDiff += marginLeft;
}
if (popoverAlign === Point.TOP_RIGHT || popoverAlign === Point.RIGHT_TOP) {
topDiff += marginTop;
leftDiff -= marginRight;
}
break;
case Point.LEFT_BOTTOM:
case Point.BOTTOM_LEFT:
case Point.BOTTOM_RIGHT:
case Point.RIGHT_BOTTOM:
if (popoverAlign === Point.BOTTOM_LEFT || popoverAlign === Point.LEFT_BOTTOM) {
topDiff -= marginBottom;
leftDiff += marginLeft;
}
if (popoverAlign === Point.BOTTOM_RIGHT || popoverAlign === Point.RIGHT_BOTTOM) {
topDiff -= marginBottom;
leftDiff -= marginRight;
}
if (popoverAlign === Point.TOP_LEFT || popoverAlign === Point.LEFT_TOP) {
topDiff += marginTop;
leftDiff += marginLeft;
}
if (popoverAlign === Point.TOP_RIGHT || popoverAlign === Point.RIGHT_TOP) {
topDiff += marginTop;
leftDiff -= marginRight;
}
break;
case Point.TOP_CENTER:
topDiff -= marginBottom;
leftDiff += marginLeft;
leftDiff -= marginRight;
break;
case Point.BOTTOM_CENTER:
topDiff += marginTop;
leftDiff += marginLeft;
leftDiff -= marginRight;
break;
case Point.LEFT_CENTER:
topDiff += marginTop;
topDiff -= marginBottom;
leftDiff -= marginRight;
break;
case Point.RIGHT_CENTER:
topDiff += marginTop;
topDiff -= marginBottom;
leftDiff += marginLeft;
break;
default:
}
this.element.style.transform = "translateX(" + leftDiff + "px) translateY(" + topDiff + "px)";
return this._scroll.asObservable();
};
/**
* @return {?}
*/
Popover.prototype.release = function () {
this.element.style.transform = "";
this.removeScrollEventListeners();
};
/**
* @param {?} container
* @return {?}
*/
Popover.prototype.isPositioned = function (container) {
var /** @type {?} */ position = getComputedStyle(container).position;
return position === POSITION_RELATIVE || position === POSITION_ABSOLUTE || position === POSITION_FIXED;
};
/**
* @return {?}
*/
Popover.prototype.emitScrollEvent = function () {
this._scroll.next();
};
/**
* @param {?} e
* @return {?}
*/
Popover.prototype.addScrollEventListeners = function (e) {
this._scroll = new Subject.Subject();
var /** @type {?} */ anchor = e;
var /** @type {?} */ current = e;
while (current && current !== document) {
if (this.scrolls(current)) {
current.addEventListener("scroll", this.boundOnScrollListener);
this.scrollableElements.push(current);
}
if (current !== anchor && this.isPositioned(current)) {
break;
}
current = current.parentNode;
}
};
/**
* @return {?}
*/
Popover.prototype.removeScrollEventListeners = function () {
for (var _i = 0, _a = this.scrollableElements; _i < _a.length; _i++) {
var elem = _a[_i];
elem.removeEventListener("scroll", this.boundOnScrollListener);
}
this.scrollableElements.length = 0;
if (this._scroll) {
this._scroll.complete();
delete this._scroll;
}
};
/**
* @param {?} container
* @return {?}
*/
Popover.prototype.scrolls = function (container) {
var /** @type {?} */ computedStyles = getComputedStyle(container);
return computedStyles.overflowX === OVERFLOW_SCROLL || computedStyles.overflowX === OVERFLOW_AUTO ||
computedStyles.overflowY === OVERFLOW_SCROLL || computedStyles.overflowY === OVERFLOW_AUTO;
};
return Popover;
}());
/*
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var openCount = 0;
var waiting = [];
var PopoverDirectiveOld = (function () {
/**
* @param {?} templateRef
* @param {?} viewContainer
*/
function PopoverDirectiveOld(templateRef, viewContainer) {
this.templateRef = templateRef;
this.viewContainer = viewContainer;
this.popoverOptions = {};
this.clrPopoverOldChange = new core.EventEmitter(false);
}
Object.defineProperty(PopoverDirectiveOld.prototype, "clrPopoverOld", {
/**
* @param {?} open
* @return {?}
*/
set: function (open) {
var _this = this;
if (open) {
if (this.popoverOptions.allowMultipleOpen) {
this.createPopover();
}
else {
if (openCount === 0) {
this.createPopover();
}
else {
waiting.push(function () {
_this.createPopover();
});
}
}
}
else {
this.viewContainer.clear();
this.destroyPopover();
if (!this.popoverOptions.allowMultipleOpen) {
if (waiting.length > 0) {
var /** @type {?} */ createPopoverFn = waiting.shift();
createPopoverFn();
}
}
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
PopoverDirectiveOld.prototype.createPopover = function () {
var _this = this;
var /** @type {?} */ embeddedViewRef = (this.viewContainer.createEmbeddedView(this.templateRef));
// TODO: Not sure of the risks associated with using this. Find an alternative.
// Needed for find the correct height and width of dynamically created views
// inside of the popover. For Eg: Button Groups
embeddedViewRef.detectChanges();
// filter out other nodes in the view ref so we are only left with element nodes
var /** @type {?} */ elementNodes = embeddedViewRef.rootNodes.filter(function (node) {
return node.nodeType === 1;
});
// we take the first element node in the embedded view; usually there should only be one anyways
this._popoverInstance = new Popover(elementNodes[0]);
this._subscription =
this._popoverInstance.anchor(this.anchorElem, this.anchorPoint, this.popoverPoint, this.popoverOptions)
.subscribe(function () {
_this.clrPopoverOldChange.emit(false);
});
openCount++;
};
/**
* @return {?}
*/
PopoverDirectiveOld.prototype.destroyPopover = function () {
if (this._popoverInstance) {
this._subscription.unsubscribe();
this._popoverInstance.release();
delete this._popoverInstance;
openCount--;
}
};
/**
* @return {?}
*/
PopoverDirectiveOld.prototype.ngOnDestroy = function () {
this.destroyPopover();
};
return PopoverDirectiveOld;
}());
PopoverDirectiveOld.decorators = [
{ type: core.Directive, args: [{ selector: "[clrPopoverOld]" },] },
];
/**
* @nocollapse
*/
PopoverDirectiveOld.ctorParameters = function () { return [
{ type: core.TemplateRef, },
{ type: core.ViewContainerRef, },
]; };
PopoverDirectiveOld.propDecorators = {
'anchorElem': [{ type: core.Input, args: ["clrPopoverOldAnchor",] },],
'anchorPoint': [{ type: core.Input, args: ["clrPopoverOldAnchorPoint",] },],
'popoverPoint': [{ type: core.Input, args: ["clrPopoverOldPopoverPoint",] },],
'popoverOptions': [{ type: core.Input, args: ["clrPopoverOldOptions",] },],
'clrPopoverOldChange': [{ type: core.Output, args: ["clrPopoverOldChange",] },],
'clrPopoverOld': [{ type: core.Input },],
};
/*
* Copyright (c) 2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var POPOVER_DIRECTIVES = [PopoverDirectiveOld];
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrCommonPopoverModule = (function () {
function ClrCommonPopoverModule() {
}
return ClrCommonPopoverModule;
}());
ClrCommonPopoverModule.decorators = [
{ type: core.NgModule, args: [{ imports: [common.CommonModule], declarations: [POPOVER_DIRECTIVES], exports: [POPOVER_DIRECTIVES] },] },
];
/**
* @nocollapse
*/
ClrCommonPopoverModule.ctorParameters = function () { return []; };
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ButtonInGroupService = (function () {
function ButtonInGroupService() {
this._changes = new Subject.Subject();
}
Object.defineProperty(ButtonInGroupService.prototype, "changes", {
/**
* @return {?}
*/
get: function () {
return this._changes.asObservable();
},
enumerable: true,
configurable: true
});
/**
* @param {?} button
* @return {?}
*/
ButtonInGroupService.prototype.updateButtonGroup = function (button) {
this._changes.next(button);
};
return ButtonInGroupService;
}());
ButtonInGroupService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
ButtonInGroupService.ctorParameters = function () { return []; };
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var Button = (function () {
/**
* @param {?} buttonInGroupService
*/
function Button(buttonInGroupService) {
this.buttonInGroupService = buttonInGroupService;
this._enableService = false;
this._inMenu = false;
this._classNames = "btn";
this._name = null;
this._type = null;
this._disabled = null;
this._click = new core.EventEmitter(false);
}
Object.defineProperty(Button.prototype, "inMenu", {
/**
* @return {?}
*/
get: function () {
return this._inMenu;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
value = !!value;
if (this._inMenu !== value) {
this._inMenu = value;
// We check if the service flag is enabled
// and if the service exists because the service is optional
if (this._enableService && this.buttonInGroupService) {
this.buttonInGroupService.updateButtonGroup(this);
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "classNames", {
/**
* @return {?}
*/
get: function () {
return this._classNames;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (typeof value === "string") {
var /** @type {?} */ classNames = value.split(" ");
if (classNames.indexOf("btn") === -1) {
classNames.push("btn");
}
this._classNames = classNames.join(" ");
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "name", {
/**
* @return {?}
*/
get: function () {
return this._name;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (typeof value === "string") {
this._name = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "type", {
/**
* @return {?}
*/
get: function () {
return this._type;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (typeof value === "string") {
this._type = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "disabled", {
/**
* @return {?}
*/
get: function () {
return this._disabled;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (value !== null && value !== false) {
this._disabled = "";
}
else {
this._disabled = null;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Button.prototype.emitClick = function () {
this._click.emit(true);
};
/**
* @return {?}
*/
Button.prototype.ngAfterViewInit = function () {
this._enableService = true;
};
return Button;
}());
Button.decorators = [
{ type: core.Component, args: [{
selector: "clr-button",
template: "\n <ng-template #buttonProjectedRef>\n <button \n [class]=\"classNames\" \n (click)=\"emitClick()\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.disabled]=\"disabled\">\n <ng-content></ng-content>\n </button>\n </ng-template>\n "
},] },
];
/**
* @nocollapse
*/
Button.ctorParameters = function () { return [
{ type: ButtonInGroupService, decorators: [{ type: core.SkipSelf }, { type: core.Optional },] },
]; };
Button.propDecorators = {
'templateRef': [{ type: core.ViewChild, args: ["buttonProjectedRef",] },],
'inMenu': [{ type: core.Input, args: ["clrInMenu",] },],
'classNames': [{ type: core.Input, args: ["class",] },],
'name': [{ type: core.Input, args: ["name",] },],
'type': [{ type: core.Input, args: ["type",] },],
'disabled': [{ type: core.Input, args: ["disabled",] },],
'_click': [{ type: core.Output, args: ["click",] },],
};
/*
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/ var menuPositions = ["bottom-left", "bottom-right", "top-left", "top-right", "left-bottom", "left-top", "right-bottom", "right-top"];
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ButtonGroup = (function () {
/**
* @param {?} buttonGroupNewService
* @param {?} elementRef
*/
function ButtonGroup(buttonGroupNewService, elementRef) {
this.buttonGroupNewService = buttonGroupNewService;
this.elementRef = elementRef;
this.inlineButtons = [];
this.menuButtons = [];
this._openMenu = false;
this.anchorPoint = Point.BOTTOM_LEFT;
this.popoverPoint = Point.LEFT_TOP;
/**
* Flag with indicates if the overflow menu toggle was clicked.
* If true, this can save us traversing the DOM to find
* whether the click was withing the button group toggle
* or menu in the onMouseClick method
*/
this._overflowMenuToggleClicked = false;
}
/**
* 1. Initializes the initial Button Group View
* 2. Subscribes to changes on the ContentChildren
* in case the user content projection changes
* @return {?}
*/
ButtonGroup.prototype.ngAfterContentInit = function () {
var _this = this;
this.initializeButtons();
this.buttonGroupNewService.changes.subscribe(function (button) { return _this.rearrangeButton(button); });
this.buttons.changes.subscribe(function () {
_this.initializeButtons();
});
};
/**
* Moves the button into the other ViewContainer
* when an update is received.
*
* @param {?} button
* @return {?}
*/
ButtonGroup.prototype.rearrangeButton = function (button) {
var /** @type {?} */ fromView;
var /** @type {?} */ toView;
if (button.inMenu) {
fromView = this.inlineButtons;
toView = this.menuButtons;
}
else {
fromView = this.menuButtons;
toView = this.inlineButtons;
}
var /** @type {?} */ index = fromView.indexOf(button);
if (index > -1) {
fromView.splice(index, 1);
var /** @type {?} */ moveIndex = this.getMoveIndex(button);
if (moveIndex <= toView.length) {
toView.splice(moveIndex, 0, button);
}
}
};
/**
* Author: Eudes
*
* Finds the order of a button w.r.t other buttons
*
* @param {?} buttonToMove
* @return {?}
*/
ButtonGroup.prototype.getMoveIndex = function (buttonToMove) {
var /** @type {?} */ tempArr = this.buttons.filter(function (button) { return (button.inMenu === buttonToMove.inMenu); });
return tempArr.indexOf(buttonToMove);
};
/**
* Finds where each button belongs based on
* the ContentChildren
* @return {?}
*/
ButtonGroup.prototype.initializeButtons = function () {
var /** @type {?} */ tempInlineButtons = [];
var /** @type {?} */ tempInMenuButtons = [];
this.buttons.forEach(function (button) {
if (button.inMenu) {
tempInMenuButtons.push(button);
}
else {
tempInlineButtons.push(button);
}
});
this.inlineButtons = tempInlineButtons;
this.menuButtons = tempInMenuButtons;
};
Object.defineProperty(ButtonGroup.prototype, "menuPosition", {
/**
* @return {?}
*/
get: function () {
return this._menuPosition;
},
/**
* @param {?} pos
* @return {?}
*/
set: function (pos) {
if (pos && (menuPositions.indexOf(pos) > -1)) {
this._menuPosition = pos;
}
else {
this._menuPosition = "bottom-left";
}
// set the popover values based on menu position
switch (this._menuPosition) {
case ("top-right"):
this.anchorPoint = Point.TOP_RIGHT;
this.popoverPoint = Point.RIGHT_BOTTOM;
break;
case ("top-left"):
this.anchorPoint = Point.TOP_LEFT;
this.popoverPoint = Point.LEFT_BOTTOM;
break;
case ("bottom-right"):
this.anchorPoint = Point.BOTTOM_RIGHT;
this.popoverPoint = Point.RIGHT_TOP;
break;
case ("bottom-left"):
this.anchorPoint = Point.BOTTOM_LEFT;
this.popoverPoint = Point.LEFT_TOP;
break;
case ("right-top"):
this.anchorPoint = Point.RIGHT_TOP;
this.popoverPoint = Point.LEFT_TOP;
break;
case ("right-bottom"):
this.anchorPoint = Point.RIGHT_BOTTOM;
this.popoverPoint = Point.LEFT_BOTTOM;
break;
case ("left-top"):
this.anchorPoint = Point.LEFT_TOP;
this.popoverPoint = Point.RIGHT_TOP;
break;
case ("left-bottom"):
this.anchorPoint = Point.LEFT_BOTTOM;
this.popoverPoint = Point.RIGHT_BOTTOM;
break;
default:
this.anchorPoint = Point.BOTTOM_LEFT;
this.popoverPoint = Point.LEFT_TOP;
break;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonGroup.prototype, "openMenu", {
/**
* @return {?}
*/
get: function () {
return this._openMenu;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._openMenu = value;
},
enumerable: true,
configurable: true
});
/**
* Toggle the Dropdown Menu when the Dropdown Toggle is
* clicked. Also set a flag that indicates that the toggle
* was clicked so that we don't traverse the DOM to find the
* location of the click.
* @return {?}
*/
ButtonGroup.prototype.toggleMenu = function () {
this.openMenu = !this.openMenu;
this._overflowMenuToggleClicked = true;
};
/**
* Called on mouse clicks anywhere in the DOM.
* Checks to see if the mouseclick happened on the host or outside
* @param {?} target
* @return {?}
*/
ButtonGroup.prototype.onMouseClick = function (target) {
if (this.openMenu && !this._overflowMenuToggleClicked) {
// Reset the overflow menu toggle clicked flag
this._overflowMenuToggleClicked = false;
var /** @type {?} */ current = target; // Get the element in the DOM on which the mouse was clicked
var /** @type {?} */ host = this.elementRef.nativeElement; // Current Button Group
if (current.classList.contains("dropdown-menu")) {
current = current.parentNode;
while (current) {
if (current === document) {
this.openMenu = false;
return;
}
// If clicked on dropdown menu and menu is in host
// do nothing
if (current === host) {
return;
}
current = current.parentNode;
}
}
this.openMenu = false;
}
this._overflowMenuToggleClicked = false; // Reset the overflow menu toggle clicked flag
};
return ButtonGroup;
}());
ButtonGroup.decorators = [
{ type: core.Component, args: [{
selector: "clr-button-group",
template: "\n <ng-container *ngFor=\"let inlineButton of inlineButtons\">\n <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"menuButtons.length > 0\">\n <div\n class=\"btn-group-overflow open\"\n [ngClass]=\"menuPosition\"\n #anchor>\n <button\n class=\"btn dropdown-toggle\"\n (click)=\"toggleMenu()\">\n <clr-icon shape=\"ellipsis-horizontal\"></clr-icon>\n </button>\n <div\n class=\"dropdown-menu\"\n *clrPopoverOld=\"openMenu; anchor: anchor; anchorPoint: anchorPoint; popoverPoint: popoverPoint;\">\n <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n </div>\n </div>\n </ng-container>\n <ng-template #ref>\n <ng-container *ngFor=\"let menuButton of menuButtons\">\n <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </ng-container>\n </ng-template>\n ",
providers: [ButtonInGroupService],
host: { "[class.btn-group]": "true" }
},] },
];
/**
* @nocollapse
*/
ButtonGroup.ctorParameters = function () { return [
{ type: ButtonInGroupService, },
{ type: core.ElementRef, },
]; };
ButtonGroup.propDecorators = {
'buttons': [{ type: core.ContentChildren, args: [Button,] },],
'menuPosition': [{ type: core.Input, args: ["clrMenuPosition",] },],
'onMouseClick': [{ type: core.HostListener, args: ["document:click", ["$event.target"],] },],
};
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var BUTTON_GROUP_DIRECTIVES = [Button, ButtonGroup];
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrButtonGroupModule = (function () {
function ClrButtonGroupModule() {
}
return ClrButtonGroupModule;
}());
ClrButtonGroupModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, ClrIconModule, ClrCommonPopoverModule],
declarations: [BUTTON_GROUP_DIRECTIVES],
exports: [BUTTON_GROUP_DIRECTIVES]
},] },
];
/**
* @nocollapse
*/
ClrButtonGroupModule.ctorParameters = function () { return []; };
/**
* This is an abstract class because we need it to still be a valid token for dependency injection after transpiling.
* This does not mean you should extend it, simply implementing it is fine.
* @abstract
*/
var LoadingListener = (function () {
function LoadingListener() {
}
/**
* @abstract
* @return {?}
*/
LoadingListener.prototype.startLoading = function () { };
/**
* @abstract
* @return {?}
*/
LoadingListener.prototype.doneLoading = function () { };
return LoadingListener;
}());
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var Loading = (function () {
/**
* @param {?} listener
*/
function Loading(listener) {
this.listener = listener;
this._loading = false;
}
Object.defineProperty(Loading.prototype, "loading", {
/**
* @return {?}
*/
get: function () {
return this._loading;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
value = !!value;
if (value === this._loading) {
return;
}
this._loading = value;
if (this.listener) {
if (value) {
this.listener.startLoading();
}
else {
this.listener.doneLoading();
}
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Loading.prototype.ngOnDestroy = function () {
this.loading = false;
};
return Loading;
}());
Loading.decorators = [
{ type: core.Directive, args: [{ selector: "[clrLoading]" },] },
];
/**
* @nocollapse
*/
Loading.ctorParameters = function () { return [
{ type: LoadingListener, decorators: [{ type: core.Optional },] },
]; };
Loading.propDecorators = {
'loading': [{ type: core.Input, args: ["clrLoading",] },],
};
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var LOADING_DIRECTIVES = [Loading];
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrLoadingModule = (function () {
function ClrLoadingModule() {
}
return ClrLoadingModule;
}());
ClrLoadingModule.decorators = [
{ type: core.NgModule, args: [{ imports: [common.CommonModule], declarations: [LOADING_DIRECTIVES], exports: [LOADING_DIRECTIVES] },] },
];
/**
* @nocollapse
*/
ClrLoadingModule.ctorParameters = function () { return []; };
/*
* Copyright (c) 2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var LoadingButton = (function () {
function LoadingButton() {
}
/**
* @return {?}
*/
LoadingButton.prototype.startLoading = function () {
this.loading = true;
};
/**
* @return {?}
*/
LoadingButton.prototype.doneLoading = function () {
this.loading = false;
};
return LoadingButton;
}());
LoadingButton.decorators = [
{ type: core.Component, args: [{
selector: "button[clrLoading]",
template: "\n <span class=\"spinner spinner-inline\" *ngIf=\"loading\"></span>\n <ng-content></ng-content>\n ",
providers: [{ provide: LoadingListener, useExisting: LoadingButton }]
},] },
];
/**
* @nocollapse
*/
LoadingButton.ctorParameters = function () { return []; };
/*
* Copyright (c) 2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var LOADING_BUTTON_DIRECTIVES = [LoadingButton];
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrLoadingButtonModule = (function () {
function ClrLoadingButtonModule() {
}
return ClrLoadingButtonModule;
}());
ClrLoadingButtonModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, ClrLoadingModule],
declarations: [LOADING_BUTTON_DIRECTIVES],
exports: [LOADING_BUTTON_DIRECTIVES, ClrLoadingModule]
},] },
];
/**
* @nocollapse
*/
ClrLoadingButtonModule.ctorParameters = function () { return []; };
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrButtonModule = (function () {
function ClrButtonModule() {
}
return ClrButtonModule;
}());
ClrButtonModule.decorators = [
{ type: core.NgModule, args: [{
exports: [
ClrLoadingButtonModule,
ClrButtonGroupModule,
]
},] },
];
/**
* @nocollapse
*/
ClrButtonModule.ctorParameters = function () { return []; };
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var CodeHighlight = (function () {
/**
* @param {?} _el
* @param {?} renderer
*/
function CodeHighlight(_el, renderer) {
this._el = _el;
this.renderer = renderer;
this._highlight = "";
}
/**
* @return {?}
*/
CodeHighlight.prototype.ngAfterContentInit = function () {
this.redraw();
};
/**
* @return {?}
*/
CodeHighlight.prototype.redraw = function () {
if (this._el && this._el.nativeElement) {
Prism.highlightElement(this._el.nativeElement);
}
};
Object.defineProperty(CodeHighlight.prototype, "highlight", {
/**
* @return {?}
*/
get: function () {
return this._highlight;
},
/**
* @param {?} val
* @return {?}
*/
set: function (val) {
if (val && val.trim() !== "") {
this._highlight = val;
this.renderer.addClass(this._el.nativeElement, this._highlight);
}
},
enumerable: true,
configurable: true
});
return CodeHighlight;
}());
CodeHighlight.decorators = [
{ type: core.Directive, args: [{ selector: "code[clr-code-highlight]" },] },
];
/**
* @nocollapse
*/
CodeHighlight.ctorParameters = function () { return [
{ type: core.ElementRef, },
{ type: core.Renderer2, },
]; };
CodeHighlight.propDecorators = {
'highlight': [{ type: core.Input, args: ["clr-code-highlight",] },],
};
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var CODE_HIGHLIGHT_DIRECTIVES = [CodeHighlight];
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrSyntaxHighlightModule = (function () {
function ClrSyntaxHighlightModule() {
}
return ClrSyntaxHighlightModule;
}());
ClrSyntaxHighlightModule.decorators = [
{ type: core.NgModule, args: [{ imports: [common.CommonModule], declarations: [CODE_HIGHLIGHT_DIRECTIVES], exports: [CODE_HIGHLIGHT_DIRECTIVES] },] },
];
/**
* @nocollapse
*/
ClrSyntaxHighlightModule.ctorParameters = function () { return []; };
/**
* Copyright (c) 2016-2017 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
var ClrCodeModule = (function () {
function ClrCodeModule() {
}
return ClrCodeModule;
}());
ClrCodeModule.decorators = [
{ type: core.NgModule, args: [{ exports: [ClrSyntaxHighlightModule] },] },
];
/**
* @nocollapse
*/
ClrCodeModule.ctorParameters = function () { return []; };
/*
* Copyright (c) 2016 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/**
* Private counter to generate unique IDs for the checkboxes, to bind the labels to them.
*/
var latestId = 0;
var Checkbox = (function () {
function Checkbox() {
// If our host has an ID attribute, we use this instead of our index.
this._id = (latestId++).toString();
this.name = null;
this.disabled = false;
this.inline = false;
this._checked = false;
this._indeterminate = false;
this.indeterminateChange = new core.EventEmitter(false);
this.change = new core.EventEmitter(false);
this.onChangeCallback = function (_) { };
this.onTouchedCallback = function () { };
}
Object.defineProperty(Checkbox.prototype, "id", {
/**
* @return {?}
*/
get: function () {
return "clr-checkbox-" + this._id;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "checked", {
/**
* @return {?}
*/
get: function () {
return this._checked;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (value !== this._checked) {
if (this._indeterminate) {
this.setIndeterminate(false);
}
this.setChecked(value);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "indeterminate", {
/**
* @return {?}
*/
get: function () {
return this._indeterminate;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (this._indeterminate !== value) {
if (this._checked) {
this.setChecked(false);
}
this.setIndeterminate(value);
}
},
enumerable: true,
configurable: true
});
/**
* @param {?} value
* @return {?}
*/
Checkbox.prototype.setIndeterminate = function (value) {
this._indeterminate = value;
this.indeterminateChange.emit(this._indeterminate);
};
/**
* @param {?} value
* @return {?}
*/
Checkbox.prototype.setChecked = function (value) {
this._checked = value;
this.change.emit(this._checked);
};
/**
* @return {?}
*/
Checkbox.prototype.toggle = function () {
this.checked = !this.checked;
this.onChangeCallback(this.checked);
};
/**
* @param {?} value
* @return {?}
*/
Checkbox.prototype.writeValue = function (value) {
if (value === null) {
value = false;
}
if (value !== this.checked) {
this.checked = value;
}
};
/**
* @param {?} onChange
* @return {?}
*/
Checkbox.prototype.registerOnChange = function (onChange) {
this.onChangeCallback = onChange;
};
/**
* @param {?} onTouched
* @return {?}
*/
Checkbox.prototype.registerOnTouched = function (onTouched) {
this.onTouchedCallback = onTouched;
};
/**
* @return {?}
*/
Checkbox.prototype.touch = function () {
this.onTouchedCallback();
};
/**
* @return {?}
*/
Checkbox.prototype.checkIndeterminateState = function () {
if (!this.disabled) {
this.toggle();
}
};
return Checkbox;
}());
Checkbox.decorators = [
{ type: core.Component, args: [{
selector: "clr-checkbox",
template: "\n <!--\n FIXME: We are not subscribed to the change event but the click event here.\n The reason for that i