@festo-ui/react-extra 9.0.0-dev.733 → 9.0.0-dev.734

package/dist/forms/color-picker/ColorPicker.css

@@ -1,375 +0,0 @@
-.fwe-triangle.fwe-triangle-right, .fwe-triangle.fwe-triangle-left, .fwe-triangle.fwe-triangle-bottom, .fwe-triangle.fwe-triangle-top {
-  width: 17px;
-  height: 17px;
-  position: absolute;
-  overflow: hidden;
-}
-
-.fwe-triangle.fwe-triangle-right:after, .fwe-triangle.fwe-triangle-left:after, .fwe-triangle.fwe-triangle-bottom:after, .fwe-triangle.fwe-triangle-top:after {
-  content: "";
-  background: var(--fwe-white);
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  transform: rotate(45deg);
-  box-shadow: 0 1px 4px #3333;
-}
-
-.fwe-popover-container {
-  min-width: max-content;
-  display: inline-block;
-  position: relative;
-}
-
-.fwe-triangle.fwe-triangle-top {
-  top: -17px;
-  left: 50%;
-  transform: translateX(-8px);
-}
-
-.fwe-triangle.fwe-triangle-top:after {
-  top: 11px;
-  left: 3px;
-}
-
-.fwe-triangle.fwe-triangle-bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-8px);
-}
-
-.fwe-triangle.fwe-triangle-bottom:after {
-  top: -6px;
-  left: 3px;
-}
-
-.fwe-triangle.fwe-triangle-left {
-  top: 50%;
-  left: -17px;
-  transform: translateY(-8px);
-}
-
-.fwe-triangle.fwe-triangle-left:after {
-  top: 2px;
-  left: 11px;
-}
-
-.fwe-triangle.fwe-triangle-right {
-  top: 50%;
-  left: 100%;
-  transform: translateY(-8px);
-}
-
-.fwe-triangle.fwe-triangle-right:after {
-  top: 2px;
-  left: -6px;
-}
-
-.fwe-popover {
-  background-color: var(--fwe-white);
-  font-size: var(--fwe-font-size-md);
-  border-radius: 4px;
-  padding: 8px;
-  line-height: 1rem;
-  box-shadow: 0 1px 4px #3333;
-}
-
-.fwe-popover--legend {
-  padding: 16px;
-  line-height: 24px;
-  display: table;
-}
-
-.fwe-popover--legend .fwe-popover-legend-content {
-  display: table-row;
-}
-
-.fwe-popover--legend .fwe-popover-legend-content dt {
-  margin: 0;
-  padding-right: 8px;
-  display: table-cell;
-}
-
-.fwe-popover--legend .fwe-popover-legend-content dd {
-  margin: 0;
-  display: table-cell;
-}
-
-.fwe-popover--menu {
-  font-size: var(--fwe-font-size-base);
-  padding: 16px;
-  line-height: 1.5rem;
-}
-
-.fwe-popover--menu button {
-  all: unset;
-  cursor: pointer;
-  width: 100%;
-  height: 36px;
-  min-height: 36px;
-  color: var(--fwe-text);
-  border-bottom: none;
-  align-items: center;
-  padding: 0;
-  display: flex;
-}
-
-.fwe-popover--menu button .fwe-svg-icon {
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.fwe-popover--menu button i {
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 24px;
-  margin-right: 0;
-  display: inline-flex;
-}
-
-.fwe-popover--menu button i:before {
-  display: inline-flex;
-}
-
-.fwe-popover--menu button span {
-  margin-right: 8px;
-  display: inline-flex;
-}
-
-.fwe-popover--menu button:hover {
-  background-color: #3333331a;
-}
-
-.fwe-popover--menu button:active {
-  background-color: #3333;
-}
-
-.fwe-popover-menu-trigger .fwe-popover-menu-trigger-button {
-  cursor: pointer;
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  line-height: 0;
-  display: block;
-}
-
-.fwe-popover-menu-trigger .fwe-popover-menu-trigger-button:hover {
-  color: var(--fwe-hero);
-}
-
-.fwe-color-picker {
-  width: 216px;
-}
-
-.fwe-color-picker.fwe-alpha-active {
-  width: 245px;
-}
-
-.fwe-color-picker .fwe-gradient-picker {
-  width: 198px;
-  height: 198px;
-  margin: -7px;
-  position: relative;
-}
-
-.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient {
-  background-image: linear-gradient(#0000, #000);
-  position: absolute;
-  inset: 7px;
-}
-
-.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient {
-  position: absolute;
-  inset: 7px;
-}
-
-.fwe-color-picker .fwe-vertical-picker, .fwe-color-picker .fwe-alpha-picker, .fwe-color-picker .fwe-hue-picker {
-  width: 14px;
-  height: 198px;
-  margin: -7px -3px -7px 18px;
-  position: relative;
-}
-
-.fwe-color-picker .fwe-vertical-picker .fwe-picker-background, .fwe-color-picker .fwe-alpha-picker .fwe-picker-background, .fwe-color-picker .fwe-hue-picker .fwe-picker-background {
-  border-radius: 4px;
-  width: 8px;
-  height: 184px;
-  margin: 7px 3px;
-}
-
-.fwe-color-picker .fwe-vertical-picker .fwe-knob, .fwe-color-picker .fwe-alpha-picker .fwe-knob, .fwe-color-picker .fwe-hue-picker .fwe-knob {
-  left: -3px;
-}
-
-.fwe-color-picker .fwe-hue-picker .fwe-picker-background {
-  background-image: linear-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red);
-}
-
-.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern {
-  margin: 7px 3px;
-  position: absolute;
-}
-
-.fwe-color-picker .fwe-alpha-picker .fwe-picker-background {
-  position: absolute;
-}
-
-.fwe-color-picker .fwe-type-select {
-  display: flex;
-  position: relative;
-}
-
-.fwe-color-picker .fwe-type-select .fwe-type-indicator {
-  cursor: pointer;
-  background-color: #fff;
-  border: none;
-  flex-shrink: 1;
-  display: flex;
-}
-
-.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover {
-  color: var(--fwe-hero);
-}
-
-.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type {
-  font-size: var(--fwe-font-size-small);
-  line-height: calc(var(--fwe-font-size-small)  + 5px);
-  font-weight: var(--fwe-font-weight-bold);
-}
-
-.fwe-color-picker .fwe-type-select .fwe-popover {
-  z-index: 1;
-  position: absolute;
-  top: 24px;
-  left: 0;
-}
-
-.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item {
-  cursor: pointer;
-  background-color: #fff;
-  border: none;
-  align-items: center;
-  padding: 8px;
-  display: flex;
-}
-
-.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover {
-  color: var(--fwe-hero);
-}
-
-.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-svg-icon {
-  opacity: 0;
-  margin-right: 8px;
-}
-
-.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected {
-  cursor: default;
-}
-
-.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-svg-icon {
-  opacity: 1;
-}
-
-.fwe-color-picker input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.fwe-color-picker input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.fwe-color-picker input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-.fwe-color-picker input {
-  text-align: center;
-  padding-right: 0 !important;
-}
-
-.fwe-color-picker .fwe-hex-input {
-  width: 75px;
-  margin-right: 16px;
-}
-
-.fwe-color-picker .fwe-red-input, .fwe-color-picker .fwe-green-input {
-  width: 32px;
-  margin-right: 8px;
-}
-
-.fwe-color-picker .fwe-blue-input {
-  width: 32px;
-}
-
-.fwe-color-picker .fwe-alpha-input span input {
-  width: 48px;
-  padding-right: 16px !important;
-}
-
-.fwe-color-picker .fwe-alpha-input .fwe-percent-char {
-  margin-left: -16px;
-}
-
-.fwe-color-picker .fwe-color-grid {
-  flex-wrap: wrap;
-  margin-bottom: -8px;
-  margin-right: -8px;
-  display: flex;
-}
-
-.fwe-color-picker .fwe-color-grid .fwe-color-item {
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  margin-bottom: 8px;
-  margin-right: 8px;
-  padding: 0;
-  display: flex;
-}
-
-.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item {
-  border: 1px solid var(--fwe-control-border);
-  color: #000;
-}
-
-.fwe-color-picker .fwe-color-grid .fwe-remove-color-button {
-  border: 1px solid var(--fwe-control-border);
-  width: 24px;
-  height: 24px;
-  color: var(--fwe-control);
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 8px;
-  margin-right: 8px;
-  display: flex;
-}
-
-.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern {
-  margin: 2px;
-}
-
-.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-svg-icon {
-  color: #0000;
-  position: absolute;
-}
-
-.fwe-color-picker .fwe-knob {
-  z-index: 1;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  position: absolute;
-  box-shadow: 0 0 4px #00000026;
-}
-

package/dist/forms/color-picker/ColorPicker.d.ts

@@ -1,12 +0,0 @@
-import './ColorPicker.scss';
-export interface ColorPickerProps {
-    readonly className?: string;
-    readonly palette?: string[];
-    readonly useAlpha?: boolean;
-    readonly alpha?: number;
-    readonly paletteOnly?: boolean;
-    readonly color?: string;
-    readonly onChange?: (color?: string | null) => void;
-    readonly onAlphaChange?: (alpha?: number) => void;
-}
-export declare function ColorPicker({ className, palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;