nd-gui
Version:
UI components for NetDocuments
145 lines (138 loc) • 17.2 kB
JavaScript
import { Component, Input, Output, forwardRef, EventEmitter, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SwitchComponent {
constructor() {
this.labelPosition = "right";
this.disabled = false;
this.onBlur = new EventEmitter();
this.switchIsOn = false;
this.onModelChange = () => { };
this.onModelTouched = () => { };
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.id) {
this.id = "switch_id_" + Date.now();
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value) {
this.switchIsOn = value;
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onModelChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onModelTouched = fn;
}
/**
* @return {?}
*/
toggleSwitchHandler() {
if (!this.disabled) {
this.switchIsOn = !this.switchIsOn;
this.onModelChange(this.switchIsOn);
}
}
/**
* @param {?} $event
* @return {?}
*/
onBlurHandler($event) {
this.onModelTouched();
this.onBlur.emit($event);
}
}
SwitchComponent.decorators = [
{ type: Component, args: [{
selector: 'nd-switch',
template: `
<label *ngIf="label" for="{{id}}"
class="nd-switch-label"
[class.top]="labelPosition == 'top'"
title="{{label}}"
(click)="toggleSwitchHandler()">
{{label}}
</label>
<div class="nd-switch-box"
[attr.id]="id"
tabindex="0"
[title]="(switchIsOn ? 'On' : 'Off') + (disabled ? ', disabled' : '')"
[class.on]="switchIsOn"
[class.disabled]="disabled"
(click)="toggleSwitchHandler()"
(blur)="onBlurHandler($event)">
<div class="nd-switch-knob"
[class.on]="switchIsOn"
[class.off]="!switchIsOn"></div>
<input type="checkbox" [ngModel]="switchIsOn" class="nd-switch-input" [attr.name]="name">
</div>`,
styles: [`:host{padding-top:10px;padding-bottom:10px}.nd-switch-box{display:inline-block;padding:2px;border-radius:16px;height:22px;width:39px;border:1px solid #979797;background-color:#fff;cursor:pointer;position:relative}.nd-switch-box.on{background-color:#225582;border-color:#225582}.nd-switch-box.disabled{background-color:#e8e8e8;cursor:default;border-color:#979797}.nd-switch-box:focus{outline:0}.nd-switch-knob{height:16px;width:16px;border-radius:16px;background-color:#979797;cursor:inherit;-webkit-box-shadow:1px 1px 4px 0 rgba(0,0,0,.18);box-shadow:1px 1px 4px 0 rgba(0,0,0,.18)}.nd-switch-box.on .nd-switch-knob{background-color:#fff;-webkit-box-shadow:-1px 1px 4px 0 rgba(0,0,0,.3);box-shadow:-1px 1px 4px 0 rgba(0,0,0,.3);-webkit-transform:translateX(17px);transform:translateX(17px)}.nd-switch-box.disabled .nd-switch-knob{background-color:#979797;-webkit-box-shadow:none;box-shadow:none}.nd-switch-box,.nd-switch-knob{-webkit-transition:.3;-webkit-transition:.3s;transition:.3s}.nd-switch-input{visibility:hidden;position:absolute;top:0}.nd-switch-label{color:#7f7f7f;margin-left:14px;width:calc(100% - 56px);height:24px;line-height:24px;overflow:hidden;text-overflow:ellipsis;float:right}.nd-switch-label.top{display:block;float:none;margin-left:0;margin-bottom:10px;line-height:1em;height:1em}`, `*{-webkit-box-sizing:border-box;box-sizing:border-box}.ui-widget{font-family:'Open Sans',sans-serif;font-size:14px;font-weight:400;font-style:normal;font-stretch:normal;color:#000}.ui-widget .ui-widget,.ui-widget button,.ui-widget input,.ui-widget select,.ui-widget textarea{font-size:1em}.ui-widget.ui-widget-content{border:none;overflow-x:hidden}.ui-widget.ui-widget-content .ui-overlaypanel-content{padding:0}.ui-widget-content{border:none;background:#fff;color:#000}.ui-widget-content a{color:#000}.ui-widget-header{border:1px solid #194062;background:#225582;color:#fff;font-weight:400}.ui-widget-header a{color:#fff}.ui-chkbox{margin:5px 14px 5px 5px}.ui-chkbox .ui-chkbox-box{cursor:pointer;vertical-align:middle;margin-right:0;height:16px;width:16px;position:relative}.ui-chkbox .ui-chkbox-icon{font-weight:700;font-size:17px;position:absolute;top:-2px;left:-1px}.ui-chkbox-box .ui-chkbox-icon.fa-close:before{content:"\\f068"!important}.ui-button,.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,html .ui-button.ui-state-disabled:active,html .ui-button.ui-state-disabled:hover{border:1px solid #e8e8e8;background:#fff;font-weight:400;color:#000}.ui-button,.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button{color:#000;text-decoration:none}.ui-button:focus,.ui-button:hover,.ui-state-focus,.ui-state-hover,.ui-widget-content .ui-state-focus,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-focus,.ui-widget-header .ui-state-hover{border:1px solid #225582;background:#fff;font-weight:400;color:#000}.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,a.ui-button:focus,a.ui-button:hover{color:#fff;text-decoration:none}.ui-visual-focus{-webkit-box-shadow:0 0 3px 1px #5e9ed6;box-shadow:0 0 3px 1px #5e9ed6}.ui-button.ui-state-active:hover,.ui-button:active,.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active{border:1px solid #225582;background:#1e4c74;font-weight:400;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#225582;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:none;background:#e0ecf7;color:#000}.ui-state-checked{border:1px solid #e66e25;background:#e66e25}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#fff}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #df2e2e;background:#fff;color:#666}.ui-state-error a,.ui-state-error-text,.ui-widget-content .ui-state-error a,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error a,.ui-widget-header .ui-state-error-text{color:#666}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:700}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:400}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-corner-all,.ui-corner-left,.ui-corner-tl,.ui-corner-top{border-top-left-radius:1px}.ui-corner-all,.ui-corner-right,.ui-corner-top,.ui-corner-tr{border-top-right-radius:1px}.ui-corner-all,.ui-corner-bl,.ui-corner-bottom,.ui-corner-left{border-bottom-left-radius:1px}.ui-corner-all,.ui-corner-bottom,.ui-corner-br,.ui-corner-right{border-bottom-right-radius:1px}.ui-widget-overlay{background:#000;opacity:.35;filter:Alpha(Opacity=35)}.ui-widget-shadow{box-shadow:0 0 3px 0 rgba(0,0,0,.14),0 2px 4px 0 rgba(0,0,0,.18);-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.14),0 2px 4px 0 rgba(0,0,0,.18)}.ui-inputtext.ui-state-default{height:32px;padding:0 20px}.ui-menu{margin-top:4px;white-space:nowrap} screen and (max-height:900px){.ui-menu{max-height:450px;overflow-y:auto}} screen and (max-height:500px){.ui-menu{max-height:200px;overflow-y:auto}} screen and (min-height:901px){.ui-menu{max-height:500px;overflow-y:auto}}.ui-menu::-webkit-scrollbar{background-color:#fff;width:5px}.ui-menu::-webkit-scrollbar-thumb{background-color:#c2c2c2;border-radius:10px}.ui-menu .ui-menuitem,.ui-menu .ui-menuitem-link{line-height:34px}.ui-menu .ui-menuitem-link{padding:0 20px;border:0}.ui-menu .ui-menuitem-link.ui-state-disabled:hover{background-color:#fff}.ui-menuitem-text{vertical-align:middle}.ui-menu .ui-menuitem-link .ui-menuitem-icon{margin-right:8px;color:#225582}.ui-menu-selectable .ui-menuitem-icon{float:right;margin-top:13px}.ui-menu-selectable .ui-menuitem-icon~.ui-menuitem-text{font-weight:700;color:#225582}.ui-menu .ui-menu-parent .ui-submenu-icon{margin-top:12px}.ui-menu .ui-menu-parent .ui-menu-child{padding:0}.ui-dropdown{height:32px}.ui-dropdown .ui-dropdown-list{padding:0;border:none}.ui-dropdown .ui-dropdown-item:hover,.ui-menu .ui-menuitem-link.keyOrMouseNav,.ui-menu .ui-menuitem-link:hover{background-color:#e0ecf7}.ui-dropdown .ui-dropdown-trigger{border:0;padding:0 15px;width:auto}.ui-dropdown .ui-dropdown-trigger .fa{margin-top:10px}.ui-dropdown .ui-dropdown-label{line-height:24px}.ui-dropdown .ui-state-highlight{background-color:#fff;color:#225582;font-weight:700}.ui-dropdown .ui-state-highlight span::after{font-family:FontAwesome;content:"\\f00c";float:right;padding-top:2px}.ui-autocomplete-panel,.ui-dropdown-panel{margin-top:10px;z-index:7!important}.ui-autocomplete-input.ui-state-default,.ui-dropdown.ui-state-default{border:1px solid #e8e8e8;height:32px;padding:0 15px}.ui-autocomplete-panel .ui-autocomplete-list,.ui-menu{padding:0}.ui-autocomplete-panel .ui-autocomplete-list-item,.ui-dropdown-panel .ui-dropdown-item,.ui-menu .ui-menuitem{margin:0}.ui-autocomplete-panel .ui-autocomplete-list-item,.ui-dropdown .ui-dropdown-item{line-height:34px;padding:0 20px}.ui-button{outline:0}.ui-button.ui-state-default{background-color:#225582;border:none;color:#fff;height:38px;min-width:110px;padding-left:15px;padding-right:15px}.ui-button:hover{background-color:#39668e}.ui-button:active{background-color:#1e4c74}.ui-button:disabled{background-color:#6488a7;color:#225582;cursor:default}.ui-button-secondary.ui-state-default{background-color:#979797}.ui-button-secondary:enabled:hover{background-color:#a1a1a1}.ui-button-secondary:enabled:active{background-color:#878787}.ui-button-secondary:disabled{background-color:#b6b6b6;color:#979797}.ui-button-multi.ui-state-default{background-color:#fff;border:1px solid #e66e25;color:#e66e25}.ui-button-multi:hover{background-color:#e66e25;color:#fff}.ui-button-multi:active{background-color:#d86722;color:#fff}.ui-button-multi:disabled{background-color:#ed9966;color:#e66e25}.ui-chkbox .ui-chkbox-box{border-radius:0;border:1px solid #979797}.ui-chkbox-box.ui-state-active,.ui-chkbox-box.ui-state-focus{background-color:#fff;color:#225582}.ui-chkbox-box.ui-state-disabled{background-color:#e8e8e8;color:#979797;opacity:1}.ui-radiobutton .ui-state-disabled{opacity:1;background-color:#e8e8e8}.ui-radiobutton .ui-state-disabled .ui-radiobutton-icon{color:#979797}.ui-radiobutton{margin:5px 14px 5px 5px}.ui-radiobutton .ui-state-default{border-color:#979797}.ui-radiobutton .ui-state-active{background:#fff}.ui-radiobutton .ui-radiobutton-icon{vertical-align:middle;margin-bottom:50%;color:#225582;font-size:16px;left:48%}.ui-datepicker{margin-top:4px}.ui-datepicker th{font-weight:400}.ui-datepicker-calendar .ui-state-default{border:0}.recent-header-search-tooltip>.ui-tooltip-arrow{display:none}.recent-header-search-tooltip.ui-tooltip{padding:0;top:inherit!important;min-width:250px}.recent-header-search-tooltip>.ui-tooltip-text{color:#000;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.16);box-shadow:0 2px 4px 0 rgba(0,0,0,.16);border:1px solid #accbe9;min-width:150px;min-height:20px;white-space:normal;padding:12px 20px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{padding-right:31px;font-size:12px;line-height:2;color:#7f7f7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:text-top} screen and (min-width:992px){.recent-header-search-tooltip>.ui-tooltip-text{width:300px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{width:105px;max-width:105px}} screen and (min-width:1268px){.recent-header-search-tooltip>.ui-tooltip-text{width:430px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{width:130px;max-width:130px}} screen and (min-width:1400px){.recent-header-search-tooltip>.ui-tooltip-text{width:470px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{width:150px;max-width:150px}}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-value{word-break:break-all;min-width:160px;width:100%;max-width:100%;vertical-align:text-top}.recent-header-search-tooltip>.ui-tooltip-text .rc-subfolders-value{white-space:pre;overflow:hidden;text-overflow:ellipsis;max-width:290px}.recent-header-search-tooltip.ui-tooltip-bottom{left:inherit!important}.headerSearchScopeSelector{width:280px;margin-top:33px;left:auto!important;top:22px!important}.headerSearchScopeSelector a.ui-menuitem-link .ui-menuitem-text{display:inline-block;overflow:hidden;padding-right:20px;text-overflow:ellipsis;white-space:nowrap;width:100%}.ui-menu li.ui-menuitem .ui-menuitem-link[target=separator]{height:0;display:block;padding:0;min-height:0;border-bottom:1px solid #525252;width:calc(100% - 40px);margin:2px 0 2px 20px}.ui-confirmdialog{width:668px!important;background-color:#fff!important;-webkit-box-shadow:0 -1px 2px 0 rgba(0,0,0,.15)!important;box-shadow:0 -1px 2px 0 rgba(0,0,0,.15)!important}.ui-helper-clearfix::after,.ui-helper-clearfix::before{content:initial!important}.ui-confirmdialog .ui-dialog-titlebar{height:74px!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important;padding:25px!important;background-color:#fff!important;color:#000!important}.ui-confirmdialog .ui-dialog-title{font-size:20px!important;margin-right:auto!important}.ui-dialog-footer{padding:0!important}.ui-confirmdialog p-footer{height:74px!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;padding-right:20px!important}.ui-confirmdialog p-footer .accept,.ui-confirmdialog p-footer .reject{width:110px!important;height:38px!important;border-radius:1px!important}.ui-confirmdialog p-footer .reject{background-color:#acacac!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui-confirmdialog p-footer .accept{background-color:#225582!important;margin-left:20px!important}.ui-confirmdialog .ui-dialog-content{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;min-height:110px!important;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.3)!important;box-shadow:0 1px 3px 0 rgba(0,0,0,.3)!important}.ui-confirmdialog .ui-dialog-content i{display:none!important}.ui-confirmdialog span.fa-close::before{font-family:FontAwesome!important;content:"✖"!important;float:right!important;margin-bottom:15px!important;color:#000!important}@-webkit-keyframes ui-progress-spinner-color{0%,100%{stroke:#225582}} ui-progress-spinner-color{0%,100%{stroke:#225582}}.breadcrumb-search-results-page:not(.show-breadcrumb){display:none!important}`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SwitchComponent),
multi: true
}
]
},] },
];
/** @nocollapse */
SwitchComponent.ctorParameters = () => [];
SwitchComponent.propDecorators = {
id: [{ type: Input }],
label: [{ type: Input }],
labelPosition: [{ type: Input }],
disabled: [{ type: Input }],
name: [{ type: Input }],
onBlur: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ndSwitchModule {
}
ndSwitchModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [SwitchComponent],
exports: [SwitchComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { ndSwitchModule, SwitchComponent };
//# sourceMappingURL=nd-gui-switch.js.map