UNPKG

@duetds/components

Version:

This package includes Duet Components and related tools.

59 lines (58 loc) 4.07 kB
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 };