@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

package/dist/collection/components/kup-color-picker/kup-color-picker.css

@@ -17,7 +17,7 @@
   cursor: pointer;
 }
 #kup-component .mdc-text-field .kup-icon.action {
-  background-color: var(--kup_colorpicker_thumb_color, var(--kup-icon-color));
+  background-color: var(--kup_colorpicker_thumb_color, var(--kup-icon-color)) !important;
 }
 #kup-component .thumb-icon .kup-icon {
   border: 3px solid rgba(var(--kup-text-color-rgb), 0.575);
@@ -39,270 +39,6 @@
   cursor: default;
 }
 
-.picker_arrow {
-  position: absolute;
-  z-index: -1;
-}
-
-.picker_wrapper.popup {
-  position: absolute;
-  z-index: 2;
-  margin: 1.5em;
-}
-.picker_wrapper.popup,
-.picker_wrapper.popup .picker_arrow::before,
-.picker_wrapper.popup .picker_arrow::after {
-  background: var(--kup-background-color);
-  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
-}
-.picker_wrapper.popup .picker_arrow {
-  width: 3em;
-  height: 3em;
-  margin: 0;
-}
-.picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -99;
-}
-.picker_wrapper.popup .picker_arrow::before {
-  width: 100%;
-  height: 100%;
-  transform: skew(45deg);
-  transform-origin: 0 100%;
-}
-.picker_wrapper.popup .picker_arrow::after {
-  width: 150%;
-  height: 150%;
-  box-shadow: none;
-}
-
-.popup.popup_top {
-  bottom: 100%;
-  left: 0;
-}
-.popup.popup_top .picker_arrow {
-  bottom: 0;
-  left: 0;
-  transform: rotate(-90deg);
-}
-
-.popup.popup_bottom {
-  top: 100%;
-  left: 0;
-}
-.popup.popup_bottom .picker_arrow {
-  top: 0;
-  left: 0;
-  transform: rotate(90deg) scale(1, -1);
-}
-
-.popup.popup_left {
-  top: 0;
-  right: 100%;
-}
-.popup.popup_left .picker_arrow {
-  top: 0;
-  right: 0;
-  transform: scale(-1, 1);
-}
-
-.popup.popup_right {
-  top: 0;
-  left: 100%;
-}
-.popup.popup_right .picker_arrow {
-  top: 0;
-  left: 0;
-}
-
-.picker_wrapper.no_alpha .picker_alpha {
-  display: none;
-}
-
-.picker_wrapper.no_editor .picker_editor {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-}
-
-.picker_wrapper.no_cancel .picker_cancel {
-  display: none;
-}
-
-.layout_default.picker_wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  align-items: stretch;
-  font-size: 10px;
-  width: 25em;
-  padding: 0.5em;
-}
-.layout_default.picker_wrapper input,
-.layout_default.picker_wrapper button {
-  font-size: 1em;
-}
-.layout_default.picker_wrapper > * {
-  margin: 0.5em;
-}
-.layout_default.picker_wrapper::before {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 0;
-  order: 1;
-}
-.layout_default .picker_slider,
-.layout_default .picker_selector {
-  padding: 1em;
-}
-.layout_default .picker_hue {
-  width: 100%;
-}
-.layout_default .picker_sl {
-  flex: 1 1 auto;
-}
-.layout_default .picker_sl::before {
-  content: "";
-  display: block;
-  padding-bottom: 100%;
-}
-.layout_default .picker_editor {
-  order: 1;
-  width: 6.5em;
-}
-.layout_default .picker_editor input {
-  width: 100%;
-  height: 100%;
-}
-.layout_default .picker_sample {
-  order: 1;
-  flex: 1 1 auto;
-}
-.layout_default .picker_done,
-.layout_default .picker_cancel {
-  order: 1;
-}
-
-.picker_wrapper {
-  box-sizing: border-box;
-  background: var(--kup-background-color);
-  box-shadow: 0 0 0 1px var(--kup-border-color);
-  cursor: default;
-  font-family: sans-serif;
-  color: #444;
-  pointer-events: auto;
-}
-.picker_wrapper:focus {
-  outline: none;
-}
-.picker_wrapper button,
-.picker_wrapper input {
-  box-sizing: border-box;
-  border: none;
-  box-shadow: 0 0 0 1px var(--kup-border-color);
-  outline: none;
-}
-.picker_wrapper button:focus, .picker_wrapper button:active,
-.picker_wrapper input:focus,
-.picker_wrapper input:active {
-  box-shadow: 0 0 2px 1px var(--kup-border-color);
-}
-.picker_wrapper button {
-  padding: 0.4em 0.6em;
-  cursor: pointer;
-  background-color: whitesmoke;
-  background-image: linear-gradient(0deg, gainsboro, transparent);
-}
-.picker_wrapper button:active {
-  background-image: linear-gradient(0deg, transparent, gainsboro);
-}
-
-.picker_selector {
-  position: absolute;
-  z-index: 1;
-  display: block;
-  transform: translate(-50%, -50%);
-  border: 2px solid white;
-  border-radius: 100%;
-  box-shadow: 0 0 3px 1px #67b9ff;
-  background: currentColor;
-  cursor: pointer;
-}
-
-.picker_slider .picker_selector {
-  border-radius: 2px;
-}
-
-.picker_hue {
-  position: relative;
-  background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
-  box-shadow: 0 0 0 1px var(--kup-border-color);
-}
-
-.picker_sl {
-  position: relative;
-  box-shadow: 0 0 0 1px var(--kup-border-color);
-  background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0));
-}
-
-.picker_alpha,
-.picker_sample {
-  position: relative;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/contain white;
-  box-shadow: 0 0 0 1px var(--kup-border-color);
-}
-.picker_alpha .picker_selector,
-.picker_sample .picker_selector {
-  background: none;
-}
-
-.picker_editor input {
-  font-family: monospace;
-  padding: 0.2em 0.4em;
-}
-
-.picker_sample::before {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: currentColor;
-}
-
-.picker_done,
-.picker_arrow {
-  display: none;
-}
-
-.layout_default.picker_wrapper {
-  bottom: unset;
-  font-size: var(--kup-font-size);
-  left: unset;
-  padding: 0.25em;
-  right: unset;
-  top: unset;
-  width: var(--kup_colorpicker_picker_width, 25em);
-}
-
-.layout_default .picker_editor input {
-  background: none;
-  color: var(--kup-text-color);
-  font-family: var(--kup-font-family);
-  font-size: var(--kup-font-size);
-}
-
-.picker_wrapper.popup {
-  box-shadow: var(--kup-box-shadow);
-  margin: 0;
-  outline: none;
-}
-
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/

