geico-design-kit 7.0.0
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of geico-design-kit might be problematic. Click here for more details.
- package/.babelrc +5 -0
- package/LICENSE +0 -0
- package/dist/analytics.js +119 -0
- package/dist/appState.js +56 -0
- package/dist/baseComponent.js +110 -0
- package/dist/components/Accordion.js +312 -0
- package/dist/components/AddressAutoComplete.js +220 -0
- package/dist/components/Alert.js +145 -0
- package/dist/components/BackgroundPattern.js +99 -0
- package/dist/components/BackgroundPatternPortfolio.js +242 -0
- package/dist/components/ButtonSwitch.js +236 -0
- package/dist/components/CardSelections.js +230 -0
- package/dist/components/CommonQuestionsSquares.js +169 -0
- package/dist/components/Confirmation.js +156 -0
- package/dist/components/ConsolidatedSummary.js +489 -0
- package/dist/components/CoverageGraph.js +201 -0
- package/dist/components/CreditCard.js +591 -0
- package/dist/components/CurrencyInput.js +302 -0
- package/dist/components/DatePicker.js +468 -0
- package/dist/components/DockedMessage.js +146 -0
- package/dist/components/DotNavigation.js +200 -0
- package/dist/components/EditComponent.js +128 -0
- package/dist/components/EditableTable.js +113 -0
- package/dist/components/InPageNavigation.js +360 -0
- package/dist/components/Loader.js +232 -0
- package/dist/components/MakePayment.js +361 -0
- package/dist/components/Modal.js +254 -0
- package/dist/components/MoreInfoButton.js +227 -0
- package/dist/components/MultipleSelectBox.js +217 -0
- package/dist/components/NavigationalBox.js +161 -0
- package/dist/components/Navigator.js +294 -0
- package/dist/components/PasswordMeter.js +201 -0
- package/dist/components/PayPlans.js +534 -0
- package/dist/components/SegmentedControl.js +327 -0
- package/dist/components/SortableTable.js +166 -0
- package/dist/components/Tabs.js +1 -0
- package/dist/components/TextAreaCountdown.js +219 -0
- package/dist/components/Timeline.js +498 -0
- package/dist/components/TimelineFilter.js +492 -0
- package/dist/components/ToTopArrow.js +153 -0
- package/dist/components/Tooltip.js +329 -0
- package/dist/components/Upsell.js +168 -0
- package/dist/components/VIN.js +271 -0
- package/dist/components/ValidateForm.js +938 -0
- package/dist/components/ViewMoreLess.js +191 -0
- package/dist/components/ZipCode.js +191 -0
- package/dist/components/portfolio.js +99 -0
- package/dist/geico-design-kit.js +141 -0
- package/dist/global/components.js +98 -0
- package/dist/global/footer.js +26 -0
- package/dist/global/nav.js +1257 -0
- package/dist/services/CharacterTypeService.js +106 -0
- package/dist/services/UserAgentService.js +73 -0
- package/dist/utils.js +79 -0
- package/package.json +32 -0
- package/src/analytics.js +82 -0
- package/src/appState.js +56 -0
- package/src/baseComponent.js +156 -0
- package/src/components/Accordion.js +336 -0
- package/src/components/AddressAutoComplete.js +236 -0
- package/src/components/Alert.js +135 -0
- package/src/components/BackgroundPattern.js +96 -0
- package/src/components/BackgroundPatternPortfolio.js +284 -0
- package/src/components/ButtonSwitch.js +241 -0
- package/src/components/CardSelections.js +240 -0
- package/src/components/CommonQuestionsSquares.js +179 -0
- package/src/components/Confirmation.js +160 -0
- package/src/components/ConsolidatedSummary.js +505 -0
- package/src/components/CoverageGraph.js +203 -0
- package/src/components/CreditCard.js +595 -0
- package/src/components/CurrencyInput.js +321 -0
- package/src/components/DatePicker.js +487 -0
- package/src/components/DockedMessage.js +142 -0
- package/src/components/DotNavigation.js +206 -0
- package/src/components/EditComponent.js +130 -0
- package/src/components/EditableTable.js +106 -0
- package/src/components/InPageNavigation.js +391 -0
- package/src/components/Loader.js +272 -0
- package/src/components/MakePayment.js +397 -0
- package/src/components/Modal.js +279 -0
- package/src/components/MoreInfoButton.js +243 -0
- package/src/components/MultipleSelectBox.js +211 -0
- package/src/components/NavigationalBox.js +163 -0
- package/src/components/Navigator.js +338 -0
- package/src/components/PasswordMeter.js +209 -0
- package/src/components/PayPlans.js +604 -0
- package/src/components/SegmentedControl.js +365 -0
- package/src/components/SortableTable.js +176 -0
- package/src/components/Tabs.js +0 -0
- package/src/components/TextAreaCountdown.js +231 -0
- package/src/components/Timeline.js +532 -0
- package/src/components/TimelineFilter.js +533 -0
- package/src/components/ToTopArrow.js +153 -0
- package/src/components/Tooltip.js +344 -0
- package/src/components/Upsell.js +196 -0
- package/src/components/VIN.js +289 -0
- package/src/components/ValidateForm.js +1030 -0
- package/src/components/ViewMoreLess.js +193 -0
- package/src/components/ZipCode.js +193 -0
- package/src/components/portfolio.js +106 -0
- package/src/geico-design-kit.js +144 -0
- package/src/global/components.js +92 -0
- package/src/global/footer.js +25 -0
- package/src/global/nav.js +1457 -0
- package/src/services/CharacterTypeService.js +107 -0
- package/src/services/UserAgentService.js +59 -0
- package/src/utils.js +82 -0
@@ -0,0 +1,294 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
var utils = _interopRequireWildcard(require("../../src/utils"));
|
8
|
+
var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
12
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
13
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
14
|
+
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
15
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
17
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
18
|
+
var validateSettings = [{
|
19
|
+
setting: "content",
|
20
|
+
isRequired: true,
|
21
|
+
validate: "type",
|
22
|
+
possibleValues: ["string", "object"],
|
23
|
+
errorMessage: ["GDK Navigator : Content must be defined and set to a DOM selector or Node"]
|
24
|
+
}, {
|
25
|
+
setting: "contentMobile",
|
26
|
+
isRequired: true,
|
27
|
+
validate: "type",
|
28
|
+
possibleValues: ["string", "object"],
|
29
|
+
errorMessage: ["GDK Navigator : Content Mobile must be defined and set to the DOM selector or Node of the mobile Navigator container HTML"]
|
30
|
+
}];
|
31
|
+
|
32
|
+
/**
|
33
|
+
* View More/Less Class
|
34
|
+
*/
|
35
|
+
var Navigator = /*#__PURE__*/function () {
|
36
|
+
/**
|
37
|
+
* These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
|
38
|
+
* @param {string|Object} content
|
39
|
+
* A reference to the component node
|
40
|
+
*
|
41
|
+
* @param {string|Object} contentMobile
|
42
|
+
* A reference to the component mobile node to toggle
|
43
|
+
*
|
44
|
+
*/
|
45
|
+
function Navigator(options) {
|
46
|
+
_classCallCheck(this, Navigator);
|
47
|
+
console.log('Navigator initialized');
|
48
|
+
this._internalVars = {
|
49
|
+
node: null //used for current node
|
50
|
+
};
|
51
|
+
|
52
|
+
//options with defaults set
|
53
|
+
this._defaults = {};
|
54
|
+
|
55
|
+
// Create options by extending defaults with the passed in arugments
|
56
|
+
if (options && _typeof(options) === "object") {
|
57
|
+
this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
|
58
|
+
}
|
59
|
+
|
60
|
+
//if the required options are valid set up the environment
|
61
|
+
if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
|
62
|
+
this._internalVars.contentType = _baseComponent["default"].getContentType(this);
|
63
|
+
setLocalVars.call(this);
|
64
|
+
init.call(this);
|
65
|
+
assignEvents.call(this);
|
66
|
+
setEvents.call(this);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
//Public Methods
|
71
|
+
|
72
|
+
/**
|
73
|
+
* removes the node from the dom and any events attached
|
74
|
+
*/
|
75
|
+
return _createClass(Navigator, [{
|
76
|
+
key: "destroy",
|
77
|
+
value: function destroy() {
|
78
|
+
removeEvents.call(this);
|
79
|
+
this._internalVars.node.nextElementSibling.classList.remove('navigator-enabled');
|
80
|
+
if (document.querySelector('footer')) {
|
81
|
+
document.querySelector('footer').classList.remove('navigator-page-footer');
|
82
|
+
}
|
83
|
+
this._internalVars.node.parentNode.removeChild(this._internalVars.node);
|
84
|
+
this._internalVars.nodeMobile.parentNode.removeChild(this._internalVars.nodeMobile);
|
85
|
+
|
86
|
+
//a little garbage collection
|
87
|
+
for (var variableKey in this) {
|
88
|
+
if (this.hasOwnProperty(variableKey)) {
|
89
|
+
delete this[variableKey];
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
}]);
|
94
|
+
}(); // Private Methods
|
95
|
+
/**
|
96
|
+
* setEvents()
|
97
|
+
* Sets all the events needed for the component
|
98
|
+
*/
|
99
|
+
function setEvents() {
|
100
|
+
window.addEventListener('resize', this._internalVars.assignEventsHandler);
|
101
|
+
}
|
102
|
+
|
103
|
+
/**
|
104
|
+
* removeEvents()
|
105
|
+
* removes all events from the component
|
106
|
+
*/
|
107
|
+
function removeEvents() {
|
108
|
+
window.removeEventListener('resize', this._internalVars.assignEventsHandler);
|
109
|
+
this._internalVars.node.removeEventListener('mouseover', this._internalVars.openNavHandler);
|
110
|
+
this._internalVars.node.removeEventListener('mouseout', this._internalVars.closeNavHandler);
|
111
|
+
this._internalVars.navigatorMobileBarExpand.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
112
|
+
this._internalVars.navigatorMobileCollapse.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
113
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseover', this._internalVars.addHoverColorHandler);
|
114
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseout', this._internalVars.removeHoverColorHandler);
|
115
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
116
|
+
}
|
117
|
+
function assignEvents() {
|
118
|
+
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
119
|
+
if (width > 480 && width <= 767) {
|
120
|
+
closeNav.call(this);
|
121
|
+
this._internalVars.node.addEventListener('mouseover', this._internalVars.openNavHandler);
|
122
|
+
this._internalVars.node.addEventListener('mouseout', this._internalVars.closeNavHandler);
|
123
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
124
|
+
window.addEventListener('scroll', this._internalVars.scrollHandler);
|
125
|
+
} else if (width <= 480) {
|
126
|
+
this._internalVars.node.removeEventListener('mouseover', this._internalVars.openNavHandler);
|
127
|
+
this._internalVars.node.removeEventListener('mouseout', this._internalVars.closeNavHandler);
|
128
|
+
this._internalVars.navigatorMobileBarExpand.addEventListener('click', this._internalVars.toggleDisplayHandler);
|
129
|
+
this._internalVars.navigatorMobileCollapse.addEventListener('click', this._internalVars.toggleDisplayHandler);
|
130
|
+
this._internalVars.navigatorMobileList.lastElementChild.addEventListener('mouseover', this._internalVars.addHoverColorHandler);
|
131
|
+
this._internalVars.navigatorMobileList.lastElementChild.addEventListener('mouseout', this._internalVars.removeHoverColorHandler);
|
132
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
133
|
+
} else {
|
134
|
+
openNav.call(this);
|
135
|
+
this._internalVars.node.removeEventListener('mouseover', this._internalVars.openNavHandler);
|
136
|
+
this._internalVars.node.removeEventListener('mouseout', this._internalVars.closeNavHandler);
|
137
|
+
this._internalVars.navigatorMobileBarExpand.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
138
|
+
this._internalVars.navigatorMobileCollapse.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
139
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseover', this._internalVars.addHoverColorHandler);
|
140
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseout', this._internalVars.removeHoverColorHandler);
|
141
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
142
|
+
window.addEventListener('scroll', this._internalVars.scrollHandler);
|
143
|
+
}
|
144
|
+
}
|
145
|
+
function addHoverColor() {
|
146
|
+
this._internalVars.navigatorMobileCollapse.querySelector('.geico-icon').classList.add('last-item-hover');
|
147
|
+
}
|
148
|
+
function removeHoverColor() {
|
149
|
+
this._internalVars.navigatorMobileCollapse.querySelector('.geico-icon').classList.remove('last-item-hover');
|
150
|
+
}
|
151
|
+
function toggleFixedScroll() {
|
152
|
+
if (document.querySelector('.navigator-enabled').getBoundingClientRect().top - 65 < 0) {
|
153
|
+
if (this._internalVars.node.classList.contains('static-scroll') && this._internalVars.navigatorOrderedList.classList.contains('static-scroll')) {
|
154
|
+
this._internalVars.node.classList.remove('static-scroll');
|
155
|
+
this._internalVars.navigatorOrderedList.classList.remove('static-scroll');
|
156
|
+
}
|
157
|
+
this._internalVars.node.classList.add('fixed-scroll');
|
158
|
+
this._internalVars.navigatorOrderedList.classList.add('fixed-scroll');
|
159
|
+
} else {
|
160
|
+
if (this._internalVars.node.classList.contains('fixed-scroll') && this._internalVars.navigatorOrderedList.classList.contains('fixed-scroll')) {
|
161
|
+
this._internalVars.node.classList.remove('fixed-scroll');
|
162
|
+
this._internalVars.navigatorOrderedList.classList.remove('fixed-scroll');
|
163
|
+
}
|
164
|
+
this._internalVars.node.classList.add('static-scroll');
|
165
|
+
this._internalVars.navigatorOrderedList.classList.add('static-scroll');
|
166
|
+
}
|
167
|
+
}
|
168
|
+
function init() {
|
169
|
+
$('.navigator-menu').slideUp();
|
170
|
+
this._internalVars.node.nextElementSibling.classList.add('navigator-enabled');
|
171
|
+
buildMobileContent.call(this);
|
172
|
+
if (this._internalVars.navigatorMobileList.querySelector('.active') == this._internalVars.navigatorMobileList.lastElementChild) {
|
173
|
+
this._internalVars.navigatorMobileCollapse.querySelector('.geico-icon').classList.add('color-change');
|
174
|
+
}
|
175
|
+
if (document.querySelector('footer')) {
|
176
|
+
document.querySelector('footer').classList.add('navigator-page-footer');
|
177
|
+
}
|
178
|
+
}
|
179
|
+
function buildMobileContent() {
|
180
|
+
var current = this._internalVars.navigatorActive.querySelector('a span:last-child').innerHTML;
|
181
|
+
var currentIcon = this._internalVars.navigatorActive.querySelector('.geico-icon').cloneNode(true);
|
182
|
+
if (this._internalVars.navigatorActive.classList.contains('alert')) {
|
183
|
+
currentIcon.setAttribute('class', 'geico-icon icon-alert-exclamation');
|
184
|
+
}
|
185
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('h3').innerHTML = current;
|
186
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('.active-icon').appendChild(currentIcon);
|
187
|
+
var currentSubtext = document.createElement('P');
|
188
|
+
if (this._internalVars.navigatorActive.querySelector('p')) {
|
189
|
+
var subtext = document.querySelector('.active p').innerHTML;
|
190
|
+
currentSubtext.innerHTML = subtext;
|
191
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('aside').appendChild(currentSubtext);
|
192
|
+
} else if (!this._internalVars.navigatorActive.querySelector('p')) {
|
193
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('aside').classList.add('no-current-subtext');
|
194
|
+
}
|
195
|
+
for (var h = 0; h < this._internalVars.navigatorOrderedList.children.length; h++) {
|
196
|
+
var li = this._internalVars.navigatorOrderedList.children[h];
|
197
|
+
var div = document.createElement('div');
|
198
|
+
var a = document.createElement('a');
|
199
|
+
var span1 = document.createElement('span');
|
200
|
+
var span2 = document.createElement('span');
|
201
|
+
var span3 = document.createElement('span');
|
202
|
+
span1.setAttribute('class', li.querySelector('span:first-child').getAttribute('class'));
|
203
|
+
if (li.classList.contains('alert')) {
|
204
|
+
span1.setAttribute('class', 'icon-alert-exclamation');
|
205
|
+
if (li.classList.contains('active')) {
|
206
|
+
span1.classList.add('geico-icon');
|
207
|
+
}
|
208
|
+
}
|
209
|
+
if (!li.classList.contains('active')) {
|
210
|
+
span1.classList.remove('geico-icon');
|
211
|
+
span1.classList.remove('geico-icon--actionable');
|
212
|
+
}
|
213
|
+
span1.classList.remove('geico-icon--dotted');
|
214
|
+
if (li.classList.contains('disabled')) {
|
215
|
+
div.classList.add('disabled');
|
216
|
+
}
|
217
|
+
if (li.classList.contains('active')) {
|
218
|
+
div.classList.add('active');
|
219
|
+
}
|
220
|
+
span2.appendChild(document.createTextNode(li.querySelector('a').innerText));
|
221
|
+
if (li.querySelector('p')) {
|
222
|
+
var br = document.createElement('br');
|
223
|
+
var aside = document.createElement('aside');
|
224
|
+
aside.appendChild(document.createTextNode(li.querySelector('p').innerText));
|
225
|
+
span2.appendChild(br);
|
226
|
+
span2.appendChild(aside);
|
227
|
+
} else {
|
228
|
+
div.classList.add("no-subtext");
|
229
|
+
}
|
230
|
+
span3.setAttribute('class', 'icon-chevron-right');
|
231
|
+
for (var i = li.querySelector('a').attributes.length - 1; i > -1; --i) {
|
232
|
+
var attribute = li.querySelector('a').attributes[i];
|
233
|
+
a.setAttribute(attribute.name, attribute.value);
|
234
|
+
}
|
235
|
+
a.appendChild(span1);
|
236
|
+
a.appendChild(span3);
|
237
|
+
a.appendChild(span2);
|
238
|
+
div.appendChild(a);
|
239
|
+
this._internalVars.navigatorMobileList.appendChild(div);
|
240
|
+
}
|
241
|
+
}
|
242
|
+
|
243
|
+
/* Set the width of the side navigation to 250px */
|
244
|
+
function openNav() {
|
245
|
+
if (this._internalVars.node.classList.contains('close') && this._internalVars.navigatorOrderedList.classList.contains('close')) {
|
246
|
+
this._internalVars.node.classList.remove('close');
|
247
|
+
this._internalVars.navigatorOrderedList.classList.remove('close');
|
248
|
+
}
|
249
|
+
this._internalVars.node.classList.add('open');
|
250
|
+
this._internalVars.navigatorOrderedList.classList.add('open');
|
251
|
+
}
|
252
|
+
|
253
|
+
/* Set the width of the side navigation to 0 */
|
254
|
+
function closeNav() {
|
255
|
+
if (this._internalVars.node.classList.contains('open') && this._internalVars.navigatorOrderedList.classList.contains('open')) {
|
256
|
+
this._internalVars.node.classList.remove('open');
|
257
|
+
this._internalVars.navigatorOrderedList.classList.remove('open');
|
258
|
+
}
|
259
|
+
this._internalVars.node.classList.add('close');
|
260
|
+
this._internalVars.navigatorOrderedList.classList.add('close');
|
261
|
+
}
|
262
|
+
function toggleDisplay() {
|
263
|
+
document.querySelector('.navigator-menu').classList.toggle('expanded');
|
264
|
+
$('.navigator-menu').slideToggle();
|
265
|
+
this._internalVars.navigatorMobileBarExpand.classList.toggle('hidden-sm');
|
266
|
+
}
|
267
|
+
|
268
|
+
/**
|
269
|
+
* setLocalVars()
|
270
|
+
* set local vars to the ones passed in options
|
271
|
+
*/
|
272
|
+
function setLocalVars() {
|
273
|
+
if (this._internalVars.contentType === 'string') {
|
274
|
+
this._internalVars.node = document.querySelector(this._options.content);
|
275
|
+
this._internalVars.nodeMobile = document.querySelector(this._options.contentMobile);
|
276
|
+
} else if (this._internalVars.contentType === 'domNode') {
|
277
|
+
this._internalVars.node = this._options.content;
|
278
|
+
this._internalVars.nodeMobile = this._options.contentMobile;
|
279
|
+
}
|
280
|
+
this._internalVars.navigatorOrderedList = this._internalVars.node.querySelector('ol');
|
281
|
+
this._internalVars.navigatorActive = this._internalVars.node.querySelector('.active');
|
282
|
+
this._internalVars.navigatorMobileBarExpand = this._internalVars.nodeMobile.querySelector('.navigator-bar-expand');
|
283
|
+
this._internalVars.navigatorMobileMenuContainer = this._internalVars.nodeMobile.querySelector('.navigator-menu');
|
284
|
+
this._internalVars.navigatorMobileList = this._internalVars.nodeMobile.querySelector('.navigator-list');
|
285
|
+
this._internalVars.navigatorMobileCollapse = this._internalVars.nodeMobile.querySelector('.navigator-collapse');
|
286
|
+
this._internalVars.assignEventsHandler = assignEvents.bind(this);
|
287
|
+
this._internalVars.toggleDisplayHandler = toggleDisplay.bind(this);
|
288
|
+
this._internalVars.openNavHandler = openNav.bind(this);
|
289
|
+
this._internalVars.closeNavHandler = closeNav.bind(this);
|
290
|
+
this._internalVars.scrollHandler = toggleFixedScroll.bind(this);
|
291
|
+
this._internalVars.addHoverColorHandler = addHoverColor.bind(this);
|
292
|
+
this._internalVars.removeHoverColorHandler = removeHoverColor.bind(this);
|
293
|
+
}
|
294
|
+
var _default = exports["default"] = Navigator;
|
@@ -0,0 +1,201 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
9
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
10
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
11
|
+
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
12
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
14
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
15
|
+
var validateSettings = [{
|
16
|
+
setting: 'content',
|
17
|
+
isRequired: true,
|
18
|
+
validate: 'type',
|
19
|
+
possibleValues: ['string', 'object'],
|
20
|
+
errorMessage: ['GDK PasswordMeter : Content must be defined and set to a DOM selector or Node']
|
21
|
+
}, {
|
22
|
+
setting: 'fairRegex',
|
23
|
+
isRequired: true,
|
24
|
+
validate: 'type',
|
25
|
+
possibleValues: ['string', 'object'],
|
26
|
+
errorMessage: ['GDK PasswordMeter : fairRegex must be a regex string to pass into the RegExp object constructor function or a regex literal']
|
27
|
+
}, {
|
28
|
+
setting: 'strongRegex',
|
29
|
+
isRequired: true,
|
30
|
+
validate: 'type',
|
31
|
+
possibleValues: ['string', 'object'],
|
32
|
+
errorMessage: ['GDK PasswordMeter : strongRegex must be a regex string to pass into the RegExp object constructor function or a regex literal']
|
33
|
+
}, {
|
34
|
+
setting: 'weakString',
|
35
|
+
isRequired: false,
|
36
|
+
validate: 'type',
|
37
|
+
possibleValues: ['string'],
|
38
|
+
errorMessage: ['GDK PasswordMeter : weakString must be a string to specify another term instead of the default Weak']
|
39
|
+
}, {
|
40
|
+
setting: 'fairString',
|
41
|
+
isRequired: false,
|
42
|
+
validate: 'type',
|
43
|
+
possibleValues: ['string'],
|
44
|
+
errorMessage: ['GDK PasswordMeter : fairString must be a string to specify another term instead of the default Fair']
|
45
|
+
}, {
|
46
|
+
setting: 'strongString',
|
47
|
+
isRequired: false,
|
48
|
+
validate: 'type',
|
49
|
+
possibleValues: ['string'],
|
50
|
+
errorMessage: ['GDK PasswordMeter : strongString must be a string to specify another term instead of the default Strong']
|
51
|
+
}, {
|
52
|
+
setting: 'onInputChange',
|
53
|
+
isRequired: false,
|
54
|
+
validate: 'type',
|
55
|
+
possibleValues: ['function'],
|
56
|
+
errorMessage: ['GDK PasswordMeter : onInputChange must be a defined and set function']
|
57
|
+
}];
|
58
|
+
var PasswordMeter = /*#__PURE__*/function () {
|
59
|
+
/**
|
60
|
+
* These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
|
61
|
+
* @param {string|Object} content
|
62
|
+
* A reference to the password form field container wrapping both the field and meter
|
63
|
+
*
|
64
|
+
* @param {string|Object} fairRegex
|
65
|
+
* A regex string to pass into the RegExp object constructor function or a regex literal for fair password strength
|
66
|
+
*
|
67
|
+
* @param {string|Object} strongRegex
|
68
|
+
* A regex string to pass into the RegExp object constructor function or a regex literal for strong password strength
|
69
|
+
*
|
70
|
+
* @param {string} [weakString="Weak"]
|
71
|
+
* A string to indicate a Weak password strength
|
72
|
+
*
|
73
|
+
* @param {string} [fairString="Fair"]
|
74
|
+
* A string to indicate a Fair password strength
|
75
|
+
*
|
76
|
+
* @param {string} [strongString="Strong"]
|
77
|
+
* A string to indicate a Strong password strength
|
78
|
+
*
|
79
|
+
* @param {function} [onInputChange]
|
80
|
+
* A callback function with each password character input
|
81
|
+
*/
|
82
|
+
function PasswordMeter(options) {
|
83
|
+
_classCallCheck(this, PasswordMeter);
|
84
|
+
this._internalVars = {
|
85
|
+
node: null //used for current node
|
86
|
+
};
|
87
|
+
|
88
|
+
//options with defaults set
|
89
|
+
this._defaults = {
|
90
|
+
weakString: 'Weak',
|
91
|
+
fairString: 'Fair',
|
92
|
+
strongString: 'Strong'
|
93
|
+
};
|
94
|
+
|
95
|
+
// Create options by extending defaults with the passed in arugments
|
96
|
+
if (options && _typeof(options) === "object") {
|
97
|
+
this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
|
98
|
+
}
|
99
|
+
|
100
|
+
//if the required options are valid set up the environment
|
101
|
+
if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
|
102
|
+
this._internalVars.contentType = _baseComponent["default"].getContentType(this);
|
103
|
+
setLocalVars.call(this);
|
104
|
+
setEvents.call(this);
|
105
|
+
if (!this._internalVars.meterContainerParent.getAttribute('aria-live')) this._internalVars.meterContainerParent.setAttribute('aria-live', 'polite');
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
//Public Methods
|
110
|
+
|
111
|
+
/**
|
112
|
+
* getCurrentStrength()
|
113
|
+
* returns a string indicating the current password strength level
|
114
|
+
* @returns {string}
|
115
|
+
*/
|
116
|
+
return _createClass(PasswordMeter, [{
|
117
|
+
key: "getCurrentStrength",
|
118
|
+
value: function getCurrentStrength() {
|
119
|
+
return this._internalVars.meterContainer.getAttribute('class');
|
120
|
+
}
|
121
|
+
|
122
|
+
/**
|
123
|
+
* removes the node from the dom and any events attached
|
124
|
+
*/
|
125
|
+
}, {
|
126
|
+
key: "destroy",
|
127
|
+
value: function destroy() {
|
128
|
+
removeEvents.call(this);
|
129
|
+
this._internalVars.node.parentNode.removeChild(this._internalVars.node);
|
130
|
+
|
131
|
+
//a little garbage collection
|
132
|
+
for (var variableKey in this) {
|
133
|
+
if (this.hasOwnProperty(variableKey)) {
|
134
|
+
delete this[variableKey];
|
135
|
+
}
|
136
|
+
}
|
137
|
+
}
|
138
|
+
}]);
|
139
|
+
}(); // Private Methods
|
140
|
+
function setLocalVars() {
|
141
|
+
if (this._internalVars.contentType === 'string') {
|
142
|
+
this._internalVars.node = document.querySelector(this._options.content);
|
143
|
+
} else if (this._internalVars.contentType === 'domNode') {
|
144
|
+
this._internalVars.node = this._options.content;
|
145
|
+
}
|
146
|
+
this._internalVars.meterContainerParent = this._internalVars.node.querySelector('.password-meter-container');
|
147
|
+
this._internalVars.meterContainer = this._internalVars.node.querySelector('.password-meter-container > div');
|
148
|
+
this._internalVars.passwordField = this._internalVars.node.querySelector('input[type="password"]');
|
149
|
+
this._internalVars.weakBar = this._internalVars.meterContainer.querySelector('.weak');
|
150
|
+
this._internalVars.fairBar = this._internalVars.meterContainer.querySelector('.fair');
|
151
|
+
this._internalVars.strongBar = this._internalVars.meterContainer.querySelector('.strong');
|
152
|
+
this._internalVars.handler = meterChange.bind(this);
|
153
|
+
this._internalVars.strongRegexObj = new RegExp(this._options.strongRegex);
|
154
|
+
if (this._options.strongRegex.toString().charAt(0) === '/') {
|
155
|
+
this._internalVars.strongRegexObj = this._options.strongRegex;
|
156
|
+
}
|
157
|
+
this._internalVars.fairRegexObj = new RegExp(this._options.fairRegex);
|
158
|
+
if (this._options.fairRegex.toString().charAt(0) === '/') {
|
159
|
+
this._internalVars.fairRegexObj = this._options.fairRegex;
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
163
|
+
/**
|
164
|
+
* setEvents()
|
165
|
+
* Sets all the events needed for the component
|
166
|
+
*/
|
167
|
+
function setEvents() {
|
168
|
+
this._internalVars.passwordField.addEventListener('input', this._internalVars.handler);
|
169
|
+
}
|
170
|
+
function removeEvents() {
|
171
|
+
this._internalVars.passwordField.removeEventListener('input', this._internalVars.handler);
|
172
|
+
}
|
173
|
+
|
174
|
+
/**
|
175
|
+
* whatever()
|
176
|
+
* whatever about the function
|
177
|
+
*/
|
178
|
+
function removeAll() {
|
179
|
+
this._internalVars.meterContainer.removeAttribute('class');
|
180
|
+
}
|
181
|
+
function meterChange(e) {
|
182
|
+
if (this._internalVars.strongRegexObj.test(e.target.value)) {
|
183
|
+
removeAll.call(this);
|
184
|
+
this._internalVars.meterContainer.classList.add('password-strong');
|
185
|
+
this._internalVars.strongBar.innerHTML = this._options.strongString;
|
186
|
+
} else if (this._internalVars.fairRegexObj.test(e.target.value)) {
|
187
|
+
removeAll.call(this);
|
188
|
+
this._internalVars.meterContainer.classList.add('password-fair');
|
189
|
+
this._internalVars.fairBar.innerHTML = this._options.fairString;
|
190
|
+
} else if (e.target.value === "") {
|
191
|
+
removeAll.call(this);
|
192
|
+
} else {
|
193
|
+
removeAll.call(this);
|
194
|
+
this._internalVars.meterContainer.classList.add('password-weak');
|
195
|
+
this._internalVars.weakBar.innerHTML = this._options.weakString;
|
196
|
+
}
|
197
|
+
if (this._options.onInputChange) {
|
198
|
+
this._options.onInputChange();
|
199
|
+
}
|
200
|
+
}
|
201
|
+
var _default = exports["default"] = PasswordMeter;
|