fix(core): update

This commit is contained in:
Philipp Kunz 2020-12-01 22:24:54 +00:00
parent 8ee99136cc
commit 222f06bda7
3 changed files with 863 additions and 74 deletions

894
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,10 +13,12 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.47", "@designestate/dees-domtools": "^1.0.79",
"@designestate/dees-wcctools": "^1.0.37", "@designestate/dees-wcctools": "^1.0.49",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"lit-element": "^2.4.0", "lit-element": "^2.4.0",
"typescript": "^4.0.2" "typescript": "^4.1.2"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.25", "@gitzone/tsbuild": "^2.1.25",

View File

@ -2,13 +2,33 @@ import { LitElement, html, property, customElement } from 'lit-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faFacebook } from '@fortawesome/free-brands-svg-icons';
type TBrand = 'facebook' | 'twitter';
const brandIcons: {[key: string]: IconDefinition} = {
facebook: faFacebook
};
@customElement('dees-icon') @customElement('dees-icon')
export class DeesIcon extends LitElement { export class DeesIcon extends LitElement {
public static demo = () => html`<dees-icon iconName="visibility"></dees-icon>`; public static demo = () => html`
<div style="background: #fff; padding: 10px;">
<dees-icon iconName="visibility"></dees-icon>
<dees-icon brandName="facebook"></dees-icon>
</div>
`;
@property() @property()
public iconName: string; public iconName: string;
@property()
public brandName: TBrand;
@property()
public svgSize: number = 20;
constructor() { constructor() {
super(); super();
domtools.elementBasic.setup(); domtools.elementBasic.setup();
@ -23,6 +43,10 @@ export class DeesIcon extends LitElement {
line-height: inherit; line-height: inherit;
font-size: inherit; font-size: inherit;
} }
#iconContainer svg {
display: inline-block;
height: ${this.svgSize}px;
}
.material-icons { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
@ -49,7 +73,14 @@ export class DeesIcon extends LitElement {
font-feature-settings: 'liga'; font-feature-settings: 'liga';
} }
</style> </style>
<i class="material-icons">${this.iconName}</i> ${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
${this.brandName ? html`<div id="iconContainer"></div>` : html``}
`; `;
} }
firstUpdated() {
if (this.brandName && !this.iconName) {
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
}
}
} }