package/dist/collection/components/kup-color-picker/kup-color-picker.js

@@ -1,12 +1,13 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import Picker from 'vanilla-picker';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupColorPickerProps, } from './kup-color-picker-declarations';
-import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { KupCardFamily, } from '../kup-card/kup-card-declarations';
+import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupColorPicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -92,6 +93,9 @@ export class KupColorPicker {
    */
   async setValue(value) {
     this.value = value;
+    if (this.picker && !this.isPickerOpened()) {
+      this.picker.setColor(value, true);
+    }
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -107,14 +111,72 @@ export class KupColorPicker {
       if (this.value.indexOf('#') < 0) {
         this.value = this.kupManager.theme.colorCheck(this.value).hexColor;
       }
-      if (this.picker &&
-        this.value &&
-        this.value.indexOf('#') > -1 &&
-        this.value.length === 7) {
-        this.picker.setColour(this.value, true);
-      }
     }
   }
+  createCard() {
+    const card = document.createElement('kup-card');
+    const cardData = {
+      options: {
+        initialValue: this.value,
+        changeCb: (color) => {
+          this.setValue(color.hex.substring(0, 7));
+          this.kupChange.emit({
+            comp: this,
+            id: this.rootElement.id,
+            value: this.value,
+          });
+        },
+        creationCb: (picker) => {
+          this.picker = picker;
+        },
+      },
+    };
+    card.data = cardData;
+    card.isMenu = true;
+    card.layoutFamily = KupCardFamily.BUILT_IN;
+    card.layoutNumber = 4;
+    return card;
+  }
+  openPicker() {
+    if (!this.card) {
+      this.card = this.createCard();
+    }
+    const textfieldEl = this.textfieldEl;
+    this.card.menuVisible = true;
+    this.card.sizeX = this.textfieldEl.parentElement.clientWidth + 'px';
+    this.card.sizeY = 'auto';
+    if (textfieldEl != null) {
+      textfieldEl.classList.add('toggled');
+    }
+    if (this.kupManager.dynamicPosition.isRegistered(this.card)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.card, this.textfieldEl.parentElement);
+    }
+    else {
+      this.kupManager.dynamicPosition.register(this.card, this.textfieldEl.parentElement, 0, KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.card);
+    if (!this.clickCb) {
+      this.clickCb = {
+        cb: () => {
+          this.closePicker();
+        },
+        el: this.card,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCb, true);
+  }
+  closePicker() {
+    this.kupManager.removeClickCallback(this.clickCb);
+    const textfieldEl = this.textfieldEl;
+    if (textfieldEl) {
+      textfieldEl.classList.remove('toggled');
+    }
+    this.card.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.card);
+  }
+  isPickerOpened() {
+    return this.card && this.card.menuVisible ? true : false;
+  }
   prepTextField() {
     let value = null;
     let textfieldProps = Object.assign({}, this.data['kup-text-field']);
@@ -143,7 +205,21 @@ export class KupColorPicker {
         ? true
         : false, fullWidth: this.rootElement.classList.contains('kup-full-width')
         ? true
-        : false, readOnly: true, value: value, wrapperClass: textfieldProps.icon === 'brightness-1' ? 'thumb-icon' : '' })));
+        : false, readOnly: true, value: value, wrapperClass: textfieldProps.icon === 'brightness-1' ? 'thumb-icon' : '', onClick: () => {
+        if (this.isPickerOpened()) {
+          this.closePicker();
+        }
+        else {
+          this.openPicker();
+        }
+      }, onIconClick: () => {
+        if (this.isPickerOpened()) {
+          this.closePicker();
+        }
+        else {
+          this.openPicker();
+        }
+      } })));
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -161,41 +237,6 @@ export class KupColorPicker {
     }
   }
   componentDidLoad() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      const that = this;
