@duetds/components
Version:
This package includes Duet Core Components and related tools.
93 lines (92 loc) • 16.2 kB
JavaScript
import { r as registerInstance, h, H as Host, c as getElement } from './core-12b6bfe8.js';
import { a as jsUtils_2, j as jsUtils_6 } from './js-utils-b3b951a3.js';
import { d as duetIcons } from './icons-cfd0386d.js';
var DuetCard = /** @class */ (function () {
function DuetCard(hostRef) {
var _this = this;
registerInstance(this, hostRef);
this.cardId = jsUtils_2("DuetCard");
/**
* State() variables
* Inlined decorator, alphabetical order.
*/
this.isCollapsed = false;
/**
* The content for the card heading. If empty, both heading and collapse functionality will be hidden.
*/
this.heading = "";
/**
* Accessible label that is shown for screen reader users in the collapse toggle. Not visible for normal users.
*/
this.accessibleLabel = "Suurenna tai pienennä sisältö";
/**
* Style variation of the card. Can be one of: "default", "info", "plain".
*/
this.variation = "default";
/**
* Makes the card expand and collapse when the collapse/expand arrow in the heading is clicked or tapped. This option only works together with the heading option, meaning that you also need to set the heading for this functionality to show up.
*/
this.collapsible = false;
/**
* The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".
*/
this.headingLevel = "h2";
/**
* The padding for the card. Can be one of: "x-large" (72px), "large" (48px), "medium" (36px), "small" (28px), "x-small" (20px), "none" (0px). Please note that the card padding values don’t directly translate to similar space token names, but instead the card uses it’s own derived defaults.
*/
this.padding = "small";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Theme of the card. Can be one of: "default", "turva".
*/
this.theme = "";
this.togglePanel = function (ev) {
ev.preventDefault();
_this.isCollapsed = !_this.isCollapsed;
};
}
/**
* Component lifecycle events.
*/
DuetCard.prototype.componentWillLoad = function () {
this.hasFooter = !!this.element.querySelector("[slot='footer']");
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 () {
var _a;
var _this = this;
var TagName = this.url ? "a" : "div";
var HeadingTag = jsUtils_6(this.headingLevel);
return (h(Host, { class: { "duet-m-0": this.margin === "none", "duet-card-info": this.variation === "info" } }, h(TagName, { href: this.url, class: (_a = {
"duet-card": true
},
_a[this.padding] = true,
_a[this.variation] = true,
_a["duet-p-0"] = this.padding === "none",
_a["duet-theme-turva"] = this.theme === "turva",
_a["duet-card-has-icon"] = !!this.icon,
_a["duet-card-collapsed"] = this.isCollapsed,
_a) }, this.heading !== "" ? (h(HeadingTag, { class: "duet-card-heading" }, this.icon ? (h("div", { class: "duet-card-icon", "aria-hidden": "true", innerHTML: duetIcons[jsUtils_6(this.icon)].svg })) : (""), this.heading, this.collapsible ? (h("button", { "aria-hidden": "true", "aria-label": this.accessibleLabel, "aria-controls": this.cardId, "aria-expanded": this.isCollapsed ? "false" : "true", class: { "duet-card-collapse": true, active: this.isCollapsed }, onClick: function (ev) { return _this.togglePanel(ev); } }, h("span", { innerHTML: this.isCollapsed ? duetIcons["action-arrow-down"].svg : duetIcons["action-arrow-up"].svg }))) : (""))) : (""), h("div", { class: "duet-card-content", id: this.cardId }, h("slot", null), this.hasFooter ? (h("div", { class: "duet-card-footer" }, h("slot", { name: "footer" }))) : ("")))));
};
Object.defineProperty(DuetCard.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetCard, "style", {
get: function () { return ":host{-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;margin-bottom:20px!important;display:-ms-flexbox;display:flex;vertical-align:top;width:100%}:host(.duet-card-info){margin-bottom:16px!important}:host(.duet-m-0){margin:0!important}.duet-card{-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:20px!important;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);font-size:1rem;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:400;line-height:1.5;color:#00294d;font-style:normal;position:relative;display:block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%}.duet-card.duet-p-0{padding:0!important}.duet-card.duet-m-0{margin:0!important}\@media only screen and (min-width:36em){.duet-card{padding:28px!important}}.duet-card.duet-theme-turva{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;-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);color:#111}\@media only screen and (min-width:36em){.duet-card.x-small{padding:20px!important}}\@media only screen and (min-width:36em){.duet-card.medium{padding:28px!important}}\@media only screen and (min-width:48em){.duet-card.medium{padding:36px!important}}\@media only screen and (min-width:36em){.duet-card.large{padding:36px!important}}\@media only screen and (min-width:48em){.duet-card.large{padding:48px!important}}\@media only screen and (min-width:36em){.duet-card.x-large{padding:48px!important}}\@media only screen and (min-width:48em){.duet-card.x-large{padding:72px!important}}.duet-card.duet-card-collapsed{padding-bottom:0!important}\@media only screen and (min-width:36em){.duet-card.duet-card-collapsed{padding-bottom:0!important}}.duet-card.info{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,80,128,.04)}.duet-card.info.duet-theme-turva{background:rgba(17,17,17,.035)}.duet-card.plain{-webkit-box-shadow:none;box-shadow:none;background:transparent!important}.duet-card-heading{-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:10px 20px 11px!important;margin:-20px -20px 20px;white-space:nowrap;overflow:hidden;display:block;position:relative;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}\@media only screen and (min-width:36em){.duet-card-heading{padding:15px 28px 16px!important;margin:-28px -28px 20px}}.duet-card-collapsed .duet-card-heading{border-bottom:0!important;margin-bottom:0!important}.duet-card-heading.duet-theme-turva,.duet-theme-turva .duet-card-heading{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}\@media only screen and (min-width:36em){.x-small .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}}\@media only screen and (min-width:48em){.x-small .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}}.medium .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}\@media only screen and (min-width:36em){.medium .duet-card-heading{padding:15px 28px 16px!important;margin:-28px -28px 20px}}\@media only screen and (min-width:48em){.medium .duet-card-heading{padding:19px 36px 20px!important;margin:-36px -36px 28px}}.large .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}\@media only screen and (min-width:36em){.large .duet-card-heading{padding:19px 36px 20px!important;margin:-36px -36px 28px}}\@media only screen and (min-width:48em){.large .duet-card-heading{padding:26px 48px 27px!important;margin:-48px -48px 36px}}.x-large .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}\@media only screen and (min-width:36em){.x-large .duet-card-heading{padding:26px 48px 27px!important;margin:-48px -48px 36px}}\@media only screen and (min-width:48em){.x-large .duet-card-heading{padding:39px 72px 40px!important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0 0 20px!important;margin:0 0 20px}.duet-card-has-icon .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:48em){.duet-card-has-icon .duet-card-heading{padding-left:64px!important}}\@media only screen and (min-width:36em){.duet-card-has-icon.x-small .duet-card-heading{padding-left:56px!important}}\@media only screen and (min-width:36em){.duet-card-has-icon.small .duet-card-heading{padding-left:64px!important}}.duet-card-has-icon.medium .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:36em){.duet-card-has-icon.medium .duet-card-heading{padding-left:64px!important}}\@media only screen and (min-width:48em){.duet-card-has-icon.medium .duet-card-heading{padding-left:72px!important}}.duet-card-has-icon.large .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:36em){.duet-card-has-icon.large .duet-card-heading{padding-left:72px!important}}\@media only screen and (min-width:48em){.duet-card-has-icon.large .duet-card-heading{padding-left:84px!important}}.duet-card-has-icon.x-large .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:36em){.duet-card-has-icon.x-large .duet-card-heading{padding-left:84px!important}}\@media only screen and (min-width:48em){.duet-card-has-icon.x-large .duet-card-heading{padding-left:108px!important}}.duet-card-has-icon.none .duet-card-heading{padding-left:36px!important}\@media only screen and (min-width:48em){.duet-card-has-icon.none .duet-card-heading{padding-left:36px!important}}.duet-card-icon{position:absolute;top:48%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:20px;width:24px;height:24px}\@media only screen and (min-width:48em){.duet-card-icon{left:28px}}\@media only screen and (min-width:48em){.x-small .duet-card-icon{left:20px}}\@media only screen and (min-width:36em){.small .duet-card-icon{left:28px}}.medium .duet-card-icon{left:20px}\@media only screen and (min-width:36em){.medium .duet-card-icon{left:28px}}\@media only screen and (min-width:48em){.medium .duet-card-icon{left:36px}}.large .duet-card-icon{left:20px}\@media only screen and (min-width:36em){.large .duet-card-icon{left:36px}}\@media only screen and (min-width:48em){.large .duet-card-icon{left:48px}}.x-large .duet-card-icon{left:20px}\@media only screen and (min-width:36em){.x-large .duet-card-icon{left:48px}}\@media only screen and (min-width:48em){.x-large .duet-card-icon{left:72px}}.none .duet-card-icon{-webkit-transform:none;transform:none;top:0;left:0}.duet-card-footer{-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:20px 20px;font-size:.875rem;line-height:1.25;margin:20px -20px -20px;background:#f5f8fa;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.duet-theme-turva .duet-card-footer{background:#f7f7f7}\@media only screen and (min-width:36em){.duet-card-footer{padding:15px 28px 16px!important;margin:20px -28px -28px}}\@media only screen and (min-width:48em){.duet-card-footer{padding:15px 28px 16px!important;margin:20px -28px -28px}}\@media only screen and (min-width:36em){.x-small .duet-card-footer{padding:15px 28px 16px!important;padding-left:20px!important;margin:20px -20px -20px}}\@media only screen and (min-width:36em){.medium .duet-card-footer{padding:15px 28px 16px!important;margin:20px -28px -28px}}\@media only screen and (min-width:48em){.medium .duet-card-footer{padding:19px 36px 20px!important;margin:28px -36px -36px}}\@media only screen and (min-width:36em){.large .duet-card-footer{padding:19px 36px 20px!important;margin:28px -36px -36px}}\@media only screen and (min-width:48em){.large .duet-card-footer{padding:26px 48px 27px!important;margin:36px -48px -48px}}\@media only screen and (min-width:36em){.x-large .duet-card-footer{padding:26px 48px 27px!important;margin:36px -48px -48px}}\@media only screen and (min-width:48em){.x-large .duet-card-footer{padding:39px 72px 40px!important;margin:48px -72px -72px}}.none .duet-card-footer{padding:12px 0!important;margin:20px 0 0}.duet-card-content{-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;width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-collapse{-moz-appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:48px;border-radius:4px;-webkit-tap-highlight-color:transparent;height:100%;cursor:pointer;-webkit-appearance:none;appearance:none;position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;top:0;right:4px}.duet-card-collapse:focus{outline:none}:host(.user-is-tabbing) .duet-card-collapse:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}\@media only screen and (min-width:36em){.duet-card-collapse{right:8px}}\@media only screen and (min-width:48em){.duet-card-collapse{right:12px}}\@media only screen and (min-width:36em){.x-small .duet-card-collapse{right:4px}}\@media only screen and (min-width:48em){.x-small .duet-card-collapse{right:8px}}\@media only screen and (min-width:36em){.medium .duet-card-collapse{right:16px}}\@media only screen and (min-width:48em){.medium .duet-card-collapse{right:20px}}\@media only screen and (min-width:36em){.large .duet-card-collapse{right:20px}}\@media only screen and (min-width:48em){.large .duet-card-collapse{right:28px}}\@media only screen and (min-width:36em){.x-large .duet-card-collapse{right:36px}}\@media only screen and (min-width:48em){.x-large .duet-card-collapse{right:48px}}.none .duet-card-collapse{right:0}\@media only screen and (min-width:36em){.none .duet-card-collapse{right:0}}\@media only screen and (min-width:48em){.none .duet-card-collapse{right:0}}.duet-card-collapse span{display:inline-block;width:20px;height:20px}.duet-card-collapse svg{-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;fill:currentColor;pointer-events:none;width:100%;height:100%}"; },
enumerable: true,
configurable: true
});
return DuetCard;
}());
export { DuetCard as duet_card };