@qualityunit/liveagent-help 0.0.1 → 0.0.2

package/src/lib/components/containers/Tooltip.svelte

@@ -1,143 +0,0 @@
-<script lang="ts">
-    import type {ShortcutKey} from "../../utils/types.ts";
-    import ShortcutKeys from "../common/ShortcutKeys.svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let className: string;
-    export let text: string;
-    export let shortcut: ShortcutKey[]
-    export let shortcutAlt: ShortcutKey[] = []
-</script>
-
-<div class="tooltip {className}" style='
-    --background-color-blue-local: {$currentTheme.events.blue.surfaceSecondary};
-'>
-    <div class="heading">
-        <span class="text">{text}</span>
-    </div>
-    <div class="shortcuts">
-        <div class="first-row">
-            <ShortcutKeys keys={shortcut} isTooltip={true} />
-            <span class="or {shortcutAlt.length > 0 ? '' : 'hide'}">or</span>
-        </div>
-        {#if shortcutAlt.length > 0}
-            <ShortcutKeys keys={shortcutAlt} isTooltip={true} />
-        {/if}
-    </div>
-</div>
-
-<style>
-    .tooltip {
-        position: absolute;
-        display: flex;
-        padding-left: 10px;
-        flex-direction: column;
-        align-items: center;
-        gap: 4px;
-        background-color: var(--background-color-blue-primary);
-        border-radius: 6px;
-        box-shadow: 0 8px 24px 0 rgba(30, 34, 39, 0.10), 0 1px 3px 0 rgba(30, 34, 39, 0.12);
-    }
-
-    .heading {
-        padding: 2px 10px 2px 0;
-        border-bottom: 1px solid var(--border-color-secondary);
-    }
-
-    .text {
-        color: var(--text-color-infoPanel);
-        text-align: center;
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .shortcuts {
-        display: flex;
-        flex-flow: wrap column;
-        align-items: flex-start;
-        justify-content: center;
-        gap: 10px;
-        padding: 8px 10px 8px 0;
-    }
-
-    .first-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-    }
-
-    .or {
-        color: var(--text-color-primary);
-        font-size: 12px;
-        font-weight: 700;
-    }
-
-    .hide {
-        display: none;
-    }
-
-    .nextTab {
-        top: 55px;
-        left: 110px;
-    }
-
-    .closeTab {
-        top: 55px;
-        left: 250px;
-    }
-
-    .answer {
-        display: none;
-    }
-
-    .send {
-        top: 530px;
-        left: 40px;
-    }
-
-    .canned {
-        top: 450px;
-        left: 200px;
-    }
-
-    .predefined {
-        display: none;
-    }
-
-    @media (min-width: 768px) {
-        .nextTab {
-            top: 55px;
-            left: 175px;
-        }
-
-        .closeTab {
-            top: 55px;
-            left: 320px;
-        }
-
-        .answer {
-            display: flex;
-            top: 55px;
-            left: 850px;
-        }
-
-        .send {
-            top: 530px;
-            left: 80px;
-        }
-
-        .canned {
-            top: 450px;
-            left: 200px;
-        }
-
-        .predefined {
-            display: flex;
-            top: 530px;
-            left: 350px;
-        }
-    }
-</style>

package/src/lib/components/containers/Widget.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-    import Button from "../common/Button.svelte";
-    import Paragraph from "../common/Paragraph.svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let heading: string;
-    export let text: string;
-    export let iconSrc: string;
-    export let cardPadding: string;
-    export let backgroundColor: string | undefined = '';
-    export let textPadding: string = '';
-    export let buttonAction: () => void;
-    export let buttonText: string;
-    export let buttonReversed: boolean = false;
-    export let buttonDisabled: boolean = false;
-
-</script>
-
-<div class="widget" style='
-    --iconSrc: url({iconSrc});
-    --cardPadding: {cardPadding};
-    --textPadding: {textPadding};
-    --backgroundColor: var({backgroundColor ? backgroundColor : "--background-color-grey-primary"});
-'>
-    <div class="header">
-        <img src={iconSrc} alt="icon">
-        <h5 class="heading">{heading}</h5>
-    </div>
-    <div class="content">
-        <Paragraph {text} />
-        <slot />
-        <Button onClick={buttonAction}
-                text={buttonText}
-                disabled={buttonDisabled}
-                reversedColors={buttonReversed}
-        />
-    </div>
-</div>
-
-<style>
-    .widget {
-        padding: var(--cardPadding);
-        margin-bottom: 10px;
-        border-radius: 6px;
-        background-color: var(--backgroundColor);
-    }
-
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 6px;
-    }
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        justify-content: space-between;
-        gap: 16px;
-        padding-left: var(--textPadding);
-    }
-
-    h5 {
-        margin: 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .content {
-            flex-direction: row;
-            align-items: flex-start;
-        }
-    }
-</style>