-      this.picker = new Picker({
-        alpha: false,
-        color: this.value,
-        parent: this.anchorEl,
-      });
-      this.picker['onClose'] = function (color) {
-        that.setValue(color.hex.substr(0, 7));
-        that.kupChange.emit({
-          comp: that,
-          id: that.rootElement.id,
-          value: that.value,
-        });
-      };
-      this.picker['onOpen'] = function () {
-        if (that.disabled) {
-          that.picker.closeHandler(null);
-        }
-        else {
-          that.rootElement.style.setProperty('--kup_colorpicker_picker_width', that.textfieldEl.clientWidth + 'px');
-          if (!that.clickCb) {
-            that.clickCb = {
-              cb: () => {
-                that.picker.closeHandler(null);
-                that.kupManager.removeClickCallback(that.clickCb);
-              },
-              el: that.picker['domElement'],
-            };
-          }
-          that.kupManager.addClickCallback(this.clickCb, true);
-        }
-      };
-    }
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillUpdate() {
@@ -217,9 +258,9 @@ export class KupColorPicker {
   render() {
     let widget = null;
     if (this.swatchOnly) {
-      widget = (h("button", { type: "button", disabled: this.disabled, class: "color-picker", style: {
+      widget = (h("button", { disabled: this.disabled, class: "color-picker", onClick: () => this.openPicker(), style: {
           backgroundColor: this.value,
-        } }));
+        }, type: "button" }));
     }
     else {
       widget = this.prepTextField();
@@ -229,9 +270,13 @@ export class KupColorPicker {
     };
     return (h(Host, { style: style },
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { id: componentWrapperId, ref: (el) => (this.anchorEl = el) }, widget)));
+      h("div", { id: componentWrapperId }, widget)));
   }
   disconnectedCallback() {
+    if (this.card) {
+      this.kupManager.dynamicPosition.unregister([this.card]);
+      this.card.remove();
+    }
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
   }