@duetds/components
Version:
This package includes Duet Components and related tools.
59 lines (58 loc) • 4.07 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './chunk-5cdff7bc.js';
import { c as classNames } from './chunk-ea56b96b.js';
var DuetCard = /** @class */ (function () {
function DuetCard(hostRef) {
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.
*/
DuetCard.prototype.componentWillLoad = function () {
// 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.
*/
DuetCard.prototype.render = function () {
// Set constants for card type and classes used.
var cardClasses = 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 (h("a", { href: this.url, class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null)));
// If URL prop doesn’t exist, render a regular div
}
else {
return (h("div", { class: cardClasses }, this.cardTitle !== "" ? h("h2", null, this.cardTitle) : "", h("slot", null)));
}
};
Object.defineProperty(DuetCard.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetCard, "style", {
get: function () { 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}"; },
enumerable: true,
configurable: true
});
return DuetCard;
}());
export { DuetCard as duet_card };