Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Apply Prettier formatting with 4-space indentation

Browse Source 
Applied consistent code formatting across the project using Prettier, now configured to use 4-space indentation instead of tabs.
This commit is contained in:
Scott Idem
2025-11-18 18:40:50 -05:00
parent 6d1f9989d0
commit 0987cd6ad9
346 changed files with 86645 additions and 84459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

745
src/lib/app_components/e_app_sys_menu.svelte
View File

@@ -1,54 +1,54 @@
<script lang="ts">
// *** Import Svelte specific
// import { tick } from 'svelte';
// import { goto, invalidateAll } from '$app/navigation';
// *** Import Svelte specific
// import { tick } from 'svelte';
// import { goto, invalidateAll } from '$app/navigation';
// *** Import other supporting libraries
import {
// ArrowBigRight,
// Bug,
CircleX,
// Eye, EyeOff,
// Key,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
Menu,
// RefreshCw, RefreshCcwDot,
ShieldEllipsis,
ShieldMinus,
ShieldPlus,
ShieldUser,
// ToggleLeft, ToggleRight,
User,
UserCheck,
X
} from '@lucide/svelte';
// *** Import other supporting libraries
import {
// ArrowBigRight,
// Bug,
CircleX,
// Eye, EyeOff,
// Key,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
Menu,
// RefreshCw, RefreshCcwDot,
ShieldEllipsis,
ShieldMinus,
ShieldPlus,
ShieldUser,
// ToggleLeft, ToggleRight,
User,
UserCheck,
X
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
import Element_app_cfg from '$lib/app_components/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
import Element_theme from '$lib/app_components/e_app_theme.svelte';
import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
import Element_app_cfg from '$lib/app_components/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
import Element_theme from '$lib/app_components/e_app_theme.svelte';
// *** Setup Svelte properties
interface Props {
log_lvl?: number;
data: any;
hide?: null | boolean;
expand?: boolean;
}
// *** Setup Svelte properties
interface Props {
log_lvl?: number;
data: any;
hide?: null | boolean;
expand?: boolean;
}
let {
log_lvl = $bindable(0),
data = null,
hide = $bindable(false),
expand = $bindable(false)
}: Props = $props();
let {
log_lvl = $bindable(0),
data = null,
hide = $bindable(false),
expand = $bindable(false)
}: Props = $props();
let trigger_clear_access: null | boolean = $state(null);
let trigger_clear_access: null | boolean = $state(null);
</script>
<!-- App System Menu -->
@@ -87,7 +87,7 @@ max-w-max -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
class="
class="
ae_app__sys_menu
hidden-print
@@ -116,21 +116,21 @@ max-w-max -->
duration-500 hover:duration-200
ease-in-out
"
class:top-0={expand && 1 == 3}
class:opacity-100={expand}
class:w-full={expand}
class:hidden={hide}
class:border-transparent={!expand}
class:bg-transparent={!expand}
class:top-0={expand && 1 == 3}
class:opacity-100={expand}
class:w-full={expand}
class:hidden={hide}
class:border-transparent={!expand}
class:bg-transparent={!expand}
>
<!-- class:hidden={!expand} -->
<!-- class:preset-filled-warning-100-900={expand} -->
<div
class:opacity-50={!expand}
class:opacity-100={expand}
class:light:bg-blue-500={expand}
class:dark:bg-blue-500={expand}
class="
<!-- class:hidden={!expand} -->
<!-- class:preset-filled-warning-100-900={expand} -->
<div
class:opacity-50={!expand}
class:opacity-100={expand}
class:light:bg-blue-500={expand}
class:dark:bg-blue-500={expand}
class="
hidden-print
flex flex-col items-end justify-end
gap-1
@@ -151,193 +151,202 @@ max-w-max -->
duration-200 hover:duration-200
ease-in-out
"
title="
title="
ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ?? '-- not set --'}
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'}
Email: {$ae_loc?.user?.email ?? '-- not set --'}
Access Type: {$ae_loc?.access_type ?? '-- not set --'}
"
>
{#if $ae_loc?.person_id}
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
<User size="1em" class="mx-1 inline-block text-gray-500" />
<span class:hidden={!expand} class="group-hover:inline-block">
{$ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name}
</span>
</div>
{/if}
>
{#if $ae_loc?.person_id}
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
<User size="1em" class="mx-1 inline-block text-gray-500" />
<span class:hidden={!expand} class="group-hover:inline-block">
{$ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name}
</span>
</div>
{/if}
{#if $ae_loc?.user_id}
<!-- This is currently not set to show if not expanded. Saving space. -->
<div
class:hidden={!expand}
class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
>
<ShieldUser size="1em" class="mx-1 inline-block text-gray-500" />
<span class:hidden={!expand} class="group-hover:inline-block">
{$ae_loc?.user?.username ?? '-- not set --'}
</span>
</div>
{/if}
{#if $ae_loc?.user_id}
<!-- This is currently not set to show if not expanded. Saving space. -->
<div
class:hidden={!expand}
class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
>
<ShieldUser size="1em" class="mx-1 inline-block text-gray-500" />
<span class:hidden={!expand} class="group-hover:inline-block">
{$ae_loc?.user?.username ?? '-- not set --'}
</span>
</div>
{/if}
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="flex flex-row-reverse gap-1 group text-base"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<!-- <ShieldPlus class="inline-block" /> -->
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="flex flex-row-reverse gap-1 group text-base"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<!-- <ShieldPlus class="inline-block" /> -->
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block">Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block">Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block">Administrator</span
>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Trusted Access</span
>
{:else if $ae_loc.access_type == 'public'}
Public
<span class:hidden={!expand} class="hidden group-hover:inline-block">Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span class:hidden={!expand} class="hidden group-hover:inline-block">Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Super</span
>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Manager</span
>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Administrator</span
>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Trusted Access</span
>
{:else if $ae_loc.access_type == 'public'}
Public
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Access</span
>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span class:hidden={!expand} class="hidden group-hover:inline-block"
>Access</span
>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
<button
type="button"
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
<button
type="button"
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
} else {
// expand = true;
// $ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
} else {
// expand = true;
// $ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis size="2em" class="inline-block" />
<span class="hidden group-hover:inline-block">Passcode?</span>
</button>
{:else}
<button
type="button"
onclick={() => {
trigger_clear_access = true;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis size="2em" class="inline-block" />
<span class="hidden group-hover:inline-block">Passcode?</span>
</button>
{:else}
<button
type="button"
onclick={() => {
trigger_clear_access = true;
if (expand) {
$ae_loc.sys_menu.hide_access_type = false;
// $ae_loc.sys_menu.expand_access_type = false;
expand = false;
if (expand) {
$ae_loc.sys_menu.hide_access_type = false;
// $ae_loc.sys_menu.expand_access_type = false;
expand = false;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_sess.app_cfg.show_element__passcode_input = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_sess.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="
btn btn-sm text-xs
flex-row-reverse
variant-outline-surface hover:variant-ghost-warning
transition-all group
"
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" />
<span class="hidden group-hover:inline-block"> Clear? </span>
</button>
{/if}
{:else}
<button
type="button"
onclick={async () => {
expand = true;
$ae_sess.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" />
<span class="hidden group-hover:inline-block"> Clear? </span>
</button>
{/if}
{:else}
<button
type="button"
onclick={async () => {
expand = true;
$ae_sess.sys_menu.expand = true;
$ae_loc.sys_menu.hide_access_type = false;
$ae_loc.sys_menu.expand_access_type = true;
$ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
$ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
}}
class="
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
}}
class="
btn btn-sm text-xs
flex-row-reverse
variant-outline-surface hover:variant-ghost-success
transition-all group
"
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden group-hover:inline-block">Auth?</span>
</button>
{/if}
</div>
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden group-hover:inline-block">Auth?</span>
</button>
{/if}
</div>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = false;
// dispatch_edit_mode_changed();
}}
class="
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = false;
// dispatch_edit_mode_changed();
}}
class="
btn btn-base text-sm
preset-tonal-warning
preset-outlined-warning-800-200
@@ -346,20 +355,20 @@ max-w-max -->
min-w-22 md:min-w-30 w-full max-w-fit
gap-1
"
title="Click to turn off edit mode. Edit mode is currently on."
>
<span class="fas fa-toggle-on m-1 inline-block"></span>
<span class="text-xs">Edit</span>
<span class="hidden group-hover:inline-block group-hover:text-xs"> Off </span>
</button>
{:else if $ae_loc.authenticated_access}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = true;
// dispatch_edit_mode_changed();
}}
class="
title="Click to turn off edit mode. Edit mode is currently on."
>
<span class="fas fa-toggle-on m-1 inline-block"></span>
<span class="text-xs">Edit</span>
<span class="hidden group-hover:inline-block group-hover:text-xs"> Off </span>
</button>
{:else if $ae_loc.authenticated_access}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = true;
// dispatch_edit_mode_changed();
}}
class="
btn btn-base text-sm
preset-tonal-surface
preset-outlined-warning-400-600
@@ -368,23 +377,23 @@ max-w-max -->
min-w-22 md:min-w-30 w-full max-w-fit
gap-1
"
title="Click to torn on/enable edit mode. Edit mode is currently off/disabled."
>
<span class="fas fa-toggle-off m-1 inline-block"></span>
<span class="text-xs">Edit</span>
<span class="hidden group-hover:inline-block group-hover:text-xs"> On? </span>
</button>
{/if}
title="Click to torn on/enable edit mode. Edit mode is currently off/disabled."
>
<span class="fas fa-toggle-off m-1 inline-block"></span>
<span class="text-xs">Edit</span>
<span class="hidden group-hover:inline-block group-hover:text-xs"> On? </span>
</button>
{/if}
<!-- <div> -->
<!-- class:visible={expand} -->
<!-- class:invisible={!expand} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button
type="button"
class:w-full={expand}
class="
<!-- <div> -->
<!-- class:visible={expand} -->
<!-- class:invisible={!expand} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button
type="button"
class:w-full={expand}
class="
btn btn-base text-sm
preset-filled-tertiary-400-600
preset-outlined-tertiary-400-600
@@ -393,62 +402,62 @@ max-w-max -->
min-w-22 md:min-w-30 w-full max-w-fit
transition-all group
"
title="Show/Hide the system menu"
onclick={async () => {
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
title="Show/Hide the system menu"
onclick={async () => {
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
// $ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') {
$ae_sess.sys_menu.focus_passcode_input = true;
// $ae_sess.app_cfg.show_element__passcode_input = true;
} else {
// $ae_sess.app_cfg.show_element__passcode_input = false;
$ae_loc.sys_menu.expand_user = false; // Not in use yet
$ae_sess.show__sign_in_out__fields = false;
}
// $ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
expand = false;
$ae_sess.sys_menu.expand = false;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
// $ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.sys_menu.expand_btn = !expand_btn;
}}
>
<!-- <span class=""> -->
{#if expand}
<CircleX class="m-1 inline-block" />
{:else}
<Menu class="m-1 inline-block" />
{/if}
<span class="text-xs hidden group-hover:inline-block"> Menu </span>
<!-- </span> -->
</button>
<!-- </div> -->
</div>
if ($ae_loc?.access_type == 'anonymous') {
$ae_sess.sys_menu.focus_passcode_input = true;
// $ae_sess.app_cfg.show_element__passcode_input = true;
} else {
// $ae_sess.app_cfg.show_element__passcode_input = false;
$ae_loc.sys_menu.expand_user = false; // Not in use yet
$ae_sess.show__sign_in_out__fields = false;
}
// $ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
expand = false;
$ae_sess.sys_menu.expand = false;
// $ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
// $ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.sys_menu.expand_btn = !expand_btn;
}}
>
<!-- <span class=""> -->
{#if expand}
<CircleX class="m-1 inline-block" />
{:else}
<Menu class="m-1 inline-block" />
{/if}
<span class="text-xs hidden group-hover:inline-block"> Menu </span>
<!-- </span> -->
</button>
<!-- </div> -->
</div>
<!-- Show menu on right side of page -->
<!-- min-h-96 -->
<!-- absolute right-0 bottom-10 -->
<!-- opacity-50 -->
<!-- hover:opacity-100 -->
<!-- bg-white dark:bg-gray-800 -->
<div
class:preset-filled-warning-200-800={expand}
class:hidden={!expand}
class="
<!-- Show menu on right side of page -->
<!-- min-h-96 -->
<!-- absolute right-0 bottom-10 -->
<!-- opacity-50 -->
<!-- hover:opacity-100 -->
<!-- bg-white dark:bg-gray-800 -->
<div
class:preset-filled-warning-200-800={expand}
class:hidden={!expand}
class="
ae_app__sys_menu
hidden-print
@@ -472,11 +481,11 @@ max-w-max -->
z-20 hover:z-30
"
>
<button
type="button"
class:w-full={expand}
class="
>
<button
type="button"
class:w-full={expand}
class="
btn btn-sm
preset-filled-tertiary-400-600
preset-outlined-tertiary-400-600
@@ -484,70 +493,70 @@ max-w-max -->
px-6 py-1
transition-all group
"
title="Show/Hide the system menu"
onclick={() => {
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.sys_menu.expand_access_type = true;
title="Show/Hide the system menu"
onclick={() => {
if (!expand) {
expand = true;
$ae_sess.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
// $ae_loc.sys_menu.expand_access_type = true;
// $ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
} else {
$ae_sess.sys_menu.expand = false;
$ae_loc.sys_menu.expand_user = false; // Not in use yet
$ae_sess.show__sign_in_out__fields = false;
// $ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.sys_menu.expand_btn = !expand_btn;
// $ae_loc.sys_menu.expand = !expand;
}}
>
{#if expand}
<CircleX class="m-1 inline-block" />
<span class="hidden group-hover:inline-block"> Hide Menu </span>
{:else}
<Menu class="m-1 inline-block" />
<span class="hidden group-hover:inline-block"> Menu </span>
{/if}
</button>
// $ae_sess.app_cfg.show_element__passcode_input = true;
$ae_sess.sys_menu.focus_passcode_input = true;
} else {
$ae_sess.sys_menu.expand = false;
$ae_loc.sys_menu.expand_user = false; // Not in use yet
$ae_sess.show__sign_in_out__fields = false;
// $ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.sys_menu.expand_btn = !expand_btn;
// $ae_loc.sys_menu.expand = !expand;
}}
>
{#if expand}
<CircleX class="m-1 inline-block" />
<span class="hidden group-hover:inline-block"> Hide Menu </span>
{:else}
<Menu class="m-1 inline-block" />
<span class="hidden group-hover:inline-block"> Menu </span>
{/if}
</button>
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span class:hidden={!$ae_loc.edit_mode}>
<Element_app_cfg
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
/>
</span>
<span class:hidden={!$ae_loc.edit_mode}>
<Element_theme
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span class:hidden={!$ae_loc.edit_mode}>
<Element_app_cfg
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
/>
</span>
<span class:hidden={!$ae_loc.edit_mode}>
<Element_theme
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<!-- hide={$ae_loc.sys_menu.hide_user} -->
<!-- expand={$ae_loc.sys_menu.expand_user} -->
<Element_sign_in_out
{data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if}
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<!-- hide={$ae_loc.sys_menu.hide_user} -->
<!-- expand={$ae_loc.sys_menu.expand_user} -->
<Element_sign_in_out
{data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if}
{#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
<Element_access_type
bind:hide={$ae_loc.sys_menu.hide_access_type}
bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
bind:expand={$ae_loc.sys_menu.expand_access_type}
bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
bind:trigger_clear_access
/>
{/if}
</div>
{#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
<Element_access_type
bind:hide={$ae_loc.sys_menu.hide_access_type}
bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
bind:expand={$ae_loc.sys_menu.expand_access_type}
bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
bind:trigger_clear_access
/>
{/if}
</div>
</section>