@momentum-ui/web-components 2.16.2 → 2.16.3

package/src/[sandbox]/sandbox.mock.ts

@@ -0,0 +1,636 @@
+import { TableAdvanced } from "@/components/table-advanced/TableAdvanced";
+
+export const comboBoxOptions = [
+  "Afghanistan",
+  "Aland Islands",
+  "Albania",
+  "Algeria",
+  "American Samoa",
+  "Andorra",
+  "Angola",
+  "Anguilla",
+  "Antarctica",
+  "Antigua and Barbuda Antigua and Barbuda Antigua and Barbuda",
+  "Argentina"
+];
+
+export const tableWarns = [
+  { row: 2, col: 3 },
+  { row: 3, col: 3 }
+];
+export const comboBoxObjectOptions = [
+  { id: "0", country: "Afghanistan" },
+  { id: "1", country: "Aland Islands" },
+  { id: "2", country: "Albania" },
+  { id: "3", country: "Algeria" },
+  { id: "4", country: "American Samoa" },
+  { id: "5", country: "Andorra" },
+  { id: "6", country: "Angola" },
+  { id: "7", country: "Anguilla" },
+  { id: "8", country: "Antarctica" },
+  { id: "9", country: "Antigua and Barbuda" },
+  { id: "10", country: "Argentina" },
+  { id: "11", country: "Australia" },
+  { id: "12", country: "Austrian Empire" },
+  { id: "13", country: "Austria" },
+  { id: "14", country: "Azerbaijan" },
+  { id: "15", country: "Bahrain" },
+  { id: "16", country: "Bangladesh" },
+  { id: "17", country: "Barbados" },
+  { id: "18", country: "Bavaria" },
+  { id: "19", country: "Belarus" },
+  { id: "20", country: "Belgium" },
+  { id: "21", country: "Belize" },
+  { id: "22", country: "Cabo Verde" },
+  { id: "23", country: "Cambodia" },
+  { id: "24", country: "Cameroon" },
+  { id: "25", country: "Canada" },
+  { id: "26", country: "Cayman Islands" },
+  { id: "27", country: "The Central African Republic" },
+  { id: "28", country: "Chad" }
+];
+export const comboBoxObjectLongOptions = [
+  { id: "0", country: "Afghanistan" },
+  { id: "1", country: "Aland Islands" },
+  { id: "2", country: "Albania" },
+  { id: "3", country: "Algeria" },
+  { id: "4", country: "American Samoa" },
+  { id: "5", country: "Andorra" },
+  { id: "6", country: "Angola" },
+  { id: "7", country: "Anguilla" },
+  { id: "8", country: "Antarctica" },
+  { id: "9", country: "Antigua and Barbuda" },
+  { id: "10", country: "Argentina" },
+  { id: "11", country: "Australia" },
+  { id: "12", country: "Austrian Empire" },
+  { id: "13", country: "Austria" },
+  { id: "14", country: "Azerbaijan" },
+  { id: "15", country: "Bahrain" },
+  { id: "16", country: "Bangladesh" },
+  { id: "17", country: "Barbados" },
+  { id: "18", country: "Bavaria" },
+  { id: "19", country: "Belarus" },
+  { id: "20", country: "Belgium" },
+  { id: "21", country: "Belize" },
+  { id: "22", country: "Cabo Verde" },
+  { id: "23", country: "Cambodia" },
+  { id: "24", country: "Cameroon" },
+  { id: "25", country: "Canada" },
+  { id: "26", country: "Cayman Islands" },
+  { id: "27", country: "The Central African Republic" },
+  { id: "28", country: "Chad" },
+  { id: "29", country: "Afghanistan" },
+  { id: "31", country: "Aland Islands" },
+  { id: "32", country: "Albania" },
+  { id: "33", country: "Algeria" },
+  { id: "34", country: "American Samoa" },
+  { id: "35", country: "Andorra" },
+  { id: "36", country: "Angola" },
+  { id: "37", country: "Anguilla" },
+  { id: "38", country: "Antarctica" },
+  { id: "39", country: "Antigua and Barbuda" },
+  { id: "40", country: "Argentina" },
+  { id: "41", country: "Australia" },
+  { id: "42", country: "Austrian Empire" },
+  { id: "43", country: "Austria" },
+  { id: "44", country: "Azerbaijan" },
+  { id: "45", country: "Bahrain" },
+  { id: "46", country: "Bangladesh" },
+  { id: "47", country: "Barbados" },
+  { id: "48", country: "Bavaria" },
+  { id: "49", country: "Belarus" },
+  { id: "50", country: "Belgium" },
+  { id: "51", country: "Belize" },
+  { id: "52", country: "Cabo Verde" },
+  { id: "53", country: "Cambodia" },
+  { id: "54", country: "Cameroon" },
+  { id: "55", country: "Canada" },
+  { id: "56", country: "Cayman Islands" },
+  { id: "57", country: "The Central African Republic" },
+  { id: "58", country: "Chad" },
+  { id: "60", country: "Afghanistan" },
+  { id: "61", country: "Aland Islands" },
+  { id: "62", country: "Albania" },
+  { id: "63", country: "Algeria" },
+  { id: "64", country: "American Samoa" },
+  { id: "65", country: "Andorra" },
+  { id: "66", country: "Angola" },
+  { id: "67", country: "Anguilla" },
+  { id: "68", country: "Antarctica" },
+  { id: "69", country: "Antigua and Barbuda" },
+  { id: "70", country: "Argentina" },
+  { id: "71", country: "Australia" },
+  { id: "72", country: "Austrian Empire" },
+  { id: "73", country: "Austria" },
+  { id: "74", country: "Azerbaijan" },
+  { id: "75", country: "Bahrain" },
+  { id: "76", country: "Bangladesh" },
+  { id: "77", country: "Barbados" },
+  { id: "78", country: "Bavaria" },
+  { id: "79", country: "Belarus" },
+  { id: "80", country: "Belgium" },
+  { id: "81", country: "Belize" },
+  { id: "82", country: "Cabo Verde" },
+  { id: "83", country: "Cambodia" },
+  { id: "84", country: "Cameroon" },
+  { id: "85", country: "Canada" },
+  { id: "86", country: "Cayman Islands" },
+  { id: "87", country: "The Central African Republic" },
+  { id: "88", country: "Chad" },
+  { id: "90", country: "Afghanistan" },
+  { id: "91", country: "Aland Islands" },
+  { id: "92", country: "Albania" },
+  { id: "93", country: "Algeria" },
+  { id: "94", country: "American Samoa" },
+  { id: "95", country: "Andorra" },
+  { id: "96", country: "Angola" },
+  { id: "97", country: "Anguilla" },
+  { id: "98", country: "Antarctica" },
+  { id: "99", country: "Antigua and Barbuda" },
+  { id: "100", country: "Argentina" },
+  { id: "101", country: "Australia" },
+  { id: "102", country: "Austrian Empire" },
+  { id: "103", country: "Austria" },
+  { id: "104", country: "Azerbaijan" },
+  { id: "105", country: "Bahrain" },
+  { id: "106", country: "Bangladesh" },
+  { id: "107", country: "Barbados" },
+  { id: "108", country: "Bavaria" },
+  { id: "109", country: "Belarus" },
+  { id: "120", country: "Belgium" },
+  { id: "121", country: "Belize" },
+  { id: "122", country: "Cabo Verde" },
+  { id: "123", country: "Cambodia" },
+  { id: "124", country: "Cameroon" },
+  { id: "125", country: "Canada" },
+  { id: "126", country: "Cayman Islands" },
+  { id: "127", country: "The Central African Republic" },
+  { id: "128", country: "Chad" }
+];
+
+export const comboBoxComplexObjectOption = [
+  {
+    countryNameEn: "Andorra",
+    countryNameLocal: "Andorra",
+    countryCode: "AD",
+    currencyCode: "EUR",
+    currencyNameEn: "Euro",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "ca",
+    officialLanguageNameEn: "Catalan, Valencian",
+    officialLanguageNameLocal: "Català, Valencià",
+    countryCallingCode: "376",
+    region: "Europe",
+    flag: "🇦🇩"
+  },
+  {
+    countryNameEn: "Afghanistan",
+    countryNameLocal: "د افغانستان اسلامي دولتدولت اسلامی افغانستان, جمهوری اسلامی افغانستان",
+    countryCode: "AF",
+    currencyCode: "AFN",
+    currencyNameEn: "Afghan afghani",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "fa",
+    officialLanguageNameEn: "Persian",
+    officialLanguageNameLocal: "فارسی",
+    countryCallingCode: "93",
+    region: "Asia & Pacific",
+    flag: "🇦🇫"
+  },
+  {
+    countryNameEn: "Antigua and Barbuda",
+    countryNameLocal: "Antigua and Barbuda",
+    countryCode: "AG",
+    currencyCode: "XCD",
+    currencyNameEn: "East Caribbean dollar",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "en",
+    officialLanguageNameEn: "English",
+    officialLanguageNameLocal: "English",
+    countryCallingCode: "1268",
+    region: "South/Latin America",
+    flag: "🇦🇬"
+  },
+  {
+    countryNameEn: "Anguilla",
+    countryNameLocal: "Anguilla",
+    countryCode: "AI",
+    currencyCode: "XCD",
+    currencyNameEn: "East Caribbean dollar",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "en",
+    officialLanguageNameEn: "English",
+    officialLanguageNameLocal: "English",
+    countryCallingCode: "1264",
+    region: "South/Latin America",
+    flag: "🇦🇮"
+  },
+  {
+    countryNameEn: "Albania",
+    countryNameLocal: "Shqipëria",
+    countryCode: "AL",
+    currencyCode: "ALL",
+    currencyNameEn: "Albanian lek",
+    tinType: "NIPT",
+    tinName: "Numri i Identifikimit për Personin e Tatueshëm",
+    officialLanguageCode: "sq",
+    officialLanguageNameEn: "Albanian",
+    officialLanguageNameLocal: "Shqip",
+    countryCallingCode: "355",
+    region: "Europe",
+    flag: "🇦🇱"
+  },
+  {
+    countryNameEn: "Armenia",
+    countryNameLocal: "Հայաստան",
+    countryCode: "AM",
+    currencyCode: "AMD",
+    currencyNameEn: "Armenian dram",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "hy",
+    officialLanguageNameEn: "Armenian",
+    officialLanguageNameLocal: "Հայերեն",
+    countryCallingCode: "374",
+    region: "Europe",
+    flag: "🇦🇲"
+  },
+  {
+    countryNameEn: "Angola",
+    countryNameLocal: "Angola",
+    countryCode: "AO",
+    currencyCode: "AOA",
+    currencyNameEn: "Angolan kwanza",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "pt",
+    officialLanguageNameEn: "Portuguese",
+    officialLanguageNameLocal: "Português",
+    countryCallingCode: "244",
+    region: "Africa",
+    flag: "🇦🇴"
+  },
+  {
+    countryNameEn: "Antarctica",
+    countryNameLocal: "Antarctica, Antártico, Antarctique, Антарктике",
+    countryCode: "AQ",
+    currencyCode: "",
+    currencyNameEn: "",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "en",
+    officialLanguageNameEn: "English",
+    officialLanguageNameLocal: "English",
+    countryCallingCode: "672",
+    region: "Asia & Pacific",
+    flag: "🇦🇶"
+  },
+  {
+    countryNameEn: "Argentina",
+    countryNameLocal: "Argentina",
+    countryCode: "AR",
+    currencyCode: "ARS",
+    currencyNameEn: "Argentine peso",
+    tinType: "CUIT",
+    tinName: "Código Único de Identificación Tributaria",
+    officialLanguageCode: "es",
+    officialLanguageNameEn: "Spanish, Castilian",
+    officialLanguageNameLocal: "Español",
+    countryCallingCode: "54",
+    region: "South/Latin America",
+    flag: "🇦🇷"
+  },
+  {
+    countryNameEn: "American Samoa",
+    countryNameLocal: "American Samoa",
+    countryCode: "AS",
+    currencyCode: "USD",
+    currencyNameEn: "United States dollar",
+    tinType: "",
+    tinName: "",
+    officialLanguageCode: "en",
+    officialLanguageNameEn: "English",
+    officialLanguageNameLocal: "English",
+    countryCallingCode: "1684",
+    region: "Asia & Pacific",
+    flag: "🇦🇸"
+  }
+];
+
+export const breadCrumb = [
+  {
+    link: "/one",
+    label: "One"
+  },
+  {
+    link: "/two",
+    label: "Two"
+  },
+  {
+    link: "/three",
+    label: "Three"
+  },
+  {
+    link: "/four",
+    label: "Four"
+  }
+];
+
+export const cardMenuItems = ["Edit", "View", "Duplicate", "Delete"];
+
+export const DraggableOptions = [
+  {
+    id: "602d03acfe232cf5498f00f4",
+    index: 0,
+    guid: "c5dea7ec-9f5b-4370-a9b2-6c5fddee13c7",
+    isActive: true,
+    balance: "$3,173.68",
+    age: 22,
+    name: {
+      first: "Tyson",
+      last: "Johnson"
+    },
+    company: "POOCHIES",
+    email: "tyson.johnson@poochies.net",
+    phone: "+1 (821) 474-3974",
+    address: "192 Frank Court, Fairforest, Puerto Rico, 7200",
+    registered: "Thursday, September 3, 2015 9:51 PM"
+  },
+  {
+    id: "602d03ac8b9afdc705418e31",
+    index: 1,
+    guid: "ca04c803-6793-40cd-a9a7-79e7805a15cb",
+    isActive: false,
+    balance: "$2,486.41",
+    age: 31,
+    name: {
+      first: "Marquez",
+      last: "Roy"
+    },
+    company: "ZILPHUR",
+    email: "marquez.roy@zilphur.me",
+    phone: "+1 (944) 586-2079",
+    address: "775 Ralph Avenue, Ebro, Utah, 7191",
+    registered: "Saturday, August 30, 2014 11:20 PM"
+  },
+  {
+    id: "602d03ace70d8ad1e5024268",
+    index: 2,
+    guid: "97578d31-62b6-44b6-970d-6407bcbccc16",
+    isActive: false,
+    balance: "$3,379.41",
+    age: 30,
+    name: {
+      first: "Hardin",
+      last: "Barrera"
+    },
+    company: "BULLJUICE",
+    email: "hardin.barrera@bulljuice.info",
+    phone: "+1 (980) 431-2269",
+    address: "225 Tapscott Avenue, Grimsley, Palau, 1192",
+    registered: "Wednesday, April 29, 2015 2:50 AM"
+  },
+  {
+    id: "602d03acbac2cc3e6df2d133",
+    index: 3,
+    guid: "0134bf22-bd94-497c-a93e-f814a4e7a496",
+    isActive: false,
+    balance: "$1,821.36",
+    age: 34,
+    name: {
+      first: "Jacquelyn",
+      last: "Holland"
+    },
+    company: "KENGEN",
+    email: "jacquelyn.holland@kengen.ca",
+    phone: "+1 (821) 463-3013",
+    address: "391 Wilson Avenue, Macdona, Vermont, 4420",
+    registered: "Saturday, May 25, 2019 11:58 PM"
+  },
+  {
+    id: "602d03ac5cee4defc60ba471",
+    index: 4,
+    guid: "223ffdf8-21aa-447c-8e1a-f7cd4af4b31d",
+    isActive: true,
+    balance: "$2,018.23",
+    age: 35,
+    name: {
+      first: "Vang",
+      last: "Herrera"
+    },
+    company: "ACUMENTOR",
+    email: "vang.herrera@acumentor.tv",
+    phone: "+1 (948) 474-2072",
+    address: "701 Voorhies Avenue, Malott, Marshall Islands, 4001",
+    registered: "Wednesday, March 5, 2014 3:27 AM"
+  },
+  {
+    id: "602d03acb5d2212dd09311fc",
+    index: 5,
+    guid: "97318c86-23ad-4847-99b3-416238f71531",
+    isActive: true,
+    balance: "$3,689.61",
+    age: 37,
+    name: {
+      first: "Patrick",
+      last: "Hodge"
+    },
+    company: "ENERSAVE",
+    email: "patrick.hodge@enersave.us",
+    phone: "+1 (827) 417-3436",
+    address: "240 Love Lane, Bayview, Alaska, 6750",
+    registered: "Tuesday, June 24, 2014 11:33 PM"
+  },
+  {
+    id: "602d03ac43a0d873d5511435",
+    index: 6,
+    guid: "2bea681f-efd8-4966-8b45-a46da53e133b",
+    isActive: true,
+    balance: "$2,386.87",
+    age: 28,
+    name: {
+      first: "Lou",
+      last: "Cochran"
+    },
+    company: "BRAINQUIL",
+    email: "lou.cochran@brainquil.biz",
+    phone: "+1 (969) 444-2583",
+    address: "736 Gem Street, Chicopee, Tennessee, 7611",
+    registered: "Friday, August 5, 2016 1:31 AM"
+  },
+  {
+    id: "602d03ac7d507918a600dda4",
+    index: 7,
+    guid: "3f79944a-e08f-46ab-a829-a40d23896638",
+    isActive: true,
+    balance: "$3,996.95",
+    age: 31,
+    name: {
+      first: "Sharron",
+      last: "Monroe"
+    },
+    company: "ROCKYARD",
+    email: "sharron.monroe@rockyard.org",
+    phone: "+1 (973) 430-2573",
+    address: "382 Dooley Street, Yogaville, South Carolina, 8634",
+    registered: "Tuesday, April 18, 2017 2:22 PM"
+  },
+  {
+    id: "602d03acc1d5abd101ea7f78",
+    index: 8,
+    guid: "77a2b7e3-aa16-4f1e-9741-788353dc40b7",
+    isActive: true,
+    balance: "$1,634.10",
+    age: 32,
+    name: {
+      first: "Juliana",
+      last: "Morrow"
+    },
+    company: "ZERBINA",
+    email: "juliana.morrow@zerbina.co.uk",
+    phone: "+1 (845) 507-3470",
+    address: "221 Guernsey Street, Dargan, New York, 8625",
+    registered: "Tuesday, October 23, 2018 5:24 PM"
+  },
+  {
+    id: "602d03aca1732859ad1933c8",
+    index: 9,
+    guid: "05f5da4e-8b6d-4d7d-92ad-a182362d8414",
+    isActive: false,
+    balance: "$1,819.37",
+    age: 32,
+    name: {
+      first: "Oliver",
+      last: "Carney"
+    },
+    company: "NIQUENT",
+    email: "oliver.carney@niquent.biz",
+    phone: "+1 (982) 403-3194",
+    address: "302 Troy Avenue, Hartsville/Hartley, Oklahoma, 5663",
+    registered: "Tuesday, December 1, 2015 6:44 AM"
+  }
+];
+
+export const SimpleTable: {
+  config: TableAdvanced.Config;
+  dataCsv: TableAdvanced.Data;
+  dataList: TableAdvanced.Data;
+  dataList2d: TableAdvanced.Data;
+} = {
+  config: {
+    isStickyHeader: true,
+
+    cols: {
+      isResizable: true,
+      define: [
+        { id: "c1", title: "Col1", sorter: "byString" },
+        { id: "c2", title: "Col2", filters: "forString" },
+        { id: "c3", title: "Col3" }
+      ]
+    }
+  },
+  dataCsv: {
+    csv: `data11, data21, data31
+    data12, data22, data32
+    data13, data23, data33`
+  },
+  dataList: {
+    list: ["data11", "data21", "data31", "data12", "data22", "data32", "data13", "data23", "data33"]
+  },
+  dataList2d: {
+    list2d: [
+      ["data11", "data21", "data31"],
+      ["data12", "data22", "data32"],
+      ["data13", "data23", "data33"]
+    ]
+  }
+};
+
+export const ComplexTable: { config: TableAdvanced.Config; data: TableAdvanced.Data } = {
+  config: {
+    isStickyHeader: true,
+
+    rows: {
+      isDraggable: true,
+      selectable: "multiple"
+    },
+
+    cols: {
+      isDraggable: true,
+      isResizable: true,
+      collapse: "c1",
+      define: [
+        {
+          groupName: "Group 1",
+          children: [
+            { id: "c1", title: "Col1f", sorter: "byString", filters: "forString", width: "25%" },
+            { id: "c2", title: "Col2s" },
+            { id: "c3", title: "Col3" }
+          ]
+        },
+        { id: "c4", title: "Col4h", isHeader: true },
+        { id: "c5", title: "Col5s", sorter: "byString" },
+        {
+          groupName: "group2",
+          children: [
+            { id: "c6", title: "col6f", width: "25%" },
+            { id: "c7", title: "col7", width: "25%" }
+          ]
+        }
+      ]
+    }
+  },
+  data: {
+    list2d: [
+      ["col _tmp_ 11", "12", "13", "14", "15", "str_tmp2_", "txt _tmp2_ txt"],
+      ["_tmp_ col21 sub", "22", "23", "24", "25", "26", "27"],
+      ["col31 sub_tmp_", "32", "33", "34", "35", "36", "37"]
+    ]
+  }
+};
+
+// ------------------
+
+export const ShortkeyTable: { config: TableAdvanced.Config; data: TableAdvanced.Data } = {
+  config: {
+    isStickyHeader: true,
+
+    rows: {
+      isDraggable: true,
+      selectable: "multiple"
+    },
+
+    cols: {
+      isResizable: true,
+      define: [
+        { id: "c1", title: "Group", sorter: "byString", width: "30%", filters: "forString" },
+        { id: "c2", title: "Action", sorter: "byString", width: "40%" },
+        { id: "c3", title: "Shortcut Key", width: "30%", filters: "forString" }
+      ]
+    },
+
+    head: {
+      tableDescription: "Column headers with buttons are sortable"
+    }
+  },
+
+  data: {
+    list2d: [
+      ["Active Task List", "Switch between tasks", "Ctrl + Alt + T"],
+      ["Active Task List", "Expand and collapse task list", "Ctrl + Alt + C _info_"],
+      ["Agent State", "Available for all channels including call chat email and social channel", "Ctrl + Alt + R"],
+      ["Active Agent State List", "Idle for all channels", "Ctrl + Alt + N"],
+      ["Application", "Switch between popovers", "Ctrl + Alt + E"],
+      ["Application", "Maximize and minimize popover view maximize and minimize", "Ctrl + Alt + Q _warn_"],
+      ["Call Handling", "Open the list of chat templates", "Ctrl + Alt + A"],
+      ["Call Handling", "Attach a file to the chat", "Ctrl + Alt + S _error_"],
+      ["Edit CAD Variables", "Save edited call variable values", "Ctrl + Alt + O"],
+      ["Edit CAD Variables", "Revert edited call variable values", "Ctrl + Alt + N _warn_"],
+      ["Email Handling", "Send email", "Ctrl + Alt + S"]
+    ]
+  }
+};

package/src/[sandbox]/sandbox.scss

@@ -0,0 +1,66 @@
+.container {
+  box-sizing: border-box;
+  height: calc(100vh - 1.75rem);
+  max-width: 100%;
+  overflow-y: auto;
+  padding: 1rem;
+  width: 100%;
+  background: var(--md-primary-bg-color);
+}
+
+.container-color-bg-color-options {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#color-dropdown {
+  margin-left: 0.5rem;
+  width: 240px;
+}
+
+.header-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.toggle-container {
+  height: 1.75rem;  
+  gap: 0.5rem;    
+}
+
+.explorer {  
+  width: calc(100vw - 1rem);
+  height: calc(100vh - 1.75rem);
+}
+
+.explorer::part(tabs-list) {
+  height: calc(100vh - 1.75rem);
+  overflow-y: auto;  
+  flex-shrink: 0;
+}
+
+.row::before,
+.row::after {
+  content: " ";
+  display: table;
+}
+
+.row::after {
+  clear: both;
+}
+
+.md-padding__vertical {
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+}
+
+.pills-dropdown md-dropdown::part(dropdown-header) {
+  border-radius: 30px;
+}
+#menu-inside::part(overlay-content) {
+  overflow: visible;
+}