package/src/lib/components/nav/Menu.svelte

@@ -1,283 +0,0 @@
-<script lang="ts">
-    import { getContext } from 'svelte';
-    import { link, location } from 'svelte-spa-router';
-    import { slide } from 'svelte/transition';
-    import { progress, goToNextStep } from '../../utils/progressStore.ts';
-    import ProgressTag from "../common/ProgressTag.svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-    import {changeMenuOpenStatus} from "../../utils/menuStore.ts";
-
-    interface Route {
-        path: string;
-        name: string;
-        children?: ChildRoute[];
-    }
-
-    interface ChildRoute {
-        path: string;
-        name: string;
-    }
-
-    interface Step {
-        path: string;
-        state: string;
-    }
-
-    const namedRoutes: Route[] = getContext<Route[]>('namedRoutes');
-    let showSteps: boolean = false;
-    let currentPath: string;
-
-    function handleGettingStartedClick(): void {
-        goToNextStep();
-        showSteps = !showSteps;
-    }
-
-    function isSelected(path: string, children: ChildRoute[] | undefined, currentPath: string): string {
-        if (currentPath === path) return "selected";
-        return children?.some(child => currentPath === child.path) ? "selected" : "";
-    }
-
-    function getStepState(path: string): string | undefined {
-        let state: string | undefined;
-        $progress.forEach((step: Step) => {
-            if (step.path === path) {
-                state = step.state;
-            }
-        });
-        return state;
-    }
-
-    function getStepClass(path: string): string {
-        if ($location === path) return 'selected';
-        switch (getStepState(path)) {
-            case 'c':
-                return 'completed';
-            case 's':
-                return 'skipped';
-            default:
-                return 'unfinished';
-        }
-    }
-
-    $: currentPath = $location;
-</script>
-
-<h3 class="heading" on:click={()=>changeMenuOpenStatus(false)}>Help center</h3>
-<ul style='
-    --text-color-highlight: {$currentTheme.textsIcons.blue};
-    --menu-background-hover: {$currentTheme.surface.hover}
-'>
-    {#each namedRoutes as {path, name, children}}
-        {#if children && children.length}
-            <li on:click={() => handleGettingStartedClick()}>
-                <div class="menu-item-first {showSteps ? 'opened' : ''} {isSelected(path, children, currentPath)}">
-                    <a class="menu-item-primary {name.toLowerCase().replace(' ', '-')}" href={path} use:link>{name} </a>
-                    <ProgressTag />
-                </div>
-                {#if showSteps}
-                    <div in:slide={{ duration: 300 }} out:slide={{ duration: 300 }} class="steps">
-                        <ul on:click|stopPropagation={()=>{}}>
-                            {#each children as {path: childPath, name: childName}}
-                                {#key $progress && $location}
-                                    <li><a class="menu-item-secondary {getStepClass(childPath)}"
-                                           href={childPath}
-                                           use:link>{childName}
-                                    </a></li>
-                                {/key}
-                            {/each}
-                        </ul>
-                    </div>
-                {/if}
-            </li>
-        {:else if path !== '/summary'}
-            <li>
-                <a class="menu-item-primary {path.substring(1).replace('/', '-')} {currentPath === path ? 'selected' : ''}"
-                   href={path} use:link>{name}
-                </a>
-            </li>
-        {/if}
-    {/each}
-</ul>
-
-<style>
-    .heading {
-        position: relative;
-        color: var(--text-color-secondary);
-        padding: 10px 12px 10px 40px;
-        margin: 0;
-        font-family: Roboto;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 20px;
-        cursor: pointer;
-    }
-
-    .heading::before {
-        position: absolute;
-        left: 10px;
-        top: 20%;
-        height: 20px;
-        width: 20px;
-        content: url('../../../../public/assets/icons/arrow-right.svg');
-        transform: rotate(180deg);
-    }
-
-    ul {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    .menu-item-first {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-    }
-
-    .menu-item-first:after {
-        position: absolute;
-        top: 30%;
-        right: 10px;
-        transform: rotate(90deg);
-        transition: transform 0.3s ease-in-out;
-        content: url('../../../../public/assets/icons/arrow-right.svg');
-    }
-
-    .menu-item-first.opened:after {
-        transform: rotate(-90deg);
-    }
-
-    .menu-item-primary {
-        padding: 10px 12px 10px 56px;
-        color: var(--text-color-primary);
-    }
-
-    .menu-item-primary::before {
-        content: '';
-        display: inline-block;
-        margin-right: 8px;
-        height: 16px;
-        width: 16px;
-        background-size: contain;
-        background-repeat: no-repeat;
-    }
-
-    .menu-item-secondary {
-        display: flex;
-        align-items: center;
-        padding: 10px 8px 10px 0;
-        color: var(--text-color-secondary);
-    }
-
-    .menu-item-secondary::after {
-        content: "";
-        display: inline-block;
-        margin-left: 5px;
-        height: 16px;
-        width: 16px;
-        background-size: contain;
-        background-repeat: no-repeat;
-    }
-
-    .menu-item-secondary.selected {
-        color: var(--text-color-highlight);
-    }
-
-    .menu-item-secondary.selected::after {
-        content: url("../../../../public/assets/icons/progress-submenu.svg");
-    }
-
-    .menu-item-secondary.completed::after {
-        content: url("../../../../public/assets/icons/resolve.svg");
-    }
-
-    .menu-item-secondary.skipped::after {
-        content: url("../../../../public/assets/icons/unfinished.svg");
-    }
-
-    a {
-        display: flex;
-        align-items: center;
-        padding: 0 8px;
-        text-decoration: none;
-        transition: background-color 0.2s ease;
-    }
-
-    .menu-item-first:hover,
-    .menu-item-primary.selected,
-    .menu-item-first.selected,
-    :not(.menu-item-first) > a:hover {
-        background-color: var(--menu-background-hover);
-    }
-
-    .steps {
-        border-bottom: 1px solid var(--border-color-primary);
-        margin-left: 80px;
-        padding-bottom: 10px;
-        margin-bottom: 10px;
-    }
-
-    li > ul {
-        margin-top: 8px;
-    }
-
-    .getting-started::before {
-        content: url('../../../../public/assets/icons/goal.svg');
-    }
-
-    .shortcuts::before {
-        content: url('../../../../public/assets/icons/shortcuts.svg');
-    }
-
-    .improve-la-skills::before {
-        content: url('../../../../public/assets/icons/learn.svg');
-    }
-
-    .contact-us::before {
-        content: url('../../../../public/assets/icons/ticket.svg');
-    }
-
-    @media (min-width: 768px) {
-        .heading {
-            cursor: default;
-            padding: 0;
-            margin-bottom: 16px;
-            font-size: 13px;
-        }
-
-        .heading::before {
-            display: none;
-        }
-
-        .menu-item-first::after {
-            display: none;
-        }
-
-        .menu-item-primary {
-            padding: 0 8px;
-        }
-
-        .menu-item-secondary {
-            padding: 0 0 0 32px;
-        }
-
-        .menu-item-first:hover,
-        .menu-item-primary.selected,
-        .menu-item-first.selected,
-        :not(.menu-item-first) > a:hover {
-            border-radius: 6px;
-        }
-
-        a {
-            height: 36px;
-        }
-
-        .steps {
-            margin: 0;
-            padding: 0;
-            border: none;
-        }
-    }
-</style>
-