1.0.135

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.124",
+  "version": "1.0.135",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@designestate/dees-domtools": "^2.0.28",
     "@designestate/dees-element": "^2.0.18",
-    "@designestate/dees-wcctools": "^1.0.75",
+    "@designestate/dees-wcctools": "^1.0.76",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@designestate/dees-domtools': ^2.0.28
   '@designestate/dees-element': ^2.0.18
-  '@designestate/dees-wcctools': ^1.0.75
+  '@designestate/dees-wcctools': ^1.0.76
   '@fortawesome/fontawesome-svg-core': ^6.2.1
   '@fortawesome/free-brands-svg-icons': ^6.2.1
   '@fortawesome/free-regular-svg-icons': ^6.2.1
@@ -22,7 +22,7 @@ specifiers:
 dependencies:
   '@designestate/dees-domtools': 2.0.28
   '@designestate/dees-element': 2.0.18
-  '@designestate/dees-wcctools': 1.0.75_@types+node@18.11.18
+  '@designestate/dees-wcctools': 1.0.76_@types+node@18.11.18
   '@fortawesome/fontawesome-svg-core': 6.2.1
   '@fortawesome/free-brands-svg-icons': 6.2.1
   '@fortawesome/free-regular-svg-icons': 6.2.1
@@ -181,15 +181,15 @@ packages:
       - supports-color
     dev: false
 
-  /@designestate/dees-wcctools/1.0.75_@types+node@18.11.18:
-    resolution: {integrity: sha512-K+so4VIIzBvdwJatLu5zZq/V4ROfPX+mKNOLulKkBH7RRqRRiiL02+ShQv2SpjIZ5sLN8Y4iz3R4LuIkwiTjcQ==}
+  /@designestate/dees-wcctools/1.0.76_@types+node@18.11.18:
+    resolution: {integrity: sha512-TN+A+A6KK7VtkTF6r9m1HPYwtH6rmcw2JJYO+2tBqV7qozNQ39EUjWk217jTkyiy7ynOZEI6SfIFXP+2UgG2NA==}
     dependencies:
       '@designestate/dees-domtools': 2.0.28
       '@designestate/dees-element': 2.0.18
       '@gitzone/tsrun': 1.2.39_@types+node@18.11.18
       '@pushrocks/smartdelay': 2.0.13
       '@pushrocks/smartexpress': 4.0.23
-      lit: 2.5.0
+      lit: 2.6.0
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -369,12 +369,22 @@ packages:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
 
+  /@lit-labs/ssr-dom-shim/1.0.0:
+    resolution: {integrity: sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==}
+    dev: false
+
   /@lit/reactive-element/1.4.1:
     resolution: {integrity: sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==}
 
   /@lit/reactive-element/1.5.0:
     resolution: {integrity: sha512-fQh9FDK0LPTwDk+0HhSZEtb8K0LTN1wXerwpGrWA+a8tWulYRDLI4vQDWp4GOIsewn0572KYV/oZ3+492D7osA==}
 
