legalesign-document-viewer 0.1.0 → 0.1.2

package/dist/ls-document-viewer/ls-formfield.entry.js

@@ -1,59 +0,0 @@
-import { r as registerInstance, h } from './index-Cjn1MNt-.js';
-
-const lsFormfieldCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n";
-
-const LsFormfield = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    name;
-    fieldId;
-    label;
-    as = 'text';
-    value;
-    placeholder;
-    descriptionText;
-    errorText;
-    aria;
-    inputRef;
-    infoTooltipText;
-    hoverTooltipText;
-    disabled;
-    extraLabel = 'none';
-    required;
-    valid;
-    dirty;
-    count;
-    countMax;
-    buttonClick;
-    buttonIcon;
-    labelIcon;
-    fieldIcon;
-    _value;
-    valueWatcher(newValue) {
-        this._value = newValue;
-    }
-    componentWillLoad() {
-        this.valueWatcher(this?.value?.toString());
-    }
-    handleChange = (event) => {
-        const target = event.target;
-        this.value = target.value;
-    };
-    render() {
-        const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
-        const countClass = value && value.toString().length > countMax
-            ? 'formfield-count-error'
-            : 'formfield-count';
-        return (h("host", { key: '34e8e2475abecc5960beec6a17b3ebba83e2ed94', class: 'formfield-host' }, h("div", { key: 'aa52b29385ebdeb293460decfa87a80b26b457fb', class: 'formfield-top-elements' }, h("div", { key: '38ed615d54f4734bba51913fa5129d3112da24b7', class: 'formfield-left-side' }, labelIcon && h("ls-icon", { key: '66e0bd42fd771a539fe291f3f3dd4177dd2bd969', name: labelIcon }), h("label", { key: '99c4ff711a119eba02c9d6d8f757adcc78a8cdf4', htmlFor: name, class: 'formfield-label' }, label), infoTooltipText && (h("ls-icon", { key: 'c38f7523090811af47528ca99a016ba5d69b0202', name: 'information-circle' }))), extraLabel === 'optional' ? (h("ls-label", { text: 'Optional', colour: 'gray', type: 'low' })) : extraLabel === 'required' ? (h("ls-label", { text: 'Required', colour: 'gray', type: 'low' })) : ('')), as === 'text' ? (h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onInput: (event) => this.handleChange(event) })) : as === 'select' ? (h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (h("ls-text-input", { type: 'password', id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (h("ls-text-input", { type: 'displayonly', id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (h("ls-number-input", { type: 'ls', id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (h("p", null, "placeholder")), h("div", { key: 'd0d83544931a7746fee23dde346852dbdc8e337f', class: 'formfield-bottom-elements' }, errorText && !valid ? (h("p", { class: 'formfield-error-text' }, errorText)) : descriptionText ? (h("p", { class: 'formfield-description-text' }, descriptionText)) : (''), count && (h("div", { key: '931c8f9b4792404b0d4738400a40bc2ffeeac521', class: 'formfield-count-container' }, h("p", { key: '41095c1ad73ed87762b7390f3df177b606af5f80', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: '7977950d22895b76df492389b25efe551cd6896f', class: countClass }, h("p", { key: '3c18d5599328bb7634cd04da929e5e2863a951d2' }, "/"), h("p", { key: 'c876654fb0e4c3b841b0699c1fba57b663aabbad' }, countMax))))))));
-    }
-    static get watchers() { return {
-        "value": ["valueWatcher"]
-    }; }
-};
-LsFormfield.style = lsFormfieldCss;
-
-export { LsFormfield as ls_formfield };
-//# sourceMappingURL=ls-formfield.entry.esm.js.map
-
-//# sourceMappingURL=ls-formfield.entry.js.map

package/dist/ls-document-viewer/ls-formfield.entry.js.map

@@ -1 +0,0 @@
-{"file":"ls-formfield.entry.esm.js","mappings":"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","names":[],"sources":["src/components/ls-formfield/ls-formfield.css?tag=ls-formfield","src/components/ls-formfield/ls-formfield.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.formfield-host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.formfield-top-elements {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0 0.125rem;\n}\n\n.formfield-left-side {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  gap: 0.5rem;\n\n  ls-icon {\n    color: var(--gray-80, #787A80);\n  }\n\n  .formfield-label {\n    color: var(--gray-100, #45484D);\n    /* text-base/leading-6/font-medium */\n    font-size: 1rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.5rem; /* 150% */\n  }\n}\n\n.formfield-bottom-elements {\n  position: relative;\n  min-height: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: fit-content;\n  padding: 0 0.125rem;\n}\n\n.formfield-description-text {\n  color: var(--Grey-80, #6C6E73);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-error-text {\n  color: var(--red-70, #DC2721);\n  width: 100%;\n  /* text-xs/leading-4/font-light */\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.formfield-count-container {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  gap: 0.125rem;\n  align-items: center;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-align: right;\n}\n\n.formfield-count {\n  display: flex;\n  align-items: center;\n  color: var(--Grey-70, #6C6E73);\n  gap: 0.125rem;\n}\n\n.formfield-count-error {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  color: var(--red-70, #DC2721);\n}\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { State, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'ls-formfield',\n  styleUrl: 'ls-formfield.css',\n  shadow: false,\n})\nexport class LsFormfield {\n  @Prop() name: string;\n  @Prop() fieldId: string;\n  @Prop() label?: string;\n  @Prop() as?:\n    | 'text'\n    | 'select'\n    | 'radio'\n    | 'textarea'\n    | 'password'\n    | 'number'\n    | 'displayonly' = 'text';\n  @Prop({ mutable: true }) value?: string | number;\n  @Prop() placeholder?: string;\n  @Prop() descriptionText?: string;\n  @Prop() errorText?: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() infoTooltipText?: string;\n  @Prop() hoverTooltipText?: string;\n  @Prop() disabled: boolean;\n  @Prop() extraLabel: 'optional' | 'required' | 'none' = 'none';\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() count: boolean;\n  @Prop() countMax?: number;\n  @Prop() buttonClick?: () => void;\n  @Prop() buttonIcon?: Icon;\n  @Prop() labelIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  @State() _value: string;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    this._value = newValue;\n  }\n\n  componentWillLoad() {\n    this.valueWatcher(this?.value?.toString());\n  }\n\n  handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n  };\n\n  render() {\n    const {\n      name,\n      fieldId,\n      label,\n      as,\n      value,\n      placeholder,\n      descriptionText,\n      errorText,\n      aria,\n      infoTooltipText,\n      disabled,\n      extraLabel,\n      valid,\n      dirty,\n      count,\n      countMax,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      labelIcon,\n    } = this;\n\n    const countClass = \n      value && value.toString().length > countMax\n        ? 'formfield-count-error'\n        : 'formfield-count';\n\n    return (\n      <host class='formfield-host'>\n        <div class='formfield-top-elements'>\n          <div class='formfield-left-side'>\n            {labelIcon && <ls-icon name={labelIcon}></ls-icon>}\n            <label htmlFor={name} class='formfield-label'>\n              {label}\n            </label>\n            {infoTooltipText && (\n              <ls-icon name={'information-circle'}></ls-icon>\n            )}\n          </div>\n          {extraLabel === 'optional' ? (\n            <ls-label text='Optional' colour='gray' type='low'></ls-label>\n          ) : extraLabel === 'required' ? (\n            <ls-label text='Required' colour='gray' type='low'></ls-label>\n          ) : (\n            ''\n          )}\n        </div>\n        {as === 'text' ? (\n          <ls-text-input\n            id={fieldId}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n            onInput={(event: InputEvent) => this.handleChange(event)}\n          ></ls-text-input>\n        ) : as === 'select' ? (\n          <ls-select-input\n            id={name}\n            name={name}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          >\n            <slot></slot>\n          </ls-select-input>\n        ) : as === 'radio' ? (\n          <ls-radio-input\n            radioId={label}\n            label={value?.toString()}\n            icon={fieldIcon}\n            name={name}\n            disabled={disabled}\n          />\n        ) : as === 'textarea' ? (\n          <ls-textarea-input\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'password' ? (\n          <ls-text-input\n            type='password'\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'displayonly' ? (\n          <ls-text-input\n            type='displayonly'\n            id={name}\n            name={name}\n            value={value?.toString()}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : as === 'number' ? (\n          <ls-number-input\n            type='ls'\n            id={name}\n            name={name}\n            value={Number(value)}\n            countMax={countMax}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={extraLabel === 'required'}\n            disabled={disabled}\n            valid={valid}\n            dirty={dirty}\n            buttonIcon={buttonIcon}\n            buttonClick={buttonClick}\n            fieldIcon={fieldIcon}\n          />\n        ) : (\n          <p>placeholder</p>\n        )}\n        <div class='formfield-bottom-elements'>\n          {errorText && !valid ? (\n            <p class='formfield-error-text'>{errorText}</p>\n          ) : descriptionText ? (\n            <p class='formfield-description-text'>{descriptionText}</p>\n          ) : (\n            ''\n          )}\n          {count && (\n            <div class='formfield-count-container'>\n              <p class={countClass}>{value?.toString()?.length}</p>\n              {countMax > 0 && (\n                <div class={countClass}>\n                  <p>/</p>\n                  <p>{countMax}</p>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}