classcard-ui 0.2.126 → 0.2.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.126",
+  "version": "0.2.135",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,28 +15,29 @@
     "src/*"
   ],
   "dependencies": {
-    "@shopify/draggable": "*",
+    "@shopify/draggable": "^1.0.0-beta.8",
     "@tailwindcss/forms": "^0.2.1",
-    "core-js": "^3.14.0",
-    "dayjs": "^1.10.5",
+    "core-js": "^3.18.0",
+    "dayjs": "^1.10.7",
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
+    "lodash": "^4.17.21",
     "vue": "^2.6.14",
     "vue-good-table": "^2.21.8",
     "vue-multiselect": "^2.1.6",
     "vue-quill-editor": "^3.0.6",
-    "vue-select": "^3.11.2",
+    "vue-select": "^3.13.0",
     "vue-table-draggable": "^1.0.1",
     "vue-tailwind-picker": "^2.0.0",
     "vue-tel-input": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/vue": "^6.2.9",
-    "@tailwindcss/postcss7-compat": "^2.2.0",
+    "@babel/core": "^7.15.5",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/vue": "^6.3.8",
+    "@tailwindcss/postcss7-compat": "^2.2.14",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
@@ -46,7 +47,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "postcss": "^7.0.36",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

package/src/components/CDualSelect/CDualSelect.vue

@@ -11,11 +11,9 @@
         class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm"
       >
         <span class="block truncate">
-          Select a option
+          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
         </span>
-        <span
-          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
-        >
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
           <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
         </span>
       </button>
@@ -29,11 +27,9 @@
         class="relative block items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm"
       >
         <span class="block truncate">
-          Select an option
+          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
         </span>
-        <span
-          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
-          >
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
           <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
         </span>
       </button>
@@ -45,7 +41,7 @@
       leave-active-class="transition ease-in duration-75"
       leave-class="transform opacity-100 scale-100"
       leave-to-class="transform opacity-0 scale-95"
-      >
+    >
       <div
         v-show="toggleFirstDropdown"
         class="origin-top-right absolute mt-2 -mr-1 w-full rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
@@ -57,11 +53,11 @@
           class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
         >
           <li
-            v-for="item in items"
+            v-for="item in firstDropdownOptions"
             v-bind:key="item.items"
             role="menuitem"
-            class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer"
-            @mousedown="handleClick()"
+            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            @mousedown="handleFirstClick(item)"
           >
             <span class="font-normal block truncate list-options">
               {{ item.text }}
@@ -77,7 +73,7 @@
       leave-active-class="transition ease-in duration-75"
       leave-class="transform opacity-100 scale-100"
       leave-to-class="transform opacity-0 scale-95"
-      >
+    >
       <div
         v-show="toggleSecondDropdown"
         class="origin-top-right absolute mt-2 -mr-1 w-full rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
@@ -89,10 +85,11 @@
           class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
         >
           <li
-            v-for="item in items"
+            v-for="item in secondDropdownOptions"
             v-bind:key="item.items"
             role="menuitem"
-            class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            @mousedown="handleSecondClick(item)"
           >
             <span class="font-normal block truncate list-options">
               {{ item.text }}
@@ -101,6 +98,10 @@
         </ul>
       </div>
     </transition>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
   </div>
 </template>
 
@@ -110,23 +111,42 @@ export default {
   name: "CDualSelect",
   components: { CIcon },
   props: {
+    // validation is passed or not
+    isValidate: { type: Boolean },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
     label: {
       type: String,
       required: true,
     },
-    //type: {
-    //type: String,
-    //default: false,
-    //},
-    items: {
+    firstDropdownValue: {
+      type: String,
+    },
+    secondDropdownValue: {
+      type: String,
+    },
+    firstDropdownOptions: {
       type: Array,
       required: true,
     },
+    secondDropdownOptions: {
+      type: Array,
+    },
+    onChangeFirstOptions: {
+      type: Function,
+    },
+    onChangeSecondOptions: {
+      type: Function,
+    },
   },
   data() {
     return {
       toggleFirstDropdown: false,
       toggleSecondDropdown: false,
+      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
+      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
     };
   },
   methods: {
@@ -134,9 +154,14 @@ export default {
       this.toggleFirstDropdown = false;
       this.toggleSecondDropdown = false;
     },
-    handleClick() {
-      alert('clicked');
-    }
+    handleFirstClick(item) {
+      this.firstDropdownSelectedValue = item.text;
+      this.$emit("onChangeFirstOptions", item);
+    },
+    handleSecondClick(item) {
+      this.secondDropdownSelectedValue = item.text;
+      this.$emit("onChangeSecondOptions", item);
+    },
   },
   computed: {
     classes() {
@@ -145,14 +170,18 @@ export default {
           this.type == "secondary",
         "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
           this.type == "primary",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
-          this.type == "danger",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
-          this.type == "success",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
         "cursor-default pointer-events-none": this.isLoading,
       };
     },
   },
+  watch: {
+    firstDropdownValue() {
+      this.firstDropdownSelectedValue = this.firstDropdownValue;
+      this.secondDropdownSelectedValue = this.secondDropdownValue;
+    },
+  },
 };
 </script>
 

package/src/components/CFormSectionHeading/CFormSectionHeading.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div :class="classes" class="border-gray-200">
-      <div class="flex justify-between">
+      <div class="flex justify-between items-center">
         <div>
           <h3 class="text-base font-semibold text-gray-900">
             {{ heading }}
@@ -10,8 +10,13 @@
             {{ description }}
           </p>
         </div>
-        <c-button v-if="tabAction" :type="tabAction.type" :label="tabAction.label"></c-button>
-        <c-anchor-tag v-if="tabLink" :label="tabLink.label"></c-anchor-tag>
+        <c-button
+          v-if="tabAction"
+          :type="tabAction.type"
+          :label="tabAction.label"
+          @action="emitTabAction"
+        ></c-button>
+        <c-anchor-tag v-if="tabLink" :label="tabLink.label" :action="emitTabLink"></c-anchor-tag>
       </div>
     </div>
   </div>
@@ -28,9 +33,20 @@ export default {
     divider: { type: Boolean },
     tabAction: { type: Object },
     tabLink: { type: Object },
+    actionEvent: {
+      type: Function,
+    },
     classes: {
       type: String,
     },
   },
+  methods: {
+    emitTabAction() {
+      this.$emit("actionEvent");
+    },
+    emitTabLink() {
+      this.$emit("actionEvent");
+    },
+  },
 };
 </script>

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700">
+      {{ label }}
+    </label>
+    <div class="mt-1 relative">
+      <div class="relative">
+        <input
+          type="text"
+          class="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          aria-haspopup="listbox"
+          aria-expanded="true"
+          aria-labelledby="listbox-label"
+          :value="inputValue"
+          @focus="showDropDown = true"
+          @blur="closeDropDown()"
+        />
+        <span
+          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+        >
+          <!-- Heroicon name: solid/selector -->
+          <svg
+            class="h-5 w-5 text-gray-400"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </div>
+      <!--
+      Select popover, show/hide based on select state.
+
+      Entering: ""
+        From: ""
+        To: ""
+      Leaving: "transition ease-in duration-100"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+      <ul
+        class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        tabindex="-1"
+        role="listbox"
+        aria-labelledby="listbox-label"
+        aria-activedescendant="listbox-option-3"
+        v-if="showDropDown"
+      >
+        <!--
+        Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
+
+        Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
+      -->
+        <span v-for="option in options" :key="option.id">
+          <li
+            class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
+            role="option"
+          >
+            <span class="font-bold italic block truncate">
+              {{ option.label }}
+            </span>
+          </li>
+          <li
+            class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 group hover:text-white hover:bg-indigo-600"
+            v-for="subOption in option.options"
+            :key="subOption.id"
+            role="option"
+            @click="handleOptionClick(subOption)"
+          >
+            <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
+            <span
+              :class="[
+                subOption.label === value.label
+                  ? 'font-semibold'
+                  : 'font-normal',
+                ' block truncate',
+              ]"
+            >
+              {{ subOption.label }}
+            </span>
+
+            <!--
+          Checkmark, only display for selected option.
+
+          Highlighted: "text-white", Not Highlighted: "text-indigo-600"
+        -->
+            <span
+              class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4 group-hover:text-white"
+              v-if="subOption.label === value.label"
+            >
+              <!-- Heroicon name: solid/check -->
+              <svg
+                class="h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </li>
+        </span>
+
+        <!-- More items... -->
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash";
+
+export default {
+  name: "CGroupedSelect",
+  props: {
+    label: String,
+    options: Object,
+    value: Object,
+  },
+  data() {
+    return {
+      showDropDown: false,
+      inputValue: "",
+    };
+  },
+  methods: {
+    onInput(e) {
+      this.inputValue = e.target.value;
+      debounce(function () {
+        this.$emit("search", e.target.value);
+      }, 500);
+    },
+    handleOptionClick(option) {
+      this.$emit("input", option);
+      this.inputValue = option.label;
+    },
+    closeDropDown() {
+      this.inputValue = this.value.label;
+      this.showDropDown = false;
+    },
+  },
+  watch: {
+    value(newValue) {
+      this.inputValue = newValue.label;
+    },
+  },
+  mounted() {
+    this.inputValue = this.value.label;
+  },
+};
+</script>
+
+<style></style>

