@emuanalytics/flow-rdf-ui 4.1.0-preview.14 → 4.1.0-preview.15

package/dist/components/card/card.component.mjs

@@ -1,33 +1,53 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import styles from './card.styles.mjs';
+import { isStringFull } from '@emuanalytics/flow-rdf-core/utils';
+import { property } from 'lit/decorators.js';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
 class FlowUiCard extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
+    this.title = "";
   }
   render() {
+    const hasHeader = isStringFull(this.title) ?? this.hasSlotController.test("title");
     return html`
       <div
         part="base"
         class=${classMap({
       card: true,
-      "card--has-footer": this.hasSlotController.test("footer"),
-      "card--has-image": this.hasSlotController.test("image"),
-      "card--has-header": this.hasSlotController.test("header")
+      "card--has-header": hasHeader
     })}
+        title=""
       >
-        <slot name="image" part="image" class="card__image"></slot>
-        <slot name="header" part="header" class="card__header"></slot>
+        ${hasHeader ? html`
+              <header part="header" class="card__header">
+                <span part="title" class="card__title"><slot name="title">${this.title}</slot></span>
+              </header>
+            ` : nothing}
+
         <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" class="card__footer"></slot>
       </div>
     `;
   }
 }
 FlowUiCard.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiCard.prototype, "title", 2);
 
 export { FlowUiCard as default };

package/dist/components/card/card.styles.mjs

@@ -5,6 +5,8 @@ const styles = css`
   ${componentStyles}
 
   :host {
+    display: block;
+
     --border-color: var(--flow-ui-card-border-color);
     --border-radius: var(--flow-ui-card-border-radius);
     --border-width: var(--flow-ui-card-border-width);
@@ -12,8 +14,6 @@ const styles = css`
 
     --background-color: var(--flow-ui-card-background-color);
     --color: var(--flow-ui-card-color);
-
-    display: inline-block;
   }
 
   .card {
@@ -26,36 +26,9 @@ const styles = css`
     border-radius: var(--border-radius);
   }
 
-  .card__image {
-    display: flex;
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    margin: calc(-1 * var(--border-width));
-    overflow: hidden;
-  }
-
-  .card__image::slotted(img) {
-    display: block;
-    width: 100%;
-  }
-
-  .card:not(.card--has-image) .card__image {
-    display: none;
-  }
-
   .card__header {
-    display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
     padding: calc(var(--padding) / 2) var(--padding);
-  }
-
-  .card:not(.card--has-header) .card__header {
-    display: none;
-  }
-
-  .card:not(.card--has-image) .card__header {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
+    padding-bottom: 0;
   }
 
   .card__body {
@@ -63,16 +36,6 @@ const styles = css`
     padding: var(--padding);
   }
 
-  .card--has-footer .card__footer {
-    display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--padding);
-  }
-
-  .card:not(.card--has-footer) .card__footer {
-    display: none;
-  }
-
   /* Remove margin from first and last child of default slot */
   ::slotted(:nth-child(1 of :not([slot]))) {
     margin-top: 0;

package/dist/components/chart/chart.component.mjs

@@ -25,7 +25,7 @@ class FlowUiChart extends FlowRdfElement {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "label");
     this._chartRef = createRef();
-    this.label = "";
+    this.title = "";
     this.plugins = [];
   }
   /** The Chart.js chart instance. */
@@ -58,12 +58,12 @@ class FlowUiChart extends FlowRdfElement {
     }
   }
   render() {
-    const hasHeader = isStringFull(this.label) || this.hasSlotController.test("label");
+    const hasHeader = isStringFull(this.title) || this.hasSlotController.test("title");
     return html`
-      <div part="base" class="chart">
+      <div part="base" class="chart" title="">
         ${hasHeader ? html`
               <header part="header" class="chart__header">
-                <span part="label" class="chart__label"><slot name="label">${this.label}</slot></span>
+                <span part="title" class="chart__title"><slot name="title">${this.title}</slot></span>
               </header>
             ` : nothing}
 
@@ -76,8 +76,8 @@ class FlowUiChart extends FlowRdfElement {
 }
 FlowUiChart.styles = styles;
 __decorateClass([
-  property()
-], FlowUiChart.prototype, "label", 2);
+  property({ reflect: true })
+], FlowUiChart.prototype, "title", 2);
 __decorateClass([
   property()
 ], FlowUiChart.prototype, "type", 2);

package/dist/components/dialog/dialog.component.mjs

@@ -32,7 +32,7 @@ class FlowUiDialog extends FlowRdfElement {
     this.hasSlotController = new HasSlotController(this, "footer");
     this.localize = new LocalizeController(this);
     this.open = false;
-    this.heading = "";
+    this.title = "";
     this.noHeader = false;
     this.tabbed = false;
   }
@@ -162,7 +162,7 @@ class FlowUiDialog extends FlowRdfElement {
     this.syncTabbedDialog();
   }
   syncTabbedDialog() {
-    this.heading = capitalize(this.tabGroup.activeTab?.panel) || "";
+    this.title = capitalize(this.tabGroup.activeTab?.panel) || "";
   }
   handleChildHide(ev) {
     ev.stopPropagation();
@@ -170,8 +170,8 @@ class FlowUiDialog extends FlowRdfElement {
   renderHeader(slot) {
     return html`
       <header slot=${ifDefined(slot)} part="header" class="dialog__header">
-        <h2 part="heading" class="dialog__heading" id="heading">
-          <slot name="heading">${this.heading.length > 0 ? this.heading : String.fromCharCode(65279)}</slot>
+        <h2 part="heading" class="dialog__title" id="heading">
+          <slot name="title">${this.title.length > 0 ? this.title : String.fromCharCode(65279)}</slot>
         </h2>
         <div part="header-actions" class="dialog__header-actions">
           <slot name="header-actions"></slot>
@@ -224,6 +224,7 @@ class FlowUiDialog extends FlowRdfElement {
       "dialog--open": this.open,
       "dialog--has-footer": this.hasSlotController.test("footer")
     })}
