@furystack/shades-common-components 3.2.2 → 3.4.0

package/dist/components/input.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const shades_1 = require("@furystack/shades");
-const __1 = require("..");
-const promisify_animation_1 = require("../utils/promisify-animation");
-exports.Input = (0, shades_1.Shade)({
-    shadowDomName: 'shade-input',
-    getInitialState: ({ injector, props }) => ({
-        theme: injector.getInstance(__1.ThemeProviderService).theme.getValue(),
-        value: props.value,
-    }),
-    resources: ({ injector, updateState }) => [
-        injector.getInstance(__1.ThemeProviderService).theme.subscribe((theme) => updateState({ theme })),
-    ],
-    render: ({ props, element, injector, getState, updateState }) => {
-        var _a;
-        const themeProvider = injector.getInstance(__1.ThemeProviderService);
-        const { theme, value } = getState();
-        const { palette } = theme;
-        return ((0, shades_1.createComponent)("label", { ...props.labelProps, style: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                justifyContent: 'space-between',
-                fontSize: '10px',
-                color: props.disabled ? 'rgb(170, 170, 170)' : '#bbb',
-                marginBottom: '1em',
-                padding: '1em',
-                ...(_a = props.labelProps) === null || _a === void 0 ? void 0 : _a.style,
-            } },
-            props.labelTitle,
-            props.multiLine ? ((0, shades_1.createComponent)("div", { contentEditable: props.readOnly === true || props.disabled === true ? 'inherit' : 'true', ...props, style: {
-                    border: 'none',
-                    backgroundColor: 'transparent',
-                    outline: 'none',
-                    fontSize: '12px',
-                    width: '100%',
-                    textOverflow: 'ellipsis',
-                    ...props.style,
-                } }, value)) : ((0, shades_1.createComponent)("input", { onchange: (ev) => {
-                    const newValue = ev.target.value;
-                    updateState({ value: newValue }, true);
-                    props.onTextChange && props.onTextChange(newValue);
-                    props.onchange && props.onchange(ev);
-                }, onfocus: () => {
-                    if (!props.disabled) {
-                        (0, promisify_animation_1.promisifyAnimation)(element.querySelector('label'), [{ color: themeProvider.getTextColor(theme.background.default) }, { color: palette.primary.main }], {
-                            duration: 500,
-                            easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                            fill: 'forwards',
-                        });
-                        (0, promisify_animation_1.promisifyAnimation)(element.querySelector('input'), [
-                            { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                            { boxShadow: `0px 3px 0px ${palette.primary.main}` },
-                        ], {
-                            duration: 200,
-                            fill: 'forwards',
-                        });
-                    }
-                }, onblur: () => {
-                    if (!props.disabled) {
-                        (0, promisify_animation_1.promisifyAnimation)(element.querySelector('label'), [{ color: palette.primary.main }, { color: themeProvider.getTextColor(theme.background.default) }], {
-                            duration: 200,
-                            easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                            fill: 'forwards',
-                        });
-                        (0, promisify_animation_1.promisifyAnimation)(element.querySelector('input'), [
-                            { boxShadow: '0px 3px 0px rgba(128,128,128,0.4)' },
-                            { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                        ], {
-                            duration: 400,
-                            fill: 'forwards',
-                        });
-                    }
-                }, ...props, style: {
-                    color: 'inherit',
-                    border: 'none',
-                    backgroundColor: 'transparent',
-                    outline: 'none',
-                    fontSize: '12px',
-                    width: '100%',
-                    textOverflow: 'ellipsis',
-                    padding: '0.6em 0',
-                    ...props.style,
-                }, value: value }))));
-    },
-});
-//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"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"}

package/src/components/input.tsx

@@ -1,148 +0,0 @@
-import { Shade, PartialElement, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '..'
-import { Theme } from '../services'
-import { promisifyAnimation } from '../utils/promisify-animation'
-
-export interface InputProps extends PartialElement<HTMLInputElement> {
-  onTextChange?: (text: string) => void
-  labelTitle?: string
-  multiLine?: false
-  labelProps?: PartialElement<HTMLLabelElement>
-  autofocus?: boolean
-}
-
-export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
-  labelTitle?: string
-  multiLine: true
-  labelProps?: PartialElement<HTMLLabelElement>
-  autofocus?: boolean
-}
-
-export type TextInputProps = InputProps | TextAreaProps
-
-export type TextInputState = {
-  theme: Theme
-  value?: string
-}
-
-export const Input = Shade<TextInputProps, TextInputState>({
-  shadowDomName: 'shade-input',
-  getInitialState: ({ injector, props }) => ({
-    theme: injector.getInstance(ThemeProviderService).theme.getValue(),
-    value: props.value,
-  }),
-  resources: ({ injector, updateState }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((theme) => updateState({ theme })),
-  ],
-  render: ({ props, element, injector, getState, updateState }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    const { theme, value } = getState()
-    const { palette } = theme
-
-    return (
-      <label
-        {...props.labelProps}
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'space-between',
-          fontSize: '10px',
-          color: props.disabled ? 'rgb(170, 170, 170)' : '#bbb',
-          marginBottom: '1em',
-          padding: '1em',
-          ...props.labelProps?.style,
-        }}
-      >
-        {props.labelTitle}
-        {props.multiLine ? (
-          <div
-            contentEditable={props.readOnly === true || props.disabled === true ? 'inherit' : 'true'}
-            {...props}
-            style={{
-              border: 'none',
-              backgroundColor: 'transparent',
-              outline: 'none',
-              fontSize: '12px',
-              width: '100%',
-              textOverflow: 'ellipsis',
-              ...props.style,
-            }}
-          >
-            {value}
-          </div>
-        ) : (
-          <input
-            onchange={(ev) => {
-              const newValue = (ev.target as HTMLInputElement).value
-              updateState({ value: newValue }, true)
-              props.onTextChange && props.onTextChange(newValue)
-              props.onchange && (props.onchange as any)(ev)
-            }}
-            onfocus={() => {
-              if (!props.disabled) {
-                promisifyAnimation(
-                  element.querySelector('label'),
-                  [{ color: themeProvider.getTextColor(theme.background.default) }, { color: palette.primary.main }],
-                  {
-                    duration: 500,
-                    easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                    fill: 'forwards',
-                  },
-                )
-                promisifyAnimation(
-                  element.querySelector('input'),
-                  [
-                    { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                    { boxShadow: `0px 3px 0px ${palette.primary.main}` },
-                  ],
-                  {
-                    duration: 200,
-                    fill: 'forwards',
-                  },
-                )
-              }
-            }}
-            onblur={() => {
-              if (!props.disabled) {
-                promisifyAnimation(
-                  element.querySelector('label'),
-                  [{ color: palette.primary.main }, { color: themeProvider.getTextColor(theme.background.default) }],
-                  {
-                    duration: 200,
-                    easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
-                    fill: 'forwards',
-                  },
-                )
-                promisifyAnimation(
-                  element.querySelector('input'),
-                  [
-                    { boxShadow: '0px 3px 0px rgba(128,128,128,0.4)' },
-                    { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
-                  ],
-                  {
-                    duration: 400,
-                    fill: 'forwards',
-                  },
-                )
-              }
-            }}
-            {...props}
-            style={{
-              color: 'inherit',
-              border: 'none',
-              backgroundColor: 'transparent',
-              outline: 'none',
-              fontSize: '12px',
-              width: '100%',
-              textOverflow: 'ellipsis',
-              padding: '0.6em 0',
-              ...props.style,
-            }}
-            value={value}
-          />
-        )}
-      </label>
-    )
-  },
-})

package/types/components/autocomplete.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/autocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAA;AAE3C,eAAO,MAAM,YAAY;;iBACiB,MAAM,EAAE;;sBAAsC,MAAM,KAAK,IAAI;+EAuCrG,CAAA"}

package/types/components/input.d.ts

@@ -1,22 +0,0 @@
-import { PartialElement } from '@furystack/shades';
-import { Theme } from '../services';
-export interface InputProps extends PartialElement<HTMLInputElement> {
-    onTextChange?: (text: string) => void;
-    labelTitle?: string;
-    multiLine?: false;
-    labelProps?: PartialElement<HTMLLabelElement>;
-    autofocus?: boolean;
-}
-export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
-    labelTitle?: string;
-    multiLine: true;
-    labelProps?: PartialElement<HTMLLabelElement>;
-    autofocus?: boolean;
-}
-export declare type TextInputProps = InputProps | TextAreaProps;
-export declare type TextInputState = {
-    theme: Theme;
-    value?: string;
-};
-export declare const Input: (props: TextInputProps, children: import("@furystack/shades").ChildrenList) => JSX.Element<any, any>;
-//# sourceMappingURL=input.d.ts.map

package/types/components/input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,cAAc,EAAmB,MAAM,mBAAmB,CAAA;AAE1E,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAGnC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,IAAI,CAAA;IACf,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,oBAAY,cAAc,GAAG,UAAU,GAAG,aAAa,CAAA;AAEvD,oBAAY,cAAc,GAAG;IAC3B,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,KAAK,sGAwHhB,CAAA"}