package/src/components/CGroupedSelect/index.js

@@ -0,0 +1,3 @@
+import CGroupedSelect from "./CGroupedSelect.vue";
+
+export default CGroupedSelect;

package/src/components/CIconDropdown/CIconDropdown.vue

@@ -7,21 +7,17 @@
           type="white"
           @click="toggleDropdown = !toggleDropdown"
           @blur="close()"
-          class="inline-flex justify-center w-full rounded-full  border-none p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+          class="inline-flex justify-center w-full rounded-full border-none p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
           aria-haspopup="true"
           aria-expanded="true"
         >
-          <c-icon
-            :name="icon.name"
-            :type="icon.type"
-            :class="icon.class"
-          ></c-icon>
+          <c-icon :name="icon.name" :type="icon.type" :class="icon.class"></c-icon>
         </button>
       </div>
       <div
         v-show="toggleDropdown"
         :class="classes"
-        class="origin-top-right z-10 absolute mt-2 -mr-1  rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5"
+        class="origin-top-right z-10 absolute mt-2 -mr-1 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5"
       >
         <div
           class="py-2 w-max"
@@ -32,8 +28,8 @@
           <a
             v-for="item in items"
             v-bind:key="item.text"
-            @mousedown="action(item)"
-            class="flex block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
+            @mousedown="dropdownAction(item)"
+            class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
             role="menuitem"
           >
             {{ item.text }}
