@limetech/lime-elements 34.1.0-next.8 → 34.1.0-next.9

package/dist/lime-elements/p-f83213b8.js

@@ -0,0 +1 @@
+import{v as r,c as n,p as t}from"./p-426d11b4.js";import{d as u}from"./p-379955f4.js";import{S as o}from"./p-c93050d6.js";import{i as a}from"./p-0b1af919.js";import{i}from"./p-7f43b0c4.js";import{i as e}from"./p-858c6b82.js";function f(r,n,t){switch(t.length){case 0:return r.call(n);case 1:return r.call(n,t[0]);case 2:return r.call(n,t[0],t[1]);case 3:return r.call(n,t[0],t[1],t[2])}return r.apply(n,t)}var c,s,v,p=Date.now,m=(c=u?function(r,n){return u(r,"toString",{configurable:!0,enumerable:!1,value:(t=n,function(){return t}),writable:!0});var t}:r,s=0,v=0,function(){var r=p(),n=16-(r-v);if(v=r,n>0){if(++s>=800)return arguments[0]}else s=0;return c.apply(void 0,arguments)});function l(r){return r!=r}function b(r,n){return!(null==r||!r.length)&&function(r,n){return n==n?function(r,n){for(var t=-1,u=r.length;++t<u;)if(r[t]===n)return t;return-1}(r,n):function(r,n){for(var t=r.length,u=-1;++u<t;)if(n(r[u],u,r))return u;return-1}(r,l)}(r,n)>-1}var d=Math.max;function j(n,t){return m(function(r,n,t){return n=d(void 0===n?r.length-1:n,0),function(){for(var u=arguments,o=-1,a=d(u.length-n,0),i=Array(a);++o<a;)i[o]=u[n+o];o=-1;for(var e=Array(n+1);++o<n;)e[o]=u[o];return e[n]=t(i),f(r,this,e)}}(n,t,r),n+"")}var h=o?o.isConcatSpreadable:void 0;function g(r){return a(r)||n(r)||!!(h&&r&&r[h])}function w(r,n,u,o,a){var i=-1,e=r.length;for(u||(u=g),a||(a=[]);++i<e;){var f=r[i];n>0&&u(f)?n>1?w(f,n-1,u,o,a):t(a,f):o||(a[a.length]=f)}return a}function y(r){return e(r)&&i(r)}function A(r,n,t){for(var u=-1,o=null==r?0:r.length;++u<o;)if(t(n,r[u]))return!0;return!1}export{b as a,A as b,j as c,w as d,y as i}

package/dist/types/components/color-picker/color-picker-palette.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FormComponent } from '../form/form.types';
+/**
+ * @private
+ */
+export declare class Palette implements FormComponent {
+  /**
+   * Color value that is manually typed by the user
+   */
+  value: string;
+  /**
+   * Label of the input field
+   */
+  label: string;
+  /**
+   * Helper text of the input field
+   */
+  helperText: string;
+  /**
+   * Set to `true` if a value is required
+   */
+  required: boolean;
+  /**
+   * Emits chosen value to the parent component
+   */
+  change: EventEmitter<string>;
+  render(): any[];
+  private renderSwatches;
+  private renderSwatch;
+  private handleChange;
+  private handleClick;
+}

package/dist/types/components/color-picker/color-picker.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FormComponent } from '../form/form.types';
+/**
+ * This component enables you to select a swatch from out color palette, simply
+ * by clicking on it. You can then copy the css variable name of the chosen color
+ * and use it where desired.
+ *
+ * The color picker can also show you a preview of any valid color name or color value.
+ *
+ * :::note
+ * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+ * :::
+ *
+ * @exampleComponent limel-example-color-picker
+ * @exampleComponent limel-example-color-picker-readonly
+ */
+export declare class ColorPicker implements FormComponent {
+  /**
+   * Name or code of the chosen color
+   */
+  value: string;
+  /**
+   * The label of the input field
+   */
+  label: string;
+  /**
+   * Helper text of the input field
+   */
+  helperText: string;
+  /**
+   * Displayed as tooltips when picker is hovered.
+   */
+  tooltipLabel: string;
+  /**
+   * Set to `true` if a value is required
+   */
+  required: boolean;
+  /**
+   * Set to `true` if a value is readonly. This makes the component un-interactive.
+   */
+  readonly: boolean;
+  /**
+   * Emits chosen value to the parent component
+   */
+  change: EventEmitter<string>;
+  private isOpen;
+  render(): any[];
+  private renderTooltip;
+  private renderPickerPalette;
+  private renderPickerTrigger;
+  private openPopover;
+  private onPopoverClose;
+  private handleChange;
+}

