cpi-specification
Version:
Childrens Plus Inc. Specification Component for Angular projects
508 lines (501 loc) • 166 kB
JavaScript
import $ from 'jquery';
import { Toast } from '@syncfusion/ej2-notifications';
import { __awaiter, __generator } from 'tslib';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { ButtonModule, CheckBoxModule, RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { MenuModule, TabModule, SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';
import { Injectable, Component, Input, defineInjectable, NgModule, ViewChild, inject } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SpecificationsService = /** @class */ (function () {
function SpecificationsService() {
}
SpecificationsService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
SpecificationsService.ctorParameters = function () { return []; };
/** @nocollapse */ SpecificationsService.ngInjectableDef = defineInjectable({ factory: function SpecificationsService_Factory() { return new SpecificationsService(); }, token: SpecificationsService, providedIn: "root" });
return SpecificationsService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Constants = /** @class */ (function () {
function Constants() {
/* #region Titles */
this.TITLE_CPI_CATALOG = 'CPI Cataloging Application';
this.TITLE_SPECIFICATION = 'Specification';
this.TITLE_LOGIN = 'Login';
/* #endregion */
}
return Constants;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SharedService = /** @class */ (function () {
function SharedService() {
}
/**
* @param {?} title
* @param {?} content
* @return {?}
*/
SharedService.prototype.showToastAsync = /**
* @param {?} title
* @param {?} content
* @return {?}
*/
function (title, content) {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
return [2 /*return*/, new Promise((/**
* @param {?} resolve
* @return {?}
*/
function (resolve) { return __awaiter(_this, void 0, void 0, function () {
var toastModel, toast;
return __generator(this, function (_a) {
toastModel = {
content: content,
position: {
X: 'CENTER',
Y: 'TOP'
},
showCloseButton: true,
title: title
};
toast = new Toast(toastModel, document.querySelector('#toast'));
toast.show();
resolve();
return [2 /*return*/];
});
}); }))];
});
});
};
SharedService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
SharedService.ctorParameters = function () { return []; };
/** @nocollapse */ SharedService.ngInjectableDef = defineInjectable({ factory: function SharedService_Factory() { return new SharedService(); }, token: SharedService, providedIn: "root" });
return SharedService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SpecificationService = /** @class */ (function () {
function SpecificationService(httpClient) {
this.httpClient = httpClient;
this.getSpecifications = [
{
SubTag: 'sampleTag1', Description: 'VINET'
},
{
SubTag: 'sampleTag 2', Description: 'sample'
},
{
SubTag: 'sampleTag 3', Description: 'description'
},
{
SubTag: 'sampleTag 2', Description: 'sample'
},
{
SubTag: 'sampleTag 3', Description: 'description'
}
];
}
/**
* @param {?} specificationID
* @param {?} api_URL
* @return {?}
*/
SpecificationService.prototype.getSpecificationsAsync = /**
* @param {?} specificationID
* @param {?} api_URL
* @return {?}
*/
function (specificationID, api_URL) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.httpClient.get(api_URL + "/" + specificationID).toPromise()];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @param {?} specificationID
* @param {?} specification
* @param {?} api_URL
* @return {?}
*/
SpecificationService.prototype.saveSpecificationAsync = /**
* @param {?} specificationID
* @param {?} specification
* @param {?} api_URL
* @return {?}
*/
function (specificationID, specification, api_URL) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(specificationID == 0)) return [3 /*break*/, 2];
return [4 /*yield*/, this.httpClient.post("" + api_URL, specification).toPromise()];
case 1: return [2 /*return*/, _a.sent()];
case 2: return [4 /*yield*/, this.httpClient.put(api_URL + "/" + specificationID, specification).toPromise()];
case 3: return [2 /*return*/, _a.sent()];
}
});
});
};
SpecificationService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
SpecificationService.ctorParameters = function () { return [
{ type: HttpClient }
]; };
/** @nocollapse */ SpecificationService.ngInjectableDef = defineInjectable({ factory: function SpecificationService_Factory() { return new SpecificationService(inject(HttpClient)); }, token: SpecificationService, providedIn: "root" });
return SpecificationService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SpecificationsComponent = /** @class */ (function () {
function SpecificationsComponent(constants, sharedService, specificationService) {
this.constants = constants;
this.sharedService = sharedService;
this.specificationService = specificationService;
this.type = 'Push';
this.target = '.content';
this.prevDiv = "";
}
/**
* @return {?}
*/
SpecificationsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.specificationTitle = this.constants.TITLE_SPECIFICATION;
$(document).ready((/**
* @return {?}
*/
function () {
document.getElementById("dividshow").className = "hide-catalog-fixed-header";
document.getElementById("licatalog1").className = "active-link";
$(document).click((/**
* @param {?} e
* @return {?}
*/
function (e) {
checkClassJS($(window));
}));
window.onbeforeunload = (/**
* @return {?}
*/
function () {
window.scrollTo(0, 0);
});
window.onscroll = (/**
* @return {?}
*/
function () {
checkClassJS($(this));
});
/**
* @param {?} e
* @return {?}
*/
function checkClassJS(e) {
if ($(".sidebar-dropdown").find(".clicksidebar").length >= 1) {
$("#collapseSidebar").removeClass("clicksidebar");
return;
}
/** @type {?} */
var $sections = $('.containerDiv');
// currentScroll is the number of pixels the window has been scrolled
/** @type {?} */
var currentScroll = e.scrollTop();
// $currentSection is somewhere to place the section we must be looking at
/** @type {?} */
var $currentSection;
// We check the position of each of the divs compared to the windows scroll positon
/** @type {?} */
var sidemenu = $("#maincontent").find(".e-open").length;
$sections.each((/**
* @return {?}
*/
function () {
// divPosition is the position down the page in px of the current section we are testing
/** @type {?} */
var divPosition = $(this).offset().top;
// If the divPosition is less the the currentScroll position the div we are testing has moved above the window edge.
// the -1 is so that it includes the div 1px before the div leave the top of the window.
if (divPosition - 300 < currentScroll) {
// We have either read the section or are currently reading the section so we'll call it our current section
$currentSection = $(this);
/** @type {?} */
var id = $currentSection.prop('id');
$(".active-link").addClass("sidebar-item");
$(".active-link").removeClass("active-link");
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 350) {
document.getElementById("licatalog5").className = "active-link";
}
else {
if (id.indexOf('catalog3Div') >= 0) {
$('.sidebar-dropdown a').removeClass('collapsed');
$('.sidebar-dropdown a').prop('aria-expanded', true);
$('#submenu').addClass("show");
}
else {
$('.sidebar-dropdown a').addClass('collapsed');
$('.sidebar-dropdown a').prop('aria-expanded', false);
$('#submenu').removeClass("show");
}
document.getElementById("li" + id).className = "active-link";
}
}
/** @type {?} */
var catalog3header = document.getElementById('catalog3header').getBoundingClientRect();
/** @type {?} */
var top = catalog3header.top;
/** @type {?} */
var catalog3Div15 = document.getElementById('catalog3Div15').getBoundingClientRect();
/** @type {?} */
var divTop = catalog3Div15.top;
if (top <= 0 && divTop > 0) {
if (sidemenu > 0) {
document.getElementById("dividshow").className = "e-content-animation catalog-fixed-header sidemenu well row col-12";
}
else {
document.getElementById("dividshow").className = "e-content-animation catalog-fixed-header well row col-12";
}
}
else {
document.getElementById("dividshow").className = "hide-catalog-fixed-header";
}
}));
}
}));
return [4 /*yield*/, this.getCardsSpecificationAsync(this.SpecificationId)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
/**
* @param {?} i
* @return {?}
*/
SpecificationsComponent.prototype.checkClass = /**
* @param {?} i
* @return {?}
*/
function (i) {
/** @type {?} */
var catalog3header = document.getElementById('catalog3header').getBoundingClientRect();
/** @type {?} */
var top = catalog3header.top;
/** @type {?} */
var catalog3Div15 = document.getElementById('catalog3Div15').getBoundingClientRect();
/** @type {?} */
var divTop = catalog3Div15.top;
if (top <= 0 && divTop > 0) {
if (i >= 0) {
document.getElementById("dividshow").className = "e-content-animation catalog-fixed-header sidemenu well row col-12";
}
else {
document.getElementById("dividshow").className = "e-content-animation catalog-fixed-header well row col-12";
}
}
else {
document.getElementById("dividshow").className = "hide-catalog-fixed-header";
}
};
/**
* @return {?}
*/
SpecificationsComponent.prototype.onClickCloseSideBar = /**
* @return {?}
*/
function () {
this.sidebar.hide();
this.togglebtn.element.classList.remove('e-active');
};
/**
* @return {?}
*/
SpecificationsComponent.prototype.onClickSaveSpecificationsAsync = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.specificationService.saveSpecificationAsync(1, this.specification, this.API_URL)];
case 1:
_a.sent();
return [4 /*yield*/, this.sharedService.showToastAsync(this.specificationTitle, "Specifications saved successfully.")];
case 2:
_a.sent();
return [2 /*return*/];
}
});
});
};
/**
* @return {?}
*/
SpecificationsComponent.prototype.onClickToggle = /**
* @return {?}
*/
function () {
if (this.togglebtn.element.classList.contains('e-active')) {
this.sidebar.hide();
this.checkClass(0);
}
else {
this.sidebar.show();
this.checkClass(1);
}
};
/**
* @param {?} elementId
* @return {?}
*/
SpecificationsComponent.prototype.scrollToTop = /**
* @param {?} elementId
* @return {?}
*/
function (elementId) {
document.getElementById(elementId).scrollIntoView(true);
if (this.prevDiv == "") {
this.prevDiv = "catalog1";
}
/** @type {?} */
var previousdiv = this.prevDiv;
this.prevDiv = elementId;
document.getElementById("li" + elementId).className = "active-link";
document.getElementById("li" + previousdiv).classList.remove("active-link");
document.getElementById("li" + previousdiv).className = "sidebar-item";
/** @type {?} */
var scrolledY = window.scrollY;
if (scrolledY && elementId != 'catalog3Div1' && elementId.indexOf('catalog3Div') >= 0) {
window.scroll(0, scrolledY - 130);
}
else if (scrolledY && elementId != 'catalog3Div1') {
window.scroll(0, scrolledY - 80);
}
else if (scrolledY && elementId == 'catalog3Div1') {
window.scroll(0, scrolledY - 290);
}
};
/**
* @return {?}
*/
SpecificationsComponent.prototype.onClickCheckSideDropdown = /**
* @return {?}
*/
function () {
$('#collapseSidebar').addClass('clicksidebar');
};
/**
* @param {?} specificationId
* @return {?}
*/
SpecificationsComponent.prototype.getCardsSpecificationAsync = /**
* @param {?} specificationId
* @return {?}
*/
function (specificationId) {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this;
return [4 /*yield*/, this.specificationService.getSpecificationsAsync(specificationId, this.API_URL)];
case 1:
_a.specification = _b.sent();
return [2 /*return*/];
}
});
});
};
SpecificationsComponent.decorators = [
{ type: Component, args: [{
selector: 'cpi-lib-specifications',
template: " <div id=\"head\">\r\n <div class=\"navbar-open-icon\">\r\n <span ejs-button id=\"toggle\" #togglebtn class=\"nav-open\" cssClass=\"e-flat\" iconCss=\"e-icons burg-icon\"\r\n isToggle=\"true\" (click)=\"onClickToggle()\">\u2630</span>\r\n </div>\r\n <div class=\"col-sm-6 pull-right padding-top-5\">\r\n <div class=\"btn-header\">\r\n <button ejs-button class=\"pull-right\" (click)=\"onClickSaveSpecificationsAsync()\">Save</button>\r\n <button ejs-button class=\"pull-right\">Print</button>\r\n <button ejs-button class=\"pull-right\">Finished</button>\r\n </div>\r\n </div>\r\n\r\n <div id=\"dividshow\" class=\"catalog-fixed-header well row\">\r\n <div class=\"col-sm-4\">\r\n <div class=\"text-bold\">Classification Prefix</div>\r\n </div>\r\n <div class=\"col-sm-3\">\r\n <div class=\"text-bold\">Classification Option </div>\r\n </div>\r\n <div class=\"col-sm-3\">\r\n <div class=\"text-bold\"> Number of Main Entry Letters</div>\r\n </div>\r\n <div class=\"col-sm-2\">\r\n <div class=\"text-bold align-text\">Example</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"content-top\">\r\n <ejs-sidebar id=\"default-sidebar\" #sidebar [type]='type' [target]='target'>\r\n <div class=\"center-align\">\r\n <button ejs-button id=\"close\" (click)=\"onClickCloseSideBar()\" class=\"e-btn close-btn\">X</button>\r\n </div>\r\n <div id=\"menulist\" class=\"dock\">\r\n <ul>\r\n <li id=\"licatalog1\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog1')\">\r\n <span class=\"e-text\" title=\"catalog1\">Cards and Spine Labels</span>\r\n </li>\r\n <li id=\"licatalog2\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog2')\">\r\n <span class=\"e-text\" title=\"catalog2\">Barcodes and MARC Records</span>\r\n </li>\r\n <li class=\"sidebar-item sidebar-dropdown\">\r\n <a id=\"collapseSidebar\" class=\"accordion-toggle collapsed toggle-switch\" data-toggle=\"collapse\"\r\n (click)=\"onClickCheckSideDropdown()\" href=\"#submenu\">\r\n <span class=\"e-text padding-right-10\" title=\"catalog3\">Classification Options</span>\r\n <b>v</b>\r\n </a>\r\n\r\n <ul id=\"submenu\" class=\"panel-collapse collapse panel-switch\" role=\"menu\">\r\n <li id=\"licatalog3Div1\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div1')\">\r\n <span class=\"e-text\" title=\"Individual Biography\">Individual Biography </span>\r\n </li>\r\n <li id=\"licatalog3Div2\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div2')\">\r\n <span class=\"e-text\" title=\"Easy Books (Fiction Grades K-3)\">Easy Books (Fiction Grades\r\n K-3)</span>\r\n </li>\r\n <li id=\"licatalog3Div3\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div3')\">\r\n <span class=\"e-text\" title=\"Easy Chapter Books (Fiction Grades K-3)\">Easy Chapter Books\r\n (Fiction Grades K-3)</span>\r\n </li>\r\n <li id=\"licatalog3Div4\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div4')\">\r\n <span class=\"e-text\" title=\"Fiction Grades4-8\">Fiction Grades 4-8</span>\r\n </li>\r\n <li id=\"licatalog3Div5\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div5')\">\r\n <span class=\"e-text\" title=\"Fiction Grades 9 and above\">Fiction Grades 9 and above</span>\r\n </li>\r\n <li id=\"licatalog3Div6\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div6')\">\r\n <span class=\"e-text\" title=\"Graphic Fiction\">Graphic Fiction</span>\r\n </li>\r\n <li id=\"licatalog3Div7\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div7')\">\r\n <span class=\"e-text\" title=\"Non-fiction Grades K-3\">Non-fiction Grades K-3</span>\r\n </li>\r\n <li id=\"licatalog3Div8\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div8')\">\r\n <span class=\"e-text\" title=\"Non-fiction Grades 4-8\">Non-fiction Grades 4-8</span>\r\n </li>\r\n <li id=\"licatalog3Div9\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div9')\">\r\n <span class=\"e-text\" title=\"Non-fiction Grades 9 and above\">Non-fiction Grades 9 and above</span>\r\n </li>\r\n <li id=\"licatalog3Div10\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div10')\">\r\n <span class=\"e-text\" title=\"Graphic Nonfiction\">Graphic Nonfiction</span>\r\n </li>\r\n <li id=\"licatalog3Div11\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div11')\">\r\n <span class=\"e-text\" title=\"Collective Biography\">Collective Biography</span>\r\n </li>\r\n <li id=\"licatalog3Div12\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div12')\">\r\n <span class=\"e-text\" title=\"Story Collections\">Story Collections</span>\r\n </li>\r\n <li id=\"licatalog3Div13\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div13')\">\r\n <span class=\"e-text\" title=\"Foreign Language\">Foreign Language</span>\r\n </li>\r\n <li id=\"licatalog3Div14\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div14')\">\r\n <span class=\"e-text\" title=\"Bilingual (English/Spanish) Books\">Bilingual (English/Spanish)\r\n Books</span>\r\n </li>\r\n <li id=\"licatalog3Div15\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog3Div15')\">\r\n <span class=\"e-text\" title=\"Reference (Dictionaries and Encyclopedias)\">Reference (Dictionaries\r\n and Encyclopedias)</span>\r\n </li>\r\n </ul>\r\n\r\n </li>\r\n <li id=\"licatalog4\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog4')\">\r\n <span class=\"e-text\" title=\"catalog4\">Attachment Instructions</span>\r\n </li>\r\n <li id=\"licatalog5\" class=\"sidebar-item\" (click)=\"scrollToTop('catalog5')\">\r\n <span class=\"e-text\" title=\"catalog5\">Custom Holding</span>\r\n </li>\r\n </ul>\r\n </div>\r\n </ejs-sidebar>\r\n\r\n\r\n\r\n\r\n <div class=\"right-body\">\r\n <div id=\"maincontent\" class=\"content\">\r\n <div id=\"cha1\">\r\n <div id=\"catalog1\" class=\"containerDiv\">\r\n <cpi-cards [specification]=\"specification\"></cpi-cards>\r\n </div>\r\n <div id=\"catalog2\" class=\"containerDiv\">\r\n <cpi-barcodes [specification]=\"specification\"></cpi-barcodes>\r\n </div>\r\n <div id=\"catalog3\">\r\n <cpi-cataloging [specification]=\"specification\"></cpi-cataloging>\r\n </div>\r\n <div id=\"catalog4\" class=\"containerDiv\">\r\n <cpi-attachment-instructions [specification]=\"specification\"></cpi-attachment-instructions>\r\n </div>\r\n <div id=\"catalog5\" class=\"containerDiv\">\r\n <cpi-custom-holding></cpi-custom-holding>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"toast\" class=\"margin-top-75\"></div>\r\n",
styles: [".title{text-align:center;font-size:20px;padding:15px}.sub-title{text-align:center;font-size:16px;padding:10px}#wrapper .sub-title .column{display:inline-block;padding:10px}.center{text-align:center;display:none;font-size:13px;font-weight:400;margin-top:20px}.sb-content-tab .center{display:block}.checkbox-content{padding:10px}.box-input{border:1.2px solid #a933da;padding:10px;margin:20px 40px;width:50%}.box-input .e-float-input{padding:10px 5px}.box-input .e-float-input input{margin:0 10px;width:90%}.radio-btn-session .inline-header{font-weight:700;display:inline}.radio-btn-session .inline-radio-btn{display:inline;padding-left:30px}.radio-btn-session .inline-radio-btn .e-radio-wrapper{padding:0 10px}.e-input{margin:0 10px}.sub-heading{padding:10px}ejs-radiobutton{margin:5px 0;padding:0 5px}.e-radio+label::before{height:16px;width:16px;left:1px;top:1px}.e-float-input{padding:5px 0}.padding-rl-15{padding:0 15px}input[type=checkbox],input[type=radio]{margin:0 10px}#head button,.catalog2-body button{margin:0 6px;border-radius:44px;color:#fff;background:#8b3b94;padding:3px 10px;border:1px solid #8b3b94;text-transform:uppercase}.attachment-img{padding-bottom:15px}figure{display:inline}.tag-table{padding:33px}.tag-table .e-grid.e-default{border:1px solid #a933da}.tag-table .e-grid.e-default th{border-bottom:1px solid #a933da}.tag-table .e-grid.e-default th span{font-weight:700;color:#000}.tag-table .e-grid.e-default th:first-child{border-right:1px solid #a933da}.tag-table .e-grid.e-default td:first-child{border-right:1px solid #ddd}#maincontent{padding-top:70px}.session{height:55px}.catalog-fixed-header{padding-bottom:35px;color:#8b3b94;font-size:14px;border:1px solid #8b3b94;margin-top:19px}.sidemenu{margin-left:13.4%;width:86.6%}.padding-right-10{padding-right:10px}.hidediv{color:#a90a0a}.hide-catalog-fixed-header{visibility:hidden}.fiction-block .e-radio-wrapper{display:block}.label-barcode{font-size:16px}.margin-bot-10{margin-bottom:10px}.margin-top-10{margin-top:10px}.remove-bold{font-weight:400}.sb-content-tab #wrapper{display:none}#dockSidebar.e-sidebar.e-right.e-close{visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}#dockSidebar .e-icons::before{font-size:25px}#dockSidebar .home::before{content:'\\e7a4'}#dockSidebar .profile::before{content:'\\e7d4'}#dockSidebar .info::before{content:'\\e7e7'}#dockSidebar .settings::before{content:'\\e7cf'}.e-sidebar .expand::before,.e-sidebar.e-right.e-open .expand::before{content:'\\e85c'}.e-sidebar.e-open .expand::before,.e-sidebar.e-right .expand::before{content:'\\e98f'}#dockSidebar.e-close .sidebar-item{padding:5px 20px}#dockSidebar.e-dock.e-close span.e-text{display:none}#dockSidebar.e-dock.e-open span.e-text{display:inline-block}#dockSidebar li{list-style-type:none;cursor:pointer}#dockSidebar ul{padding:0}#dockSidebar.e-sidebar ul li:hover span{color:#fff}#dockSidebar span.e-icons{color:#c0c2c5;line-height:2}.e-open .e-icons{margin-right:16px}.e-open .e-text{overflow:hidden;text-overflow:ellipsis;line-height:23px;font-size:14px}.sidebar-item{text-align:center;border-bottom:1px solid #e5e5e58a}.e-sidebar.e-open li{text-align:left;padding-left:15px;padding-top:15px}#dockSidebar.e-sidebar{background:#2d323e;overflow:hidden}#default-sidebar.e-sidebar{background:#2d323e;width:250px!important;position:fixed;top:72px}#default-sidebar.e-sidebar button{background:0 0;box-shadow:none;color:#fff;float:right}.dock{padding-top:30px}.dock ul{list-style:none;padding:0}.dock ul li{border-bottom:none;cursor:pointer}#head{background:#f6e6f1;position:fixed;width:100%;z-index:999;padding:15px;height:70px}.navbar-open-icon span{font-size:30px;cursor:pointer;padding:0}.navbar-open-icon{display:inline}.sidebar-item a,.sidebar-item span{color:#808184}.sidebar-dropdown a:focus,.sidebar-dropdown a:hover,.sidebar-item span:hover{color:#fff;text-decoration:none}li.active-link,li.sidebar-item ul.panel-collapse li.active-link{text-align:left;padding-left:15px;padding-top:15px;color:#bd6ec5!important}li.sidebar-item ul.panel-collapse li.active-link span{color:#bd6ec5!important}.e-radio+label .e-label{padding-left:20px}.text-bold{font-weight:700}.padding-top-5{padding-top:5px}.e-btn.e-flat:focus,.e-btn.e-flat:hover{background-color:#f6e6f0;border-color:#f6e6f0}.pull-right{float:right}.navbar-full{margin-left:-15px}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.nav-open{margin-left:-50px}"]
}] }
];
/** @nocollapse */
SpecificationsComponent.ctorParameters = function () { return [
{ type: Constants },
{ type: SharedService },
{ type: SpecificationService }
]; };
SpecificationsComponent.propDecorators = {
sidebar: [{ type: ViewChild, args: ['sidebar',] }],
togglebtn: [{ type: ViewChild, args: ['togglebtn',] }],
API_URL: [{ type: Input }],
SpecificationId: [{ type: Input }]
};
return SpecificationsComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AttachmentInstructionsComponent = /** @class */ (function () {
function AttachmentInstructionsComponent() {
}
/**
* @return {?}
*/
AttachmentInstructionsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
AttachmentInstructionsComponent.decorators = [
{ type: Component, args: [{
selector: 'cpi-attachment-instructions',
template: " <div class=\"clearfix\">\r\n <div class=\"header-row\">\r\n <h4>4) Attachment Instructions</h4>\r\n </div>\r\n\r\n <div class=\"sub-heading label-barcode\">\r\n <label class=\"text-bold\">Barcode label Location</label>\r\n </div>\r\n <div class=\"clearfix\">\r\n <div class=\"col-sm-12\">\r\n <div>\r\n <label class=\"e-float-input text-bold col-1\">Barcode labels to be</label>\r\n <ejs-radiobutton label=\"attached**\" name=\"BarcodeAttached\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.barcodeAttached\">\r\n </ejs-radiobutton>\r\n <ejs-radiobutton label=\"not attached\" name=\"BarcodeAttached\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.barcodeAttached\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\" attachment-img col-sm-12\">\r\n <img src=\"../../assets/images/LabelPosition.jpg\" />\r\n </div>\r\n </div>\r\n <p>***If barcode labels are to be attached, indicate desired positions(s) of barcode\r\n label(s) here as indicated by the letters in the graphic above</p>\r\n <div class=\"row\">\r\n <div class=\"e-float-input\">\r\n <label class=\"text-bold label\">1)</label>\r\n <input type='text' #firstPosition class=\"e-input required readonly input-box col-1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.firstPosition\" />\r\n </div>\r\n <div class=\"e-float-input\">\r\n <label class=\"text-bold label\">2)</label>\r\n <input type='text' #secondPosition class=\"e-input required readonly input-box col-1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.secondPosition\" />\r\n </div>\r\n <div class=\"e-float-input\">\r\n <label class=\"text-bold label\">3)</label>\r\n <input type='text' #thirdPosition class=\"e-input required readonly input-box col-1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.thirdPosition\" />\r\n </div>\r\n </div>\r\n\r\n <ejs-checkbox cssClass=\"e-small text-bold\" label=\"Please indicate here if barcode should not be moved from\r\n specified location***\" [(ngModel)]=\"specification.attachmentInstruction.haveBarcode\" #haveBarcode>\r\n </ejs-checkbox>\r\n <br />\r\n <div class=\"e-float-input text-bold\">\r\n ***If barcode is to be placed on outside front cover of book it is standard not to\r\n cover the title.\r\n </div>\r\n <br />\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n <label class=\"e-float-input text-bold\">Barcode labels to be</label>\r\n <div>\r\n <ejs-radiobutton label=\"horizontal\" name=\"barcodelabelsPosition\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.barcodelabelsPosition\"></ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"vertical (left, parallel to spine of book)\" name=\"barcodelabelsPosition\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.barcodelabelsPosition\"></ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"vertical (right, parallel to spine of book)\" name=\"barcodelabelsPosition\"\r\n value=\"3\" [(ngModel)]=\"specification.attachmentInstruction.barcodelabelsPosition\"></ejs-radiobutton>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-sm-8 row\">\r\n <figure class=\"col-sm-2\">\r\n <figcaption>Horizontal</figcaption>\r\n <img src=\"../../assets/images/HorizontalBarCode.jpg\" />\r\n </figure>\r\n <figure class=\"col-sm-2\">\r\n <figcaption>Vertical Left</figcaption>\r\n <img src=\"../../assets/images/VerticalBarCode-left.gif\" />\r\n </figure>\r\n <figure class=\"col-sm-2\">\r\n <figcaption>Vertical Right</figcaption>\r\n <img src=\"../../assets/images/VerticalBarCode-right.gif\" />\r\n </figure>\r\n </div>\r\n </div>\r\n <div class=\"margin-bot-10\">\r\n <label>Clear barcode label protectors to be applied to all attached barcode labels</label>\r\n\r\n <ejs-radiobutton label=\"Yes\" name=\"clearBarcode\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.clearBarcode\">\r\n </ejs-radiobutton>\r\n <ejs-radiobutton label=\"No\" name=\"clearBarcode\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.clearBarcode\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div class=\"col-sm-5\">\r\n\r\n <label class=\"label-bold\">Spine label location</label>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"1 1/2 inches from bottom of spine\"\r\n [(ngModel)]=\"specification.attachmentInstruction.spineBottom\" #spineBottom></ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Clear spine label protector attached\"\r\n [(ngModel)]=\"specification.attachmentInstruction.clearSpine\" #clearSpine></ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Spine label not attached\"\r\n [(ngModel)]=\"specification.attachmentInstruction.haveSpineLabel\" #haveSpineLabel></ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Other\"\r\n [(ngModel)]=\"specification.attachmentInstruction.spineLableOther\" #spineLableOther></ejs-checkbox>\r\n </div>\r\n <div class=\"e-float-input\">\r\n <input type='text' class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.spineLableOtherDescription\"\r\n #spineLableOtherDescription />\r\n </div>\r\n <label class=\"margin-top-10\">Book pocket/Date due slip location</label>\r\n <div>\r\n <ejs-radiobutton label=\"Inside front cover\" name=\"BookPocket\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.bookPocket\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Inside back cover\" name=\"BookPocket\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.bookPocket\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Front fly leaf\" name=\"BookPocket\" value=\"3\"\r\n [(ngModel)]=\"specification.attachmentInstruction.bookPocket\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Back fly leaf\" name=\"BookPocket\" value=\"4\"\r\n [(ngModel)]=\"specification.attachmentInstruction.bookPocket\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Book pockets not attached\" name=\"BookPocket\" value=\"5\"\r\n [(ngModel)]=\"specification.attachmentInstruction.bookPocket\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"None\" name=\"BookPocket\" value=\"6\"\r\n [(ngModel)]=\"specification.attachmentInstruction.bookPocket\">\r\n </ejs-radiobutton>\r\n </div>\r\n\r\n <label class=\"margin-top-10\">3M theft protectors</label>\r\n <div>\r\n <ejs-radiobutton label=\"Attached\" name=\"TheftProtector\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.theftProtector\"></ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Theft protector not attached\" name=\"TheftProtector\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.theftProtector\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"None\" name=\"TheftProtector\" value=\"3\"\r\n [(ngModel)]=\"specification.attachmentInstruction.theftProtector\"></ejs-radiobutton>\r\n </div>\r\n\r\n\r\n <label class=\"margin-top-10\">Checkpoint/RFID theft protection</label>\r\n <div>\r\n <ejs-radiobutton label=\"Behind the book pocket\" name=\"Checkpoint\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.checkpoint\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Theft protector not attached\" name=\"Checkpoint\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.checkpoint\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"None\" name=\"Checkpoint\" value=\"3\"\r\n [(ngModel)]=\"specification.attachmentInstruction.checkpoint\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Other (please specify)\" name=\"Checkpoint\" value=\"4\"\r\n [(ngModel)]=\"specification.attachmentInstruction.checkpoint\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div class=\"e-float-input\">\r\n <input type='text' #checkpointOtherDescription id=\"description\" class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.checkpointOtherDescription\" />\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-sm-6\">\r\n\r\n <label class=\"margin-top-10\">AR or RC spine label location </label>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Above spine label\"\r\n [(ngModel)]=\"specification.attachmentInstruction.aboveSpine\">\r\n </ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Below spine label\"\r\n [(ngModel)]=\"specification.attachmentInstruction.belowSpine\">\r\n </ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Clear spine protector attached label\"\r\n [(ngModel)]=\"specification.attachmentInstruction.clearSpineProtector\"></ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"AR or RC label not attached\"\r\n [(ngModel)]=\"specification.attachmentInstruction.aRLabel\"></ejs-checkbox>\r\n </div>\r\n <div>\r\n <ejs-checkbox cssClass=\"e-small\" label=\"Other (please specify)\"\r\n [(ngModel)]=\"specification.attachmentInstruction.spineLabelOther\"></ejs-checkbox>\r\n </div>\r\n <div>\r\n <input type='text' #spineLabelOtherDescription id=\"other\" class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.spineLabelOtherDescription\" />\r\n </div>\r\n\r\n <label class=\"margin-top-10\">AR or RC information label</label>\r\n <div class=\"e-float-input\">\r\n <ejs-radiobutton label=\"Attached\" name=\"InformationLabel\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.informationLabelAttached\">\r\n </ejs-radiobutton>\r\n <span>Please Specify Location:</span>\r\n <input type='text' #informationLabelAttachedDescription class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.informationLabelAttachedDescription\" />\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"AR or RC information label not attached\" name=\"InformationLabel\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.informationLabelAttached\"></ejs-radiobutton>\r\n </div>\r\n <label class=\"margin-top-10\"> Blue AR labels</label>\r\n <div>\r\n <ejs-radiobutton label=\"Attached above AR spine label\" name=\"BlueARLabels\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.blueARlabel\"></ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Other (please specify)\" name=\"BlueARLabels\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.blueARlabel\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div class=\"e-float-input\">\r\n <input type='text' #blueARlabelOtherDescription class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.blueARlabelOtherDescription\" />\r\n </div>\r\n\r\n <label class=\"margin-top-10\">Lexile spine labels</label>\r\n <div>\r\n <ejs-radiobutton label=\"Attached above AR spine label\" name=\"LexilSpineLabel\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.lexilSpineLabel\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Attached, specify where\" name=\"LexilSpineLabel\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.lexilSpineLabel\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div class=\"e-float-input\">\r\n <input type='text' #lexilSpineLabelDescription class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.lexilSpineLabelDescription\" />\r\n </div>\r\n\r\n\r\n <label class=\"margin-top-10\">Property label/Property stamp</label>\r\n <div>\r\n <ejs-radiobutton label=\"Not Attached\" name=\"Property\" value=\"1\"\r\n [(ngModel)]=\"specification.attachmentInstruction.propertyLabel\"></ejs-radiobutton>\r\n </div>\r\n <div>\r\n <ejs-radiobutton label=\"Attached, specify where\" name=\"Property\" value=\"2\"\r\n [(ngModel)]=\"specification.attachmentInstruction.propertyLabel\">\r\n </ejs-radiobutton>\r\n </div>\r\n <div class=\"e-float-input\">\r\n <input type='text' #propertyLabelDescription class=\"e-input required readonly input-box\"\r\n [(ngModel)]=\"specification.attachmentInstruction.propertyLabelDescription\" />\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-sm-12\">\r\n <label class=\"margin-top-10\">Special notes for Attaching</label>\r\n <div class=\"e-float-input\">\r\n <textarea type='text' #specialNotes class=\"e-input required readonly input-box\" rows=\"4\" cols=\"50\"\r\n [(ngModel)]=\"specification.attachmentInstruction.specialNotes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n",
styles: [".title{text-align:center;font-size:20px;padding:15px}.sub-title{text-align:center;font-size:16px;padding:10px}#wrapper .sub-title .column{display:inline-block;padding:10px}.center{text-align:center;display:none;font-size:13px;font-weight:400;margin-top:20px}.sb-content-tab .center{display:block}.checkbox-content{padding:10px}.box-input{border:1.2px solid #a933da;padding:10px;margin:20px 40px;width:50%}.box-input .e-float-input{padding:10px 5px}.box-input .e-float-input input{margin:0 10px;width:90%}.radio-btn-session .inline-header{font-weight:700;dis