@leapdev/gui 0.2.234 → 0.2.240

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,3 +1,53 @@
+// Mutation Observer for Accordion and Tabs
+//https://gist.github.com/matthewmorrone/da487467501e8b815430
+(function (win) {
+	'use strict';
+
+	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);
+
 (function () {
 	var getChildren = function (n, skipMe) {
 		var r = [];
@@ -10,6 +60,59 @@
 		return getChildren(n.parentNode.firstChild, n);
 	};
 
+	var getClosestParent = function (elem, selector) {
+		if (!Element.prototype.matches) {
+			Element.prototype.matches =
+				Element.prototype.matchesSelector ||
+				Element.prototype.mozMatchesSelector ||
+				Element.prototype.msMatchesSelector ||
+				Element.prototype.oMatchesSelector ||
+				Element.prototype.webkitMatchesSelector ||
+				function (s) {
+					const matches = (this.document || this.ownerDocument).querySelectorAll(s),
+						i = matches.length;
+					while (--i >= 0 && matches.item(i) !== this) { }
+					return i > -1;
+				};
+		}
+
+		// Get the closest matching element
+		for (; elem && elem !== document; elem = elem.parentNode) {
+			if (elem.matches(selector)) return elem;
+		}
+		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('-');
+		})();
+	};
+
+	var getDeviceType = function () {
+		const ua = navigator.userAgent;
+		const isiOS = () => {
+			return /iPad|iPhone/.test(ua) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+		};
+		const isAndroid = () => { return /android/i.test(ua); };
+
+		if (isAndroid()) {
+			return 'android';
+		}
+		else if (isiOS()) {
+			if (/iPad/.test(ua)) { return 'ipad'; }
+			else if (/iPhone/.test(ua)) { return 'iphone'; }
+			else { return 'ios'; }
+		}
+		return;
+	};
+
+	var getURLHashList = function () {
+		return window.location.hash !== '' ? window.location.hash.substring(1).split('#') : undefined;
+	};
+
 	document.addEventListener('click', function (event) {
 		var
 			targetElem = event.target,
@@ -33,15 +136,18 @@
 			activeTabBtn.classList.add('active');
 			targetTab.classList.add('in');
 
-			activeBtnTabSiblings.forEach(function (element, index) {
+			appendHash(targetElem.textContent);
+
+			activeBtnTabSiblings.forEach(function (element) {
 				if (element.classList.value.indexOf('active') !== -1) element.classList.remove('active');
 			});
-			targetTabSiblings.forEach(function (element, index) {
+			targetTabSiblings.forEach(function (element) {
 				if (element.classList.value.indexOf('in') !== -1) element.classList.remove('in');
 			});
 		}
 
 		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');
 		}
@@ -49,4 +155,50 @@
 		return false;
 	}, false);
 
+	const openParent = (childElement) => {
+		const closestTab = getClosestParent(childElement, '.sf-tab-content');
+		const closestAccordion = getClosestParent(childElement, '.sf-accordion-content');
+
+		if (closestTab !== null) {
+			document.getElementById(`target_${closestTab.id}`).click();
+		}
+		if (closestAccordion !== null) {
+			document.getElementById(`target_${closestAccordion.id}`).click();
+		}
+	};
+
+	// Set default tab via URL hash or device type if present on tabs
+	ready('.sf-tabs', function () {
+		const urlHashList = getURLHashList();
+		document.querySelectorAll('.sf-tabs').forEach(tab => {
+			const deviceType = getDeviceType();
+			tab.querySelectorAll('.sf-tab-item-link').forEach(tabitem => {
+				console.log(tabitem);
+				const tabItemText = tabitem.textContent.toLowerCase().replace(/\s/g, '');
+				console.log(tabItemText, deviceType, typeof (urlHashList));
+
+				if (tabItemText === deviceType && typeof (urlHashList) === 'undefined') {
+					tabitem.click();
+				}
+				else if (typeof (urlHashList) !== 'undefined' && urlHashList.includes(tabItemText)) {
+					openParent(tabitem);
+					tabitem.click();
+				}
+			});
+		});
+	});
+
+	ready('.sf-accordion', function () {
+		const urlHashList = getURLHashList();
+		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();
+			}
+		});
+	});
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapdev/gui",
-  "version": "0.2.234",
+  "version": "0.2.240",
   "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": {}
 }