npm - revotech-ui-kit - Versions diffs - 0.0.0 → 0.0.1 - Mend

revotech-ui-kit 0.0.0 → 0.0.1

Files changed (375) hide show

package/index.html DELETED Viewed

@@ -1,362 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-    />
-    <meta name="Description" content="Put your description here." />
-    <base href="/" />
-    <link href="./src/globals.css" rel="stylesheet" />
-    <script src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        background-color: white;
-      }
-    </style>
-    <title>wc-ui-app</title>
-  </head>
-  <body>
-    <div class="container mx-auto my-10">
-      <h1 class="text-4xl text-center">Web Components</h1>
-      <h2 class="text-2xl text-center">Button</h2>
-    </div>
-    <div class="flex flex-wrap justify-between space-x-4 gap-5 mx-3">
-      <rtg-button>Primary</rtg-button>
-      <rtg-button variant="secondary">Secodary</rtg-button>
-      <rtg-button variant="destructive">Destructive</rtg-button>
-      <rtg-button variant="outline">Outline</rtg-button>
-      <rtg-button variant="ghost">Ghost</rtg-button>
-      <rtg-button variant="link">Link</rtg-button>
-      <rtg-button variant="outline" size="icon"
-        ><iconify-icon icon="mdi:home"></iconify-icon
-      ></rtg-button>
-      <rtg-button
-        ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon> Home
-        Page</rtg-button
-      >
-      <rtg-button disabled
-        ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
-        Home Page</rtg-button
-      >
-    </div>
-    <div class="container mx-auto my-10">
-      <h2 class="text-2xl text-center">Labels</h2>
-    </div>
-    <div class="flex items-center space-x-2 mx-2 justify-center">
-      <rtg-checkbox id="terms"></rtg-checkbox>
-      <rtg-label for="terms">Accept terms and conditions</rtg-label>
-    </div>
-    <div class="container mx-auto my-10">
-      <h2 class="text-2xl text-center">Inputs</h2>
-    </div>
-    <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-      <rtg-input type="email" placeholder="Email" class="min-w-80"></rtg-input>
-      <div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
-        <rtg-label for="picture">Picture</rtg-label>
-        <rtg-input id="picture" type="file" placeholder="file"></rtg-input>
-      </div>
-      <rtg-input
-        disabled
-        type="email"
-        placeholder="Email"
-        class="min-w-80"
-      ></rtg-input>
-      <div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
-        <rtg-label for="email">Email address</rtg-label>
-        <rtg-input id="email" type="email" placeholder="Email"> </rtg-input>
-      </div>
-      <div class="flex flex-nowrap w-full max-w-sm items-center space-x-2">
-        <rtg-input
-          id="email"
-          type="email"
-          placeholder="Email"
-          class="min-w-80"
-        ></rtg-input>
-        <rtg-button size="default" onclick="javascript:alert('Hello!')">Subscribe</rtg-button>
-      </div>
-    </div>
-    <div class="container mx-auto my-10">
-      <h2 class="text-2xl text-center">Command</h2>
-    </div>
-    <div class="flex flex-nowrap justify-center">
-      <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-        <rtg-command class="w-full max-w-md">
-          <rtg-command-input placeholder="Search ...."></rtg-command-input>
-          <rtg-command-list>
-            <rtg-command-empty>No items found!</rtg-command-empty>
-            <rtg-command-group heading="Suggestions">
-              <rtg-command-item>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="mr-2 h-4 w-4"
-                >
-                  <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
-                  <line x1="16" x2="16" y1="2" y2="6"></line>
-                  <line x1="8" x2="8" y1="2" y2="6"></line>
-                  <line x1="3" x2="21" y1="10" y2="10"></line></svg>
-                  <span>Calendar</span>
-              </rtg-command-item>
-              <rtg-command-item>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="mr-2 h-4 w-4"
-                >
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
-                  <line x1="9" x2="9.01" y1="9" y2="9"></line>
-                  <line x1="15" x2="15.01" y1="9" y2="9"></line></svg>
-                <span>Search Emoji</span>
-              </rtg-command-item>
-              <rtg-command-item>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="mr-2 h-4 w-4"
-                >
-                  <rect width="16" height="20" x="4" y="2" rx="2"></rect>
-                  <line x1="8" x2="16" y1="6" y2="6"></line>
-                  <line x1="16" x2="16" y1="14" y2="18"></line>
-                  <path d="M16 10h.01"></path>
-                  <path d="M12 10h.01"></path>
-                  <path d="M8 10h.01"></path>
-                  <path d="M12 14h.01"></path>
-                  <path d="M8 14h.01"></path>
-                  <path d="M12 18h.01"></path>
-                  <path d="M8 18h.01"></path></svg>
-                <span>Calculator</span>
-              </rtg-command-item>
-            </rtg-command-group>
-            <rtg-command-separator></rtg-command-separator>
-            <rtg-command-group heading="Settings">
-              <rtg-command-item onclick="javascript:alert('Profile Clicked!')">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="mr-2 h-4 w-4"
-                >
-                  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
-                  <circle cx="12" cy="7" r="4"></circle></svg>
-                <span>Profile</span>
-                <span
-                  class="ml-auto text-xs tracking-widest text-muted-foreground"
-                  >⌘P</span>
-              </rtg-command-item>
-              <rtg-command-item>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="mr-2 h-4 w-4"
-                >
-                  <rect width="20" height="14" x="2" y="5" rx="2"></rect>
-                  <line x1="2" x2="22" y1="10" y2="10"></line></svg>
-                <span>Billing</span
-                ><span
-                  class="ml-auto text-xs tracking-widest text-muted-foreground"
-                  >⌘B</span
-                >
-              </rtg-command-item>
-              <rtg-command-item>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="mr-2 h-4 w-4"
-                >
-                  <path
-                    d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
-                  ></path>
-                  <circle cx="12" cy="12" r="3"></circle></svg>
-                <span>Settings</span>
-                <span
-                  class="ml-auto text-xs tracking-widest text-muted-foreground">
-                  ⌘S</span>
-              </rtg-command-item>
-            </rtg-command-group></rtg-command-list
-          >
-        </rtg-command>
-      </div>
-      </div>
-      <div class="container mx-auto my-10">
-        <h2 class="text-2xl text-center">Dialog</h2>
-      </div>
-      <div class="flex flex-nowrap justify-center">
-        <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-      <rtg-dialog>
-        <rtg-dialog-trigger>
-          <rtg-button>Open Dialog</rtg-button>
-        </rtg-dialog-trigger>
-        <rtg-dialog-content>
-          <rtg-dialog-header title="Are you absolutely sure?" description="This action cannot be undone. This will permanently delete your
-          content.">
-            <rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>
-            <rtg-dialog-description>
-              This action cannot be undone. This will permanently delete your
-              content.</rtg-dialog-description
-            >
-          </rtg-dialog-header>
-          <rtg-dialog-footer>
-            <div class="flex w-full justify-between space-x-1">
-              <rtg-dialog-close><rtg-button variant="secondary">Close</rtg-button></rtg-dialog-close>
-              <div class="justify-end">
-                <rtg-button variant="destructive">Delete</rtg-button>
-                <rtg-button>Cancel</rtg-button>
-              </div>
-          </div>
-        </rtg-dialog-content>
-      </rtg-dialog>
-      <rtg-dialog>
-        <rtg-dialog-trigger>
-          <rtg-button variant="outline">Edit Profile</rtg-button>
-        </rtg-dialog-trigger>
-        <rtg-dialog-content class="sm:max-w-[425px]">
-          <rtg-dialog-header title="Edit Profile", description="Make changes to your profile here. Click save when you're done.">
-            <!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>
-            <rtg-dialog-description>
-              Make changes to your profile here. Click save when you're done.</rtg-dialog-description
-            > -->
-          </rtg-dialog-header>
-          <div class="grid gap-4 py-4">
-            <div class="grid grid-cols-4 items-center gap-4">
-              <rtg-label for="name" class="text-right">
-                Name
-              </rtg-label>
-              <rtg-input
-                id="name"
-                defaultValue="Pedro Duarte"
-                class="col-span-3"
-              />
-            </div>
-            <div class="grid grid-cols-4 items-center gap-4">
-              <rtg-label for="username" class="text-right">
-                Username
-              </rtg-label>
-              <rtg-input
-                id="username"
-                defaultValue="@peduarte"
-                class="col-span-3"
-              />
-            </div>
-          </div>
-          <rtg-dialog-footer>
-            <rtg-button type="submit" class="w-full sm:w-min">Save changes</rtg-button>
-        </rtg-dialog-content>
-      </rtg-dialog>
-      </div>
-      </div>
-      <div class="container mx-auto my-10">
-        <h2 class="text-2xl text-center">Popover</h2>
-      </div>
-      <div class="flex flex-nowrap justify-center">
-        <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-      <rtg-popover>
-        <rtg-popover-trigger>
-          <rtg-button variant="outline">Open Popover</rtg-button>
-        </rtg-popover-trigger>
-        <rtg-popover-content class="w-80">
-          <div class="grid gap-4">
-            <div class="space-y-2">
-              <h4 class="font-medium leading-none">Dimensions</h4>
-              <p class="text-sm text-muted-foreground">
-                Set the dimensions for the layer.
-              </p>
-            </div>
-            <div class="grid gap-2">
-              <div class="grid grid-cols-3 items-center gap-4">
-                <rtg-label for="width">Width</rtg-label>
-                <rtg-input
-                  id="width"
-                  defaultValue="100%"
-                  class="col-span-2 h-8"
-                />
-              </div>
-              <div class="grid grid-cols-3 items-center gap-4">
-                <rtg-label for="maxWidth">Max. width</rtg-label>
-                <rtg-input
-                  id="maxWidth"
-                  defaultValue="300px"
-                  class="col-span-2 h-8"
-                />
-              </div>
-              <div class="grid grid-cols-3 items-center gap-4">
-                <rtg-label htmlFor="height">Height</rtg-label>
-                <rtg-input
-                  id="height"
-                  defaultValue="25px"
-                  class="col-span-2 h-8"
-                />
-              </div>
-              <div class="grid grid-cols-3 items-center gap-4">
-                <rtg-label htmlFor="maxHeight">Max. height</rtg-label>
-                <rtg-input
-                  id="maxHeight"
-                  defaultValue="none"
-                  class="col-span-2 h-8"
-                />
-              </div>
-            </div>
-          </div>
-        </rtg-popover-content>
-      </rtg-popover>
-      </div>
-      </div>
-      <div class="h-9"></div>
-    </div>
-    <script type="module" src="./dist/src/wc-ui-app.js"></script>
-    <script type="module" src="./dist/src/components/"></script>
-    <!-- <script type="module" src="./dist/src/components/input/input.js"></script>
-    <script type="module" src="./dist/src/components/label/label.js"></script>
-    <script type="module" src="./dist/src/components/checkbox/checkbox.js"></script>
-    <script type="module" src="./dist/src/components/command/command.js"></script>
-    <script type="module" src="./dist/src/components/dialog/dialog.js"></script> -->
-  </body>
-</html>

