npm - @social.io/catalog - Versions diffs - 1.0.93 - Mend

@social.io/catalog 1.0.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist_bundle/bundle.js +5949 -0
package/dist_bundle/bundle.js.map +7 -0
package/dist_ts_web/00_commitinfo_data.d.ts +8 -0
package/dist_ts_web/00_commitinfo_data.js +9 -0
package/dist_ts_web/elements/index.d.ts +4 -0
package/dist_ts_web/elements/index.js +5 -0
package/dist_ts_web/elements/sio-combox.d.ts +13 -0
package/dist_ts_web/elements/sio-combox.js +194 -0
package/dist_ts_web/elements/sio-fab.d.ts +17 -0
package/dist_ts_web/elements/sio-fab.js +180 -0
package/dist_ts_web/elements/sio-subwidget-conversations.d.ts +7 -0
package/dist_ts_web/elements/sio-subwidget-conversations.js +165 -0
package/dist_ts_web/elements/sio-subwidget-onboardme.d.ts +7 -0
package/dist_ts_web/elements/sio-subwidget-onboardme.js +76 -0
package/dist_ts_web/index.d.ts +1 -0
package/dist_ts_web/index.js +2 -0
package/dist_ts_web/pages/firstpage.d.ts +1 -0
package/dist_ts_web/pages/firstpage.js +5 -0
package/dist_ts_web/pages/index.d.ts +2 -0
package/dist_ts_web/pages/index.js +3 -0
package/dist_ts_web/pages/mainpage.d.ts +1 -0
package/dist_ts_web/pages/mainpage.js +3 -0
package/dist_watch/bundle.js +120817 -0
package/dist_watch/bundle.js.map +7 -0
package/dist_watch/index.html +28 -0
package/license +19 -0
package/npmextra.json +19 -0
package/package.json +51 -0
package/readme.hints.md +0 -0
package/readme.md +31 -0
package/ts_web/00_commitinfo_data.ts +8 -0
package/ts_web/elements/index.ts +4 -0
package/ts_web/elements/sio-combox.ts +199 -0
package/ts_web/elements/sio-fab.ts +185 -0
package/ts_web/elements/sio-subwidget-conversations.ts +156 -0
package/ts_web/elements/sio-subwidget-onboardme.ts +64 -0
package/ts_web/index.ts +1 -0
package/ts_web/pages/firstpage.ts +5 -0
package/ts_web/pages/index.ts +2 -0
package/ts_web/pages/mainpage.ts +3 -0

package/dist_watch/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!--gitzone element-->
+<!-- made by Task Venture Capital GmbH -->
+<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<html lang="en">
+  <head>
+    <!--Lets set some basic meta tags-->
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body>
+  </body>
+</html>

package/license ADDED Viewed

@@ -0,0 +1,19 @@
+Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/npmextra.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "gitzone": {
+    "projectType": "wcc",
+    "module": {
+      "githost": "gitlab.com",
+      "gitscope": "social.io/private",
+      "gitrepo": "catalog",
+      "description": "the element catalog for the lossless organization",
+      "npmPackagename": "@social.io_private/catalog",
+      "license": "UNLICENSED",
+      "projectDomain": "social.io"
+    }
+  },
+  "npmci": {
+    "npmRegistryUrl": "verdaccio.lossless.one",
+    "npmGlobalTools": [],
+    "npmAccessLevel": "private"
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,51 @@
+{
+  "name": "@social.io/catalog",
+  "version": "1.0.93",
+  "private": false,
+  "description": "catalog for social.io",
+  "main": "dist_ts_web/index.js",
+  "typings": "dist_ts_web/index.d.ts",
+  "type": "module",
+  "author": "Lossless GmbH",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@design.estate/dees-catalog": "^1.2.0",
+    "@design.estate/dees-domtools": "^2.0.64",
+    "@design.estate/dees-element": "^2.0.39",
+    "@design.estate/dees-wcctools": "^1.0.90",
+    "@losslessone_private/loint-pubapi": "^1.0.14",
+    "@social.io/interfaces": "^1.0.5"
+  },
+  "devDependencies": {
+    "@git.zone/tsbuild": "^2.1.84",
+    "@git.zone/tsbundle": "^2.0.15",
+    "@git.zone/tsrun": "^1.2.49",
+    "@git.zone/tstest": "^1.0.90",
+    "@git.zone/tswatch": "^2.0.23",
+    "@push.rocks/projectinfo": "^5.0.2",
+    "@push.rocks/smartenv": "^5.0.12",
+    "@push.rocks/tapbundle": "^5.3.0",
+    "@types/node": "^22.7.5"
+  },
+  "files": [
+    "ts/**/*",
+    "ts_web/**/*",
+    "dist/**/*",
+    "dist_*/**/*",
+    "dist_ts/**/*",
+    "dist_ts_web/**/*",
+    "assets/**/*",
+    "cli.js",
+    "npmextra.json",
+    "readme.md"
+  ],
+  "browserslist": [
+    "last 1 Chrome versions"
+  ],
+  "scripts": {
+    "test": "tstest test/",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
+  }
+}