+        title=""
       >
         <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
 
@@ -233,7 +234,7 @@ class FlowUiDialog extends FlowRdfElement {
           role="dialog"
           aria-modal="true"
           aria-hidden=${this.open ? "false" : "true"}
-          aria-label=${ifDefined(this.noHeader ? this.heading : void 0)}
+          aria-label=${ifDefined(this.noHeader ? this.title : void 0)}
           aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
           tabindex="0"
         >
@@ -261,7 +262,7 @@ __decorateClass([
 ], FlowUiDialog.prototype, "open", 2);
 __decorateClass([
   property({ reflect: true })
-], FlowUiDialog.prototype, "heading", 2);
+], FlowUiDialog.prototype, "title", 2);
 __decorateClass([
   property({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowUiDialog.prototype, "noHeader", 2);

package/dist/components/dialog/dialog.styles.mjs

@@ -18,6 +18,7 @@ const styles = css`
     --body-spacing: 0 var(--flow-ui-spacing-x-large);
   }
 
+  /* Remove margins from first and last items slotted into dialog body */
   ::slotted(:nth-child(1 of :not([slot]))) {
     margin-top: 0;
   }
@@ -71,7 +72,7 @@ const styles = css`
     display: flex;
   }
 
-  .dialog__heading {
+  .dialog__title {
     flex: 1 1 auto;
     font: inherit;
     font-size: var(--flow-ui-font-size-large);

package/dist/components/gauge/gauge.component.mjs

@@ -79,7 +79,7 @@ class FlowUiGauge extends FlowRdfElement {
   infoDialogTemplate() {
     return html`
       <flow-ui-dialog class="gauge__info-dialog">
-        <div slot="heading" class="gauge__info-dialog-heading">${this.headerIconTemplate()} ${this.label}</div>
+        <div slot="heading" class="gauge__info-dialog-heading">${this.headerIconTemplate()} ${this.title}</div>
         <slot name="info"></slot>
         <div slot="footer">
           <flow-ui-button autofocus slot="footer" variant="primary" @click=${this.hideInfoDialog}>OK</flow-ui-button>
@@ -95,12 +95,13 @@ class FlowUiGauge extends FlowRdfElement {
         class=${classMap({
       gauge: true
     })}
+        title=""
       >
         <div part="header" class="gauge__header">
           ${this.headerIconTemplate()}
-          <span class="gauge__label-wrapper">
-            <span part="label" class="gauge__label">
-              <slot name="label">${this.label}</slot>
+          <span class="gauge__title-wrapper">
+            <span part="title" class="gauge__title">
+              <slot name="title">${this.title}</slot>
             </span>
           </span>
           ${hasInfo ? this.infoButtonTemplate() : nothing}
@@ -124,8 +125,8 @@ __decorateClass([
   query(".gauge__info-dialog")
 ], FlowUiGauge.prototype, "_infoDialog", 2);
 __decorateClass([
-  property()
-], FlowUiGauge.prototype, "label", 2);
+  property({ reflect: true })
+], FlowUiGauge.prototype, "title", 2);
 __decorateClass([
   property()
 ], FlowUiGauge.prototype, "units", 2);

package/dist/components/gauge/gauge.styles.mjs

@@ -56,13 +56,13 @@ const styles = css`
   }
 
   /* Wrapper needed to support text ellipsis in flex item */
-  .gauge__label-wrapper {
+  .gauge__title-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
   }
 
-  .gauge__label {
+  .gauge__title {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

package/dist/components/panel-header/panel-header.component.mjs

@@ -82,6 +82,7 @@ class FlowUiPanelHeader extends FlowRdfElement {
         tabindex="0"
         @click=${this.handleHeaderClick}
         @keydown=${this.handleHeaderKeyDown}
+        title=""
       >
         <slot
           name="prefix"
@@ -91,8 +92,8 @@ class FlowUiPanelHeader extends FlowRdfElement {
           @keydown=${this.handleHeaderKeyDown}
         ></slot>
 
-        <slot name="label" part="label" class="panel-header__label-slot">
-          <span class="panel-header__label">${this.label}</span>
+        <slot name="title" part="title" class="panel-header__title-slot">
+          <span class="panel-header__title">${this.title}</span>
         </slot>
 
         <slot
@@ -122,8 +123,8 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiPanelHeader.prototype, "closed", 2);
 __decorateClass([
-  property()
-], FlowUiPanelHeader.prototype, "label", 2);
+  property({ reflect: true })
+], FlowUiPanelHeader.prototype, "title", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiPanelHeader.prototype, "fixed", 2);

package/dist/components/panel-header/panel-header.styles.mjs

@@ -33,14 +33,14 @@ const styles = css`
     color: var(--accessory-color);
   }
 
-  .panel-header__label-slot {
+  .panel-header__title-slot {
     display: flex;
     align-items: center;
     flex: 1;
     min-width: 0;
   }
 
-  .panel-header__label {
+  .panel-header__title {
     font-size: var(--flow-ui-panel-header-font-size);
     font-weight: var(--flow-ui-panel-header-font-weight);
     text-overflow: ellipsis;