+  /@lit/reactive-element/1.6.0:
+    resolution: {integrity: sha512-33H04h4tx9NVEADti0haZTNxssCnqZlMlyjri5k9kwDWAe2W1iENroZt7VWwmsPhlWUD8sSoPXSHqd0DdL29Pw==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.0.0
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -655,7 +665,7 @@ packages:
       '@pushrocks/smartdelay': 2.0.13
       '@pushrocks/smartenv': 5.0.5
       '@pushrocks/smartfeed': 1.0.11
-      '@pushrocks/smartfile': 10.0.5
+      '@pushrocks/smartfile': 10.0.7
       '@pushrocks/smartmanifest': 1.0.8
       '@pushrocks/smartmime': 1.0.5
       '@pushrocks/smartpath': 5.0.5
@@ -712,6 +722,30 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@pushrocks/smartfile/10.0.7:
+    resolution: {integrity: sha512-ZjMkHLjiKaHFy5bz2k+0bLNr3S0Ef6EU65vuZuq8MbhJQW/xhBUWZWT/sKNSkPiXVCWI+vpHOA6j1G3qCnLspg==}
+    dependencies:
+      '@pushrocks/lik': 6.0.0
+      '@pushrocks/smartdelay': 2.0.13
+      '@pushrocks/smartfile-interfaces': 1.0.7
+      '@pushrocks/smarthash': 3.0.2
+      '@pushrocks/smartjson': 5.0.5
+      '@pushrocks/smartmime': 1.0.5
+      '@pushrocks/smartpath': 5.0.5
+      '@pushrocks/smartpromise': 3.1.7
+      '@pushrocks/smartrequest': 2.0.11
+      '@pushrocks/smartstream': 2.0.3
+      '@pushrocks/streamfunction': 4.0.4
+      '@types/fs-extra': 11.0.1
+      '@types/glob': 8.0.0
+      '@types/js-yaml': 4.0.5
+      fs-extra: 11.1.0
+      glob: 8.0.3
+      js-yaml: 4.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@pushrocks/smartfile/9.0.6:
     resolution: {integrity: sha512-mXFrnHpM3Eq0MLokGP6DDRTk+v/HDlQwnNq4HFuCqs8YW6uTU/FoRJDnrCAf+spSzkDm0m1ajz/4rke8Dk9l6A==}
     dependencies:
@@ -750,6 +784,15 @@ packages:
       '@types/through2': 2.0.36
       through2: 4.0.2
 
+  /@pushrocks/smarthash/3.0.2:
+    resolution: {integrity: sha512-jXW4f8k6iqOQRvkCmXMID1C+qXyNvUMKm7apPETxnO+L172VlzxP1dml0Ey1+vjfpU2luKCteJWX7W95sOdLDg==}
+    dependencies:
+      '@pushrocks/smartjson': 5.0.5
+      '@pushrocks/smartpromise': 3.1.7
+      '@types/through2': 2.0.38
+      through2: 4.0.2
+    dev: false
+
   /@pushrocks/smartjson/4.0.6:
     resolution: {integrity: sha512-lykr068RSDHs0+EXCvIDVxjKnDtRQ2M7EXOo5jVrUU6/OEdfRl9ErM1K/oPafiEi47/PtTrwLlp1KdSgqkRjmg==}
     dependencies:
@@ -1398,6 +1441,13 @@ packages:
     dependencies:
       '@types/node': 18.11.18
 
+  /@types/fs-extra/11.0.1:
+    resolution: {integrity: sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==}
+    dependencies:
+      '@types/jsonfile': 6.1.1
+      '@types/node': 18.11.18
+    dev: false
+
   /@types/fs-extra/9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
@@ -1458,6 +1508,12 @@ packages:
   /@types/js-yaml/4.0.5:
     resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
 
+  /@types/jsonfile/6.1.1:
+    resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==}
+    dependencies:
+      '@types/node': 18.11.18
+    dev: false
+
   /@types/keygrip/1.0.2:
     resolution: {integrity: sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==}
     dev: true
@@ -1560,6 +1616,12 @@ packages:
     dependencies:
       '@types/node': 18.11.18
 
+  /@types/through2/2.0.38:
+    resolution: {integrity: sha512-YFu+nHmjxMurkH1BSzA0Z1WrKDAY8jUKPZctNQn7mc+/KKtp2XxnclHFXxdB1m7Iqnzb5aywgP8TMK283LezGQ==}
+    dependencies:
+      '@types/node': 18.11.18
+    dev: false
+
   /@types/trusted-types/2.0.2:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
 
@@ -2795,6 +2857,15 @@ packages:
       jsonfile: 6.1.0
       universalify: 2.0.0
 
+  /fs-extra/11.1.0:
+    resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: false
+
   /fs.realpath/1.0.0:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
 
@@ -3330,6 +3401,12 @@ packages:
     dependencies:
       '@types/trusted-types': 2.0.2
 
+  /lit-html/2.6.0:
+    resolution: {integrity: sha512-slNAAYfvC7LxeryDOnPFl5uTpxGYGJ6UR9SFmfY+gQ+sf30z1atDPXlgjcSTtwymNdlwDhfGjq+EemQRXp9z1g==}
+    dependencies:
+      '@types/trusted-types': 2.0.2
+    dev: false
+
   /lit/2.4.0:
     resolution: {integrity: sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==}
     dependencies:
@@ -3345,6 +3422,14 @@ packages:
       lit-element: 3.2.2
       lit-html: 2.5.0
 
