@qualityunit/liveagent-help 0.0.1 → 0.0.2

package/src/lib/components/common/Heading.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string;
-    export let additionalStyles: string = '';
-</script>
-
-<h2 class="heading" style="{additionalStyles}">
-    {text}
-</h2>
-
-<style>
-    .heading {
-        margin: 0 0 6px;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 16px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-</style>

package/src/lib/components/common/Link.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string;
-    export let additinalStyles: string = '';
-    export let punctuation: string = '';
-    export let href: string = '#';
-</script>
-
-<a href={href} class="link" style="{additinalStyles};
-    --color: {$currentTheme.textsIcons.blue};
-">
-    <span class="highlight">{text}</span>
-    <span class="punctuation">{punctuation}</span>
-</a>
-
-<style>
-    .highlight {
-        display: inline;
-        color: var(--color);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-        text-decoration-line: underline;
-    }
-</style>

package/src/lib/components/common/Paragraph.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string;
-    export let additionalStyles: string = '';
-
-</script>
-
-<p class="text" style="{additionalStyles};">
-    {text}
-    <slot/>
-</p>
-
-<style>
-    .text {
-        align-self: flex-start;
-        margin: 6px 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .text {
-            font-size: 13px;
-        }
-    }
-</style>

package/src/lib/components/common/ProgressTag.svelte

@@ -1,33 +0,0 @@
-<script>
-    import {progress} from "../../utils/progressStore.ts";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    $: completedSteps = $progress ? $progress.filter(step => step.state === 'c').length : 0;
-</script>
-
-<div class="tag">
-    <img src='../../../../public/assets/icons/resolve.svg' alt="resolved" />
-    <span class="numbers">{completedSteps}/9</span>
-</div>
-
-<style>
-    .tag {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 2px 6px;
-        border: 1px solid var(--border-color-green);
-        border-radius: 4px;
-        background-color: var(--background-color-green-primary);
-    }
-
-    .numbers {
-        color: var(--color-green-primary);
-        text-align: center;
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-</style>

package/src/lib/components/common/ShortcutKey.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string = '';
-    export let iconPath: string = '';
-    export let isTooltip: boolean = false;
-</script>
-
-<div class="key" style='
-    --background-color-grey-local: {$currentTheme.systemTags.greyEmpty};
-'>
-    {#if iconPath}
-        <img class="icon" src={iconPath} alt="Icon">
-    {/if}
-    {#if text}
-        <span class="{isTooltip ? 'tooltip' : ''}">{text}</span>
-    {/if}
-</div>
-
-<style>
-    .key {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 24px;
-        padding: 2px 6px;
-        gap: 4px;
-        color: var(--text-color-primary);
-        background-color: var(--background-color-grey-local);
-        border-bottom: 1px solid var(--text-color-primary);
-        border-radius: 6px;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    .tooltip {
-        color: var(--text-color-blue-primary);
-    }
-</style>

package/src/lib/components/common/ShortcutKeys.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-    import ShortcutKey from './ShortcutKey.svelte';
-    import type { ShortcutKey as Key } from '../../utils/types.ts';
-
-    export let keys: Key[];
-    export let isTooltip: boolean = false;
-</script>
-
-<div class="keys">
-    {#each keys as key, index}
-        <ShortcutKey text={key.text} iconPath={key.iconPath} {isTooltip} />
-        {#if index < keys.length - 1}
-            <span class="plus {isTooltip ? 'tooltip' : ''}">+</span>
-        {/if}
-    {/each}
-</div>
-
-<style>
-    .keys {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-    }
-
-    .plus {
-        color: var(--text-color-primary);
-        font-family: 'Roboto';
-        font-size: 13px;
-    }
-
-    .tooltip {
-        color: var(--text-color-blue-primary);
-    }
-</style>

package/src/lib/components/common/ThemeSwitcher.svelte

@@ -1,24 +0,0 @@
-<script>
-    import { darkThemeEnabled } from '../../utils/themeStore.ts'
-
-    function toggleTheme() {
-        darkThemeEnabled.update(value => !value);
-    }
-</script>
-
-<button on:click={toggleTheme}>
-    {$darkThemeEnabled ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
-</button>
-
-<style>
-    button {
-        position: absolute;
-        bottom: 60px;
-        left: 16px;
-        border: none;
-        border-radius: 4px;
-        padding: 8px 16px;
-        font-size: 16px;
-        cursor: pointer;
-    }
-</style>

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

@@ -1,80 +0,0 @@
-<script lang="ts">
-    import {getContext} from "svelte";
-    import { currentTheme } from '../../utils/themeStore.ts';
-
-    export let headingText: string;
-    export let paragraphText: string;
-    export let link: string;
-
-    const iconBasePath: string = getContext('iconBasePath');
-</script>
-
-<div class="widget">
-    <h5>{headingText}</h5>
-    <p>{paragraphText}</p>
-    <div class="link">
-        <a class="link-text" href={link}>Learn more</a>
-        <img src="{iconBasePath}open_in_new.svg" alt="redirect icon" />
-    </div>
-</div>
-
-<style>
-    .widget {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        height: 264px;
-        min-width: 230px;
-        max-width: 260px;
-        padding: 40px 0 40px 24px;
-        border: 1px solid var(--border-color-primary);
-        border-radius: 6px;
-        overflow: hidden;
-        box-sizing: border-box;
-    }
-
-    .widget::after {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        content: url("public/assets/images/card_background.svg");
-        opacity: 0.5;
-    }
-
-    h5 {
-        color: var(--text-color-primary);
-        margin: 0;
-        font-family: Roboto;
-        font-size: 16px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    p {
-        margin: 8px 0 12px 0;
-        padding: 8px 20px 0 0;
-        border-top: 1px solid var(--border-color-primary);
-        color: var(--text-color-primary);
-        text-overflow: ellipsis;
-        font-family: Roboto;
-        font-size: 13px;
-        line-height: 20px;
-    }
-
-    .link {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 6px;
-    }
-
-    .link-text {
-        position: relative;
-        color: var(--button-color-blue);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-        text-decoration-line: underline;
-    }
-</style>

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

@@ -1,64 +0,0 @@
-<script lang="ts">
-    import {getContext} from "svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string;
-    export let iconPath: string;
-    export let alt: string;
-    export let URL: string
-    export let highlight: boolean = false;
-
-    const iconBasePath: string = getContext('iconBasePath');
-
-    function clickHandler () {
-        window.open(URL,);
-    }
-
-</script>
-
-<button class="ContactButton {highlight ? 'highlight' : ''}" on:click={clickHandler} style='
-    --text-color-highlight: {$currentTheme.textsIcons.white};
-'>
-    <img src={iconBasePath + iconPath}.svg {alt} />
-    <span>{text}</span>
-</button>
-
-<style>
-    .ContactButton {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        height: 36px;
-        min-width: 190px;
-        max-width: 282px;
-        width: 100%;
-        padding: 6px 20px;
-        border: 1px solid var(--border-color-primary);
-        border-radius: 6px;
-        cursor: pointer;
-        background-color: var(--button-color-grey);
-    }
-
-    img {
-        height: 16px;
-        width: 16px;
-    }
-
-    span {
-        color: var(--text-color-primary);
-        text-align: center;
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .highlight {
-        background-color: var(--button-color-blue);
-    }
-
-    .highlight > span {
-        color: var(--text-color-highlight);
-    }
-</style>

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

@@ -1,59 +0,0 @@
-<script lang="ts">
-    import {getContext} from "svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string;
-    export let contact: string;
-    export let icon: string;
-
-    const iconBasePath = getContext('iconBasePath')
-</script>
-
-<div class="contactRow" style='
-    --background-color-inner: {$currentTheme.surface.hover};
-
-'>
-    <h5>{text}:</h5>
-    <div class="inner">
-        <img src={iconBasePath + icon}.svg alt={icon} />
-        <span>{contact}</span>
-    </div>
-</div>
-
-<style>
-    .contactRow {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 69px;
-        background-color: var(--background-color-grey-primary);
-    }
-
-    h5 {
-        margin: 0;
-        padding: 5px 12px;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-    }
-
-    .inner {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 5px 12px;
-        /*TODO Laci?? Preco je hover premenna pre obyc background?*/
-        background-color: var(--background-color-inner);
-        border-radius: 69px;
-    }
-
-    span {
-        margin: 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 400;
-    }
-</style>

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

@@ -1,136 +0,0 @@
-<script lang="ts">
-    import {getContext} from "svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let image: string;
-    export let bottomText: string;
-    export let heading: string = '';
-    export let text: string = '';
-    export let icon: string = '';
-    export let socials: boolean = true;
-
-    const iconBasePath: string = getContext('iconBasePath');
-    const imageBasePath: string = getContext('imageBasePath');
-
-</script>
-
-<div class="LinkCard">
-    <div class="ContactButton">
-        {#if socials}
-            <img class="bigImage" src="{imageBasePath + image}.png" alt={image}>
-        {:else}
-            <div class="texts">
-                <h5 class="heading">{heading}</h5>
-                <p class="text">{text}</p>
-            </div>
-            <img class="smallImage" src="{imageBasePath + image}.png" alt={image}>
-        {/if}
-    </div>
-    <div class="bottomPart">
-        <div class="leftSide">
-            {#if socials}
-                <img class="socialIcon" src={iconBasePath + icon}.svg alt={icon}>
-            {/if}
-            <p class=bottom-text>{bottomText}</p>
-        </div>
-        <img src="{iconBasePath}arrow-right.svg" alt="arrow">
-    </div>
-</div>
-
-<style>
-    .LinkCard {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: space-between;
-        width: 250px;
-        height: 166px;
-        border-radius: 6px;
-        border: 1px solid var(--border-color-primary);
-    }
-
-    .ContactButton {
-        position: relative;
-        display: flex;
-        align-items: flex-end;
-        justify-content: flex-start;
-        width: 100%;
-        height: 100%;
-        padding: 16px;
-        background-color: var(--background-color-grey-primary);
-        box-sizing: border-box;
-    }
-
-    .texts {
-        display: flex;
-        flex-direction: column;
-        max-width: 40%;
-    }
-
-    .bottomPart {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        padding: 8px 10px;
-        border-top: 1px solid var(--border-color-primary);
-        border-bottom-left-radius: 6px;
-        border-bottom-right-radius: 6px;
-        background-color: var(--background-color-grey-secondary);
-        box-sizing: border-box;
-    }
-
-    .heading {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-        margin: 0;
-    }
-
-    p {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        line-height: 20px;
-        margin: 0;
-    }
-
-    .text {
-        font-size: 12px;
-        font-weight: 400;
-    }
-
-    .bottom-text {
-        font-size: 14px;
-        font-weight: 700;
-    }
-
-    .smallImage {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-    }
-
-    .bigImage {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .leftSide {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-    }
-
-    .socialIcon {
-        height: 20px;
-        width: 20px;
-    }
-
-</style>
-

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let city: string;
-    export let image: string;
-    export let rows: string[]
-    const imageBasePath='public/assets/images/';
-</script>
-
-<div class="office">
-    <img src={imageBasePath+image}.png alt={image}>
-    <h5>{city}</h5>
-    {#each rows as row}
-        <span>{row}</span>
-    {/each}
-</div>
-
-<style>
-    .office {
-        display: flex;
-        flex-direction: column;
-    }
-
-    img {
-        filter: grayscale(100%);
-    }
-
-    h5 {
-        margin: 10px 0 6px 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    span {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 20px;
-    }
-</style>

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

@@ -1,36 +0,0 @@
-<script lang="ts">
-import Heading from "../common/Heading.svelte";
-import Paragraph from "../common/Paragraph.svelte";
-import {currentTheme} from "../../utils/themeStore.ts";
-
-export let headingText: string;
-export let paragraphText: string;
-</script>
-
-<article>
-    <div class="header">
-        <Heading text={headingText} />
-        <Paragraph text={paragraphText} />
-    </div>
-    <slot />
-</article>
-
-<style>
-    article {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        width: 100%;
-        height: 100%;
-        container-type: inline-size;
-    }
-
-    .header {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        padding: 20px;
-        border-bottom: 1px solid var(--border-color-primary);
-    }
-</style>

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

@@ -1,43 +0,0 @@
-<script lang="ts">
-    import Paragraph from "../common/Paragraph.svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let heading: string;
-    export let text: string;
-</script>
-
-<div class="point">
-    <h5>{heading}</h5>
-    <Paragraph {text} />
-</div>
-
-<style>
-    .point {
-        padding-left: 34px;
-    }
-
-    h5 {
-        position: relative;
-        margin: 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    h5:before {
-        content: url("../../../../public/assets/icons/checkmark.svg");
-        position: absolute;
-        top: 0;
-        left: -25px;
-        width: 16px;
-        height: 16px;
-    }
-
-    @media (min-width: 768px) {
-        h5 {
-            font-size: 13px;
-        }
-    }
-</style>