@leapdev/gui 0.2.235 → 0.2.241

package/dist/scss/auth/theme/features/_auth.scss

@@ -0,0 +1,290 @@
+html {
+    height: 100%;
+}
+
+.auth-page {
+    background-color: var(--leap-body-background-color);
+    // display: grid;
+    // place-items: center;
+    display: flex;
+    align-items: center;
+    min-height: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    @media screen and (min-height: 850px) {
+        background-image: url(https://unpkg.com/@leapdev/gui@latest/dist/images/leap-auth/auth-bg.png);
+        background-position: bottom left;
+        background-repeat: no-repeat;
+        background-size: 1194px;
+    }
+
+    > .container {
+        align-self: center;
+        display: flex;
+    }
+}
+
+
+.auth {
+    margin: 0 auto;
+    padding-bottom: 16vh;
+    height: auto;
+
+    @media screen and (min-width: 577px) {
+        max-width: 21.25rem;
+    }
+
+    @media screen and (max-height: 849px) {
+        padding-bottom: 0;
+    }
+
+    &_container {
+        margin: auto;
+    }
+
+    &_logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 3.5rem;
+
+        @media screen and (max-height: 849px) {
+            height: auto;
+            margin-bottom: 4vh;
+            margin-top: 4vh;
+
+            > svg {
+                height: 100%;
+            }
+        }
+    }
+
+    &_title {
+        font-size: $h2-font-size;
+        color: var(--leap-heading-color);
+        font-weight: $font-weight-bold;
+        margin-bottom: 1rem;
+    }
+
+    &_form {
+        margin: auto;
+        .input-group-text,
+        .form-control {
+            border-radius: var(--leap-border-radius) !important;
+        }
+    }
+
+    &_links {
+        display: flex;
+        margin-top: 2rem;
+        color: $text-muted;
+        text-align: center;
+        justify-content: space-between;
+
+       a {
+        text-decoration: none;
+        font-size: $font-size-sm;
+        font-weight: 400;
+        &:hover, &:focus {
+            text-decoration: underline;
+        }
+       }
+    }
+
+    @media screen and (max-width: 376px) {
+        &_links {
+            flex-wrap: wrap;
+            margin-bottom: 2rem;
+
+            .nav {
+                width: 100%;
+
+                > li {
+                    display: block;
+                    white-space: wrap;
+                    width: 100%;
+                    padding-top: 0.25rem;
+                    padding-bottom: 0.25rem;
+                }
+            }
+        }
+    }
+
+    &_or {
+        $or-dim: 2.25rem;
+        width: 100%;
+        height: $or-dim !important;
+        margin: 1.5rem 0;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        position: relative;
+        user-select: none;
+        overflow: hidden;
+        > span {
+            color: var(--leap-label-color);
+            display: block;
+            font-weight: 600;
+            font-size: 0.875rem;
+            text-align: center;
+            width: $or-dim;
+            height: $or-dim;
+            padding-top: 0.25rem;
+            border: 2px solid var(--leap-border-color);
+            border-radius: $or-dim;
+        }
+
+        &::before, &::after {
+            content: '';
+            display: inline-block;
+            width: calc(50% - #{$or-dim / 2});
+            height: 0.125rem;
+            background-color: var(--leap-border-color);
+        }
+    }
+
+    &_btn_microsoft {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    $icon_microsoft_dimension: 1.25rem;
+    &_icon_microsoft {
+        width: $icon_microsoft_dimension;
+        height: $icon_microsoft_dimension;
+        margin-top: -0.0625rem;
+        margin-right: 0.5rem;
+        $microsoft-icon: str-replace(url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2_21)'%3E%3Cpath d='M0 0.125H20V20.125H0V0.125Z' fill='%23F3F3F3'/%3E%3Cpath d='M0.869568 0.994564H9.56522V9.69022H0.869568V0.994564Z' fill='%23F35325'/%3E%3Cpath d='M10.4348 0.994564H19.1304V9.69022H10.4348V0.994564Z' fill='%2381BC06'/%3E%3Cpath d='M0.869568 10.5598H9.56522V19.2554H0.869568V10.5598Z' fill='%2305A6F0'/%3E%3Cpath d='M10.4348 10.5598H19.1304V19.2554H10.4348V10.5598Z' fill='%23FFBA08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2_21'%3E%3Crect width='20' height='20' fill='white' transform='translate(0 0.125)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"), "#", "%23");
+        &::before {
+            width: $icon_microsoft_dimension;
+            height: $icon_microsoft_dimension;
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            content: '';
+            background-image: $microsoft-icon;
+            
+        }
+    }
+
+    &_permissions {
+        padding-top: 0.25rem;
+        padding-right: 0.25rem;
+        padding-bottom: 0.25rem;
+        background-color: #f7f7f7;
+        border-radius: var(--leap-border-radius);
+        margin-bottom: 1rem;
+
+        &:hover > .auth_permissions_list::-webkit-scrollbar-thumb {
+            background-color: #333;
+            transition: all 0.25s ease-out;
+        }
+    }
+
+    &_permissions_list {
+        list-style-type: none;
+        padding-left: 0;
+        margin-bottom: 0;
+        background-color: #f7f7f7;
+        padding: 0.75rem 0.75rem 0.75rem 1rem;
+        overflow-y: auto;
+        min-height: 200px;
+        max-height: 30vh;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+            width: 0.5rem;
+            border-top-right-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 8px;
+            background-color: var(--leap-border-color);
+            transition: all 0.25s ease-out;
+            &:hover {
+                background-color: #333;
+                transition: all 0.25s ease-out;
+            }
+        }
+
+        > li {
+            &:not(:first-child) {
+                margin-top: 1rem;
+            }
+
+            > ul {
+                list-style-type: none;
+                padding-left: 0;
+            }
+
+            > ul li {
+                &::before {
+                    display: inline-block;
+                    content: '-';
+                    margin-right: 0.25rem;
+                }
+                margin-bottom: 0.25rem;
+            }
+        }
+    }
+
+    // @media screen and (min-width: 577px) {
+        &_support_tabcontent {
+            min-height: 21.5rem;
+        }
+    // }
+
+    &_firm_id {
+        position: relative;
+
+        .form-control {
+            z-index: 1;
+            padding-right: 3rem;
+
+            @if not $is-desktop {
+                padding-left: 1rem;
+            }
+            @else {
+                padding-left: 0.5rem;
+            }
+        }
+
+        .btn-icon-only {
+            height: auto;
+            padding: 0.5rem;
+            position: absolute;
+            z-index: 2;
+
+            @if $is-desktop {
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            @else {
+                right: 0.25rem;
+                top: 0.25rem;
+                bottom: 0.25rem;
+            }
+
+            .icon {
+                width: 1.2rem;
+                height: 1.2rem;
+            }
+        }
+    }
+
+    &_reason {
+        @if $is-desktop {
+            > span.input-group-text {
+                height: 60% !important;
+            }
+        }
+        @else {
+            > span.input-group-text {
+                height: 71% !important;
+            }
+        }
+    }
+}

package/dist/scss/auth/theme/mixins/_badge.scss

@@ -0,0 +1,12 @@
+@mixin badge-variant-outline($bg, $color, $border) {
+    color: $color;
+    background-color: rgba($bg, 0.12);
+    border: 1px solid $border;
+
+    &[href]:hover,
+    &[href]:focus {
+        color: $color;
+        text-decoration: none;
+        background-color: rgba($bg, 0.2);
+    }
+}

package/dist/scss/auth/theme/mixins/_icons.scss

@@ -0,0 +1,7 @@
+@mixin icon-sizing($map) {
+    @each $size, $value in $map {
+      .icon-#{$size} {
+        font-size: $value;
+      }
+    }
+  }

package/dist/scss/auth/theme/mixins/_mixins.scss

@@ -0,0 +1,2 @@
+@import './icons';
+@import './badge';

package/dist/scss/product/auth-leap-addin.scss

@@ -0,0 +1,21 @@
+//
+// Theme
+//
+// Custom variables followed by theme variables followed by Bootstrap variables
+// to ensure cascade of styles.
+//
+
+// Bootstrap functions
+@import '~bootstrap/scss/functions';
+
+// Custom theme variables override
+@import '../auth/theme/css-variables/office-addin';
+@import '../auth/theme/bootstrap-variables/variables';
+
+// Bootstrap core
+@import '../auth/bootstrap/bootstrap';
+
+// Custom theme core including mixins / utilities / features
+@import '../auth/theme/mixins/mixins';
+@import '../auth/theme/components/components';
+@import '../auth/theme/features/auth';

package/dist/scss/product/auth-leap-desktop.scss

@@ -0,0 +1,22 @@
+//
+// Theme
+//
+// Custom variables followed by theme variables followed by Bootstrap variables
+// to ensure cascade of styles.
+//
+
+// Bootstrap functions
+@import '~bootstrap/scss/functions';
+
+// Custom theme variables override
+@import '../auth/theme/css-variables/leap-4d';
+@import '../auth/theme/bootstrap-variables/variables';
+
+// Bootstrap core
+@import '../auth/bootstrap/bootstrap';
+
+// Custom theme core including mixins / utilities / features
+@import '../auth/theme/mixins/mixins';
+@import '../auth/theme/components/components';
+@import '../auth/theme/features/auth'; 
+

package/dist/scss/product/auth-leap-web.scss

@@ -0,0 +1,21 @@
+//
+// Theme
+//
+// Custom variables followed by theme variables followed by Bootstrap variables
+// to ensure cascade of styles.
+//
+
+// Bootstrap functions
+@import '~bootstrap/scss/functions';
+
+// Custom theme variables override
+@import '../auth/theme/css-variables/leap';
+@import '../auth/theme/bootstrap-variables/variables';
+
+// Bootstrap core
+@import '../auth/bootstrap/bootstrap';
+
+// Custom theme core including mixins / utilities / features
+@import '../auth/theme/mixins/mixins';
+@import '../auth/theme/components/components';
+@import '../auth/theme/features/auth'; 

package/dist/scss/xsf-crx/sf-leap.js

@@ -1,16 +1,58 @@
-(function () {
-	var getChildren = function (n, skipMe) {
-		var r = [];
-		for (; n; n = n.nextSibling)
-			if (n.nodeType == 1 && n != skipMe) r.push(n);
-		return r;
-	};
+// Mutation Observer for Accordion and Tabs
+//https://gist.github.com/matthewmorrone/da487467501e8b815430
+(function (win) {
+	'use strict';
 
-	var getSiblings = function (n) {
-		return getChildren(n.parentNode.firstChild, n);
-	};
+	var listeners = [],
+		doc = win.document,
+		MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
+		observer;
+
+	function ready(selector, fn) {
+		// Store the selector and callback to be monitored
+		listeners.push({
+			selector: selector,
+			fn: fn
+		});
+		if (!observer) {
+			// Watch for changes in the document
+			observer = new MutationObserver(check);
+			observer.observe(doc.documentElement, {
+				childList: true,
+				subtree: true
+			});
+		}
+		// Check if the element is currently in the DOM
+		check();
+	}
+
+	function check() {
+		// Check the DOM for elements matching a stored selector
+		for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
+			listener = listeners[i];
+			// Query for elements matching the specified selector
+			elements = doc.querySelectorAll(listener.selector);
+			for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
+				element = elements[j];
+				// Make sure the callback isn't invoked with the 
+				// same element more than once
+				if (!element.ready) {
+					element.ready = true;
+					// Invoke the callback with the element
+					listener.fn.call(element, element);
+				}
+			}
+		}
+	}
+	// Expose `ready`
+	win.ready = ready;
+})(this);
 
-	var getClosestParent = function (elem, selector) {
+//LEAP Help Centre JS for Components generated via Chrome Extension
+(function () {
+	const topicsTabAccordion = {};
+
+	const getClosestParent = function (elem, selector) {
 		if (!Element.prototype.matches) {
 			Element.prototype.matches =
 				Element.prototype.matchesSelector ||
@@ -33,15 +75,18 @@
 		return null;
 	};
 
-	// For Version 1 the order of Hash appendages is Tab -> Accordion -> Subaccordion
-	var appendHash = function (str) {
-		window.location.hash = (() => {
-			const lowercasedStr = str.toLowerCase();
-			return lowercasedStr.split(' ').join('-');
-		})();
+	const getChildren = function (n, skipMe) {
+		let r = [];
+		for (; n; n = n.nextSibling)
+			if (n.nodeType == 1 && n != skipMe) r.push(n);
+		return r;
+	};
+
+	const getSiblings = function (n) {
+		return getChildren(n.parentNode.firstChild, n);
 	};
 
-	var getDeviceType = function () {
+	const getDeviceType = function () {
 		const ua = navigator.userAgent;
 		const isiOS = () => {
 			return /iPad|iPhone/.test(ua) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
@@ -59,14 +104,28 @@
 		return;
 	};
 
+	// #@desktop:accordion-2;sub-accordion-1@parent-accordion-1
+	const urlHash = {
+		list: window.location.hash,
+		init: function () {
+			this.openedTopics = window.location.hash.substring(1).split('@').splice(1);
+		},
+		setItem: function (id) {
+			const childText = topicsTabAccordion[id].isMainParent ? '' : (':' + topicsTabAccordion[id].text);
+			const parentText = topicsTabAccordion[id].isMainParent ? topicsTabAccordion[id].text : topicsTabAccordion[id].parentLabel;
+			return `@${parentText}${childText}`;
+		}
+	};
+
+	// Tab and Accordion Toggling
 	document.addEventListener('click', function (event) {
-		var
+		const
 			targetElem = event.target,
 			className = targetElem.classList;
 
 		if (className.value.indexOf('sf-tab-item-link') !== -1) {
 			event.preventDefault();
-			var targetID,
+			let targetID,
 				activeTabBtn,
 				targetTab,
 				targetTabSiblings,
@@ -82,8 +141,6 @@
 			activeTabBtn.classList.add('active');
 			targetTab.classList.add('in');
 
-			appendHash(targetElem.textContent);
-
 			activeBtnTabSiblings.forEach(function (element) {
 				if (element.classList.value.indexOf('active') !== -1) element.classList.remove('active');
 			});
@@ -93,61 +150,128 @@
 		}
 
 		if (className.value.indexOf('sf-accordion-toggle') !== -1) {
-			appendHash(targetElem.querySelector('.sf-accordion-text').textContent);
-			className.value.indexOf('in') == -1 ?
-				className.add('in') : className.remove('in');
+			className.value.indexOf('in') == -1 ? className.add('in') : className.remove('in');
+		}
+
+		if (
+			className.value.indexOf('sf-tab-item-link') !== -1 ||
+			className.value.indexOf('sf-accordion-toggle') !== -1
+		) {
+			window.location.hash = urlHash.setItem(targetElem.id);
 		}
 
 		return false;
 	}, false);
 
-	// Set default tab via URL hash or device type if present on tabs
-	document.addEventListener('DOMContentLoaded', function () {
-		const tabs = document.querySelectorAll('.sf-tabs');
-		const accordion = document.querySelectorAll('.sf-accordion-toggle');
-		const urlHashList = window.location.hash !== '' ? window.location.hash.substring(1).split('#') : undefined;
+	// Set default tab via URL hash parameters or device type if present on tabs
+	let articleTabsInit = false;
+	let articleAccordionInit = false;
 
-		const openParent = (childElement) => {
-			const closestTab = getClosestParent(childElement, '.sf-tab-content');
-			const closestAccordion = getClosestParent(childElement, '.sf-accordion-content');
+	urlHash.init();
 
-			if (closestTab !== null) {
-				document.getElementById(`target_${closestTab.id}`).click();
+	const closestParent = (child) => {
+		const tabContent = getClosestParent(child, '.sf-tab-content');
+		const accordionContent = getClosestParent(child, '.sf-accordion-content');
+		const parentLabel = () => {
+			if (tabContent !== null) {
+				return document.getElementById(`target_${tabContent.id}`).textContent;
 			}
-			if (closestAccordion !== null) {
-				document.getElementById(`target_${closestAccordion.id}`).click();
+			else if (accordionContent !== null) {
+				return document.getElementById(`target_${accordionContent.id}`).querySelector('.sf-accordion-text').textContent;
 			}
+			else {
+				return '';
+			}
+		};
+		return {
+			parentLabel: parentLabel().split(' ').join('-').toLowerCase(),
+			flag: tabContent !== null || accordionContent !== null ? false : true
 		};
+	};
+
+	ready('.sf-tabs', function () {
+		if (!articleTabsInit) {
+
+			const toggleTabs = (params) => {
+				// Remove existing active CSS classes
+				const currentTabContentID = params.tabNav.querySelector('.sf-tab-item.active').firstElementChild.id.substring(7);
+				params.tabNav.querySelector('.sf-tab-item.active').classList.remove('active');
+				document.getElementById(currentTabContentID).classList.remove('in');
 
-		if (tabs.length !== 0) {
-			tabs.forEach(tab => {
+				//Update tab according to device with active and in css class
+				params.targetTabLink.parentNode.classList.add('active');
+				document.getElementById(params.targetTabLink.id.substring(7)).classList.add('in');
+			};
+
+			document.querySelectorAll('.sf-tabs').forEach(tab => {
 				const deviceType = getDeviceType();
 				tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
 					const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
 
-					if (tabItemText === deviceType && typeof (urlHashList) === 'undefined') {
-						tabitem.click();
+					const _closestParent = closestParent(tabitem);
+
+					topicsTabAccordion[tabitem.id] = {
+						text: tabItemText,
+						isMainParent: _closestParent.flag,
+						parentLabel: _closestParent.parentLabel
+					};
+
+					// If URL hash is not present, we locate the name of the device tab
+					const sfTabNav = tabitem.parentNode.parentNode;
+					if (tabItemText === deviceType && urlHash.list === '') {
+						if (sfTabNav.querySelector('.sf-tab-item.active').classList.contains('active')) {
+							toggleTabs({
+								targetTabLink: tabitem,
+								tabNav: sfTabNav
+							});
+						}
 					}
-					else if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(tabItemText)) {
-						openParent(tabitem);
-						tabitem.click();
+
+					if (urlHash.list !== '' && urlHash.list.search(tabItemText) > -1) {
+						Object.keys(topicsTabAccordion).forEach(key => {
+							if (tabItemText == topicsTabAccordion[key].text) {
+								toggleTabs({
+									targetTabLink: tabitem,
+									tabNav: sfTabNav
+								});
+							}
+						});
 					}
 				});
 			});
+
+			articleTabsInit = true;
+			console.log(topicsTabAccordion);
 		}
+	});
 
-		if (accordion.length !== 0) {
-			accordion.forEach(accordionToggle => {
+	ready('.sf-accordion', function () {
+		if (!articleAccordionInit) {
+			const urlHashList = window.location.hash;
+			document.querySelectorAll('.sf-accordion-toggle').forEach(accordionToggle => {
 				const accordionText = accordionToggle
 					.querySelector('.sf-accordion-text')
 					.textContent.split(' ').join('-').toLowerCase();
 
-				if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(accordionText)) {
-					openParent(accordionToggle);
-					accordionToggle.click();
+				const _closestParent = closestParent(accordionToggle);
+
+				topicsTabAccordion[accordionToggle.id] = {
+					text: accordionText,
+					isMainParent: _closestParent.flag,
+					parentLabel: _closestParent.parentLabel
+				};
+
+				if (urlHashList !== '' && urlHash.list.search(accordionText) > -1) {
+					Object.keys(topicsTabAccordion).forEach(key => {
+						if (accordionText == topicsTabAccordion[key].text) {
+							document.getElementById(key).classList.add('in');
+							return;
+						}
+					});
 				}
 			});
+
+			articleAccordionInit = true;
 		}
 	});
-
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapdev/gui",
-  "version": "0.2.235",
+  "version": "0.2.241",
   "description": "LEAP GUI",
   "author": "LEAP Dev",
   "license": "ISC",
@@ -48,5 +48,6 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
-  }
+  },
+  "dependencies": {}
 }