fix(core): update
This commit is contained in:
parent
4ad638dad8
commit
9f8a5fedfa
@ -9,7 +9,6 @@
|
||||
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" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
@ -18,9 +17,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../ts_web/index.ts"></script>
|
||||
<script src="./index.ts"></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 '@designestate/dees-wcctools';
|
||||
import * as deesDomTools from '@designestate/dees-domtools';
|
||||
|
||||
// elements and pages
|
||||
import * as elements from '../ts_web/elements';
|
||||
import * as pages from '../ts_web/pages';
|
||||
|
||||
deesWccTools.setupWccTools(elements as any, pages);
|
||||
deesDomTools.elementBasic.setup();
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"gitzone": {
|
||||
"projectType": "element",
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
|
||||
5555
package-lock.json
generated
5555
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@losslessone_private/dees-catalog",
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.18",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
@ -7,24 +7,23 @@
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"scripts": {
|
||||
"test": "npm run build",
|
||||
"build": "tsbuild custom ts_web --web",
|
||||
"build": "tsbuild element && tsbundle element --production",
|
||||
"watch": "tswatch element"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@gitzone/tsrun": "^1.1.17",
|
||||
"@pushrocks/smartexpress": "^3.0.10",
|
||||
"lit-element": "^2.0.0-rc.5",
|
||||
"lit-html": "^1.0.0-rc.2",
|
||||
"typescript": "^3.2.2"
|
||||
"@designestate/dees-domtools": "^1.0.47",
|
||||
"@designestate/dees-wcctools": "^1.0.37",
|
||||
"lit-element": "^2.4.0",
|
||||
"typescript": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.8",
|
||||
"@gitzone/tswatch": "^1.0.30",
|
||||
"@pushrocks/parcel-plugin-wrapper": "^1.0.5",
|
||||
"@pushrocks/projectinfo": "^4.0.2",
|
||||
"tslint": "^5.11.0",
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.78",
|
||||
"@gitzone/tswatch": "^1.0.50",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.17.0"
|
||||
},
|
||||
"files": [
|
||||
@ -38,5 +37,8 @@
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
]
|
||||
}
|
||||
|
||||
24
readme.md
24
readme.md
@ -8,16 +8,26 @@ a webcomponents catalog for handling daily stuff on the web
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/dees-catalog/)
|
||||
|
||||
## Status for master
|
||||
[](https://gitlab.com/designestate/dees-catalog/commits/master)
|
||||
[](https://gitlab.com/designestate/dees-catalog/commits/master)
|
||||
[](https://www.npmjs.com/package/@designestate/dees-catalog)
|
||||
[](https://snyk.io/test/npm/@designestate/dees-catalog)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://prettier.io/)
|
||||
|
||||
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)
|
||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||
|
||||
## Usage
|
||||
|
||||
## Contribution
|
||||
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
|
||||
## Contribution
|
||||
|
||||
|
||||
128
ts_web/elements/dees-button.ts
Normal file
128
ts_web/elements/dees-button.ts
Normal file
@ -0,0 +1,128 @@
|
||||
import { customElement, html, LitElement, property, TemplateResult } from 'lit-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@customElement('dees-button')
|
||||
export class DeesButton extends LitElement {
|
||||
@property()
|
||||
text: string;
|
||||
|
||||
@property()
|
||||
eventDetailData: string;
|
||||
|
||||
@property()
|
||||
disabled = false;
|
||||
|
||||
@property()
|
||||
isQuote = false;
|
||||
|
||||
@property()
|
||||
isHidden = false;
|
||||
|
||||
@property()
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
border-top: 1px solid #444;
|
||||
border-radius: 2px;
|
||||
line-height: 40px;
|
||||
padding: 0px 10px;
|
||||
min-width: 100px;
|
||||
color: ${this.isQuote ? '#ffffff' : '#333333' };
|
||||
user-select: none;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
background: #039BE5;
|
||||
border-top: 1px solid #039BE5;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background: #0277BD;
|
||||
border-top: 1px solid #0277BD;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
background: #fff;
|
||||
border: 1px solid #eeeff3;
|
||||
color: #9b9b9e;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button.highlighted {
|
||||
background: #e4002b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.discreet {
|
||||
background: none;
|
||||
border: 1px solid #9b9b9e;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.button.discreet:hover {
|
||||
background: rgba(0,0,0,0.1)
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.big {
|
||||
display: inline-block;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0px 48px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
</style>
|
||||
<div class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.disabled ? 'disabled' : null}" @click="${this.dispatchClick}">
|
||||
${this.text ? this.text : this.textContent}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async dispatchClick() {
|
||||
if (this.disabled) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.dispatchEvent(new CustomEvent('clicked', {
|
||||
detail: {
|
||||
data: this.eventDetailData
|
||||
},
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
|
||||
public async firstUpdated () {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
19
ts_web/elements/dees-form-submit.ts
Normal file
19
ts_web/elements/dees-form-submit.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { customElement, html, LitElement } from 'lit-element';
|
||||
|
||||
import {DeesForm} from './dees-form';
|
||||
|
||||
@customElement('dees-form-submit')
|
||||
export class DeesFormSubmit extends LitElement {
|
||||
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-button @click="${this.submit}">${this.textContent}</dees-button>
|
||||
`;
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
const parentElement: DeesForm = this.parentElement as DeesForm;
|
||||
parentElement.gatherAndDispatch();
|
||||
}
|
||||
}
|
||||
50
ts_web/elements/dees-form.ts
Normal file
50
ts_web/elements/dees-form.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { customElement, html, TemplateResult, LitElement } from 'lit-element';
|
||||
|
||||
import { DeesInputCheckbox } from './dees-input-checkbox';
|
||||
import { DeesInputText } from './dees-input-text';
|
||||
import { DeesInputQuantitySelector } from './dees-input-quantityselector';
|
||||
import { DeesInputRadio } from './dees-input-radio';
|
||||
|
||||
@customElement('dees-form')
|
||||
export class DeesForm extends LitElement {
|
||||
public static demo = () => html`
|
||||
<dees-form style="display: block; margin:auto; width: 500px; padding: 20px; background: #111;">
|
||||
<dees-input-text key="hello1"></dees-input-text>
|
||||
<dees-input-text key="hello2"></dees-input-text>
|
||||
<dees-form-submit>Submit</dees-form-submit>
|
||||
</dees-form>`;
|
||||
|
||||
public name: string = 'myform';
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
public async gatherAndDispatch() {
|
||||
|
||||
const children: Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio> = this.children as any;
|
||||
const valueObject: { [key: string]: string | number | boolean} = {};
|
||||
for (const child of children) {
|
||||
if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
|
||||
valueObject[child.key] = child.value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
console.log(valueObject);
|
||||
const formDataEvent = new CustomEvent('formData', {
|
||||
detail: {
|
||||
data: valueObject
|
||||
},
|
||||
bubbles: true
|
||||
});
|
||||
this.dispatchEvent(formDataEvent);
|
||||
}
|
||||
}
|
||||
127
ts_web/elements/dees-input-checkbox.ts
Normal file
127
ts_web/elements/dees-input-checkbox.ts
Normal file
@ -0,0 +1,127 @@
|
||||
import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@customElement('dees-input-checkbox')
|
||||
export class DeesInputCheckbox extends LitElement {
|
||||
public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@property()
|
||||
public value: boolean = false;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 20px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: grid;
|
||||
grid-template-columns: 25px auto;
|
||||
padding: 5px 0px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.maincontainer:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 15px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
transition: all 0.1s;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.checkbox.selected {
|
||||
background: #039BE5;
|
||||
border: 1px solid #039BE5;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
-ms-transform: rotate(45deg); /* IE 9 */
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.checkmark_stem {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
background-color: #ccc;
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.checkmark_kick {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
left: 8px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer" @click="${this.toggleSelected}">
|
||||
<div class="checkbox ${this.value ? 'selected' : ''}">
|
||||
${this.value
|
||||
? html`
|
||||
<span class="checkmark">
|
||||
<div class="checkmark_stem"></div>
|
||||
<div class="checkmark_kick"></div>
|
||||
</span>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
<div class="label">${this.label}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async toggleSelected() {
|
||||
this.value = !this.value;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
116
ts_web/elements/dees-input-dropdown.ts
Normal file
116
ts_web/elements/dees-input-dropdown.ts
Normal file
@ -0,0 +1,116 @@
|
||||
import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@customElement('dees-input-dropdown')
|
||||
export class DeesInputDropdown extends LitElement {
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public options: {option: string, key: string, payload?: any}[] = [];
|
||||
|
||||
@property()
|
||||
public selectedOption: {option: string, key: string, payload?: any} = {
|
||||
key: null,
|
||||
option: null,
|
||||
payload: null
|
||||
};
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.selectedBox {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
height: 40px;
|
||||
border: 1px solid #CCC;
|
||||
padding: 12px;
|
||||
z-index: 0px;
|
||||
}
|
||||
|
||||
.selectionBox {
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
max-width: 420px;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
|
||||
height: 40px;
|
||||
margin-top: -40px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.selectionBox.show {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
|
||||
${this.selectedOption?.option}
|
||||
</div>
|
||||
<div class="selectionBox">
|
||||
${this.options.map(option => {
|
||||
return html`
|
||||
<div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
|
||||
`
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.selectedOption = this.options[0] || null;
|
||||
}
|
||||
|
||||
public async updateSelection(selectedOption) {
|
||||
this.selectedOption = selectedOption;
|
||||
|
||||
this.dispatchEvent(new CustomEvent('selectedOption', {
|
||||
detail: selectedOption,
|
||||
bubbles: true
|
||||
}));
|
||||
this.toggleSelectionBox();
|
||||
}
|
||||
|
||||
public toggleSelectionBox() {
|
||||
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
|
||||
}
|
||||
}
|
||||
85
ts_web/elements/dees-input-quantityselector.ts
Normal file
85
ts_web/elements/dees-input-quantityselector.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import { customElement, property, html, TemplateResult, LitElement } from 'lit-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@customElement('dees-input-quantityselector')
|
||||
export class DeesInputQuantitySelector extends LitElement {
|
||||
public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property({
|
||||
type: Number
|
||||
})
|
||||
public value: number = 1;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
width: 110px;
|
||||
user-select: none;
|
||||
}
|
||||
.maincontainer {
|
||||
transition: all 0.1s;
|
||||
font-size: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 33% 34% 33%;
|
||||
text-align: center;
|
||||
background:none;
|
||||
line-height: 40px;
|
||||
padding: 0px;
|
||||
min-width: 100px;
|
||||
color: #CCC;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.minus {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.selector {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.selector:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mainContainer:hover {
|
||||
color: #fff;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="maincontainer">
|
||||
<div class="selector minus" @click="${() => {this.decrease();}}">-</div>
|
||||
<div class="quantity">${this.value}</div>
|
||||
<div class="selector plus" @click="${() => {this.increase();}}">+</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public increase () {
|
||||
this.value++;
|
||||
}
|
||||
|
||||
public decrease () {
|
||||
if (this.value > 0) {
|
||||
this.value--;
|
||||
} else {
|
||||
// nothing to do here
|
||||
}
|
||||
}
|
||||
}
|
||||
100
ts_web/elements/dees-input-radio.ts
Normal file
100
ts_web/elements/dees-input-radio.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
|
||||
|
||||
@customElement('dees-input-radio')
|
||||
export class DeesInputRadio extends LitElement {
|
||||
public static demo = () => html`<dees-input-radio></dees-input-radio>`;
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@property()
|
||||
public value: boolean = false;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 20px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
transition: all 0.3s;
|
||||
display: grid;
|
||||
grid-template-columns: 25px auto;
|
||||
padding: 5px 0px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.maincontainer:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 15px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #999;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.checkbox.selected {
|
||||
background: #039BE5;
|
||||
border: 1px solid #039BE5;
|
||||
}
|
||||
|
||||
.maincontainer:hover .checkbox.selected {
|
||||
background: #03A9F4;
|
||||
}
|
||||
|
||||
.innercircle {
|
||||
transition: all 0.3s;
|
||||
margin: 6px 0px 0px 6px;
|
||||
background: #222;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer" @click="${this.toggleSelected}">
|
||||
<div class="checkbox ${this.value ? 'selected' : ''}">
|
||||
${this.value ? html`<div class="innercircle"></div>`: html``}
|
||||
</div>
|
||||
<div class="label">${this.label}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async toggleSelected () {
|
||||
this.value = !this.value;
|
||||
this.dispatchEvent(new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
73
ts_web/elements/dees-input-text.ts
Normal file
73
ts_web/elements/dees-input-text.ts
Normal file
@ -0,0 +1,73 @@
|
||||
import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
|
||||
|
||||
@customElement('dees-input-text')
|
||||
export class DeesInputText extends LitElement {
|
||||
public static demo = () => html`<dees-input-text></dees-input-text>`;
|
||||
|
||||
@property()
|
||||
public label: string = 'Label';
|
||||
|
||||
@property()
|
||||
public key: string;
|
||||
|
||||
@property()
|
||||
public value: string;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: grid;
|
||||
margin: 10px 0px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-top: 5px;
|
||||
background: #222;
|
||||
border: none;
|
||||
border-top: 1px solid #444;
|
||||
border-bottom: 1px solid #333;
|
||||
padding-left:10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
line-height: 48px;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="label">${this.label}</div>
|
||||
<input type="text" @input="${this.updateValue}" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async updateValue(eventArg: Event) {
|
||||
const target: any = eventArg.target;
|
||||
this.value = target.value;
|
||||
|
||||
}
|
||||
}
|
||||
20
ts_web/elements/dees-toast.ts
Normal file
20
ts_web/elements/dees-toast.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { customElement, LitElement, TemplateResult, html } from 'lit-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@customElement('dees-toast')
|
||||
export class DeesToast extends LitElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style></style>
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
||||
9
ts_web/elements/index.ts
Normal file
9
ts_web/elements/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export * from './dees-button';
|
||||
export * from './dees-form';
|
||||
export * from './dees-form-submit';
|
||||
export * from './dees-input-checkbox';
|
||||
export * from './dees-input-dropdown';
|
||||
export * from './dees-input-quantityselector';
|
||||
export * from './dees-input-radio';
|
||||
export * from './dees-input-text';
|
||||
export * from './dees-toast';
|
||||
@ -1,35 +0,0 @@
|
||||
import { LitElement, property, html, customElement } from 'lit-element';
|
||||
import { TemplateResult } from 'lit-html';
|
||||
|
||||
@customElement('lele-element')
|
||||
export class LeleElement extends LitElement {
|
||||
@property()
|
||||
public footerText = `Lossless GmbH - 2018`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// you have access to all kinds of things through this.
|
||||
// this.setAttribute('gotIt','true');
|
||||
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #FCFCFC;
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1 @@
|
||||
import { LeleElement } from './elements/lele-element';
|
||||
|
||||
export {
|
||||
LeleElement
|
||||
};
|
||||
export * from './elements/index';
|
||||
|
||||
1
ts_web/themelogic/index.ts
Normal file
1
ts_web/themelogic/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export {}
|
||||
Loading…
Reference in New Issue
Block a user