@progressive-development/pd-order 0.1.125 → 0.1.127

package/dist/node_modules/@progressive-development/pd-icon/src/PdIcon.js

@@ -0,0 +1,595 @@
+import { LitElement, css, html, svg } from "lit";
+import { PDColorStyles } from "@progressive-development/pd-shared-styles";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ * 
+ * LitElement to display common icons.
+ * Available Icons are accessible over the ALL_ICONS array or the specific constants.
+ * 
+ * Styling is made via custom css properties and css class attributes.
+ * 
+ * ### Custom Properties: #####
+ * 
+ * --pd-icon-size                     => Define the size of the icon, 2rem as default
+ * 
+ * --pd-icon-bg-col                   => Background color for the icon
+ * --pd-icon-bg-col-hover             => Background hover color for the icon
+ * --pd-icon-primary-bg-col           => Background color for the icon with primary class
+ * --pd-icon-primary-bg-col-hover     => Background hover color for the icon with primary class (use --pd-icon-primary-bg-col as fallback)
+ * --pd-icon-bg-col-active            => Background color for active icon
+ * 
+ * --pd-icon-col                      => Color for the icon element
+ * --pd-icon-col-active               => Color for active icon element
+ * --pd-icon-col-hover                => Hover color for the icon element
+ * --pd-icon-col-active-hover 
+ * --pd-icon-stroke-col               =>
+ * --pd-icon-stroke-col-hover         =>
+ * --pd-icon-stroke-width             => 
+ * --pd-icon-col-disabled             =>
+ * --pd-icon-stroke-col-active        =>
+ * --pd-icon-stroke-col-active-hover  => 
+ * --pd-icon-inner-col                => Color for the inner icon element
+
+ * ### CSS classes: #####
+ * round      => Round icon
+ * small      => Small icon
+ * medium     => Medium icon
+ * primary    => Primary icon
+ * 
+ * Links:
+ * // // https://github.com/syu93/lit-icon/blob/master/src/lit-icon.js
+ */
+const ICON_CLOSE = "closeLink";
+const ICON_XCLOSE = "xCloseIcon";
+const ICON_ARROW_BACK = "arrowBack";
+const ICON_TOGGLE_COLLAPSE = "toggleCollapse";
+const ICON_TOOGLE_ARROW = "toggleArrow";
+const ICON_CHECKBOX = "checkBox";
+const ICON_CHECKBOX_ONLY_CHECK = "checkBoxOnlyCheck";
+const ICON_ADD = "addIcon";
+const ICON_NEXT = "nextArrow";
+const ICON_PREVIOUS = "previousArrow";
+const ICON_STAR = "starIcon";
+const ICON_CAMERA = "cameraIcon";
+const ICON_DELETE = "deleteIcon";
+const ICON_DELETE_NEW = "deleteIcon2";
+const ICON_SETTINGS = "settingsIcon";
+const ICON_RULES = "rulesIcon";
+const ICON_USER = "userIcon";
+const ICON_LEAVE = "leaveGame";
+const ICON_STAT = "statIcon";
+const ICON_SYNC = "syncIcon";
+const ICON_DATE = "dateIcon";
+const ICON_DETAIL = "detailIcon";
+const ICON_ERROR = "errorIcon";
+const ICON_ERROR_FLD = "errorIconFld";
+const ICON_HELP = "helpIcon";
+const ICON_HELP_FLD = "helpIconFld";
+const ICON_INFO = "infoIcon";
+const ICON_INFO_FLD = "infoIconFld";
+const ICON_WARNING = "warningIcon";
+const ICON_WARNING_FLD = "warningIconFld";
+const ICON_BURGER_MENU = "burgerMenuIcon";
+const ICON_EDIT = "editIcon";
+const ICON_EDIT_NEW = "editIcon2";
+const ICON_SEARCH = "searchIcon";
+const ICON_PHONE = "phoneIcon";
+const ICON_MAIL = "mailIcon";
+const arrowBack = "14.83 3.99 11.84 1 7.84 5 4.84 8 0.84 12 4.84 16 11.84 23 14.87 20.03 8.96 14.14 23.16 14.14 23.16 9.99 8.86 9.97 14.83 3.99";
+const iconPlus = "21 10 14 10 14 3 10 3 10 10 3 10 3 14 10 14 10 21 14 21 14 14 21 14 21 10";
+const iconMinus = "21 11.52 21 9.97 14 9.97 10 9.97 3 9.97 3 11.52 3 12.41 3 13.97 10 13.97 14 13.97 21 13.97 21 12.41 21 11.52";
+const iconSquare = "21 10.24 21 3.24 14 3.24 10 3.24 3 3.24 3 10.24 3 14.24 3 21.24 10 21.24 14 21.24 21 21.24 21 14.24 21 10.24";
+const iconCross = "16.95 4.22 12 9.17 7.05 4.22 4.22 7.05 9.17 12 4.22 16.95 7.05 19.78 12 14.83 16.95 19.78 19.78 16.95 14.83 12 19.78 7.05 16.95 4.22";
+const iconRhombusH = "16 5 12 1 8 5 5 8 1 12 5 16 8 19 12 23 16 19 19 16 23 12 19 8 16 5";
+const iconRhombusV = "19 16 23 12 21 10 20 9 12 1 4 9 3 10 1 12 5 16 8 19 12 23 16 19 19 16";
+const iconArrowRight = "13 4.97 9 0.97 7 2.97 6 3.97 14 11.97 6 19.97 7 20.97 9 22.97 13 18.97 16 15.97 20 11.97 16 7.97 13 4.97";
+const iconArrowLeft = "17 2.97 15 0.97 11 4.97 8 7.97 4 11.97 8 15.97 11 18.97 15 22.97 17 20.97 18 19.97 10 11.97 18 3.97 17 2.97";
+const iconArrowUp = "21 17 23 14.97 21 12.97 20 11.97 12 3.97 4 11.97 3 12.97 1 14.97 2 16 4 18 12 10 20 18 21 17";
+const iconArrowDown = "19 13 23 9 21 7 20 6 12 14 4 6 3 7 1 9 5 13 8 16 12 20 16 16 19 13";
+const iconCheck = "20 3.5 9 14.5 4 9.5 3 10.5 1 12.5 5 16.5 5 16.5 9 20.5 13 16.5 16 13.5 23 6.5 22 5.5 20 3.5";
+const iconStar = "13.48 5.84 12 2.85 10.55 5.85 9 8.85 2.38 9.84 7.19 14.53 6.05 21.15 12 18.02 17.95 21.15 16.81 14.53 21.62 9.84 14.97 8.87 13.48 5.84";
+const iconset = {
+  // TODO remove one close link
+  [ICON_CLOSE]: {
+    cssClass: "close-link",
+    state: {
+      activ: iconCross,
+      activAn: `${iconCross};${iconRhombusH};${iconArrowRight}`,
+      inactiv: iconArrowRight,
+      inActivAn: `${iconArrowRight};${iconRhombusH};${iconCross}`
+    }
+  },
+  [ICON_XCLOSE]: {
+    cssClass: "x-close",
+    state: {
+      activ: iconArrowLeft,
+      activAn: `${iconArrowLeft};${iconRhombusH};${iconCross}`,
+      inactiv: iconArrowLeft,
+      inActivAn: `${iconCross};${iconRhombusH};${iconArrowLeft}`
+    }
+  },
+  // TODO animation
+  [ICON_ARROW_BACK]: {
+    cssClass: "arrow-back",
+    state: {
+      activ: arrowBack,
+      activAn: `${arrowBack};${iconRhombusH};${arrowBack}`,
+      inactiv: arrowBack,
+      inActivAn: `${arrowBack};${iconRhombusH};${arrowBack}`
+    }
+  },
+  [ICON_TOGGLE_COLLAPSE]: {
+    cssClass: "toggle-collapse",
+    state: {
+      activ: iconPlus,
+      activAn: `${iconPlus};${iconSquare};${iconMinus}`,
+      inactiv: iconMinus,
+      inActivAn: `${iconMinus};${iconSquare};${iconPlus}`
+    }
+  },
+  [ICON_TOOGLE_ARROW]: {
+    cssClass: "toggle-arrow",
+    state: {
+      activ: iconArrowUp,
+      activAn: `${iconArrowUp};${iconRhombusV};${iconArrowDown}`,
+      inactiv: iconArrowDown,
+      inActivAn: `${iconArrowDown};${iconRhombusV};${iconArrowUp}`
+    }
+  },
+  [ICON_CHECKBOX]: {
+    cssClass: "checkbox",
+    state: {
+      activ: iconCheck,
+      activAn: `${iconCross};${iconRhombusH};${iconCheck}`,
+      inactiv: iconCross,
+      inActivAn: `${iconCheck};${iconRhombusH};${iconCross}`
+    }
+  },
+  [ICON_CHECKBOX_ONLY_CHECK]: {
+    cssClass: "checkbox",
+    state: {
+      active: iconCheck,
+      activAn: `${iconSquare};${iconRhombusH};${iconCheck}`,
+      inactiv: void 0,
+      inActivAn: `${iconCheck};${iconRhombusH};${void 0}`
+    }
+  },
+  [ICON_ADD]: {
+    cssClass: "add-icon",
+    state: {
+      activ: iconPlus,
+      activAn: `${iconPlus};${iconRhombusH};${iconPlus}`,
+      inactiv: iconPlus,
+      inActivAn: `${iconPlus};${iconRhombusH};${iconPlus}`
+    }
+  },
+  // TODO remove unecessary animations states
+  [ICON_NEXT]: {
+    cssClass: "next",
+    state: {
+      activ: iconArrowRight,
+      activAn: `${iconArrowRight};${iconRhombusH};${iconArrowRight}`,
+      inactiv: iconArrowRight,
+      inActivAn: `${iconArrowRight};${iconRhombusH};${iconArrowRight}`
+    }
+  },
+  [ICON_PREVIOUS]: {
+    cssClass: "previousArrow",
+    state: {
+      activ: iconArrowLeft,
+      activAn: `${iconArrowLeft};${iconRhombusH};${iconArrowLeft}`,
+      inactiv: iconArrowLeft,
+      inActivAn: `${iconArrowLeft};${iconRhombusH};${iconArrowLeft}`
+    }
+  },
+  [ICON_STAR]: {
+    cssClass: "next",
+    state: {
+      activ: iconStar,
+      activAn: `${iconStar};${iconRhombusH};${iconStar}`,
+      inactiv: iconStar,
+      inActivAn: `${iconStar};${iconRhombusH};${iconStar}`
+    }
+  },
+  [ICON_CAMERA]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="3.2"/>
+                                <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
+                              </svg>`
+  },
+  [ICON_DELETE_NEW]: {
+    icon: () => svg`<svg viewBox="0 0 32 32">
+      <path d="M10 24h4v-10h-4v10zM22 6v-2c0-2.208-1.792-4-4-4h-4c-2.208 0-4 1.792-4 4v2h-10v2c0 1.104 0.896 2 2 2v18c0 2.208 1.792 4 4 4h20c2.208 0 4-1.792 4-4v-18c1.106 0 2-0.896 2-2v-2h-10zM14 4h4v2h-4v-2zM26 26c0 1.106-0.894 2-2 2h-16c-1.104 0-2-0.894-2-2v-14c0-1.104 0.896-2 2-2h16c1.106 0 2 0.896 2 2v14zM18 24h4v-10h-4v10z"></path>
+    </svg>`
+  },
+  [ICON_DELETE]: {
+    icon: () => svg`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12z"/>
+    </svg>`
+  },
+  [ICON_SETTINGS]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
+                             </svg>`
+  },
+  [ICON_RULES]: {
+    icon: (status) => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="${status} rules-icon">
+            <rect x="48" y="87.5" width="70.51" height="80" />
+            <rect x="160.81" y="87.5" width="303.19" height="80" />
+            <rect x="48" y="216" width="70.51" height="80" />
+            <rect x="160.81" y="216" width="303.19" height="80" />
+            <rect x="48" y="344.5" width="70.51" height="80" />
+            <rect x="160.81" y="344.5" width="303.19" height="80" />
+        </svg>`
+  },
+  [ICON_USER]: {
+    icon: () => svg`<svg class="userIcon" viewBox="0 0 24 24">
+                                <path d="M3.14,20.86V18.64c0-2.43,4-4.43,8.86-4.43s8.86,2,8.86,4.43v2.22ZM7.57,7.57A4.43,4.43,0,1,1,12,12,4.43,4.43,0,0,1,7.57,7.57Z" />
+                              </svg>`
+  },
+  [ICON_LEAVE]: {
+    icon: (status) => svg`<svg xmlns="http://www.w3.org/2000/svg" class="leave-game ${status}" viewBox="0 0 512 512">
+                    <path d="M233.29,304.11l-24.21,28.32H122.53a23.72,23.72,0,0,0,0,47.44h98.05a23.72,23.72,0,0,0,18.62-9l32.44-38.62Z" />
+                    <path d="M475.12,255.77l-58.54-16-23.95-55.9c-3.8-8.87-38.31-35.7-45.33-38.25l-69.59-25.31a23.77,23.77,0,0,0-17.23.4l-75.91,31.63a23.73,23.73,0,1,0,18.25,43.8l67.37-28.08L296,177.51c-.2.43-.44.84-.63,1.28l-43.2,95.12c-6.21,14.31,2.44,26,13.51,37.1l66,48.52-42.71,96.11a23.72,23.72,0,1,0,43.35,19.27L383,361a23.71,23.71,0,0,0-8-29l-38.53-27.3a45.56,45.56,0,0,0,3.77-6.88l24.94-57.47L377.48,269a23.68,23.68,0,0,0,15.57,13.54l69.58,19a23.72,23.72,0,0,0,12.49-45.77Z" />
+                    <circle cx="395.39" cy="101.86" r="46.6" />
+                    <path d="M173.89,225h-108a5.4,5.4,0,1,1,0-10.8h108a5.4,5.4,0,0,1,0,10.8Z" />
+                    <path d="M132.84,160.74H24.8a5.41,5.41,0,0,1,0-10.81h108a5.41,5.41,0,0,1,0,10.81Z" />
+                    <path d="M190.1,96.46H90.7a5.41,5.41,0,0,1,0-10.81h99.4a5.41,5.41,0,0,1,0,10.81Z" />
+                </svg>`
+  },
+  [ICON_STAT]: {
+    icon: () => svg`<svg class="stat-icon" viewBox="0 0 24 24">
+            <path d="M16.16,20.31V7.84h4.15V20.31Zm-6.24,0V3.69h4.16V20.31Zm-6.23,0V12H7.84v8.31Z" />
+        </svg>`
+  },
+  [ICON_SYNC]: {
+    icon: () => svg`<svg class="sync-icon" viewBox="0 0 32 32">
+            <path d="M29.594 15.875l-4.594-4.688-4.563 4.688h2.719v0.125q0 1.5-0.563 2.797t-1.531 2.281-2.281 1.547-2.813 0.563q-1.531 0-2.875-0.609t-2.313-1.641l-2.469 2.531q1.469 1.5 3.438 2.375t4.219 0.875q2.219 0 4.172-0.844t3.406-2.297 2.297-3.406 0.844-4.172v-0.125h2.906zM8.813 16.188v-0.188q0-1.5 0.563-2.797t1.531-2.281 2.281-1.547 2.781-0.563q1.563 0 2.922 0.609t2.328 1.672l2.469-2.531q-1.469-1.5-3.453-2.391t-4.266-0.891q-2.188 0-4.141 0.844t-3.406 2.297-2.297 3.406-0.844 4.172v0.188h-2.875l4.594 4.688 4.563-4.688h-2.75z"></path>
+        </svg>`
+  },
+  [ICON_DATE]: {
+    icon: () => svg`<svg class="date-icon" viewBox="0 0 32 32">
+            <path d="M27.2 4.8h-1.44v3.2h-5.12v-3.2h-9.28v3.2h-5.12v-3.2h-1.44c-1.76 0-3.2 1.44-3.2 3.2v19.2c0 1.76 1.44 3.2 3.2 3.2h22.4c1.76 0 3.2-1.44 3.2-3.2v-19.2c0-1.76-1.44-3.2-3.2-3.2zM27.2 27.2h-22.4v-12.8h22.4v12.8zM9.92 1.6h-2.24v5.44h2.24v-5.44zM24.32 1.6h-2.24v5.44h2.24v-5.44z"></path>
+        </svg>`
+  },
+  [ICON_DETAIL]: {
+    icon: () => svg`<svg class="detail-icon" viewBox="0 0 32 32">
+            <path d="M16 6c-6.979 0-13.028 4.064-16 10 2.972 5.936 9.021 10 16 10s13.027-4.064 16-10c-2.972-5.936-9.021-10-16-10zM23.889 11.303c1.88 1.199 3.473 2.805 4.67 4.697-1.197 1.891-2.79 3.498-4.67 4.697-2.362 1.507-5.090 2.303-7.889 2.303s-5.527-0.796-7.889-2.303c-1.88-1.199-3.473-2.805-4.67-4.697 1.197-1.891 2.79-3.498 4.67-4.697 0.122-0.078 0.246-0.154 0.371-0.228-0.311 0.854-0.482 1.776-0.482 2.737 0 4.418 3.582 8 8 8s8-3.582 8-8c0-0.962-0.17-1.883-0.482-2.737 0.124 0.074 0.248 0.15 0.371 0.228zM16 12.813c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
+        </svg>`
+  },
+  [ICON_ERROR]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m12,2.5c5.24,0,9.5,4.26,9.5,9.5s-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12,6.76,2.5,12,2.5m0-2C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
+            <path d="m17.44,8.48l-1.92-1.92-3.52,3.52-3.52-3.52-1.92,1.92,3.52,3.52-3.52,3.52,1.92,1.92s1.84-1.84,3.52-3.52l3.52,3.52,1.92-1.92-3.52-3.52c1.68-1.68,3.52-3.52,3.52-3.52Z" />
+        </svg>`
+  },
+  [ICON_ERROR_FLD]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m12,.5C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
+            <path d="m17.44,8.48l-1.92-1.92-3.52,3.52-3.52-3.52-1.92,1.92,3.52,3.52-3.52,3.52,1.92,1.92s1.84-1.84,3.52-3.52l3.52,3.52,1.92-1.92-3.52-3.52c1.68-1.68,3.52-3.52,3.52-3.52Z"
+                  fill="var(--pd-icon-inner-col, #fff)" />
+        </svg>`
+  },
+  [ICON_HELP]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="m12,2.5c5.24,0,9.5,4.26,9.5,9.5s-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12,6.76,2.5,12,2.5m0-2C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
+          <path d="m7.29,9.73c.06-2.74,1.86-4.73,4.65-4.73,3.62,0,4.77,2.22,4.77,3.7,0,1.86-.79,2.6-1.61,3.24-.82.61-1.7,1.11-1.88,2.24v.73h-2.59v-.86c.11-1.67.9-2.41,1.67-3.01.75-.59,1.4-1.03,1.4-2.07,0-1.17-.61-1.72-1.63-1.72-1.38,0-1.95,1.13-1.97,2.49,0,0-2.82,0-2.82,0Z" />
+          <rect x="10.37" y="16.05" width="3.01" height="2.95" />
+        </svg>`
+  },
+  [ICON_HELP_FLD]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m12,.5C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
+            <path d="m7.29,9.73c.06-2.74,1.86-4.73,4.65-4.73,3.62,0,4.77,2.22,4.77,3.7,0,1.86-.79,2.6-1.61,3.24-.82.61-1.7,1.11-1.88,2.24v.73h-2.59v-.86c.11-1.67.9-2.41,1.67-3.01.75-.59,1.4-1.03,1.4-2.07,0-1.17-.61-1.72-1.63-1.72-1.38,0-1.95,1.13-1.97,2.49,0,0-2.82,0-2.82,0Z"
+                    fill="var(--pd-icon-inner-col, #fff)" />
+            <rect x="10.37" y="16.05" width="3.01" height="2.95" fill="var(--pd-icon-inner-col, #fff)" />
+        </svg>`
+  },
+  [ICON_INFO]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m13.5,7.29h-3v-2.29h3v2.29h0Zm-3,1.57h3v10.14h-3s0-10.14,0-10.14Z" />
+            <path d="m12,2.5c5.24,0,9.5,4.26,9.5,9.5s-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12,6.76,2.5,12,2.5m0-2C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
+        </svg>`
+  },
+  [ICON_INFO_FLD]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m12,.5C5.65.5.5,5.65.5,12s5.15,11.5,11.5,11.5,11.5-5.15,11.5-11.5S18.35.5,12,.5h0Z" />
+            <path d="m13.5,7.29h-3v-2.29h3v2.29h0Zm-3,1.57h3v10.14h-3s0-10.14,0-10.14Z" fill="var(--pd-icon-inner-col, #fff)" />
+        </svg>`
+  },
+  [ICON_WARNING]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m11,17.54h2v1.64h-2v-1.64h0Zm2-1.12h-2v-7.24h2s0,7.24,0,7.24Z" />
+            <path d="m21.92,22.49H2.08c-.35,0-.68-.18-.86-.48-.18-.3-.19-.67-.03-.98L11.27,2.04c.17-.33.49-.51.89-.53.37,0,.71.21.88.54l9.77,18.98c.16.31.15.68-.04.98s-.5.48-.85.48Zm-18.19-2h16.55L12.14,4.67,3.74,20.49Z" />
+        </svg>`
+  },
+  [ICON_WARNING_FLD]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="m21.92,22.49H2.08c-.35,0-.68-.18-.86-.48-.18-.3-.19-.67-.03-.98L11.27,2.04c.17-.33.49-.51.89-.53.37,0,.71.21.88.54l9.77,18.98c.16.31.15.68-.04.98s-.5.48-.85.48Z" />
+            <path d="m11,17.54h2v1.64h-2v-1.64h0Zm2-1.12h-2v-7.24h2s0,7.24,0,7.24Z" fill="var(--pd-icon-inner-col, #fff)" />
+        </svg>`
+  },
+  [ICON_BURGER_MENU]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+            <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
+        </svg>`
+  },
+  [ICON_EDIT]: {
+    icon: () => svg`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+    </svg>`
+  },
+  [ICON_EDIT_NEW]: {
+    icon: () => svg`<svg viewBox="0 0 32 32">
+    <path d="M28 32h-24c-2.208 0-4-1.792-4-4v-24c0-2.208 1.792-4 4-4h18l-4 4h-12c-1.104 0-2 0.896-2 2v20c0 1.106 0.896 2 2 2h20c1.106 0 2-0.894 2-2v-12l4-4v18c0 2.208-1.792 4-4 4zM28 4l-2-2v-2c0 0 6-0.062 6 6h-2l-2-2zM10 22v-6h2l4 4v2h-6zM28 8l-10 10-4-4 10-10 4 4z"></path>
+    </svg> `
+  },
+  [ICON_SEARCH]: {
+    icon: () => svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+    <path d="M 21 3 C 11.6 3 4 10.6 4 20 C 4 29.4 11.6 37 21 37 C 24.354553 37 27.47104 36.01984 30.103516 34.347656 L 42.378906 46.621094 L 46.621094 42.378906 L 34.523438 30.279297 C 36.695733 27.423994 38 23.870646 38 20 C 38 10.6 30.4 3 21 3 z M 21 7 C 28.2 7 34 12.8 34 20 C 34 27.2 28.2 33 21 33 C 13.8 33 8 27.2 8 20 C 8 12.8 13.8 7 21 7 z"></path>
+    </svg> `
+  },
+  [ICON_PHONE]: {
+    icon: () => svg`
+      <svg viewBox="0 0 473.806 473.806">
+        <g>
+          <g>
+            <path d="M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4
+                c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8
+                c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6
+                c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5
+                c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26
+                c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9
+                c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806
+                C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20
+                c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6
+                c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1
+                c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3
+                c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5
+                c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8
+                c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9
+                l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1
+                C420.456,377.706,420.456,388.206,410.256,398.806z"/>
+            <path d="M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2
+                c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11
+                S248.656,111.506,256.056,112.706z"/>
+            <path d="M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11
+                c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2
+                c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z"/>
+          </g>
+        </g>
+      </svg>
+    `
+  },
+  [ICON_MAIL]: {
+    icon: () => svg`
+      <svg viewBox="0 0 483.3 483.3">
+        <g>
+          <g>
+            <path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1
+                v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5
+                c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z"/>
+            <path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3
+                c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95
+                c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4
+                c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z"/>
+          </g>
+        </g>
+      </svg>
+    `
+  }
+};
+const iconSvg = (iconName, cssClass, stateValues, activAn, inActivAn) => svg`
+    <svg id="${iconName}Id" viewBox="0 0 24 24" class="${cssClass}">
+        <polygon id="polygonId" points="${stateValues}">
+          <animate id="stateActivAn" dur="300ms" fill="freeze" begin="indefinite" attributeName="points"
+              keySplines="0.25 0.1 0.25 1"
+              values="${activAn}"/>
+          <animate id="stateInactivAn" dur="300ms" fill="freeze" begin="indefinite" attributeName="points"
+                keySplines="0.25 0.1 0.25 1"
+                values="${inActivAn}" />
+        </polygon>
+    </svg>`;
+class PdIcon extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * Define the icon by name.
+       */
+      icon: { type: String },
+      /**
+       * Set the icon as active or inactive icon.
+       * Reflect is set due to use inside css.
+       */
+      activeIcon: { type: Boolean, reflect: true },
+      /**
+       * Internal generated html for svg icon.
+       */
+      _svgIcon: { type: Object, state: true }
+    };
+  }
+  constructor() {
+    super();
+    this.activeIcon = false;
+    this._svgIcon = void 0;
+  }
+  static get styles() {
+    return [
+      // iconset[this.icon].styles
+      PDColorStyles,
+      css`
+        :host {
+
+          --my-icon-size: var(--pd-icon-size, 2rem);
+
+          width: var(--my-icon-size);
+          height: var(--my-icon-size);
+          background-color: var(--pd-icon-bg-col, transparent);
+
+          display: inline-flex;
+          box-sizing: content-box;
+          vertical-align: sub;
+          transition: var(--pd-icon-transition, 0.5s ease-in-out);
+          align-items: center;
+          justify-content: center;
+          padding: 0.2rem;
+        }
+
+        :host([activeIcon]) {
+          background-color: var(--pd-icon-bg-col-active, transparent);
+        }
+
+        :host > svg {
+          fill: var(--pd-icon-col, var(--pd-default-light-col));
+          stroke: var(--pd-icon-stroke-col, var(--pd-default-col));
+          stroke-width: var(--pd-icon-stroke-width, 0.1rem);
+          transition: fill 0.4s;
+          height: 100%;
+          width: 100%;
+        }        
+
+        :host(.primary) > svg {
+          fill: var(--pd-icon-primary-col, var(--pd-default-dark-col));
+          stroke: var(--pd-icon-primary-stroke-col, var(--pd-default-bg-col));
+        }
+
+        :host([activeIcon]) > svg {          
+          fill: var(--pd-icon-col-active, var(--pd-default-hover-col));
+          stroke: var(--pd-icon-stroke-col-active, var(--pd-default-col));
+        }
+
+        :host(.round) {
+          border-radius: 50%;
+          padding: 0.5rem;
+        }
+
+        :host(.small) {
+          --my-icon-size: 1.25rem;
+        }
+
+        :host(.medium) {
+          --my-icon-size: 1.5rem;
+        }
+
+        :host(.primary) {
+          background-color: var(--pd-icon-primary-bg-col, transparent);
+        }
+
+        :host(:hover) {
+          background-color: var(--pd-icon-bg-col-hover, transparent);
+        }      
+        
+        :host(.primary:hover) {
+          background-color: var(--pd-icon-primary-bg-col-hover, transparent);
+        }
+
+        :host(:hover) svg {
+          fill: var(--pd-icon-col-hover, darkgrey);
+          stroke: var(--pd-icon-stroke-col-hover, var(--pd-default-col));
+        }
+
+        :host([activeIcon]:hover) > svg {
+          fill: var(--pd-icon-col-active-hover, #fdd58599);
+          stroke: var(--pd-icon-stroke-col-active-hover, var(--pd-default-col));
+        }
+        
+
+        :host([disabled]) {
+          pointer-events: none;
+          box-shadow: 0;
+        }
+
+        :host([disabled]) > svg {
+          fill: var(--pd-icon-col-disabled, darkgrey);
+        }
+      `
+    ];
+  }
+  firstUpdated() {
+    this._animatePolygon();
+  }
+  update(changedProperties) {
+    if (changedProperties.has("icon") && this.icon) {
+      const iconFromSet = iconset[this.icon];
+      if (iconFromSet) {
+        const generateSvg = () => html`${iconSvg(
+          this.icon,
+          iconFromSet.cssClass,
+          this.activeIcon ? iconFromSet.state.activ : iconFromSet.state.inactiv,
+          iconFromSet.state.activAn,
+          iconFromSet.state.inActivAn
+        )}`;
+        this._svgIcon = iconFromSet.cssClass ? generateSvg() : iconFromSet.icon(this.activeIcon);
+      } else {
+        throw new Error(`Icon not defined: ${this.icon}`);
+      }
+    } else if (changedProperties.has("activeIcon")) {
+      this._animatePolygon();
+    }
+    super.update(changedProperties);
+  }
+  render() {
+    return html`${this._svgIcon}`;
+  }
+  _animatePolygon() {
+    const iconFromSet = iconset[this.icon];
+    if (iconFromSet && iconFromSet.state && (iconFromSet.state.activAn && this.activeIcon || iconFromSet.state.inActivAn && !this.activeIcon)) {
+      let svgIconAN;
+      if (this.activeIcon) {
+        svgIconAN = this.shadowRoot.getElementById("stateActivAn");
+      } else {
+        svgIconAN = this.shadowRoot.getElementById("stateInactivAn");
+      }
+      if (svgIconAN) {
+        svgIconAN.beginElement();
+      }
+    }
+  }
+  /* not used at the moment
+  _clickHandler() {
+    
+  } */
+}
+export {
+  ICON_ADD,
+  ICON_ARROW_BACK,
+  ICON_BURGER_MENU,
+  ICON_CAMERA,
+  ICON_CHECKBOX,
+  ICON_CHECKBOX_ONLY_CHECK,
+  ICON_CLOSE,
+  ICON_DATE,
+  ICON_DELETE,
+  ICON_DELETE_NEW,
+  ICON_DETAIL,
+  ICON_EDIT,
+  ICON_EDIT_NEW,
+  ICON_ERROR,
+  ICON_ERROR_FLD,
+  ICON_HELP,
+  ICON_HELP_FLD,
+  ICON_INFO,
+  ICON_INFO_FLD,
+  ICON_LEAVE,
+  ICON_MAIL,
+  ICON_NEXT,
+  ICON_PHONE,
+  ICON_PREVIOUS,
+  ICON_RULES,
+  ICON_SEARCH,
+  ICON_SETTINGS,
+  ICON_STAR,
+  ICON_STAT,
+  ICON_SYNC,
+  ICON_TOGGLE_COLLAPSE,
+  ICON_TOOGLE_ARROW,
+  ICON_USER,
+  ICON_WARNING,
+  ICON_WARNING_FLD,
+  ICON_XCLOSE,
+  PdIcon
+};

package/dist/node_modules/@progressive-development/pd-price/pd-pricetable.js

@@ -0,0 +1,2 @@
+import { PdPricetable } from "./src/PdPricetable.js";
+window.customElements.define("pd-pricetable", PdPricetable);