package/rollup.config.js DELETED Viewed

@@ -1,71 +0,0 @@
-import nodeResolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
-import html from '@web/rollup-plugin-html';
-import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
-import esbuild from 'rollup-plugin-esbuild';
-import { generateSW } from 'rollup-plugin-workbox';
-import path from 'path';
-export default {
-  input: 'index.html',
-  output: {
-    entryFileNames: '[hash].js',
-    chunkFileNames: '[hash].js',
-    assetFileNames: '[hash][extname]',
-    format: 'es',
-    dir: 'dist',
-  },
-  preserveEntrySignatures: false,
-  plugins: [
-    /** Enable using HTML as rollup entrypoint */
-    html({
-      minify: true,
-      injectServiceWorker: true,
-      serviceWorkerPath: 'dist/sw.js',
-    }),
-    /** Resolve bare module imports */
-    nodeResolve(),
-    /** Minify JS, compile JS to a lower language target */
-    esbuild({
-      minify: true,
-      target: ['chrome64', 'firefox67', 'safari11.1'],
-    }),
-    /** Bundle assets references via import.meta.url */
-    importMetaAssets(),
-    /** Minify html and css tagged template literals */
-    babel({
-      plugins: [
-        [
-          require.resolve('babel-plugin-template-html-minifier'),
-          {
-            modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
-            failOnError: false,
-            strictCSS: true,
-            htmlMinifier: {
-              collapseWhitespace: true,
-              conservativeCollapse: true,
-              removeComments: true,
-              caseSensitive: true,
-              minifyCSS: true,
-            },
-          },
-        ],
-      ],
-    }),
-    /** Create and inject a service worker */
-    generateSW({
-      globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
-      navigateFallback: '/index.html',
-      // where to output the generated sw
-      swDest: path.join('dist', 'sw.js'),
-      // directory to match patterns against to be precached
-      globDirectory: path.join('dist'),
-      // cache any html js and css by default
-      globPatterns: ['**/*.{html,js,css,webmanifest}'],
-      skipWaiting: true,
-      clientsClaim: true,
-      runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
-    }),
-  ],
-};

