@duetds/components
Version:
This package includes Duet Components and related tools.
56 lines (51 loc) • 3.84 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const __chunk_1 = require('./chunk-7888512a.js');
const __chunk_3 = require('./chunk-af70acd5.js');
class DuetCard {
constructor(hostRef) {
__chunk_1.registerInstance(this, hostRef);
/**
* The content for the card title
*/
this.cardTitle = "";
/**
* The padding for the card. Can be one of: large, medium, small.
*/
this.padding = "small";
/**
* Theme of the card. Can be one of: default, turva.
*/
this.theme = "";
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
// Check whether global Turva theme is active
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
// Set constants for card type and classes used.
const cardClasses = __chunk_3.classNames("duet-card", `${this.padding}`, {
"duet-theme-turva": this.theme === "turva",
});
// If URL prop exists render an anchor instead of a div
if (this.url) {
return (__chunk_1.h("a", { href: this.url, class: cardClasses }, this.cardTitle !== "" ? __chunk_1.h("h2", null, this.cardTitle) : "", __chunk_1.h("slot", null)));
// If URL prop doesn’t exist, render a regular div
}
else {
return (__chunk_1.h("div", { class: cardClasses }, this.cardTitle !== "" ? __chunk_1.h("h2", null, this.cardTitle) : "", __chunk_1.h("slot", null)));
}
}
get element() { return __chunk_1.getElement(this); }
static get style() { return ":host{background:transparent;padding:0;margin:0;margin-bottom:20px;display:-ms-flexbox;display:flex;vertical-align:top}.duet-card,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;width:100%}.duet-card{background:transparent;padding:0;margin:0;padding:28px;border-radius:4px;background:#fff;-webkit-box-shadow:0 2px 6px 0 rgba(0,41,77,.07),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);box-shadow:0 2px 6px 0 rgba(0,41,77,.07),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);display:block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.duet-theme-turva .duet-card{-webkit-box-shadow:0 2px 6px 0 hsla(0,0%,45.9%,.13),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);box-shadow:0 2px 6px 0 hsla(0,0%,45.9%,.13),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07)}.duet-card.medium{padding:36px}.duet-card.large{padding:48px}h2{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:15px 28px 16px;margin:-28px -28px 20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:800;font-size:1.25rem;border-bottom:1px solid #e1e3e6;color:#00294d}.duet-theme-turva h2{border-color:#e6e6e6;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111}.medium h2{padding:19px 36px 20px;margin:-36px -36px 28px}.large h2{padding:26px 48px 27px;margin:-48px -48px 36px}"; }
}
exports.duet_card = DuetCard;