1.0.24

.gitlab-ci.yml

@@ -19,23 +19,35 @@ mirror:
   stage: security
   script:
     - npmci git mirror
+  only:
+    - tags
   tags:
     - lossless
     - docker
     - notpriv
 
-audit:
+auditProductionDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci npm prepare
+    - npmci command npm install --production --ignore-scripts
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command npm audit --audit-level=high --only=prod --production
+  tags:
+    - docker
+
+auditDevDependencies:
   image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
   stage: security
   script:
     - npmci npm prepare
     - npmci command npm install --ignore-scripts
     - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high
+    - npmci command npm audit --audit-level=high --only=dev
   tags:
-    - lossless
     - docker
-    - notpriv
+  allow_failure: true
 
 # ====================
 # test stage
@@ -50,9 +62,7 @@ testStable:
     - npmci npm test
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - priv
 
 testBuild:
   stage: test
@@ -63,9 +73,7 @@ testBuild:
     - npmci command npm run build
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - notpriv
 
 release:
   stage: release
@@ -85,6 +93,8 @@ release:
 codequality:
   stage: metadata
   allow_failure: true
+  only:
+    - tags
   script:
     - npmci command npm install -g tslint typescript
     - npmci npm prepare

.vscode/settings.json

@@ -15,7 +15,7 @@
             "properties": {
               "projectType": {
                 "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
               }
             }
           }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.19",
+  "version": "1.0.24",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -13,10 +13,14 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.47",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@designestate/dees-domtools": "^1.0.79",
+    "@designestate/dees-wcctools": "^1.0.49",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "lit-element": "^2.4.0",
-    "typescript": "^4.0.2"
+    "typescript": "^4.1.2"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.25",

ts_web/elements/dees-icon.ts

@@ -0,0 +1,116 @@
+import { LitElement, html, property, customElement } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faFacebook,
+  faGoogle,
+  faLinkedin,
+  faMedium,
+  faSlack,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons';
+
+import {} from '@fortawesome/free-regular-svg-icons';
+import { faDesktop, faRss } from '@fortawesome/free-solid-svg-icons';
+
+type TFontAwesomeIcon =
+  // normal
+  | 'desktop'
+  | 'rss'
+  // brands
+  | 'facebook'
+  | 'google'
+  | 'twitter'
+  | 'linkedin'
+  | 'medium'
+  | 'slack';
+const faIcons: { [key: string]: IconDefinition } = {
+  // normal
+  desktop: faDesktop,
+  rss: faRss,
+  // brands
+  facebook: faFacebook,
+  google: faGoogle,
+  linkedin: faLinkedin,
+  medium: faMedium,
+  slack: faSlack,
+  twitter: faTwitter,
+};
+
+@customElement('dees-icon')
+export class DeesIcon extends LitElement {
+  public static demo = () => html`
+    <div style="background: #fff; padding: 10px;">
+      <dees-icon iconName="visibility"></dees-icon>
+      <dees-icon brandName="facebook"></dees-icon>
+    </div>
+  `;
+
+  @property()
+  public iconName: string;
+
+  @property()
+  public brandName: TFontAwesomeIcon;
+
+  @property()
+  public svgSize: number = 20;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render() {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          display: block;
+          line-height: inherit;
+          font-size: inherit;
+        }
+        #iconContainer svg {
+          display: inline-block;
+          height: ${this.svgSize}px;
+        }
+        .material-icons {
+          font-family: 'Material Icons';
+          font-weight: normal;
+          font-style: normal;
+          line-height: inherit;
+          font-size: inherit;
+          display: inline-block;
+          line-height: inherit;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+
+          /* Support for all WebKit browsers. */
+          -webkit-font-smoothing: antialiased;
+          /* Support for Safari and Chrome. */
+          text-rendering: optimizeLegibility;
+
+          /* Support for Firefox. */
+          -moz-osx-font-smoothing: grayscale;
+
+          /* Support for IE. */
+          font-feature-settings: 'liga';
+        }
+      </style>
+      ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
+      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
+    `;
+  }
+
+  firstUpdated() {
+    if (this.brandName && !this.iconName) {
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
+        faIcons[this.brandName]
+      ).html[0];
+    }
+  }
+}

ts_web/elements/index.ts

@@ -1,6 +1,7 @@
 export * from './dees-button';
 export * from './dees-form';
 export * from './dees-form-submit';
+export * from './dees-icon';
 export * from './dees-input-checkbox';
 export * from './dees-input-dropdown';
 export * from './dees-input-quantityselector';