+  /lit/2.6.0:
+    resolution: {integrity: sha512-GUKVozhomdYlFVuB4UNipbPB5RcXNX4ns43uDA1gSTZN1oHe7mnj05fpYbESxXfxg/Gn905HTIzymCFrr/cn3A==}
+    dependencies:
+      '@lit/reactive-element': 1.6.0
+      lit-element: 3.2.2
+      lit-html: 2.6.0
+    dev: false
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.124',
+  version: '1.0.135',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-contextmenu.ts

@@ -0,0 +1,95 @@
+import * as plugins from './plugins.js';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-contextmenu': DeesContextmenu;
+  }
+}
+
+@customElement('dees-contextmenu')
+export class DeesContextmenu extends DeesElement {
+  public static demo = () => html`
+    <dees-button>Hello</dees-button>
+    <dees-contextmenu .menuItems=${[
+      {
+        name: 'copy',
+        action: async () => {}
+      },
+      {
+        name: 'edit',
+        action: async () => {}
+      }
+    ] as plugins.tsclass.website.IMenuItem[]}></dees-contextmenu>
+  `;
+
+@property({
+  type: Array,
+})
+public menuItems: plugins.tsclass.website.IMenuItem[] = [];
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .mainbox {
+      }
+
+      
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (!this.textContent) {
+      this.textContent = 'Button';
+      this.performUpdate();
+    }
+  }
+
+  public async selectChip(chipArg: string) {
+    if (this.selectionMode === 'single') {
+      if (this.selectedChip === chipArg) {
+        this.selectedChip = null;
+        this.selectedChips = [];
+      } else {
+        this.selectedChip = chipArg;
+        this.selectedChips = [chipArg];
+      }
+    } else if (this.selectionMode === 'multiple') {
+      if (this.selectedChips.includes(chipArg)) {
+        this.selectedChips = this.selectedChips.filter((chipArg2) => chipArg !== chipArg2);
+      } else {
+        this.selectedChips.push(chipArg);
+      }
+      this.requestUpdate();
+    }
+    console.log(this.selectedChips);
+  }
+}

ts_web/elements/dees-icon.ts

@@ -1,4 +1,11 @@
-import { DeesElement, html, property, customElement } from '@designestate/dees-element';
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  cssManager,
+  css,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
@@ -14,27 +21,55 @@ import {
   faTiktok,
 } from '@fortawesome/free-brands-svg-icons';
 
-import {} from '@fortawesome/free-regular-svg-icons';
-import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
+import {
+  faMessage as faMessageRegular,
+  faSun as faSunRegular,
+} from '@fortawesome/free-regular-svg-icons';
+import {
+  faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
+  faBell as faBellSolid,
+  faBug as faBugSolid,
+  faBuilding as faBuildingSolid,
+  faCaretLeft as faCaretLeftSolid,
+  faCircleInfo as faCircleInfoSolid,
+  faDesktop as faDesktopSolid,
+  faGrip as faGripSolid,
+  faMessage as faMessageSolid,
+  faRss as faRssSolid,
+  faUsers as faUsersSolid,
+  faShare as faShareSolid,
+  faSun as faSunSolid,
+  faXmark as faXmarkSolid,
+} from '@fortawesome/free-solid-svg-icons';
 
