@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
46 lines (39 loc) • 4.4 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-a9091fa4.js');
const dom = require('./dom-031e5053.js');
const resources = require('./resources-656cf3a8.js');
const CSS = {
heading: "heading",
container: "container",
indented: "container--indented"
};
const SLOTS = {
parentItem: "parent-item"
};
const calcitePickListGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{background-color:transparent;display:block;margin-bottom:var(--calcite-spacing-quarter)}:host(:last-child){margin-bottom:0}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-ui-text-2);fill:var(--calcite-ui-text-2)}.heading{padding:0;margin:0;font-weight:var(--calcite-font-weight-medium);line-height:1.5}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-spacing-half) var(--calcite-spacing-half)}h1.heading{font-size:var(--calcite-font-size-2)}h2.heading{font-size:var(--calcite-font-size-1)}h3.heading{font-size:var(--calcite-font-size-0)}h4.heading,h5.heading{font-size:var(--calcite-font-size--1)}h3.heading{font-size:0.875rem;line-height:1.5;color:var(--calcite-ui-text-3);margin:var(--calcite-spacing-half) var(--calcite-spacing)}.container--indented{margin-left:var(--calcite-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-spacing-plus-half)}";
const CalcitePickListGroup = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { el, groupTitle } = this;
const rtl = dom.getElementDir(el) === "rtl";
const hasParentItem = dom.getSlotted(el, SLOTS.parentItem) !== null;
const sectionClasses = {
[CSS.container]: true,
[CSS.indented]: hasParentItem,
[resources.CSS_UTILITY.rtl]: rtl
};
const title = groupTitle;
return (index.h(index.Host, null, title ? index.h("h3", { class: CSS.heading }, title) : null, index.h("slot", { name: SLOTS.parentItem }), index.h("section", { class: sectionClasses }, index.h("slot", null))));
}
get el() { return index.getElement(this); }
};
CalcitePickListGroup.style = calcitePickListGroupCss;
exports.calcite_pick_list_group = CalcitePickListGroup;