clarity-angular
Version:
Angular components for Clarity
1,410 lines • 555 kB
JavaScript
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 __());
};
})();
import { ChangeDetectorRef, Component, ComponentFactoryResolver, ContentChild, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, Input, IterableDiffers, NgModule, NgZone, Optional, Output, QueryList, Renderer2, SkipSelf, TemplateRef, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
import { CommonModule, DOCUMENT } from '@angular/common';
import { Subject as Subject$1 } from 'rxjs/Subject';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/map';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { DOCUMENT as DOCUMENT$1 } from '@angular/platform-browser';
/*
* 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: 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: NgModule, args: [{ imports: [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$1();
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 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: Directive, args: [{ selector: "[clrPopoverOld]" },] },
];
/**
* @nocollapse
*/
PopoverDirectiveOld.ctorParameters = function () { return [
{ type: TemplateRef, },
{ type: ViewContainerRef, },
]; };
PopoverDirectiveOld.propDecorators = {
'anchorElem': [{ type: Input, args: ["clrPopoverOldAnchor",] },],
'anchorPoint': [{ type: Input, args: ["clrPopoverOldAnchorPoint",] },],
'popoverPoint': [{ type: Input, args: ["clrPopoverOldPopoverPoint",] },],
'popoverOptions': [{ type: Input, args: ["clrPopoverOldOptions",] },],
'clrPopoverOldChange': [{ type: Output, args: ["clrPopoverOldChange",] },],
'clrPopoverOld': [{ type: 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: NgModule, args: [{ imports: [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$1();
}
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: 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 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: 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: SkipSelf }, { type: Optional },] },
]; };
Button.propDecorators = {
'templateRef': [{ type: ViewChild, args: ["buttonProjectedRef",] },],
'inMenu': [{ type: Input, args: ["clrInMenu",] },],
'classNames': [{ type: Input, args: ["class",] },],
'name': [{ type: Input, args: ["name",] },],
'type': [{ type: Input, args: ["type",] },],
'disabled': [{ type: Input, args: ["disabled",] },],
'_click': [{ type: 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: 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: ElementRef, },
]; };
ButtonGroup.propDecorators = {
'buttons': [{ type: ContentChildren, args: [Button,] },],
'menuPosition': [{ type: Input, args: ["clrMenuPosition",] },],
'onMouseClick': [{ type: 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: NgModule, args: [{
imports: [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: Directive, args: [{ selector: "[clrLoading]" },] },
];
/**
* @nocollapse
*/
Loading.ctorParameters = function () { return [
{ type: LoadingListener, decorators: [{ type: Optional },] },
]; };
Loading.propDecorators = {
'loading': [{ type: 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: NgModule, args: [{ imports: [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: 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: NgModule, args: [{
imports: [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: 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: Directive, args: [{ selector: "code[clr-code-highlight]" },] },
];
/**
* @nocollapse
*/
CodeHighlight.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer2, },
]; };
CodeHighlight.propDecorators = {
'highlight': [{ type: 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: NgModule, args: [{ imports: [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: 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 EventEmitter(false);
this.change = new 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: 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 is because checkboxes behave differently on IE & Edge.\n https://stackoverflow.com/a/19447939\n \n To fix that, we listen to every click event and then toggle the checkbox manually\n to make it behave the same way across the browsers we support.\n \n This works for cases when users toggle the checkbox using the keyboard too:\n