package/dist/types/components/color-picker/swatches.d.ts

@@ -0,0 +1,4 @@
+export declare const colors: string[];
+export declare const brightnesses: string[];
+export declare function getColorName(color: string, brightness: string): string;
+export declare function getCssColor(color: string, brightness: string): string;

package/dist/types/components.d.ts

@@ -229,6 +229,50 @@ export namespace Components {
          */
         "isOpen": boolean;
     }
+    interface LimelColorPicker {
+        /**
+          * Helper text of the input field
+         */
+        "helperText": string;
+        /**
+          * The label of the input field
+         */
+        "label": string;
+        /**
+          * Set to `true` if a value is readonly. This makes the component un-interactive.
+         */
+        "readonly": boolean;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required": boolean;
+        /**
+          * Displayed as tooltips when picker is hovered.
+         */
+        "tooltipLabel": string;
+        /**
+          * Name or code of the chosen color
+         */
+        "value": string;
+    }
+    interface LimelColorPickerPalette {
+        /**
+          * Helper text of the input field
+         */
+        "helperText": string;
+        /**
+          * Label of the input field
+         */
+        "label": string;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required": boolean;
+        /**
+          * Color value that is manually typed by the user
+         */
+        "value": string;
+    }
     interface LimelConfig {
         /**
           * Global configuration for Lime Elements
@@ -1022,6 +1066,18 @@ declare global {
         prototype: HTMLLimelCollapsibleSectionElement;
         new (): HTMLLimelCollapsibleSectionElement;
     };
+    interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
+    }
+    var HTMLLimelColorPickerElement: {
+        prototype: HTMLLimelColorPickerElement;
+        new (): HTMLLimelColorPickerElement;
+    };
+    interface HTMLLimelColorPickerPaletteElement extends Components.LimelColorPickerPalette, HTMLStencilElement {
+    }
+    var HTMLLimelColorPickerPaletteElement: {
+        prototype: HTMLLimelColorPickerPaletteElement;
+        new (): HTMLLimelColorPickerPaletteElement;
+    };
     interface HTMLLimelConfigElement extends Components.LimelConfig, HTMLStencilElement {
     }
     var HTMLLimelConfigElement: {
@@ -1230,6 +1286,8 @@ declare global {
         "limel-circular-progress": HTMLLimelCircularProgressElement;
         "limel-code-editor": HTMLLimelCodeEditorElement;
         "limel-collapsible-section": HTMLLimelCollapsibleSectionElement;
+        "limel-color-picker": HTMLLimelColorPickerElement;
+        "limel-color-picker-palette": HTMLLimelColorPickerPaletteElement;
         "limel-config": HTMLLimelConfigElement;
         "limel-date-picker": HTMLLimelDatePickerElement;
         "limel-dialog": HTMLLimelDialogElement;
@@ -1496,6 +1554,58 @@ declare namespace LocalJSX {
          */
         "onOpen"?: (event: CustomEvent<void>) => void;
     }
