@dosgato/dialog 0.0.5 → 0.0.8

package/iconpicker/FieldIconPicker.svelte

@@ -0,0 +1,256 @@
+<script>import FieldStandard from '../FieldStandard.svelte';
+import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-components';
+import { FontAwesomeIcons, IconCategories } from './iconpicker';
+import Icon from '@iconify/svelte';
+import { randomid, keyby } from 'txstate-utils';
+export let id = undefined;
+export let path;
+export let label = '';
+export let required = false;
+export let defaultValue = { icon: 'fa-graduation-cap', prefix: 'fas' };
+export let conditional = undefined;
+const labelid = randomid();
+const descid = randomid();
+let modalOpen = false;
+let selected = defaultValue;
+const iconToPrefix = {};
+const categoriesToIcons = keyby(IconCategories, 'key');
+for (const icon of FontAwesomeIcons) {
+    iconToPrefix[icon.class] = icon.free.indexOf('brands') > -1 ? 'fab' : 'fas';
+}
+const iconElements = [];
+let visibleIcons = FontAwesomeIcons;
+let searchVal = '';
+let category = 'all';
+$: iconCountMessage = visibleIcons.length === FontAwesomeIcons.length ? 'Showing all icons' : `Showing ${visibleIcons.length} icons`;
+function onSelectIcon(iconClass) {
+    selected = { icon: iconClass, prefix: iconToPrefix[iconClass] };
+}
+function onSaveIconSelection(setVal) {
+    return function () {
+        setVal(selected);
+        category = 'all';
+        searchVal = '';
+        visibleIcons = FontAwesomeIcons;
+        modalOpen = false;
+    };
+}
+function onCancel(val) {
+    return function () {
+        selected = val;
+        category = 'all';
+        searchVal = '';
+        visibleIcons = FontAwesomeIcons;
+        modalOpen = false;
+    };
+}
+function onSearch() {
+    visibleIcons = FontAwesomeIcons.filter(i => {
+        if (i.class.includes(searchVal))
+            return true;
+        for (const term of i.search.terms) {
+            if (term.includes(searchVal))
+                return true;
+        }
+        return false;
+    });
+    if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
+        onSelectIcon(visibleIcons[0].class);
+    }
+}
+function onSelectCategory() {
+    if (category === 'all') {
+        visibleIcons = FontAwesomeIcons;
+    }
+    else {
+        visibleIcons = FontAwesomeIcons.filter(i => {
+            return categoriesToIcons[category].icons.includes(i.class);
+        });
+    }
+    if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
+        onSelectIcon(visibleIcons[0].class);
+    }
+}
+function onKeyDown(e) {
+    const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
+    let newIndex;
+    if (modifierKey(e))
+        return;
+    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentSelectionIndex === visibleIcons.length - 1) {
+            newIndex = 0;
+        }
+        else {
+            newIndex = currentSelectionIndex + 1;
+        }
+        onSelectIcon(visibleIcons[newIndex].class);
+        iconElements[newIndex].focus();
+    }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (currentSelectionIndex === 0) {
+            newIndex = visibleIcons.length - 1;
+        }
+        else {
+            newIndex = currentSelectionIndex - 1;
+        }
+        onSelectIcon(visibleIcons[newIndex].class);
+        iconElements[newIndex].focus();
+    }
+}
+</script>
+
+<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+  <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon.slice(3)}`}/>
+  <button id="btnSelectIcon" on:click={() => { modalOpen = true }}>Select New Icon</button>
+  {#if modalOpen}
+  <Modal>
+    <section>
+      <header id={labelid}>
+        Select Icon
+      </header>
+      <div id={descid} class="content">
+        <div class="icon-modal-content">
+          <div class="filters">
+            <div class="search-wrapper">
+              <input bind:value={searchVal} id="search_for" placeholder="Search Icons" on:keyup={onSearch}/>
+              <label for="search_for" class="fa fa-search" rel="tooltip" title="search"></label>
+            </div>
+            <select bind:value={category} class="icon-category" aria-label="Select Category" on:change={onSelectCategory}>
+              <option value="all">All</option>
+              {#each IconCategories as category (category.key)}
+                <option value={category.key}>{category.label}</option>
+              {/each}
+            </select>
+          </div>
+          <fieldset tabindex="0">
+            <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
+            <div class="icon-picker-items" role="radiogroup" on:keydown={onKeyDown}>
+              {#each visibleIcons as icon, idx (icon.class)}
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}>
+                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
+                  <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
+                </div>
+              {:else}
+                <div id="no-icons">No Icons Found</div>
+              {/each}
+            </div>
+            <ScreenReaderOnly arialive="polite">{iconCountMessage}</ScreenReaderOnly>
+          </fieldset>
+        </div>
+      </div>
+      <footer class="actions">
+        <button aria-describedby="{labelid} {descid}" on:click={onCancel(value)}>Cancel</button>
+        <button aria-describedby="{labelid} {descid}" on:click={onSaveIconSelection(setVal)}>Save Changes</button>
+      </footer>
+    </section>
+  </Modal>
+{/if}
+</FieldStandard>
+
+
+<style>
+  section {
+    position: relative;
+    background-color: #f4f4f4;
+    border-radius: 0.5em;
+    padding: 1em;
+    overflow: hidden;
+    width: 75vw;
+    min-width: 250px;
+    max-width: 650px;
+  }
+
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .icon-modal-content {
+    display:flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .icon-modal-content .filters {
+    display: flex;
+    justify-content: center;
+  }
+
+  .icon-modal-content .filters select {
+    width: 40%;
+    margin: 10px 0 5px 0;
+    height: 30px;
+    border-radius: 10px;
+    background-color: white;
+    border: 1px solid #999;
+    font-family: 'Nunito Sans', sans-serif !important;
+  }
+
+  .icon-modal-content fieldset {
+    max-height: 80%;
+    overflow-y: scroll;
+  }
+
+  /* Styles for search field */
+
+  .search-wrapper{
+      position: relative;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      margin-right: 15px;
+      align-self: center;
+      width: 50%;
+  }
+
+  #search_for{
+      width: 90%;
+      border-radius: 10px;
+      border: 1px solid #999;
+      height: 30px;
+      padding: 0px 0px 0px 30px;
+      font-family: 'Nunito Sans', sans-serif !important;
+  }
+
+  #search_for + label{
+      position: absolute;
+      left: 7px;
+      top: 7px;
+      color: #999;
+  }
+
+  /* Styles for the icon picker grid */
+
+  .icon-picker-items{
+    margin-top: 5px;
+    padding: 5px;
+  }
+
+.icon-picker-item {
+    float: left;
+    margin: 0px 11px 12px 11px;
+    text-align: center;
+    cursor: pointer;
+    color: inherit;
+    width: 10%;
+    position: relative;
+    font-size: 28px;
+}
+
+.icon-picker-item[aria-checked=true] {
+  outline: 4px solid #93BBC4;
+  background-color: #eee;
+}
+
+  /* Message when no icons are returned from search */
+  #no-icons{
+      margin-top: 10px;
+      font-size: 1.5rem;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 250px;
+      color: #999;
+  }
+</style>

package/iconpicker/FieldIconPicker.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        required?: boolean;
+        defaultValue?: {
+            icon: string;
+            prefix: string;
+        };
+        conditional?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldIconPickerProps = typeof __propDef.props;
+export declare type FieldIconPickerEvents = typeof __propDef.events;
+export declare type FieldIconPickerSlots = typeof __propDef.slots;
+export default class FieldIconPicker extends SvelteComponentTyped<FieldIconPickerProps, FieldIconPickerEvents, FieldIconPickerSlots> {
+}
+export {};

package/iconpicker/iconpicker.d.ts

@@ -0,0 +1,13 @@
+export declare const FontAwesomeIcons: {
+    class: string;
+    search: {
+        terms: string[];
+    };
+    label: string;
+    free: string[];
+}[];
+export declare const IconCategories: {
+    key: string;
+    label: string;
+    icons: string[];
+}[];