@patternfly/elements 2.0.0-rc.3 → 2.0.0-rc.5

package/pf-timestamp/README.md

@@ -0,0 +1,64 @@
+# PatternFly Elements Timestamp
+     
+A timestamp provides consistent formats for displaying date and time values.
+
+Read more about Datetime in the [PatternFly Elements Timestamp documentation](https://patternflyelements.org/components/timestamp)
+
+##  Installation
+
+Load `<pf-timestamp>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-timestamp/pf-timestamp.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-timestamp/pf-timestamp.js';
+```
+
+## Usage
+
+### Just the date: January 2, 2006
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  date-format="long">
+</pf-timestamp>
+```
+
+### With time: Monday, January 2, 2006 at 3:04:05 PM EST
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  date-format="full"
+  time-format="long">
+</pf-timestamp>
+```
+
+### With an en-GB locale: Monday, 2 January 2006 at 15:04:05 GMT-5
+You can use any locale here.
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  date-format="full"
+  time-format="long"
+  locale="en-GB">
+</pf-timestamp>
+```
+
+### Relative time: 17 years ago
+```html
+<pf-timestamp
+  date="Mon Jan 2 15:04:05 EST 2006"
+  relative>
+</pf-timestamp>
+```
+

package/pf-timestamp/pf-timestamp.js

@@ -3,7 +3,7 @@ import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tsli
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { css } from "lit";
-const style = css `:host {\n  display: inline;\n}\n\ntime {\n  text-decoration: var(--_timestamp-text-decoration, none);\n  text-underline-offset: var(--_timestamp-text-underline-offset, initial);\n}\n`;
+const style = css `:host{display:inline}time{text-decoration:var(--_timestamp-text-decoration,none);text-underline-offset:var(--_timestamp-text-underline-offset,initial)}`;
 const BooleanStringConverter = {
     fromAttribute(value) {
         return !value || value === 'true';

package/pf-tooltip/BaseTooltip.js

@@ -5,7 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import { css } from "lit";
-const style = css `:host {\n  display: inline;\n}\n\n\n#container {\n  display: inline-flex;\n  position: relative;\n  --_floating-arrow-size: 0.5rem;\n}\n\n#invoker {\n  display: inline-block;\n  position: relative;\n}\n\n#tooltip,\n#tooltip::after {\n  position: absolute;\n}\n\n#tooltip {\n  display: block;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 10000;\n  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;\n  text-align: center;\n  word-break: break-word;\n  translate: var(--_floating-content-translate);\n  max-width: calc(100vw - 10px);\n  width: max-content;\n  top: 0;\n  left: 0;\n  will-change: opacity;\n}\n\n#tooltip::after {\n  display: block;\n  content: '';\n  rotate: 45deg;\n  width: var(--_floating-arrow-size);\n  height: var(--_floating-arrow-size);\n  will-change: left top right bottom;\n}\n\n.open #tooltip {\n  opacity: 1;\n}\n\n/* LEFT */\n.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }\n.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.left.start #tooltip::after    { top: var(--_floating-arrow-size); }\n.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }\n\n/* TOP */\n.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.top.start #tooltip::after     { left: var(--_floating-arrow-size); }\n.top.end #tooltip::after       { right: var(--_floating-arrow-size); }\n\n/* RIGHT */\n.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.right.start #tooltip::after   { top: var(--_floating-arrow-size); }\n.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }\n\n/* BOTTOM */\n.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }\n.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }\n\n`;
+const style = css `:host{display:inline}#container{display:inline-flex;position:relative;--_floating-arrow-size:0.5rem}#invoker{display:inline-block;position:relative}#tooltip,#tooltip::after{position:absolute}#tooltip{display:block;opacity:0;pointer-events:none;z-index:10000;transition:opacity .3s cubic-bezier(.54, 1.5, .38, 1.11) 0s;text-align:center;word-break:break-word;translate:var(--_floating-content-translate);max-width:calc(100vw - 10px);width:max-content;top:0;left:0;will-change:opacity}#tooltip::after{display:block;content:'';rotate:45deg;width:var(--_floating-arrow-size);height:var(--_floating-arrow-size);will-change:left top right bottom}.open #tooltip{opacity:1}.left #tooltip::after{right:calc(-.5 * var(--_floating-arrow-size))}.left.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.left.start #tooltip::after{top:var(--_floating-arrow-size)}.left.end #tooltip::after{bottom:var(--_floating-arrow-size)}.top #tooltip::after{top:calc(100% - .5 * var(--_floating-arrow-size))}.top.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.top.start #tooltip::after{left:var(--_floating-arrow-size)}.top.end #tooltip::after{right:var(--_floating-arrow-size)}.right #tooltip::after{right:calc(100% - .5 * var(--_floating-arrow-size))}.right.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.right.start #tooltip::after{top:var(--_floating-arrow-size)}.right.end #tooltip::after{bottom:var(--_floating-arrow-size)}.bottom #tooltip::after{bottom:calc(100% - .5 * var(--_floating-arrow-size))}.bottom.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.bottom.start #tooltip::after{left:var(--_floating-arrow-size)}.bottom.end #tooltip::after{right:var(--_floating-arrow-size)}`;
 const enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
 const exitEvents = ['focusout', 'blur', 'mouseleave'];
 export class BaseTooltip extends LitElement {

package/pf-tooltip/README.md

@@ -0,0 +1,64 @@
+# Tooltip
+A tooltip is a floating text area triggered by a user that provides helpful or contextual information.
+
+## Usage
+A tooltip is used by wrapping an html element in the pf-tooltip element along with contextual information to be displayed alongside of the element.  
+
+Read more about tooltips in the [PatternFly Elements Tooltip documentation](https://patternflyelements.org/components/tooltip)
+
+##  Installation
+
+Load `<pf-tooltip>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-tooltip/pf-tooltip.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
+```
+
+## Usage
+
+
+### Basic Tooltip 
+```html
+<pf-tooltip> This is An Element
+  <div slot="content">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et 
+    ultrices.
+  </div>
+</pf-tooltip>
+```
+
+### Tooltip With Left Positioning (also available: top, right, bottom)
+```html
+<pf-tooltip position="left"> This is An Element
+  <div slot="content">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et 
+    ultrices.
+  </div>
+</pf-tooltip>
+```
+
+### Tooltip With Left Positioning And Offset
+```html
+<pf-tooltip position="left" offset="10, 10">
+    <div>
+        This is An Element 
+    </div>
+    <div slot="content">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
+    </div>
+</pf-tooltip>
+```

package/pf-tooltip/pf-tooltip.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, property } from 'lit/decorators.js';
 import { BaseTooltip } from './BaseTooltip.js';
 import { css } from "lit";
-const styles = css `:host {\n  --_timestamp-text-decoration: underline dashed 1px;\n  --_timestamp-text-underline-offset: 4px;\n}\n\n#tooltip {\n  --_timestamp-text-decoration: none;\n  --_timestamp-text-underline-offset: initial;\n  line-height: var(--pf-c-tooltip--line-height, 1.5);\n  max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);\n  box-shadow: var(--pf-c-tooltip--BoxShadow,\n    var(--pf-global--BoxShadow--md,\n      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  padding:\n    var(--pf-c-tooltip__content--PaddingTop,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingRight,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingBottom,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingLeft,\n      var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-tooltip__content--Color,\n    var(--pf-global--Color--light-100, #ffffff));\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n#container {\n  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);\n}\n\n#tooltip::after {\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n`;
+const styles = css `:host{--_timestamp-text-decoration:underline dashed 1px;--_timestamp-text-underline-offset:4px}#tooltip{--_timestamp-text-decoration:none;--_timestamp-text-underline-offset:initial;line-height:var(--pf-c-tooltip--line-height, 1.5);max-width:var(--pf-c-tooltip--MaxWidth,18.75rem);box-shadow:var(--pf-c-tooltip--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));padding:var(--pf-c-tooltip__content--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingRight,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingLeft,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-tooltip__content--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}#container{--_floating-arrow-size:var(--pf-c-tooltip__arrow--Width, 0.5rem)}#tooltip::after{background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}`;
 /**
  * Patternfly tooltip
  *