+    interface LimelColorPicker {
+        /**
+          * Helper text of the input field
+         */
+        "helperText"?: string;
+        /**
+          * The label of the input field
+         */
+        "label"?: string;
+        /**
+          * Emits chosen value to the parent component
+         */
+        "onChange"?: (event: CustomEvent<string>) => void;
+        /**
+          * Set to `true` if a value is readonly. This makes the component un-interactive.
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required"?: boolean;
+        /**
+          * Displayed as tooltips when picker is hovered.
+         */
+        "tooltipLabel"?: string;
+        /**
+          * Name or code of the chosen color
+         */
+        "value"?: string;
+    }
+    interface LimelColorPickerPalette {
+        /**
+          * Helper text of the input field
+         */
+        "helperText"?: string;
+        /**
+          * Label of the input field
+         */
+        "label"?: string;
+        /**
+          * Emits chosen value to the parent component
+         */
+        "onChange"?: (event: CustomEvent<string>) => void;
+        /**
+          * Set to `true` if a value is required
+         */
+        "required"?: boolean;
+        /**
+          * Color value that is manually typed by the user
+         */
+        "value"?: string;
+    }
     interface LimelConfig {
         /**
           * Global configuration for Lime Elements
@@ -2375,6 +2485,8 @@ declare namespace LocalJSX {
         "limel-circular-progress": LimelCircularProgress;
         "limel-code-editor": LimelCodeEditor;
         "limel-collapsible-section": LimelCollapsibleSection;
+        "limel-color-picker": LimelColorPicker;
+        "limel-color-picker-palette": LimelColorPickerPalette;
         "limel-config": LimelConfig;
         "limel-date-picker": LimelDatePicker;
         "limel-dialog": LimelDialog;
@@ -2423,6 +2535,8 @@ declare module "@stencil/core" {
             "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
             "limel-collapsible-section": LocalJSX.LimelCollapsibleSection & JSXBase.HTMLAttributes<HTMLLimelCollapsibleSectionElement>;
+            "limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
+            "limel-color-picker-palette": LocalJSX.LimelColorPickerPalette & JSXBase.HTMLAttributes<HTMLLimelColorPickerPaletteElement>;
             "limel-config": LocalJSX.LimelConfig & JSXBase.HTMLAttributes<HTMLLimelConfigElement>;
             "limel-date-picker": LocalJSX.LimelDatePicker & JSXBase.HTMLAttributes<HTMLLimelDatePickerElement>;
             "limel-dialog": LocalJSX.LimelDialog & JSXBase.HTMLAttributes<HTMLLimelDialogElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "34.1.0-next.8",
+  "version": "34.1.0-next.9",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/cjs/limel-popover.cjs.entry.js

@@ -1,116 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e63a89d7.js');
-const randomString = require('./random-string-4c3b7f1c.js');
-const keycodes = require('./keycodes-3949f425.js');
-const zipObject = require('./zipObject-2f430e94.js');
-require('./_assignValue-493aac17.js');
-require('./_defineProperty-c081d04c.js');
-require('./eq-3b43a5ca.js');
-
-/**
- * Check if an element is a descendant of another
- *
- * If the child element is a descendant of a limel-portal, this function will
- * go back through the portal and check the original tree recursively
- *
- * @param {HTMLElement} element the parent element
- * @param {HTMLElement} child the child element to check
- * @returns {boolean} `true` if child is a descendant of element, taking
- * portals into account
- */
-function portalContains(element, child) {
-  var _a;
-  if (element.contains(child) || ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(child))) {
-    return true;
-  }
-  const parent = findParent(child);
-  if (!parent) {
-    return false;
-  }
-  return portalContains(element, parent);
-}
-function findParent(element) {
-  const portal = element.closest('.limel-portal--container');
-  if (portal) {
-    return portal.portalSource;
-  }
-  const rootNode = element.getRootNode();
-  return rootNode.host;
-}
-
-const popoverCss = ".trigger-anchor{display:inline-block;position:relative}";
-
-let Popover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.close = index.createEvent(this, "close", 7);
-    /**
-     * True if the content within the popover should be visible
-     */
-    this.open = false;
-    this.handleGlobalKeyPress = (event) => {
-      if (event.key !== keycodes.ESCAPE) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      this.close.emit();
-    };
-    this.portalId = randomString.createRandomString();
-    this.globalClickListener = this.globalClickListener.bind(this);
-  }
-  watchOpen() {
-    this.setupGlobalHandlers();
-  }
-  componentWillLoad() {
-    this.setupGlobalHandlers();
-  }
-  setupGlobalHandlers() {
-    if (this.open) {
-      document.addEventListener('click', this.globalClickListener, {
-        capture: true,
-      });
-      document.addEventListener('keyup', this.handleGlobalKeyPress);
-    }
-    else {
-      document.removeEventListener('click', this.globalClickListener);
-      document.removeEventListener('keyup', this.handleGlobalKeyPress);
-    }
-  }
-  render() {
-    const cssProperties = this.getCssProperties();
-    const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-    return (index.h("div", { class: "trigger-anchor" }, index.h("slot", { name: "trigger" }), index.h("limel-portal", { visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex } }, index.h("limel-popover-surface", { contentCollection: this.host.children, style: cssProperties }))));
-  }
-  globalClickListener(event) {
-    const element = event.target;
-    const clickedInside = portalContains(this.host, element);
-    if (this.open && !clickedInside) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.close.emit();
-    }
-  }
-  getCssProperties() {
-    const propertyNames = [
-      '--popover-surface-width',
-      '--popover-body-background-color',
-      '--popover-border-radius',
-    ];
-    const style = getComputedStyle(this.host);
-    const values = propertyNames.map((property) => {
-      return style.getPropertyValue(property);
-    });
-    return zipObject.zipObject(propertyNames, values);
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["watchOpen"]
-  }; }
-};
-Popover.style = popoverCss;
-
-exports.limel_popover = Popover;