@@ -55,11 +51,14 @@ export default {
       required: true,
     },
     icon: {
-      type: Object
+      type: Object,
     },
     classes: {
       type: String,
     },
+    action: {
+      type: Function,
+    },
   },
   data() {
     return {
@@ -67,12 +66,12 @@ export default {
     };
   },
   methods: {
-    action(item) {
-      this.$emit(item.action)
+    dropdownAction(item) {
+      this.$emit("action", item);
     },
     close() {
       this.toggleDropdown = false;
-    }
+    },
   },
 };
 </script>

package/src/components/CMultiselect/CMultiselect.vue

@@ -4,12 +4,14 @@
     <v-select
       class="text-sm mt-1"
       :placeholder="placeholder"
-      multiple
-      taggable
+      :multiple="isMultiple"
+      :taggable="isTaggable"
+      :push-tags="pushTags"
       :selectable="() => (limitSelection == true ? value.length < 1 : value)"
       :filterable="false"
       v-model="value"
       :options="options"
+      @input="setSelectedOptions"
       @search="fetchOptions"
       :label="optionLabel"
     >
@@ -49,28 +51,59 @@ export default {
     },
     label: String,
     placeholder: String,
+    // whether multiple fields are allowed or not
+    isMultiple: {
+      type: Boolean,
+    },
+    // append newly created tags in options
+    pushTags: {
+      type: Boolean,
+    },
+    // whether to allow user to create new options
+    isTaggable: {
+      type: Boolean,
+    },
     limitSelection: {
       type: Boolean,
     },
     getOptions: {
+      // function to emit on search{
       type: Function,
     },
     customiseOption: {
       type: Boolean,
     },