-type TFontAwesomeIcon =
+export const faIcons = {
   // normal
-  | 'desktop'
-  | 'rss'
-  // brands
-  | 'facebook'
-  | 'google'
-  | 'linkedin'
-  | 'instagram'
-  | 'medium'
-  | 'slack'
-  | 'tiktok'
-  | 'twitter'
-  | 'users';
-const faIcons: { [key: string]: IconDefinition } = {
-  // normal
-  desktop: faDesktop,
-  rss: faRss,
+  arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
+  arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
+  bell: faBellSolid,
+  bellSolid: faBellSolid,
+  bug: faBugSolid,
+  bugSolid: faBugSolid,
+  building: faBuildingSolid,
+  buildingSolid: faBuildingSolid,
+  caretLeft: faCaretLeftSolid,
+  caretLeftSolid: faCaretLeftSolid,
+  circleinfo: faCircleInfoSolid,
+  circleinfoSolid: faCircleInfoSolid,
+  desktop: faDesktopSolid,
+  desktopSolid: faDesktopSolid,
+  grip: faGripSolid,
+  gripSolid: faGripSolid,
+  message: faMessageRegular,
+  messageSolid: faMessageSolid,
+  rss: faRssSolid,
+  rssSolid: faRssSolid,
+  share: faShareSolid,
+  shareSolid: faShareSolid,
+  sun: faSunRegular,
+  sunSolid: faSunSolid,
+  xmark: faXmarkSolid,
+  xmarkSolid: faXmarkSolid,
   // brands
   facebook: faFacebook,
   google: faGoogle,
@@ -44,7 +79,7 @@ const faIcons: { [key: string]: IconDefinition } = {
   slack: faSlackHash,
   tiktok: faTiktok,
   twitter: faTwitter,
-  users: faUsers,
+  users: faUsersSolid,
 };
 
 declare global {
@@ -57,76 +92,73 @@ declare global {
 export class DeesIcon extends DeesElement {
   public static demo = () => html`
     <dees-icon iconName="visibility"></dees-icon>
-    <div style="background: #fff; padding: 10px; font-size: 24px">
-      <dees-icon iconName="visibility"></dees-icon>
-      <dees-icon iconName="info"></dees-icon>
-      <dees-icon iconName="brightness_4"></dees-icon>
-      <dees-icon brandName="facebook"></dees-icon>
+    <div style="background: #fff; padding: 10px; font-size: 30px">
+      <style>
+        dees-icon {
+          transition: color 0.05s;
+        }
+        dees-icon:hover {
+          color: #e4002b;
+        }
+      </style>
+      <dees-icon .iconFA=${'messageSolid'}></dees-icon>
+      <dees-icon .iconFA=${'sun'}></dees-icon>
+      <dees-icon .iconFA=${'sunSolid'}></dees-icon>
+      <dees-icon .iconFA=${'facebook'}></dees-icon>
+      <dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
     </div>
   `;
 
-  @property()
-  public iconName: string;
+  @property({
+    type: String
+  })
+  public iconFA: keyof typeof faIcons;
 
   @property()
-  public brandName: TFontAwesomeIcon;
-
-  @property()
-  public svgSize: number = 20;
+  public iconSize: number;
 
   constructor() {
     super();
     domtools.elementBasic.setup();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      * {
+        transition: inherit !important;
+      }
+    `,
+  ];
+
   public render() {
     return html`
       ${domtools.elementBasic.styles}
       <style>
-        :host {
-          display: block;
-          line-height: inherit;
-          font-size: inherit;
-          margin: 0px;
-          padding: 0px;
-          white-space: nowrap;
-        }
         #iconContainer svg {
-          display: inline-block;
-          height: ${this.svgSize}px;
-        }
-        .material-symbols-outlined {
-          font-family: 'Material Symbols Outlined';
-          font-weight: normal;
-          font-style: normal;
-          line-height: inherit;
-          font-size: inherit; /* Preferred icon size */
-          display: inline-block;
-          text-transform: none;
-          letter-spacing: normal;
-          word-wrap: normal;
-          white-space: nowrap;
-          direction: ltr;
-          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+          display: block;
+          height: ${this.iconSize}px;
         }
       </style>
-      ${this.iconName
-        ? html`
-          <i 
-            class="material-symbols-outlined"
-          >
-            ${this.iconName}
-          </i>`
-        : html``}
-      ${this.brandName ? html`<div id="iconContainer"></div>` : html``}
+      <div id="iconContainer"></div>
     `;
   }
 
   public async firstUpdated() {
-    if (this.brandName && !this.iconName) {
-      this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
-        faIcons[this.brandName]
-      ).html[0];
+    if (!this.iconSize) {
+      this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
+    }
+    if (this.iconFA) {
+      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
+        ? icon(faIcons[this.iconFA]).html[0]
+        : 'icon not found';
     }
   }
 }

ts_web/elements/dees-tooltip.ts

@@ -0,0 +1 @@
+import {} from '@designestate/dees-element';

ts_web/elements/index.ts

@@ -1,6 +1,7 @@
 export * from './dees-button-exit.js';
 export * from './dees-button.js';
 export * from './dees-chips.js';
+export * from './dees-contextmenu.js';
 export * from './dees-form.js';
 export * from './dees-form-submit.js';
 export * from './dees-icon.js';