vueless 0.0.1

package/ui.form-textarea/index.stories.js

@@ -0,0 +1,109 @@
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+import UTextarea from "vueless/ui.form-textarea";
+import UIcon from "vueless/ui.image-icon";
+import URow from "vueless/ui.container-row";
+
+export default {
+  title: "Form Inputs & Controls / Textarea",
+  component: UTextarea,
+  args: {
+    label: "Label",
+  },
+  argTypes: {
+    ...getArgTypes(UTextarea.name),
+    modelValue: { control: { type: "text" } },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTextarea },
+  setup() {
+    const slots = getSlotNames(UTextarea.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UTextarea
+      v-bind="args"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UTextarea>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UTextarea, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTextarea
+      v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UTextarea>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes }) => ({
+  components: { UTextarea, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <div class="w-1/3" v-for="(size, index) in sizes" :key="index">
+        <UTextarea
+          :size="size"
+          v-bind="args"
+        />
+      </div>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const placeholder = DefaultTemplate.bind({});
+placeholder.args = { placeholder: "some placeholder text" };
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error text" };
+
+export const description = DefaultTemplate.bind({});
+description.args = { description: "some description text" };
+
+export const rows1 = DefaultTemplate.bind({});
+rows1.args = { rows: "1" };
+
+export const readonly = DefaultTemplate.bind({});
+readonly.args = { readonly: true, value: "some value for read" };
+
+export const noAutocomplete = DefaultTemplate.bind({});
+noAutocomplete.args = { noAutocomplete: true };
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const slotIcon = SlotTemplate.bind({});
+slotIcon.args = {
+  slotTemplate: `
+    <template #icon>
+      <UIcon
+        name="star"
+        color="black"
+        size="md"
+      />
+    </template>
+  `,
+};

package/ui.form-textarea/index.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="mono-textarea-wrapper">
+    <div class="mono-textarea-block">
+      <t-textarea
+        :id="id"
+        ref="textarea"
+        v-model="textArea"
+        class="mono-textarea"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :type="type"
+        :class="textareaClass"
+        :readonly="readonly"
+        :disabled="disabled"
+        :rows="rows"
+        :inputmode="inputMode"
+        :data-cy="dataCy"
+        @focus="onFocus"
+        @blur="onBlur"
+        @change="onChange"
+        @mouseleave="onMouseleave"
+        @mousedown="onMousedown"
+        @click="onClick"
+      />
+
+      <label v-if="isShownIconSlot" class="mono-textarea-icon-label" :for="id">
+        <!-- @slot Use it to add icon after text. -->
+        <slot name="icon" />
+      </label>
+    </div>
+
+    <label class="label" :class="labelClass" :for="id">
+      {{ label }}
+    </label>
+
+    <p v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
+      {{ error }}
+    </p>
+
+    <p v-if="description && !error" class="description">
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { getRandomId } from "vueless/service.ui";
+import TTextarea from "vueless/library.vue-tailwind-3/t-textarea";
+
+export default {
+  name: "UTextarea",
+
+  components: {
+    TTextarea,
+  },
+
+  props: {
+    /**
+     * Set input size.
+     * @values sm, md, lg
+     */
+    size: {
+      type: String,
+      default: "md",
+    },
+
+    /**
+     * Set component value.
+     */
+    modelValue: {
+      type: String,
+      default: "",
+    },
+
+    /**
+     * Set component placeholder.
+     */
+    placeholder: {
+      type: String,
+      default: "",
+    },
+
+    /**
+     * Set input label.
+     */
+    label: {
+      type: String,
+      default: "",
+    },
+
+    /**
+     * Set description for component.
+     */
+    description: {
+      type: String,
+      default: "",
+    },
+
+    /**
+     * Make textarea read only.
+     */
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Make input inactive.
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Set input type.
+     * @values text, number, email, tel, password, url
+     */
+    type: {
+      type: String,
+      default: "text",
+    },
+
+    /**
+     * Set proper keyboard on mobile devices.
+     * @values text, none, decimal, tel, numeric, search, email, url,
+     */
+    inputMode: {
+      type: String,
+      default: "text",
+    },
+
+    /**
+     * Disable browsers autocomplete.
+     */
+    noAutocomplete: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Set error message.
+     */
+    error: {
+      type: String,
+      default: "",
+    },
+
+    /**
+     * Set number of visible rows.
+     */
+    rows: {
+      type: String,
+      default: "2",
+    },
+
+    /**
+     * Generates unique element id.
+     * @ignore
+     */
+    id: {
+      type: String,
+      default: () => getRandomId(),
+    },
+
+    /**
+     * Sets data-cy attribute for automated testing.
+     */
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["change", "click", "focus", "blur", "update:modelValue", "mousedown"],
+
+  computed: {
+    textArea: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+
+    textareaClass() {
+      return {
+        disabled: this.disabled,
+        "size-sm": this.size === "sm",
+        "size-md": this.size === "md",
+        "size-lg": this.size === "lg",
+        "error-textarea": this.error,
+        "mono-textarea-default-padding": !this.isShownIconSlot,
+        "mono-textarea-with-icon-padding": this.isShownIconSlot,
+      };
+    },
+
+    labelClass() {
+      return {
+        disabled: this.disabled,
+        "error-label": this.error,
+        "size-label-sm": this.size === "sm",
+        "size-label-md": this.size === "md",
+        "size-label-lg": this.size === "lg",
+      };
+    },
+
+    isShownIconSlot() {
+      return !!this.$slots["icon"];
+    },
+  },
+
+  mounted() {
+    this.toggleReadonly(true);
+  },
+
+  methods: {
+    onChange() {
+      this.$emit("change");
+    },
+
+    onClick(event) {
+      this.toggleReadonly(false);
+
+      this.$emit("click", event);
+    },
+
+    onFocus() {
+      this.toggleReadonly(false);
+
+      this.$emit("focus");
+    },
+
+    onBlur() {
+      this.toggleReadonly(true);
+
+      this.$emit("blur");
+    },
+
+    onMouseleave() {
+      this.toggleReadonly(true);
+    },
+
+    onMousedown() {
+      this.$emit("mousedown");
+    },
+
+    toggleReadonly(hasReadonly) {
+      if (this.noAutocomplete && !this.readonly) {
+        const textarea = document.getElementById(this.id);
+
+        hasReadonly
+          ? textarea.setAttribute("readonly", "readonly")
+          : textarea.removeAttribute("readonly");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.mono-textarea-wrapper {
+  @apply relative w-full;
+
+  .mono-textarea {
+    @apply font-normal text-gray-900;
+    @apply resize-none rounded-lg border border-solid border-gray-300 bg-white shadow-none;
+    @apply w-full pl-4;
+
+    &:focus {
+      @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
+    }
+
+    &:read-only {
+      @apply border-gray-300 ring-0;
+    }
+
+    &:hover {
+      @apply border-gray-400;
+    }
+
+    &::placeholder {
+      @apply font-normal text-gray-400;
+    }
+
+    &-block {
+      @apply relative flex;
+    }
+
+    &-icon-label {
+      @apply flex items-center justify-center;
+      @apply h-full w-11;
+      @apply absolute right-0;
+    }
+
+    &-default-padding {
+      @apply pr-4;
+    }
+
+    &-with-icon-padding {
+      @apply pr-11;
+    }
+  }
+
+  .label {
+    @apply absolute top-px;
+    @apply h-auto;
+    width: calc(100% - 2rem);
+    @apply bg-white;
+    @apply font-normal text-gray-500;
+
+    &.disabled {
+      @apply bg-gray-100;
+    }
+  }
+
+  .description {
+    @apply text-xs font-normal text-gray-500/[85];
+    @apply pl-4 pt-2;
+  }
+
+  .disabled {
+    @apply border-none bg-gray-100 opacity-100;
+  }
+
+  .error {
+    &-message {
+      @apply text-xs font-normal text-red-500;
+      @apply mt-2 pl-4;
+    }
+
+    &-label {
+      @apply text-red-500;
+    }
+
+    &-textarea {
+      @apply border-red-300;
+
+      &:hover {
+        @apply border-red-400;
+      }
+
+      &:focus {
+        @apply border-red-500 ring-red-100;
+      }
+    }
+  }
+}
+
+.size {
+  &-sm {
+    @apply text-xs;
+    @apply pb-2 pr-4 pt-6;
+
+    &::placeholder {
+      @apply text-xs;
+    }
+  }
+
+  &-md {
+    @apply text-base;
+    @apply pb-2.5 pr-4 pt-7;
+
+    &::placeholder {
+      @apply text-base;
+    }
+  }
+
+  &-lg {
+    @apply text-lg;
+    @apply pb-3 pr-4 pt-8;
+
+    &::placeholder {
+      @apply text-lg;
+    }
+  }
+
+  &-label {
+    &-sm {
+      @apply text-xs;
+      @apply left-4;
+      @apply pt-2;
+    }
+
+    &-md {
+      @apply text-sm;
+      @apply left-4;
+      @apply pt-2.5;
+    }
+
+    &-lg {
+      @apply text-base;
+      @apply left-4;
+      @apply pt-3;
+    }
+  }
+}
+</style>

package/ui.icons-metronic/ATM.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Shopping-/-ATM" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <rect id="Rectangle-2" fill="#000000" opacity="0.3" x="2" y="4" width="20" height="5" rx="1"></rect>
+        <path d="M5,7 L8,7 L8,21 L7,21 C5.8954305,21 5,20.1045695 5,19 L5,7 Z M19,7 L19,19 C19,20.1045695 18.1045695,21 17,21 L11,21 L11,7 L19,7 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Active-call.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Communication-/-Active-call" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M13.0799676,14.7839934 L15.2839934,12.5799676 C15.8927139,11.9712471 16.0436229,11.0413042 15.6586342,10.2713269 L15.5337539,10.0215663 C15.1487653,9.25158901 15.2996742,8.3216461 15.9083948,7.71292558 L18.6411989,4.98012149 C18.836461,4.78485934 19.1530435,4.78485934 19.3483056,4.98012149 C19.3863063,5.01812215 19.4179321,5.06200062 19.4419658,5.11006808 L20.5459415,7.31801948 C21.3904962,9.0071287 21.0594452,11.0471565 19.7240871,12.3825146 L13.7252616,18.3813401 C12.2717221,19.8348796 10.1217008,20.3424308 8.17157288,19.6923882 L5.75709327,18.8875616 C5.49512161,18.8002377 5.35354162,18.5170777 5.4408655,18.2551061 C5.46541191,18.1814669 5.50676633,18.114554 5.56165376,18.0596666 L8.21292558,15.4083948 C8.8216461,14.7996742 9.75158901,14.6487653 10.5215663,15.0337539 L10.7713269,15.1586342 C11.5413042,15.5436229 12.4712471,15.3927139 13.0799676,14.7839934 Z" id="Path-76" fill="#000000"></path>
+        <path d="M14.1480759,6.00715131 L13.9566988,7.99797396 C12.4781389,7.8558405 11.0097207,8.36895892 9.93933983,9.43933983 C8.8724631,10.5062166 8.35911588,11.9685602 8.49664195,13.4426352 L6.50528978,13.6284215 C6.31304559,11.5678496 7.03283934,9.51741319 8.52512627,8.02512627 C10.0223249,6.52792766 12.0812426,5.80846733 14.1480759,6.00715131 Z M14.4980938,2.02230302 L14.313049,4.01372424 C11.6618299,3.76737046 9.03000738,4.69181803 7.1109127,6.6109127 C5.19447112,8.52735429 4.26985715,11.1545872 4.51274152,13.802405 L2.52110319,13.985098 C2.22450978,10.7517681 3.35562581,7.53777247 5.69669914,5.19669914 C8.04101739,2.85238089 11.2606138,1.72147333 14.4980938,2.02230302 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Add-music.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Media-/-Add-music" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M8.97852058,18.8007059 C8.80029331,20.0396328 7.53473012,21 6,21 C4.34314575,21 3,19.8807119 3,18.5 C3,17.1192881 4.34314575,16 6,16 C6.35063542,16 6.68722107,16.0501285 7,16.1422548 L7,5.93171093 C7,5.41893942 7.31978104,4.96566617 7.78944063,4.81271925 L13.5394406,3.05418311 C14.2638626,2.81827161 15,3.38225531 15,4.1731748 C15,4.95474642 15,5.54092513 15,5.93171093 C15,6.51788965 14.4511634,6.89225606 14,7 C13.3508668,7.15502181 11.6842001,7.48835515 9,8 L9,18.5512168 C9,18.6409956 8.9927193,18.7241187 8.97852058,18.8007059 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+        <path d="M16,13 L16,11 C16,10.4477153 16.4477153,10 17,10 C17.5522847,10 18,10.4477153 18,11 L18,13 L20,13 C20.5522847,13 21,13.4477153 21,14 C21,14.5522847 20.5522847,15 20,15 L18,15 L18,17 C18,17.5522847 17.5522847,18 17,18 C16.4477153,18 16,17.5522847 16,17 L16,15 L14,15 C13.4477153,15 13,14.5522847 13,14 C13,13.4477153 13.4477153,13 14,13 L16,13 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Add-user.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Communication-/-Add-user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
+        <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
+        <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" id="Mask-Copy" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Address-card.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Communication-/-Address-card" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M6,2 L18,2 C19.6568542,2 21,3.34314575 21,5 L21,19 C21,20.6568542 19.6568542,22 18,22 L6,22 C4.34314575,22 3,20.6568542 3,19 L3,5 C3,3.34314575 4.34314575,2 6,2 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M7.00036205,16.4995035 C6.98863236,16.6619875 7.26484009,17 7.4041679,17 C11.463736,17 14.5228466,17 16.5815,17 C16.9988413,17 17.0053266,16.6221713 16.9988413,16.5 C16.8360465,13.4332455 14.6506758,12 11.9907452,12 C9.36772908,12 7.21569918,13.5165724 7.00036205,16.4995035 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Adjust.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Design-/-Adjust" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Adress-book1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Communication-/-Adress-book1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M17,2 L19,2 C20.6568542,2 22,3.34314575 22,5 L22,19 C22,20.6568542 20.6568542,22 19,22 L17,22 L17,2 Z" id="Rectangle-161-Copy" fill="#000000" opacity="0.3"></path>
+        <path d="M4,2 L16,2 C17.6568542,2 19,3.34314575 19,5 L19,19 C19,20.6568542 17.6568542,22 16,22 L4,22 C3.44771525,22 3,21.5522847 3,21 L3,3 C3,2.44771525 3.44771525,2 4,2 Z M11.1176481,13.709585 C10.6725287,14.1547043 9.99251947,14.2650547 9.42948307,13.9835365 C8.86644666,13.7020183 8.18643739,13.8123686 7.74131803,14.2574879 L6.2303083,15.7684977 C6.17542087,15.8233851 6.13406645,15.8902979 6.10952004,15.9639372 C6.02219616,16.2259088 6.16377615,16.5090688 6.42574781,16.5963927 L7.77956724,17.0476658 C9.07965249,17.4810276 10.5130001,17.1426601 11.4820264,16.1736338 L15.4812434,12.1744168 C16.3714821,11.2841781 16.5921828,9.92415954 16.0291464,8.79808673 L15.3965752,7.53294436 C15.3725414,7.48487691 15.3409156,7.44099843 15.302915,7.40299777 C15.1076528,7.20773562 14.7910703,7.20773562 14.5958082,7.40299777 L13.0032662,8.99553978 C12.5581468,9.44065914 12.4477965,10.1206684 12.7293147,10.6837048 C13.0108329,11.2467412 12.9004826,11.9267505 12.4553632,12.3718698 L11.1176481,13.709585 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Adress-book2.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Communication-/-Adress-book2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M18,2 L20,2 C21.6568542,2 23,3.34314575 23,5 L23,19 C23,20.6568542 21.6568542,22 20,22 L18,22 L18,2 Z" id="Rectangle-161-Copy" fill="#000000" opacity="0.3"></path>
+        <path d="M5,2 L17,2 C18.6568542,2 20,3.34314575 20,5 L20,19 C20,20.6568542 18.6568542,22 17,22 L5,22 C4.44771525,22 4,21.5522847 4,21 L4,3 C4,2.44771525 4.44771525,2 5,2 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M7.00036205,16.4995035 C6.98863236,16.6619875 7.26484009,17 7.4041679,17 C11.463736,17 14.5228466,17 16.5815,17 C16.9988413,17 17.0053266,16.6221713 16.9988413,16.5 C16.8360465,13.4332455 14.6506758,12 11.9907452,12 C9.36772908,12 7.21569918,13.5165724 7.00036205,16.4995035 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Air-ballon.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Home-/-Air-ballon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M10.1573188,15.7101991 C10.7319317,15.871464 11.3373672,15.9576401 11.9626774,15.9576401 C12.5879876,15.9576401 13.1934231,15.871464 13.768036,15.7101991 L14.2784001,17.0884863 C14.2961491,17.1364191 14.3052407,17.1871941 14.3052407,17.2383863 C14.3052407,17.4741652 14.1165055,17.6653018 13.8836889,17.6653018 L12.805781,17.6381197 C12.8616756,18.8258731 13.2941654,19.508499 14.4169144,19.8875104 C14.8586529,20.0366301 15.0973861,20.5201716 14.95014,20.9675305 C14.8028938,21.4148895 14.3254274,21.6566602 13.8836889,21.5075406 C12.072317,20.8960676 11.1784281,19.5883144 11.1216188,17.6653018 L10.041666,17.6653018 C9.99111686,17.6653018 9.94097984,17.6560945 9.89364924,17.6381197 C9.67565622,17.5553322 9.56520732,17.309253 9.6469547,17.0884863 L10.1573188,15.7101991 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+        <path d="M12,16 C8.13400675,16 5,12.8659932 5,9 C5,5.13400675 8.13400675,2 12,2 C15.8659932,2 19,5.13400675 19,9 C19,12.8659932 15.8659932,16 12,16 Z M8.81595773,8.80077353 C8.79067542,8.43921955 8.47708263,8.16661749 8.11552864,8.19189981 C7.75397465,8.21718213 7.4813726,8.53077492 7.50665492,8.89232891 C7.62279197,10.5531661 8.39667037,11.8635466 9.79502238,12.7671393 C10.099435,12.9638458 10.5056723,12.8765328 10.7023788,12.5721203 C10.8990854,12.2677077 10.8117724,11.8614704 10.5073598,11.6647638 C9.4559885,10.9853845 8.90327706,10.0494981 8.81595773,8.80077353 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Air-conditioning.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Electric-/-Air-conditioning" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M3,3 L21,3 C21.5522847,3 22,3.44771525 22,4 L22,11 C22,11.5522847 21.5522847,12 21,12 L3,12 C2.44771525,12 2,11.5522847 2,11 L2,4 C2,3.44771525 2.44771525,3 3,3 Z M5,8 C4.44771525,8 4,8.44771525 4,9 C4,9.55228475 4.44771525,10 5,10 L19,10 C19.5522847,10 20,9.55228475 20,9 C20,8.44771525 19.5522847,8 19,8 L5,8 Z" id="Combined-Shape" fill="#000000"></path>
+        <path d="M17.2914283,14.2943612 L18.7085717,15.7056388 C17.6611931,16.7573706 17.6647221,18.4590358 18.7164539,19.5064144 C18.8065164,19.5961041 18.902828,19.6792918 19.0046636,19.755351 L19.5984004,20.1988028 L18.4015996,21.8011972 L17.8078628,21.3577454 C17.6302443,21.2250852 17.4622605,21.0799918 17.3051762,20.9235577 C15.4707777,19.096752 15.4646226,16.1287596 17.2914283,14.2943612 Z M11.2914283,15.2943612 L12.7085717,16.7056388 C11.6611931,17.7573706 11.6647221,19.4590358 12.7164539,20.5064144 C12.8065164,20.5961041 12.902828,20.6792918 13.0046636,20.755351 L13.5984004,21.1988028 L12.4015996,22.8011972 L11.8078628,22.3577454 C11.6302443,22.2250852 11.4622605,22.0799918 11.3051762,21.9235577 C9.47077775,20.096752 9.4646226,17.1287596 11.2914283,15.2943612 Z M5.29142832,14.2943612 L6.70857168,15.7056388 C5.66119311,16.7573706 5.66472209,18.4590358 6.71645389,19.5064144 C6.80651638,19.5961041 6.90282804,19.6792918 7.00466363,19.755351 L7.59840039,20.1988028 L6.40159961,21.8011972 L5.80786284,21.3577454 C5.63024431,21.2250852 5.46226047,21.0799918 5.30517622,20.9235577 C3.47077775,19.096752 3.4646226,16.1287596 5.29142832,14.2943612 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Airplay-video.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Media-/-Airplay-video" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M7,15 C7.55228475,15 8,15.4477153 8,16 C8,16.5522847 7.55228475,17 7,17 L6,17 C4.34314575,17 3,15.6568542 3,14 L3,7 C3,5.34314575 4.34314575,4 6,4 L18,4 C19.6568542,4 21,5.34314575 21,7 L21,14 C21,15.6568542 19.6568542,17 18,17 L17,17 C16.4477153,17 16,16.5522847 16,16 C16,15.4477153 16.4477153,15 17,15 L18,15 C18.5522847,15 19,14.5522847 19,14 L19,7 C19,6.44771525 18.5522847,6 18,6 L6,6 C5.44771525,6 5,6.44771525 5,7 L5,14 C5,14.5522847 5.44771525,15 6,15 L7,15 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+        <polygon id="Path-15" fill="#000000" opacity="0.3" points="8 20 16 20 12 15"></polygon>
+    </g>
+</svg>

package/ui.icons-metronic/Airplay.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Media-/-Airplay" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <polygon id="Path-15" fill="#000000" opacity="0.3" points="8 21 16 21 12 16"></polygon>
+        <path d="M17.4029496,14.5491021 L15.8599014,15.8215022 C14.9149052,14.675499 13.5137472,14 12,14 C10.4912085,14 9.09418404,14.6710418 8.14910121,15.8106159 L6.60963188,14.533888 C7.93073905,12.9409064 9.88958759,12 12,12 C14.1173586,12 16.0819686,12.9471394 17.4029496,14.5491021 Z M20.4681628,11.9788888 L18.929169,13.2561898 C17.2286725,11.2072964 14.7140097,10 12,10 C9.28974232,10 6.77820732,11.2039334 5.07766256,13.2479685 L3.54017812,11.968851 C5.61676443,9.47281829 8.68922234,8 12,8 C15.3153667,8 18.3916375,9.47692603 20.4681628,11.9788888 Z M23.2904427,9.72048884 L21.678507,10.9044074 C19.4302828,7.84339199 15.8698431,6 12,6 C8.0766912,6 4.47282622,7.89509192 2.2325887,11.0270624 L0.605887503,9.86351476 C3.21772389,6.21202937 7.42430358,4 12,4 C16.5132783,4 20.6693179,6.15175957 23.2904427,9.72048884 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Airpods.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Devices-/-Airpods" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M17,12.9170416 L17,20.5 C17,21.3284271 16.3284271,22 15.5,22 C14.6715729,22 14,21.3284271 14,20.5 L14,11.472213 C14.8261591,12.2116454 15.8584259,12.7255217 17,12.9170416 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
+        <path d="M10,11.472213 L10,20.5 C10,21.3284271 9.32842712,22 8.5,22 C7.67157288,22 7,21.3284271 7,20.5 L7,12.9170416 C8.14157414,12.7255217 9.17384092,12.2116454 10,11.472213 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
+        <path d="M18,12 C15.2385763,12 13,9.76142375 13,7 C13,4.23857625 15.2385763,2 18,2 C20.7614237,2 23,4.23857625 23,7 C23,9.76142375 20.7614237,12 18,12 Z M14.75,6.5 C14.3357864,6.5 14,6.83578644 14,7.25 C14,7.66421356 14.3357864,8 14.75,8 L15.25,8 C15.6642136,8 16,7.66421356 16,7.25 C16,6.83578644 15.6642136,6.5 15.25,6.5 L14.75,6.5 Z M21,5 C20.4477153,5 20,5.44771525 20,6 L20,8 C20,8.55228475 20.4477153,9 21,9 C21.5522847,9 22,8.55228475 22,8 L22,6 C22,5.44771525 21.5522847,5 21,5 Z" id="Combined-Shape" fill="#000000"></path>
+        <path d="M6,12 C3.23857625,12 1,9.76142375 1,7 C1,4.23857625 3.23857625,2 6,2 C8.76142375,2 11,4.23857625 11,7 C11,9.76142375 8.76142375,12 6,12 Z M8.75,6.5 C8.33578644,6.5 8,6.83578644 8,7.25 C8,7.66421356 8.33578644,8 8.75,8 L9.25,8 C9.66421356,8 10,7.66421356 10,7.25 C10,6.83578644 9.66421356,6.5 9.25,6.5 L8.75,6.5 Z M3,5 C2.44771525,5 2,5.44771525 2,6 L2,8 C2,8.55228475 2.44771525,9 3,9 C3.55228475,9 4,8.55228475 4,8 L4,6 C4,5.44771525 3.55228475,5 3,5 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/ui.icons-metronic/Alarm-clock.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Stockholm-icons-/-Home-/-Alarm-clock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="bound" x="0" y="0" width="24" height="24"></rect>
+        <path d="M7.14319965,19.3575259 C7.67122143,19.7615175 8.25104409,20.1012165 8.87097532,20.3649307 L7.89205065,22.0604779 C7.61590828,22.5387706 7.00431787,22.7026457 6.52602525,22.4265033 C6.04773263,22.150361 5.88385747,21.5387706 6.15999985,21.0604779 L7.14319965,19.3575259 Z M15.1367085,20.3616573 C15.756345,20.0972995 16.3358198,19.7569961 16.8634386,19.3524415 L17.8320512,21.0301278 C18.1081936,21.5084204 17.9443184,22.1200108 17.4660258,22.3961532 C16.9877332,22.6722956 16.3761428,22.5084204 16.1000004,22.0301278 L15.1367085,20.3616573 Z" id="Combined-Shape" fill="#000000"></path>
+        <path d="M12,21 C7.581722,21 4,17.418278 4,13 C4,8.581722 7.581722,5 12,5 C16.418278,5 20,8.581722 20,13 C20,17.418278 16.418278,21 12,21 Z M19.068812,3.25407593 L20.8181344,5.00339833 C21.4039208,5.58918477 21.4039208,6.53893224 20.8181344,7.12471868 C20.2323479,7.71050512 19.2826005,7.71050512 18.696814,7.12471868 L16.9474916,5.37539627 C16.3617052,4.78960984 16.3617052,3.83986237 16.9474916,3.25407593 C17.5332781,2.66828949 18.4830255,2.66828949 19.068812,3.25407593 Z M5.29862906,2.88207799 C5.8844155,2.29629155 6.83416297,2.29629155 7.41994941,2.88207799 C8.00573585,3.46786443 8.00573585,4.4176119 7.41994941,5.00339833 L5.29862906,7.12471868 C4.71284263,7.71050512 3.76309516,7.71050512 3.17730872,7.12471868 C2.59152228,6.53893224 2.59152228,5.58918477 3.17730872,5.00339833 L5.29862906,2.88207799 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
+        <path d="M11.9630156,7.5 L12.0475062,7.5 C12.3043819,7.5 12.5194647,7.69464724 12.5450248,7.95024814 L13,12.5 L16.2480695,14.3560397 C16.403857,14.4450611 16.5,14.6107328 16.5,14.7901613 L16.5,15 C16.5,15.2109164 16.3290185,15.3818979 16.1181021,15.3818979 C16.0841582,15.3818979 16.0503659,15.3773725 16.0176181,15.3684413 L11.3986612,14.1087258 C11.1672824,14.0456225 11.0132986,13.8271186 11.0316926,13.5879956 L11.4644883,7.96165175 C11.4845267,7.70115317 11.7017474,7.5 11.9630156,7.5 Z" id="Path-107" fill="#000000"></path>
+    </g>
+</svg>