initial
This commit is contained in:
commit
cebae44ff5
20
.gitignore
vendored
Normal file
20
.gitignore
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
.nogit/
|
||||||
|
|
||||||
|
# artifacts
|
||||||
|
coverage/
|
||||||
|
public/
|
||||||
|
pages/
|
||||||
|
|
||||||
|
# installs
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# caches
|
||||||
|
.yarn/
|
||||||
|
.cache/
|
||||||
|
.rpt2_cache
|
||||||
|
|
||||||
|
# builds
|
||||||
|
dist/
|
||||||
|
dist_*/
|
||||||
|
|
||||||
|
# custom
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "npm test",
|
||||||
|
"name": "Run npm test",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
26
.vscode/settings.json
vendored
Normal file
26
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"json.schemas": [
|
||||||
|
{
|
||||||
|
"fileMatch": ["/npmextra.json"],
|
||||||
|
"schema": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"npmci": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "settings for npmci"
|
||||||
|
},
|
||||||
|
"gitzone": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "settings for gitzone",
|
||||||
|
"properties": {
|
||||||
|
"projectType": {
|
||||||
|
"type": "string",
|
||||||
|
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
62
changelog.md
Normal file
62
changelog.md
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
## 2024-12-27 - 1.0.93 - fix(core)
|
||||||
|
Fix package naming inconsistencies in the project
|
||||||
|
|
||||||
|
- Updated package name from '@social.io_private/catalog' to '@social.io/catalog' in package.json
|
||||||
|
- Updated dependency from '@social.io_private/interfaces' to '@social.io/interfaces' in package.json
|
||||||
|
- Updated import statement from '@social.io_private/interfaces' to '@social.io/interfaces' in sio-subwidget-conversations.ts
|
||||||
|
|
||||||
|
## 2024-10-09 - 1.0.92 - fix(build)
|
||||||
|
Correct build command and module type configuration in package.json and tsconfig.json.
|
||||||
|
|
||||||
|
- Corrected the build command in package.json to use 'tsfolders'.
|
||||||
|
- Updated 'module' and 'moduleResolution' types in tsconfig.json to 'NodeNext'.
|
||||||
|
|
||||||
|
## 2024-10-09 - 1.0.91 - fix(elements)
|
||||||
|
Style and dependency adjustments in elements
|
||||||
|
|
||||||
|
- Updated styles for better UI consistency and appearance in elements: sio-combox, sio-fab, sio-subwidget-onboardme, sio-subwidget-conversations.
|
||||||
|
- Dependency versions updated in package.json.
|
||||||
|
- Removed .gitlab-ci.yml file.
|
||||||
|
|
||||||
|
## 2023-08-27 - 1.0.89 to 1.0.90 - core updates
|
||||||
|
Incremental updates with core fixes.
|
||||||
|
|
||||||
|
- Version 1.0.89: fix(core): update
|
||||||
|
- Version 1.0.90: No significant changes
|
||||||
|
|
||||||
|
## 2023-01-07 to 2023-01-11 - 1.0.84 to 1.0.89 - core updates
|
||||||
|
Continuous core fixes and updates over releases.
|
||||||
|
|
||||||
|
- Version 1.0.84: fix(core): update
|
||||||
|
- Version 1.0.85: fix(core): update
|
||||||
|
- Version 1.0.86: fix(core): update
|
||||||
|
- Version 1.0.87: fix(core): update
|
||||||
|
- Version 1.0.88: fix(core): update
|
||||||
|
- Version 1.0.89: No significant changes
|
||||||
|
|
||||||
|
## 2022-05-09 to 2022-05-24 - 1.0.75 to 1.0.82 - core updates
|
||||||
|
Progressive upgrades with core fixes.
|
||||||
|
|
||||||
|
- Version 1.0.75: fix(core): update
|
||||||
|
- Version 1.0.76: fix(core): update
|
||||||
|
- Version 1.0.77: fix(core): update
|
||||||
|
- Version 1.0.78: fix(core): update
|
||||||
|
- Version 1.0.79: fix(core): update
|
||||||
|
- Version 1.0.80: fix(core): update
|
||||||
|
- Version 1.0.81: fix(core): update
|
||||||
|
- Version 1.0.82: fix(core): update
|
||||||
|
|
||||||
|
## 2022-03-24 to 2022-04-25 - 1.0.72 to 1.0.74 - core updates
|
||||||
|
Minor updates focusing on core functionalities.
|
||||||
|
|
||||||
|
- Version 1.0.72: fix(core): update
|
||||||
|
- Version 1.0.73: fix(core): update
|
||||||
|
- Version 1.0.74: fix(core): update
|
||||||
|
|
||||||
|
## 2020-08-05 to 2020-12-10 - 1.0.55 to 1.0.71 - core updates
|
||||||
|
Regular maintenance with core fixes to enhance stability.
|
||||||
|
|
||||||
|
- Version 1.0.55 to 1.0.71: Multiple core updates and fixes
|
||||||
|
- Versions include: 1.0.55, 1.0.56, 1.0.57, 1.0.58, 1.0.59, 1.0.60, 1.0.61, 1.0.62, 1.0.63, 1.0.64, 1.0.65, 1.0.66, 1.0.67, 1.0.68, 1.0.69, 1.0.70, 1.0.71
|
||||||
28
html/index.html
Normal file
28
html/index.html
Normal file
@ -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>
|
||||||
10
html/index.ts
Normal file
10
html/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// dees tools
|
||||||
|
import * as deesWccTools from '@design.estate/dees-wcctools';
|
||||||
|
import * as deesDomTools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
|
// elements and pages
|
||||||
|
import * as elements from '../ts_web/elements/index.js';
|
||||||
|
import * as pages from '../ts_web/pages/index.js';
|
||||||
|
|
||||||
|
deesWccTools.setupWccTools(elements as any, pages);
|
||||||
|
deesDomTools.elementBasic.setup();
|
||||||
19
license
Normal file
19
license
Normal file
@ -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.
|
||||||
19
npmextra.json
Normal file
19
npmextra.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
51
package.json
Normal file
51
package.json
Normal file
@ -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",
|
||||||
|
"scripts": {
|
||||||
|
"test": "tstest test/",
|
||||||
|
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||||
|
"watch": "tswatch element",
|
||||||
|
"buildDocs": "tsdoc"
|
||||||
|
},
|
||||||
|
"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"
|
||||||
|
]
|
||||||
|
}
|
||||||
7593
pnpm-lock.yaml
generated
Normal file
7593
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
0
readme.hints.md
Normal file
0
readme.hints.md
Normal file
31
readme.md
Normal file
31
readme.md
Normal file
@ -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 | [](https://lossless.cloud)
|
||||||
|
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||||
|
npm | [](https://lossless.cloud)
|
||||||
|
Snyk | [](https://lossless.cloud)
|
||||||
|
TypeScript Support | [](https://lossless.cloud)
|
||||||
|
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||||
|
Code Style | [](https://lossless.cloud)
|
||||||
|
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||||
|
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||||
|
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
For further information read the linked docs at the top of this readme.
|
||||||
|
|
||||||
|
## Legal
|
||||||
|
> UNLICENSED licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||||
|
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||||
9
test/test.browser.ts
Normal file
9
test/test.browser.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { expect, expectAsync, tap, webhelpers } from '@push.rocks/tapbundle';
|
||||||
|
|
||||||
|
import * as socialioCatalog from '../ts_web/index.js';
|
||||||
|
|
||||||
|
tap.test('', async () => {
|
||||||
|
const sioFab: socialioCatalog.SioFab = webhelpers.fixture(webhelpers.html`<sio-fab></sio-fab>`);
|
||||||
|
});
|
||||||
|
|
||||||
|
tap.start();
|
||||||
8
ts_web/00_commitinfo_data.ts
Normal file
8
ts_web/00_commitinfo_data.ts
Normal file
@ -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'
|
||||||
|
}
|
||||||
4
ts_web/elements/index.ts
Normal file
4
ts_web/elements/index.ts
Normal file
@ -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';
|
||||||
199
ts_web/elements/sio-combox.ts
Normal file
199
ts_web/elements/sio-combox.ts
Normal file
@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
185
ts_web/elements/sio-fab.ts
Normal file
185
ts_web/elements/sio-fab.ts
Normal file
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
156
ts_web/elements/sio-subwidget-conversations.ts
Normal file
156
ts_web/elements/sio-subwidget-conversations.ts
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
||||||
|
import * as domtools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
|
import * as sioInterfaces from '@social.io/interfaces';
|
||||||
|
|
||||||
|
@customElement('sio-subwidget-conversations')
|
||||||
|
export class SioSubwidgetConversations extends DeesElement {
|
||||||
|
// STATIC
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
public conversations: sioInterfaces.ISioConversation[] = [
|
||||||
|
{
|
||||||
|
subject: 'Pricing page',
|
||||||
|
parties: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
description: 'Lossless Support',
|
||||||
|
name: 'Lossless Support',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
description: 'you',
|
||||||
|
name: 'you',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
conversationBlocks: [
|
||||||
|
{
|
||||||
|
partyId: '1',
|
||||||
|
text: 'Hello there :) How can we help you?',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
partyId: '2',
|
||||||
|
text: 'Hi! Where is your pricing page?',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},{
|
||||||
|
subject: 'Pricing page',
|
||||||
|
parties: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
description: 'Lossless Support',
|
||||||
|
name: 'Lossless Support',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
description: 'you',
|
||||||
|
name: 'you',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
conversationBlocks: [
|
||||||
|
{
|
||||||
|
partyId: '1',
|
||||||
|
text: 'Hello there :) How can we help you?',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
partyId: '2',
|
||||||
|
text: 'Hi! Where is your pricing page?',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
public static demo = () => html`<sio-subwidget-conversations></sio-subwidget-conversations>`;
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
color: ${this.goBright ? '#666' : '#ccc'};
|
||||||
|
font-family: 'Dees Sans';
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversationbox {
|
||||||
|
padding: 20px;
|
||||||
|
transition: all 0.1s;
|
||||||
|
min-height: 200px;
|
||||||
|
margin: 20px;
|
||||||
|
background: ${this.goBright ? '#fff' : '#111111'};
|
||||||
|
border-radius: 16px;
|
||||||
|
border-top: 1px solid rgba(250, 250, 250, 0.1);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversationbox .text {
|
||||||
|
font-family: 'Dees Sans';
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
display: block;
|
||||||
|
transition: all 0.1s;
|
||||||
|
padding: 8px 0px 8px 0px;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation:hover .gridcontainer {
|
||||||
|
transform: translateX(2px)
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation .gridcontainer {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50px auto;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation .gridcontainer .profilePicture {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
background: ${this.goBright ? '#EEE' : '#222'};
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation .gridcontainer .text .topLine {
|
||||||
|
font-family: 'Dees Sans';
|
||||||
|
padding-top: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridcontainer .gridcontainer .text .bottomLine {
|
||||||
|
font-family: 'Dees Sans';
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="conversationbox">
|
||||||
|
<div class="text">Your conversations:</div>
|
||||||
|
|
||||||
|
${this.conversations.map((conversationArg) => {
|
||||||
|
return html`
|
||||||
|
<div class="conversation">
|
||||||
|
<div class="gridcontainer">
|
||||||
|
<div class="profilePicture"></div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="topLine">Today at 8:01</div>
|
||||||
|
<div class="bottomLine">${conversationArg.subject}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
<dees-button>View more</dees-button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
64
ts_web/elements/sio-subwidget-onboardme.ts
Normal file
64
ts_web/elements/sio-subwidget-onboardme.ts
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
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-subwidget-onboardme')
|
||||||
|
export class SioSubwidgetOnboardme extends DeesElement {
|
||||||
|
@property()
|
||||||
|
public showCombox = false;
|
||||||
|
|
||||||
|
public static demo = () => html`
|
||||||
|
<sio-subwidget-onboardme></sio-subwidget-onboardme>
|
||||||
|
`;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
domtools.DomTools.setupDomTools();
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<style>
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.1s;
|
||||||
|
min-height: 200px;
|
||||||
|
margin: 20px 20px 40px 20px;
|
||||||
|
background: ${this.goBright ? '#fafafa' : '#111111'};
|
||||||
|
border-radius: 16px;
|
||||||
|
border-top: 1px solid rgba(250,250,250,0.1);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
|
||||||
|
padding: 24px 24px 32px 24px;
|
||||||
|
color: #CCC;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:hover) {
|
||||||
|
}
|
||||||
|
|
||||||
|
.brandingbox {
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 3px;
|
||||||
|
border-top: 1px solid rgba(250,250,250, 0.1);
|
||||||
|
font-family: 'Dees Code';
|
||||||
|
background: ${this.goBright ? '#eee' : '#111111'};
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Or search through our documentation
|
||||||
|
<dees-input-text key="searchTerm" label="Search Term:"></dees-input-text>
|
||||||
|
<dees-button>Search</dees-button>
|
||||||
|
<div class="brandingbox">last updated: ${new Date().toISOString()}</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
1
ts_web/index.ts
Normal file
1
ts_web/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './elements/index.js';
|
||||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "NodeNext",
|
||||||
|
"moduleResolution": "NodeNext",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"verbatimModuleSyntax": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"dist_*/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user