package/src/components/atoms/button/button.atom.ts DELETED Viewed

@@ -1,39 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { ButtonSize, ButtonType, ButtonVariant } from './button.type';
-import { buttonStyle } from './button.style';
-import { TWStyles } from '@/styles';
-@customElement('rtg-button')
-export class Button extends LitElement {
-  static buttonVariants = buttonStyle;
-  @property({ type: Boolean }) disabled = false;
-  @property({ type: String }) type: ButtonType = 'button';
-  @property({ type: String }) variant: ButtonVariant = 'default';
-  @property({ type: String }) size: ButtonSize = 'default';
-  static styles = [css``, TWStyles];
-  render() {
-    return html`
-      <button
-        type="${this.type}"
-        ?disabled=${this.disabled}
-        class="${cn(
-          Button.buttonVariants({
-            variant: this.variant,
-            size: this.size,
-            className: this.className,
-          })
-        )}"
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
-}

package/src/components/atoms/button/button.stories.ts DELETED Viewed

@@ -1,186 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { action } from '@storybook/addon-actions';
-import { html } from 'lit';
-import './button.atom';
-const meta: Meta = {
-  component: 'components/button',
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'default',
-        'destructive',
-        'outline',
-        'secondary',
-        'ghost',
-        'link',
-      ],
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['default', 'sm', 'lg', 'icon'],
-    },
-    disabled: { control: 'boolean' },
-    onClick: { action: 'button-click' },
-  },
-};
-export default meta;
-type Story = StoryObj;
-const logger = () => {
-  console.log('Btn Clicked!');
-};
-export const Default: Story = {
-  args: {
-    label: 'Default',
-    variant: 'default',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${action('button-click')}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-    >
-      ${label}</rtg-button
-    >`,
-};
-export const Primary: Story = {
-  args: {
-    label: 'Primary',
-    variant: 'default',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
-export const Destructive: Story = {
-  args: {
-    label: 'Destructive',
-    variant: 'destructive',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
-export const Outline: Story = {
-  args: {
-    label: 'Outline',
-    variant: 'outline',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
-export const Ghost: Story = {
-  args: {
-    variant: 'ghost',
-    label: 'Ghost',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
-export const Link: Story = {
-  args: {
-    variant: 'link',
-    label: 'Link',
-    size: 'lg',
-    disabled: false,
-  },
-  render: ({ label, variant, size, disabled }) =>
-    html`<rtg-button
-      .onClick=${logger}
-      variant=${variant}
-      size=${size}
-      ?disabled=${disabled}
-      >${label}</rtg-button
-    > `,
-};
-export const IconButton: Story = {
-  args: {
-    variant: 'outline',
-    size: 'icon',
-    disabled: false,
-  },
-  render: ({ variant, size }) =>
-    html`<rtg-button .onClick=${logger} variant=${variant} size=${size}>
-      <iconify-icon icon="mdi:home"></iconify-icon>
-    </rtg-button> `,
-};
-export const ButtonWithIcon: Story = {
-  args: {
-    label: 'Home Page',
-    variant: 'default',
-    size: 'default',
-    disabled: false,
-  },
-  render: ({ variant, label, size, disabled }) =>
-    html`
-      <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
-        ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon>
-        ${label}</rtg-button
-      >
-    `,
-};
-export const animationButton: Story = {
-  args: {
-    label: 'Home Page',
-    variant: 'default',
-    size: 'default',
-    disabled: true,
-  },
-  render: ({ variant, label, size, disabled }) =>
-    html`
-      <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
-        ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
-        ${label}</rtg-button
-      >
-    `,
-};

package/src/components/atoms/button/button.style.ts DELETED Viewed

@@ -1,31 +0,0 @@
-import { cva } from 'class-variance-authority';
-export const buttonStyle = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-8 px-4 py-2',
-        sm: 'h-7 rounded-sm px-3 text-xs',
-        lg: 'h-9 rounded-sm px-8',
-        icon: 'h-8 w-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);