package/readme.hints.md ADDED Viewed

File without changes

package/readme.md ADDED Viewed

@@ -0,0 +1,31 @@
+# @social.io/private/catalog
+the element catalog for the lossless organization
+## Availabililty and Links
+* [npmjs.org (npm package)](https://www.npmjs.com/package/@social.io_private/catalog)
+* [gitlab.com (source)](https://gitlab.com/social.io/private/catalog)
+* [github.com (source mirror)](https://github.com/social.io/private/catalog)
+* [docs (typedoc)](https://social.io/private.gitlab.io/catalog/)
+## Status for master
+Status Category | Status Badge
+-- | --
+GitLab Pipelines | [![pipeline status](https://gitlab.com/social.io/private/catalog/badges/master/pipeline.svg)](https://lossless.cloud)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/social.io/private/catalog/badges/master/coverage.svg)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@social.io_private/catalog)](https://lossless.cloud)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/social.io/private/catalog)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@social.io_private/catalog)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@social.io_private/catalog)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@social.io_private/catalog)](https://lossless.cloud)
+## Usage
+For further information read the linked docs at the top of this readme.
+## Legal
+> UNLICENSED licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
+| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)

package/ts_web/00_commitinfo_data.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@social.io/catalog',
+  version: '1.0.93',
+  description: 'catalog for social.io'
+}

package/ts_web/elements/index.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export * from './sio-fab.js';
+export * from './sio-combox.js';
+export * from './sio-subwidget-onboardme.js';
+export * from './sio-subwidget-conversations.js';

package/ts_web/elements/sio-combox.ts ADDED Viewed

@@ -0,0 +1,199 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import * as deesCatalog from '@design.estate/dees-catalog';
+deesCatalog;
+@customElement('sio-combox')
+export class SioCombox extends DeesElement {
+  public static demo = () => html` <sio-combox></sio-combox> `;
+  @property({ type: Object })
+  public referenceObject: HTMLElement;
+  /**
+   * computes the button offset
+   */
+  public cssComputeHeight() {
+    let height = window.innerHeight < 760 ? window.innerHeight : 760;
+    if (!this.referenceObject) {
+      console.log('SioCombox: no reference object set');
+    }
+    if (this.referenceObject) {
+      console.log(`referenceObject height is ${this.referenceObject.clientHeight}`);
+      height = height - (this.referenceObject.clientHeight + 60);
+    }
+    return height;
+  }
+  public cssComputeInnerScroll() {
+    console.log(
+      `SioCombox clientHeight: ${this.shadowRoot.querySelector('.mainbox').clientHeight}`
+    );
+    console.log(
+      `SioCombox content scrollheight is: ${
+        this.shadowRoot.querySelector('.contentbox').clientHeight
+      }`
+    );
+    if (
+      this.shadowRoot.querySelector('.mainbox').clientHeight <
+      this.shadowRoot.querySelector('.contentbox').clientHeight
+    ) {
+      (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'scroll';
+    } else {
+      (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'hidden';
+    }
+  }
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          overflow: hidden;
+          font-family: 'Dees Sans';
+          position: absolute;
+          display: block;
+          height: ${this.cssComputeHeight()}px;
+          width: 375px;
+          background: ${this.goBright ? '#eeeeee' : '#000000'};
+          border-radius: 16px;
+          border: 1px solid rgba(250, 250, 250, 0.2);
+          right: 0px;
+          z-index: 10000;
+          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)'};
+          color: ${this.goBright ? '#333' : '#ccc'};
+          cursor: default;
+          user-select: none;
+          text-align: left;
+        }
+        .mainbox {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+          overscroll-behavior: contain;
+          padding-bottom: 80px;
+        }
+        .toppanel {
+          height: 200px;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+          padding: 20px;
+          --bg-color: ${this.goBright ? '#00000050' : '#ffffff30'};
+          --dot-color: #ffffff00;
+          --dot-size: 1px;
+          --dot-space: 6px;
+          background: linear-gradient(45deg, var(--bg-color) 1px, var(--dot-color) 1px) top left;
+          background-size: var(--dot-space) var(--dot-space);
+          margin-bottom: -50px;
+        }
+        #greeting {
+          padding-top: 50px;
+          font-family: 'Dees Sans';
+          margin: 0px;
+          font-size: 30px;
+          font-weight: 400;
+        }
+        #callToAction {
+          font-family: 'Dees Sans';
+          margin: 0px;
+          font-weight: 400;
+        }
+        .quicktabs {
+          position: absolute;
+          z-index: 100;
+          bottom: 30px;
+          display: grid;
+          width: 100%;
+          padding-bottom: 16px;
+          grid-template-columns: repeat(2, 1fr);
+          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
+          padding-top: 24px;
+        }
+        .quicktabs .quicktab {
+          text-align: center;
+          width: 100%;
+        }
+        .quicktabs .quicktab .quicktabicon {
+          font-size: 20px;
+          margin-bottom: 8px;
+        }
+        .quicktabs .quicktab .quicktabtext {
+          font-size: 12px;
+          font-weight: 600;
+        }
+        .brandingbox {
+          z-index: 101;
+          text-align: center;
+          position: absolute;
+          width: 100%;
+          bottom: 0px;
+          left: 0px;
+          font-size: 12px;
+          padding: 8px;
+          border-top: 1px solid rgba(250, 250, 250, 0.1);
+          font-family: 'Dees Sans';
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+          background: ${this.goBright ? '#EEE' : '#000'};
+          color: ${this.goBright ? '#333' : '#777'};
+        }
+      </style>
+      <div class="mainbox">
+        <div class="contentbox">
+          <div class="toppanel">
+            <div id="greeting">Hello :)</div>
+            <div id="callToAction">Ask us anything or share your feedback!</div>
+          </div>
+          <sio-subwidget-conversations></sio-subwidget-conversations>
+          <sio-subwidget-onboardme></sio-subwidget-onboardme>
+        </div>
+      </div>
+      <div class="quicktabs">
+        <div class="quicktab">
+          <div class="quicktabicon">
+            <dees-icon iconFA="message"></dees-icon>
+          </div>
+          <div class="quicktabtext">Conversations</div>
+        </div>
+        <div class="quicktab">
+          <div class="quicktabicon">
+            <dees-icon iconFA="mugHot"></dees-icon>
+          </div>
+          <div class="quicktabtext">Onboarding</div>
+        </div>
+      </div>
+      <div class="brandingbox">powered by social.io</div>
+    `;
+  }
+  async updated() {
+    this.cssComputeHeight();
+    window.requestAnimationFrame(() => {
+      setTimeout(() => {
+        this.cssComputeInnerScroll();
+      }, 200);
+    });
+  }
+}

package/ts_web/elements/sio-fab.ts ADDED Viewed

@@ -0,0 +1,185 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  cssManager,
+  css,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { SioCombox } from './sio-combox.js';
+SioCombox;
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-fab': SioFab;
+  }
+}
+@customElement('sio-fab')
+export class SioFab extends DeesElement {
+  @property()
+  public showCombox = false;
+  public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          will-change: transform;
+          position: absolute;
+          display: block;
+          bottom: 20px;
+          right: 20px;
+          z-index: 10000;
+          color: #fff;
+        }
+        #mainbox {
+          transition: all 0.2s;
+          position: absolute;
+          bottom: 0px;
+          right: 0px;
+          height: 60px;
+          width: 60px;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+          line-height: 60px;
+          text-align: center;
+          color: #ccc;
+          cursor: pointer;
+          background: ${this.goBright
+            ? 'linear-gradient(-45deg, #eeeeeb, #eeeeeb)'
+            : 'linear-gradient(-45deg, #222222, #333333)'};
+          border-radius: 50% 50% 50% 50%;
+          user-select: none;
+        }
+        #mainbox:hover {
+          transform: scale(1.05);
+        }
+        #mainbox:active {
+          transform: scale(0.95);
+        }
+        #mainbox .icon {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          will-change: transform;
+          transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'};
+          transition: all 0.2s;
+          height: 100%;
+          width: 100%;
+          object-fit: contain;
+          -webkit-user-drag: none;
+          -khtml-user-drag: none;
+          -moz-user-drag: none;
+          -o-user-drag: none;
+          user-drag: none;
+        }
+        #mainbox .icon img {
+          filter: grayscale(1) ${cssManager.bdTheme('invert(1)', '')};
+          position: absolute;
+          width: 100%;
+          top: 0px;
+          left: 0px;
+          will-change: transform;
+          transform: scale(0.2, 0.2) translateY(-5px);
+        }
+        #mainbox .icon.open:hover img {
+          filter: grayscale(0);
+        }
+        #mainbox .icon.open {
+          opacity: ${this.showCombox ? '0' : '1'};
+          pointer-events: ${this.showCombox ? 'none' : 'all'};
+        }
+        #mainbox .icon.close {
+          opacity: ${this.showCombox ? '1' : '0'};
+          pointer-events: ${this.showCombox ? 'all' : 'none'};
+        }
+        #mainbox .icon.close:hover dees-icon {
+          color: ${cssManager.bdTheme('#111', '#fff')};
+        }
+        #mainbox .icon.open dees-icon {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          font-size: 32px;
+          color: ${cssManager.bdTheme('#777', '#999')};
+          top: 2px;
+        }
+        #mainbox .icon.close dees-icon {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          font-size: 24px;
+          color: ${cssManager.bdTheme('#666', '#CCC')};
+        }
+        #comboxContainer sio-combox {
+          transition: transform 0.2s, opacity 0.2s;
+          will-change: transform;
+          transform: translateY(20px);
+          bottom: 80px;
+          opacity: 0;
+          pointer-events: none;
+        }
+        #comboxContainer.show sio-combox {
+          transform: translateY(0px);
+          opacity: 1;
+          pointer-events: all;
+        }
+      </style>
+      <div id="mainbox" @click=${this.toggleCombox}>
+        <div class="icon open">
+          <dees-icon iconFA="message"></dees-icon>
+          <img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
+        </div>
+        <div class="icon close">
+          <dees-icon iconFa="xmark"></dees-icon>
+        </div>
+      </div>
+      <div id="comboxContainer" class="${this.showCombox ? 'show' : null}">
+        <sio-combox></sio-combox>
+      </div>
+    `;
+  }
+  /**
+   * toggles the combox
+   */
+  public async toggleCombox() {
+    console.log('toggle combox');
+    this.showCombox = !this.showCombox;
+  }
+  public async firstUpdated(args) {
+    super.firstUpdated(args);
+    const domtools = await this.domtoolsPromise;
+    const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
+    const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
+    sioCombox.referenceObject = mainBox;
+    domtools.keyboard
+      .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
+      .subscribe((event) => {
+        this.showCombox = !this.showCombox;
+      });
+  }
+}