+    // the name of the option to render in the selectpicker
     optionLabel: {
       type: String,
     },
+    // action to trigger after selecting option from dropdown
+    onSelectOptions: {
+      type: Function,
+    },
+    optionsSelected: {
+      type: Array,
+    },
   },
   computed: {},
   data() {
     return {
-      value: [],
+      loaderSearching: true,
+      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
     };
   },
   methods: {
-    fetchOptions(search, loading) {
-      this.$emit("getOptions", search, loading);
+    fetchOptions(search, loaderSearching) {
+      this.$emit("getOptions", search, loaderSearching);
+    },
+    setSelectedOptions(params) {
+      this.value = params;
+      this.$emit("onSelectOptions", params);
+    },
+  },
+  watch: {
+    optionsSelected() {
+      this.value = this.optionsSelected;
     },
   },
 };

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -2,7 +2,7 @@
   <div>
     <label class="text-sm text-gray-900">{{ label }}</label>
     <div class="w-full mt-1">
-      <vue-tel-input v-bind="bindProps"></vue-tel-input>
+      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
     </div>
   </div>
 </template>
@@ -15,16 +15,22 @@ export default {
   },
   props: {
     // eslint-disable-next-line vue/require-prop-type-constructor
-    phone: "",
+    phone: {
+      type: String,
+    },
     label: String,
   },
   data() {
     return {
+      value: this.phone,
       bindProps: {
         placeholder: "Enter phone number",
         inputClasses: ["px-3", "py-2", "text-sm"],
         inputId: "c-phone",
         wrapperClasses: "c-phone-wrapper",
+        showDialCode: false,
+        enabledCountryCode: false,
+        mode: "auto",
       },
     };
   },

package/src/components/CSelect/CSelect.vue

@@ -11,7 +11,7 @@
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
-    <div class="mt-1 relative">
+    <div class="relative" :class="label ? 'mt-1' : ''">
       <button
         type="button"
         @click="toggleDropdown = !toggleDropdown"
@@ -162,7 +162,7 @@ export default {
     // icons in dropdown list
     icon: { type: Object },
     // value to set as default option in dropdown
-    value: { type: Object },
+    value: { type: [Object, String] },
     // type of dropdown - gray,tertiary or default
     type: {
       type: String,
@@ -180,7 +180,7 @@ export default {
   data() {
     return {
       toggleDropdown: false,
-      selectedValue: this.value ? this.value.option || this.value : "",
+      selectedValue: this.value ? this.value || this.value.option : "",
       showSelectedValue: false,
       showFocus: false,
     };
@@ -213,7 +213,7 @@ export default {
   },
   watch: {
     value() {
-      this.selectedValue = this.value.option || this.value;
+      this.selectedValue = this.value.option ? this.value.option : this.value;
     },
   },
 };

package/src/components/index.js

@@ -20,6 +20,7 @@ export { default as CDualSelect } from "./CEditor";
 export { default as CEditor } from "./CDualSelect";
 export { default as CFormSectionHeading } from "./CFormSectionHeading";
 export { default as CIcon } from "./CIcon";
+export { default as CGroupedSelect } from "./CGroupedSelect";
 export { default as CIconDropdown } from "./CIconDropdown";
 export { default as CInput } from "./CInput";
 export { default as CInputAddon } from "./CInputAddon";

package/src/icons.js

@@ -27,7 +27,7 @@ export default {
     'product': 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4',
     'coupon': 'M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z',
     'taxes': 'M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3',
-    'clipboard-check': 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4',
+    'clipboard-check': 'M9 2a1 1 0 000 2h2a1 1 0 100-2H9z M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z',
     'cloud':'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z',
     'search':'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
     'menu-alt-2': 'M4 6h16M4 12h16M4 18h7',