npm - @x15ventures/x15-ui-library - Versions diffs - 3.17.0 → 3.19.0 - Mend

@x15ventures/x15-ui-library 3.17.0 → 3.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitch.css ADDED Viewed

@@ -0,0 +1,306 @@
+/* Popovers */
+.checkboxSwitchField {
+  --checkboxSwitchHeight: 30px;
+  --checkboxSwitchFontSize: 15px;
+  --checkboxSwitchIconSize: 15px;
+  --checkboxSwitchPaddingInline: 10px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapM, 3px);
+  --checkboxSwitchRadius: calc(var(--checkboxSwitchHeight) / 2);
+}
+.checkboxSwitchField.checkboxSwitch_xs {
+  --checkboxSwitchHeight: 20px;
+  --checkboxSwitchFontSize: 11px;
+  --checkboxSwitchIconSize: 11px;
+  --checkboxSwitchPaddingInline: 5px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapXs, 1px);
+}
+.checkboxSwitchField.checkboxSwitch_s {
+  --checkboxSwitchHeight: 25px;
+  --checkboxSwitchFontSize: 13px;
+  --checkboxSwitchIconSize: 13px;
+  --checkboxSwitchPaddingInline: 5px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapS, 2px);
+}
+.checkboxSwitchField.checkboxSwitch_m {
+  --checkboxSwitchHeight: 30px;
+  --checkboxSwitchFontSize: 15px;
+  --checkboxSwitchIconSize: 15px;
+  --checkboxSwitchPaddingInline: 10px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapM, 3px);
+}
+.checkboxSwitchField.checkboxSwitch_l {
+  --checkboxSwitchHeight: 40px;
+  --checkboxSwitchFontSize: 17px;
+  --checkboxSwitchIconSize: 17px;
+  --checkboxSwitchPaddingInline: 10px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapL, 4px);
+}
+.checkboxSwitchField.checkboxSwitch_xl {
+  --checkboxSwitchHeight: 50px;
+  --checkboxSwitchFontSize: 19px;
+  --checkboxSwitchIconSize: 19px;
+  --checkboxSwitchPaddingInline: 15px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapXl, 5px);
+}
+.checkboxSwitchField.checkboxSwitch_rectangular {
+  --checkboxSwitchRadius: var(--checkboxSwitchRectangularRadius, 5px);
+}
+.checkboxSwitchField .checkboxSwitchLabel {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.checkboxSwitchField .checkboxSwitchControl {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox] {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0.01;
+  cursor: pointer;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox]:disabled {
+  cursor: not-allowed;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox]:disabled ~ .checkboxSwitchTrack {
+  opacity: var(--checkboxSwitchDisabledOpacity, 0.5);
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox]:focus-visible ~ .checkboxSwitchTrack {
+  outline: var(--inputFocusOutline, 1px dotted);
+  outline-offset: 2px;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox].invalidField ~ .checkboxSwitchTrack {
+  border-color: var(--inputErrorBorderColor, #c00);
+}
+.checkboxSwitchField .checkboxSwitchTrack {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  height: var(--checkboxSwitchHeight);
+  border: var(--checkboxSwitchBorder, 1px solid #e5ebef);
+  border-radius: var(--checkboxSwitchRadius);
+  background: var(--checkboxSwitchTrackBg, #e5ebef);
+  color: var(--checkboxSwitchTrackFgColor, #24282b);
+  font-size: var(--checkboxSwitchFontSize);
+  line-height: 1;
+  overflow: hidden;
+  transition: background-color var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField .checkboxSwitchState {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--checkboxSwitchStateGap, 5px);
+  align-items: center;
+  justify-content: center;
+  grid-row: 1;
+  min-width: var(--checkboxSwitchHeight);
+  padding: 0 var(--checkboxSwitchPaddingInline);
+  white-space: nowrap;
+  transition: opacity var(--checkboxSwitchTransition, 0.2s ease), background-color var(--checkboxSwitchTransition, 0.2s ease), transform var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField .checkboxSwitchState .icon {
+  font-size: var(--checkboxSwitchIconSize);
+}
+.checkboxSwitchField .checkboxSwitchState .iconSvg {
+  width: var(--checkboxSwitchIconSize);
+  height: var(--checkboxSwitchIconSize);
+}
+.checkboxSwitchField .checkboxSwitchChecked {
+  grid-column: 1;
+}
+.checkboxSwitchField .checkboxSwitchUnchecked {
+  grid-column: 2;
+}
+.checkboxSwitchField.checkboxSwitch_slide .checkboxSwitchThumb {
+  position: absolute;
+  top: var(--checkboxSwitchThumbGap);
+  left: var(--checkboxSwitchThumbGap);
+  z-index: 1;
+  box-sizing: border-box;
+  width: calc(50% - var(--checkboxSwitchThumbGap));
+  height: calc(100% - var(--checkboxSwitchThumbGap) * 2);
+  border-radius: max(0px, var(--checkboxSwitchRadius) - var(--checkboxSwitchThumbGap));
+  background: var(--checkboxSwitchThumbBg, #fff);
+  box-shadow: var(--checkboxSwitchThumbShadow, 0 1px 3px rgba(0, 0, 0, 0.35));
+  transition: left var(--checkboxSwitchTransition, 0.2s ease), transform var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_slide .checkboxSwitchChecked {
+  opacity: 0;
+  color: var(--checkboxSwitchTrackCheckedFgColor, #fff);
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack {
+  background: var(--checkboxSwitchTrackCheckedBg, #516472);
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchThumb {
+  left: calc(100% - var(--checkboxSwitchThumbGap));
+  transform: translateX(-100%);
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  opacity: 1;
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchUnchecked {
+  opacity: 0;
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchTrack {
+  grid-template-columns: 1fr;
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchState {
+  grid-column: 1;
+  box-sizing: border-box;
+  min-width: calc(var(--checkboxSwitchHeight) * 2);
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchUnchecked {
+  padding-left: calc(var(--checkboxSwitchHeight) + 5px);
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchChecked {
+  padding-right: calc(var(--checkboxSwitchHeight) + 5px);
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchThumb {
+  width: auto;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+.checkboxSwitchField.checkboxSwitch_rocker .checkboxSwitchState:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerRaisedBg, linear-gradient(to bottom, #fff 0%, #f6f8fa 60%, #e5ebef 100%));
+  color: var(--checkboxSwitchRockerRaisedFgColor, #384147);
+}
+.checkboxSwitchField.checkboxSwitch_rocker .checkboxSwitchChecked {
+  border-right: var(--checkboxSwitchBorder, 1px solid #e5ebef);
+}
+.checkboxSwitchField.checkboxSwitch_rocker input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchUnchecked:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerPressedBg, linear-gradient(to bottom, #c2d0d9 0%, #d3dee4 35%, #e5ebef 100%));
+  color: var(--checkboxSwitchRockerPressedFgColor, #181a1b);
+}
+.checkboxSwitchField.checkboxSwitch_rocker input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerCheckedPressedBg, linear-gradient(to bottom, #24282b 0%, #384147 35%, #516472 100%));
+  color: var(--checkboxSwitchRockerCheckedPressedFgColor, #fff);
+}
+.checkboxSwitchField.checkboxSwitch_rocker.checkboxSwitch_single input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchUnchecked:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerRaisedBg, linear-gradient(to bottom, #fff 0%, #f6f8fa 60%, #e5ebef 100%));
+  color: var(--checkboxSwitchRockerRaisedFgColor, #384147);
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_glowLight {
+  --checkboxSwitchGlowTrackBg: var(--checkboxSwitchGlowLightTrackBg, linear-gradient(to bottom, #fff 0%, #eef2f4 100%));
+  --checkboxSwitchGlowInactiveFgColor: var(--checkboxSwitchGlowLightInactiveFgColor, #7e97a7);
+  --checkboxSwitchGlowOffFgColor: var(--checkboxSwitchGlowLightOffFgColor, #24282b);
+  --checkboxSwitchGlowOnFgColor: var(--checkboxSwitchGlowLightOnFgColor, color-mix(in srgb, var(--checkboxSwitchGlowColor, #2bff88) 55%, #000));
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_round.checkboxSwitch_hiddenStateLabels .checkboxSwitchTrack {
+  width: var(--checkboxSwitchHeight);
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_round.checkboxSwitch_hiddenStateLabels .checkboxSwitchState {
+  min-width: 0;
+  padding: 0;
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_round.checkboxSwitch_hiddenStateLabels.checkboxSwitch_split .checkboxSwitchTrack {
+  width: calc(var(--checkboxSwitchHeight) * 2);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchTrack {
+  background: var(--checkboxSwitchGlowTrackBg, linear-gradient(to bottom, #384147 0%, #24282b 100%));
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchState {
+  transition: color var(--checkboxSwitchTransition, 0.2s ease), text-shadow var(--checkboxSwitchTransition, 0.2s ease), opacity var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchState:not(.checkboxSwitchButtonState) {
+  color: var(--checkboxSwitchGlowInactiveFgColor, #7e97a7);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchState .iconSvg {
+  transition: filter var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchChecked {
+  border-right: var(--checkboxSwitchBorder, 1px solid #e5ebef);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchUnchecked:not(.checkboxSwitchButtonState) {
+  color: var(--checkboxSwitchGlowOffFgColor, #e5ebef);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked:not(.checkboxSwitchButtonState) {
+  color: var(--checkboxSwitchGlowOnFgColor, #e8fff2);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  text-shadow: 0 0 var(--checkboxSwitchGlowRadius, 5px) var(--checkboxSwitchGlowColor, #2bff88), 0 0 calc(var(--checkboxSwitchGlowRadius, 5px) * 2) var(--checkboxSwitchGlowColor, #2bff88);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked .iconSvg {
+  filter: drop-shadow(0 0 calc(var(--checkboxSwitchGlowRadius, 5px) / 2) var(--checkboxSwitchGlowColor, #2bff88)) drop-shadow(0 0 var(--checkboxSwitchGlowRadius, 5px) var(--checkboxSwitchGlowColor, #2bff88));
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchTrack {
+  width: var(--checkboxSwitchHeight);
+  border-radius: 50%;
+  background: var(--checkboxSwitchPowerButtonBezelBg, conic-gradient(from -45deg, #fff 0%, #ddd 50%, #fff 100%));
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchTrack::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: var(--checkboxSwitchPowerButtonCapInset, 15%);
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: var(--checkboxSwitchPowerButtonCapBorder, 1px solid #ddd);
+  background: var(--checkboxSwitchPowerButtonCapBg, radial-gradient(circle at bottom right, #fff 0%, #ddd 50%, #ccc 100%));
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchState {
+  position: relative;
+  z-index: 2;
+  min-width: 0;
+  padding: 0;
+  color: var(--checkboxSwitchPowerButtonOffFgColor, #ccc);
+  text-shadow: var(--checkboxSwitchPowerButtonOffShadow, 0 0 1px #888);
+  transition: color var(--checkboxSwitchTransition, 0.2s ease), text-shadow var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchState .icon {
+  font-size: max(11px, var(--checkboxSwitchHeight) * 0.36);
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchState .iconSvg {
+  width: max(11px, var(--checkboxSwitchHeight) * 0.36);
+  height: max(11px, var(--checkboxSwitchHeight) * 0.36);
+}
+.checkboxSwitchField.checkboxSwitch_powerButton input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  color: var(--checkboxSwitchPowerButtonOnFgColor, #f00);
+  text-shadow: var(--checkboxSwitchPowerButtonOnShadow, 0 0 1px #030);
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) .checkboxSwitchTrack {
+  grid-template-columns: 1fr;
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) .checkboxSwitchState {
+  grid-column: 1;
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) .checkboxSwitchChecked {
+  border-right: 0;
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchUnchecked,
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  visibility: hidden;
+}
+.checkboxSwitchField .checkboxSwitchTrack .checkboxSwitchState.checkboxSwitchButtonState {
+  box-sizing: border-box;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  min-width: var(--checkboxSwitchHeight);
+  margin: 0;
+  padding: 0 var(--checkboxSwitchPaddingInline);
+  border-radius: 0;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: inherit;
+}
+.checkboxSwitchField.checkboxSwitch_split:not(.checkboxSwitch_slide) input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchUnchecked.checkboxSwitchButtonState,
+.checkboxSwitchField.checkboxSwitch_split:not(.checkboxSwitch_slide) input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchChecked.checkboxSwitchButtonState {
+  opacity: var(--checkboxSwitchButtonInactiveOpacity, 0.4);
+}
+@media (prefers-reduced-motion: reduce) {
+  .checkboxSwitchField .checkboxSwitchTrack,
+  .checkboxSwitchField .checkboxSwitchState,
+  .checkboxSwitchField .checkboxSwitchThumb {
+    transition: none;
+  }
+}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=checkboxSwitchProps.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"checkboxSwitchProps.js","names":[],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.ts"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n CustomContentProps,\n CustomFieldCssClassesProps,\n FieldProps,\n FormFieldProps,\n LabelProps\n} from '../../../../formFieldWrapper/formFieldProps';\nimport { IconSource } from '../../../../../../../helpers/iconHelpers';\nimport { InputCheckboxValidationProps } from '../inputCheckboxProps';\nimport { ButtonStyles } from '../../../../../buttons/button.interface';\n\nexport type CheckboxSwitchSize = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n/** `slide` moves a thumb across a track; `rocker` presses the active half down like a light switch; `glow` lights up the \"on\" content like a power button; `powerButton` is a circular icon-only button with a raised cap. */\nexport type CheckboxSwitchVariant = 'slide' | 'rocker' | 'glow' | 'powerButton';\n\n/** `round` uses a circular slide thumb; `ellipse` stretches the thumb across half the track. Rocker and glow switches treat both as pill shaped. */\nexport type CheckboxSwitchShape = 'round' | 'ellipse' | 'rectangular';\n\n/** `split` shows both states side by side; `single` shows only the current state as one button. Slide switches always show one state. */\nexport type CheckboxSwitchStateDisplay = 'split' | 'single';\n\n/** Only applies to the `glow` variant. */\nexport type CheckboxSwitchGlowTheme = 'dark' | 'light';\n\nexport type CheckboxSwitchButtonStyle = Omit<ButtonStyles, 'size'>;\n\nexport interface CheckboxSwitchLabelProps extends Omit<LabelProps, 'position'> {\n position?: 'left' | 'right';\n}\n\nexport interface CheckboxSwitchFieldProps extends Pick<FieldProps, 'id' | 'name' | 'disabled' | 'onChange' | 'onBlur' | 'onTouched'> {\n /** Submitted when checked. When omitted the form value is a boolean. */\n value?: string;\n defaultChecked?: boolean;\n}\n\nexport interface CheckboxSwitchStateProps {\n /** Visible text for this state. */\n label?: ReactNode;\n icon?: IconSource;\n cssClass?: string;\n /** Library button appearance for this state. Size and shape come from the switch; ignored by the `slide` variant. */\n buttonStyle?: CheckboxSwitchButtonStyle;\n}\n\nexport interface CheckboxSwitchStatesProps {\n checked?: CheckboxSwitchStateProps;\n unchecked?: CheckboxSwitchStateProps;\n}\n\nexport interface CheckboxSwitchProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation' | 'separateLabelAndField'> {\n label: CheckboxSwitchLabelProps;\n field: CheckboxSwitchFieldProps;\n validation?: InputCheckboxValidationProps;\n variant?: CheckboxSwitchVariant;\n shape?: CheckboxSwitchShape;\n size?: CheckboxSwitchSize;\n states?: CheckboxSwitchStatesProps;\n stateDisplay?: CheckboxSwitchStateDisplay;\n glowTheme?: CheckboxSwitchGlowTheme;\n /** Visually hides the per-state labels while keeping any state icons. */\n hideStateLabels?: boolean;\n showSpinner?: boolean;\n customCssClasses?: CustomFieldCssClassesProps;\n customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { ~~ReactElement,~~ ~~ReactNode~~ } from '~~react~~';\nimport {\n CustomContentProps,\n CustomFieldCssClassesProps,\n FieldProps,\n FormFieldProps,\n LabelProps,\n ValidationProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' \| 'position'> {\n position?: 'left' \| 'right';\n}\n\nexport interface InputCheckboxIconsProps {\n checked: ~~string \| ReactNode \| ReactElement~~;\n unchecked: ~~string \| ReactNode \| ReactElement~~;\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' \| 'placeholder' \| 'value' \| 'defaultValue' \| 'referenceDate' \| 'includeEmptyOption' \| 'options'> {\n value: boolean \| string;\n defaultChecked?: boolean;\n defaultValue?: boolean \| string \| number \| readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<TFieldValue = unknown, TFormValues = unknown>\n extends Omit<ValidationProps<TFieldValue, TFormValues>, 'validate'> {\n}\n\nexport interface InputCheckboxProps extends Omit<FormFieldProps, 'label' \| 'field' \| 'layout' \| 'validation'> {\n label: InputCheckboxLabelProps,\n field: InputCheckboxFieldProps,\n validation?: InputCheckboxValidationProps;\n showSpinner?: boolean;\n icons?: InputCheckboxIconsProps;\n customCssClasses?: CustomFieldCssClassesProps;\n customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { IconSource } from '../../../../../../helpers/iconHelpers';\nimport {\n CustomContentProps,\n CustomFieldCssClassesProps,\n FieldProps,\n FormFieldProps,\n LabelProps,\n ValidationProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' \| 'position'> {\n position?: 'left' \| 'right';\n}\n\nexport interface InputCheckboxIconsProps {\n checked: IconSource;\n unchecked: IconSource;\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' \| 'placeholder' \| 'value' \| 'defaultValue' \| 'referenceDate' \| 'includeEmptyOption' \| 'options'> {\n value: boolean \| string;\n defaultChecked?: boolean;\n defaultValue?: boolean \| string \| number \| readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<TFieldValue = unknown, TFormValues = unknown>\n extends Omit<ValidationProps<TFieldValue, TFormValues>, 'validate'> {\n}\n\nexport interface InputCheckboxProps extends Omit<FormFieldProps, 'label' \| 'field' \| 'layout' \| 'validation'> {\n label: InputCheckboxLabelProps,\n field: InputCheckboxFieldProps,\n validation?: InputCheckboxValidationProps;\n showSpinner?: boolean;\n icons?: InputCheckboxIconsProps;\n customCssClasses?: CustomFieldCssClassesProps;\n customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js CHANGED Viewed

@@ -2,8 +2,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
-import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
 import { useFormContext } from 'react-hook-form';
+import { renderIcon } from '../../../../../../../helpers/iconHelpers';
 import { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';
 import { Spinner } from '../../../../../../design/spinner/Spinner';
 import { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';
@@ -31,9 +31,7 @@ const DragAndDropFileUploadField = ({
     color: 'primary',
     variant: 'outline'
   },
-  labelUploadIcon = /*#__PURE__*/React.createElement(SvgIcon, {
-    svgDefinition: arrowUpFromBracket
-  }),
+  labelUploadIcon = arrowUpFromBracket,
   multiple = false,
   restrictionsTxt = '',
   validFiles = {
@@ -168,7 +166,7 @@ const DragAndDropFileUploadField = ({
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "dragAndDropFileUploadLabel"
-  }, labelUploadIcon || null, /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), restrictionsTxt && /*#__PURE__*/React.createElement("span", {
+  }, renderIcon(labelUploadIcon), /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), restrictionsTxt && /*#__PURE__*/React.createElement("span", {
     className: "fileRestrictionsText"
   }, restrictionsTxt)), /*#__PURE__*/React.createElement("span", {
     className: "inputContainer"

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDropFileUpload.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","arrowUpFromBracket","SvgIcon","useFormContext","HookFormWrapper","Spinner","FormFieldLabel","InputFile","ValidationMessages","generateButtonClass","FileAttachmentsList","DEFAULT_UPLOAD_FILE_EXTENSIONS","DEFAULT_UPLOAD_FILE_TYPES","BLACKLISTED_FILE_TYPES","DragAndDropFileUpload","props","createElement","formContext","DragAndDropFileUploadField","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","svgDefinition","multiple","restrictionsTxt","validFiles","extensions","fileTypes","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","activeFileList","setFileList","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","dialogOpenRef","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","join","validateAndCommit","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","cssClass","buttonStyle","hideLabel","hide","labelCssClass","className","onDragOver","e","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","type","defaultValue","accept","onInput","map","index","key","customFileListSettings","onFilesRemoved","onFilesEdited"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.tsx"],"sourcesContent":["'use client';\n\nimport React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\nimport { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';\nimport { InputFile } from '../../../../subComponents/inputs/file/InputFile';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { generateButtonClass } from '../../../../../buttons/button.helpers';\nimport { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';\nimport { DragAndDropFileUploadProps } from '../fileInputProps';\nimport {\n DEFAULT_UPLOAD_FILE_EXTENSIONS,\n DEFAULT_UPLOAD_FILE_TYPES,\n BLACKLISTED_FILE_TYPES\n} from '../../../../../../../constants';\n\nimport './dragAndDropFileUpload.scss';\n\nexport const DragAndDropFileUpload: React.FC<DragAndDropFileUploadProps> = (props) => (\n <HookFormWrapper formContext={ props.formContext }>\n <DragAndDropFileUploadField { ...props } />\n </HookFormWrapper>\n);\n\nconst DragAndDropFileUploadField: React.FC<DragAndDropFileUploadProps> = (\n {\n label,\n field,\n showSpinner,\n fileDisplayStyle = 'names',\n fileListSettings,\n fileList,\n validation,\n customContent,\n customCssClasses,\n labelStyle = 'dragArea',\n labelAsButtonStyles = { color: 'primary', variant: 'outline' },\n labelUploadIcon = <SvgIcon svgDefinition={ arrowUpFromBracket } />,\n multiple = false,\n restrictionsTxt = '',\n validFiles = {\n extensions: DEFAULT_UPLOAD_FILE_EXTENSIONS,\n fileTypes: DEFAULT_UPLOAD_FILE_TYPES,\n maxFileCount: 5,\n maxFileSize: 52428800 // 50 MB\n },\n onFilesChange = () => {}\n }\n) => {\n const { setValue, trigger } = useFormContext();\n\n const [activeFileList, setFileList] = useState<File[]>(fileList \|\| []);\n const [isTouched, setIsTouched] = useState(false);\n const [isDragActive, setIsDragActive] = useState(false);\n\n const inputId = field.id;\n const inputElRef = useRef<HTMLInputElement \| null>(null);\n const dialogOpenRef = useRef(false);\n\n useEffect(() => {\n inputElRef.current = document.getElementById(inputId) as HTMLInputElement \| null;\n }, [inputId]);\n\n // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.\n useEffect(() => {\n const onFocus = () => {\n if (!dialogOpenRef.current) { return; }\n dialogOpenRef.current = false;\n const noneSelected = !inputElRef.current?.files?.length;\n if (noneSelected) {\n // Trigger React Hook Form validators (e.g., required)\n trigger(field.name);\n }\n };\n window.addEventListener('focus', onFocus);\n return () => window.removeEventListener('focus', onFocus);\n }, [trigger, field.name]);\n\n const supportedFileTypes = useMemo(\n () => validFiles?.fileTypes?.join(', ') \|\| '',\n [validFiles?.fileTypes]\n );\n\n const validateAndCommit = useCallback(\n (files: File[]) => {\n // basic validations\n const validated = files.filter((file) => {\n const ext = file.name.split('.').pop()?.toLowerCase() \|\| '';\n const isBlacklisted = BLACKLISTED_FILE_TYPES.includes(ext);\n const isValidExt = validFiles.extensions ? validFiles.extensions.includes(ext) : true;\n const isValidSize = validFiles.maxFileSize ? file.size <= validFiles.maxFileSize : true;\n return !isBlacklisted && isValidExt && isValidSize;\n });\n\n const clipped = validFiles.maxFileCount\n ? validated.slice(0, validFiles.maxFileCount)\n : validated;\n\n setFileList(clipped);\n setIsTouched(true);\n\n setValue(field.name, clipped.length ? clipped : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n\n onFilesChange(clipped);\n },\n [field.name, onFilesChange, setValue, fileDisplayStyle, validFiles]\n );\n\n const handleFileInputChange = useCallback((event: FormEvent<HTMLInputElement>) => {\n const target = event.target as HTMLInputElement;\n const files = Array.from(target.files ?? []);\n validateAndCommit(files);\n trigger(field.name);\n dialogOpenRef.current = false;\n }, [trigger, field.name, validateAndCommit]);\n\n const handleDrop = useCallback((dropped: File[]) => {\n validateAndCommit(dropped);\n trigger(field.name);\n }, [trigger, field.name, validateAndCommit]);\n\n const handleFilesEdited = useCallback((files: File[]) => {\n // No need to validate again as they were already validated\n // Changes may include renaming or removing files\n setFileList(files);\n setValue(field.name, files.length > 0 ? files : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n onFilesChange(files);\n }, [field.name, setValue, onFilesChange]);\n\n const wrapperCssClass = `\n formField \n dragAndDropFileUpload \n ${ fileDisplayStyle === 'list' ? 'withFileList' : '' } \n ${ labelStyle \|\| '' }Style \n ${ customCssClasses?.wrapper \|\| '' } \n ${ isTouched ? 'touched' : '' } \n ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n ${ label?.position === 'inset' ? 'insetLabel' : '' } \n ${ isDragActive ? 'isDragActive' : '' }\n `;\n\n const labelProps = {\n ...label,\n inputId: inputId,\n isRequired: validation && typeof validation.required !== 'undefined',\n customContent\n };\n\n const labelStyleAsButtonClasses = generateButtonClass({\n cssClass: 'button dragAndDropFileUploadButtonLabel',\n buttonStyle: labelAsButtonStyles,\n hideLabel: label.hide\n });\n\n const labelCssClass = `\n ${ labelStyle === 'button' ? labelStyleAsButtonClasses : '' }\n ${ customCssClasses?.label \|\| '' } \n ${ showSpinner ? 'withSpinner' : '' } \n ${ label.hide ? 'hiddenLabel' : '' }\n `;\n\n return (\n <div\n className={ wrapperCssClass }\n onDragOver={ (e) => {\n e.preventDefault();\n if (!isDragActive) setIsDragActive(true);\n } }\n onDragLeave={ (e) => {\n if (e.currentTarget === e.target) setIsDragActive(false);\n } }\n onDrop={ (e) => {\n e.preventDefault();\n setIsDragActive(false);\n const files = Array.from(e.dataTransfer?.files ?? []);\n handleDrop(files);\n } }\n >\n <label\n id={ label.labelId \|\| `${ inputId }_label` }\n className={ labelCssClass }\n htmlFor={ inputId }\n onClick={ () => { dialogOpenRef.current = true; } }\n >\n <span className=\"dragAndDropFileUploadLabel\">\n { labelUploadIcon \|\| null }\n <FormFieldLabel { ...labelProps } />\n { restrictionsTxt && <span className=\"fileRestrictionsText\">{ restrictionsTxt }</span> }\n </span>\n\n <span className=\"inputContainer\">\n <InputFile\n {\n ...{\n label,\n field: {\n ...field,\n type: 'file',\n id: inputId, // ensure we can query it by id\n defaultValue: '',\n multiple,\n accept: supportedFileTypes,\n onInput: (event: FormEvent<HTMLInputElement>) => {\n handleFileInputChange(event);\n }\n },\n validation,\n showSpinner,\n customCssClasses,\n customContent\n }\n }\n />\n </span>\n\n { showSpinner && <Spinner /> }\n\n { fileDisplayStyle === 'names' && activeFileList.length > 0 && (\n <span className=\"uploadedFileNames\">\n { activeFileList.map((file, index) => (\n <small key={ index } className=\"uploadedFileName\">\n { file.name }{ index < activeFileList.length - 1 ? ', ' : '' }\n </small>\n )) }\n </span>\n ) }\n\n <ValidationMessages name={ field.name } validation={ validation } />\n </label>\n\n { fileDisplayStyle === 'list' && activeFileList.length > 0 && (\n <FileAttachmentsList\n customFileListSettings={ fileListSettings }\n files={ activeFileList }\n onFilesRemoved={ handleFilesEdited }\n onFilesEdited={ handleFilesEdited }\n />\n ) }\n </div>\n );\n};\n\nexport default { DragAndDropFileUpload };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"DragAndDropFileUpload.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","arrowUpFromBracket","useFormContext","renderIcon","HookFormWrapper","Spinner","FormFieldLabel","InputFile","ValidationMessages","generateButtonClass","FileAttachmentsList","DEFAULT_UPLOAD_FILE_EXTENSIONS","DEFAULT_UPLOAD_FILE_TYPES","BLACKLISTED_FILE_TYPES","DragAndDropFileUpload","props","createElement","formContext","DragAndDropFileUploadField","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","multiple","restrictionsTxt","validFiles","extensions","fileTypes","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","activeFileList","setFileList","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","dialogOpenRef","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","join","validateAndCommit","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","cssClass","buttonStyle","hideLabel","hide","labelCssClass","className","onDragOver","e","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","type","defaultValue","accept","onInput","map","index","key","customFileListSettings","onFilesRemoved","onFilesEdited"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.tsx"],"sourcesContent":["'use client';\n\nimport React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { useFormContext } from 'react-hook-form';\nimport { renderIcon } from '../../../../../../../helpers/iconHelpers';\nimport { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\nimport { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';\nimport { InputFile } from '../../../../subComponents/inputs/file/InputFile';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { generateButtonClass } from '../../../../../buttons/button.helpers';\nimport { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';\nimport { DragAndDropFileUploadProps } from '../fileInputProps';\nimport {\n DEFAULT_UPLOAD_FILE_EXTENSIONS,\n DEFAULT_UPLOAD_FILE_TYPES,\n BLACKLISTED_FILE_TYPES\n} from '../../../../../../../constants';\n\nimport './dragAndDropFileUpload.scss';\n\nexport const DragAndDropFileUpload: React.FC<DragAndDropFileUploadProps> = (props) => (\n <HookFormWrapper formContext={ props.formContext }>\n <DragAndDropFileUploadField { ...props } />\n </HookFormWrapper>\n);\n\nconst DragAndDropFileUploadField: React.FC<DragAndDropFileUploadProps> = (\n {\n label,\n field,\n showSpinner,\n fileDisplayStyle = 'names',\n fileListSettings,\n fileList,\n validation,\n customContent,\n customCssClasses,\n labelStyle = 'dragArea',\n labelAsButtonStyles = { color: 'primary', variant: 'outline' },\n labelUploadIcon = arrowUpFromBracket,\n multiple = false,\n restrictionsTxt = '',\n validFiles = {\n extensions: DEFAULT_UPLOAD_FILE_EXTENSIONS,\n fileTypes: DEFAULT_UPLOAD_FILE_TYPES,\n maxFileCount: 5,\n maxFileSize: 52428800 // 50 MB\n },\n onFilesChange = () => {}\n }\n) => {\n const { setValue, trigger } = useFormContext();\n\n const [activeFileList, setFileList] = useState<File[]>(fileList \|\| []);\n const [isTouched, setIsTouched] = useState(false);\n const [isDragActive, setIsDragActive] = useState(false);\n\n const inputId = field.id;\n const inputElRef = useRef<HTMLInputElement \| null>(null);\n const dialogOpenRef = useRef(false);\n\n useEffect(() => {\n inputElRef.current = document.getElementById(inputId) as HTMLInputElement \| null;\n }, [inputId]);\n\n // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.\n useEffect(() => {\n const onFocus = () => {\n if (!dialogOpenRef.current) { return; }\n dialogOpenRef.current = false;\n const noneSelected = !inputElRef.current?.files?.length;\n if (noneSelected) {\n // Trigger React Hook Form validators (e.g., required)\n trigger(field.name);\n }\n };\n window.addEventListener('focus', onFocus);\n return () => window.removeEventListener('focus', onFocus);\n }, [trigger, field.name]);\n\n const supportedFileTypes = useMemo(\n () => validFiles?.fileTypes?.join(', ') \|\| '',\n [validFiles?.fileTypes]\n );\n\n const validateAndCommit = useCallback(\n (files: File[]) => {\n // basic validations\n const validated = files.filter((file) => {\n const ext = file.name.split('.').pop()?.toLowerCase() \|\| '';\n const isBlacklisted = BLACKLISTED_FILE_TYPES.includes(ext);\n const isValidExt = validFiles.extensions ? validFiles.extensions.includes(ext) : true;\n const isValidSize = validFiles.maxFileSize ? file.size <= validFiles.maxFileSize : true;\n return !isBlacklisted && isValidExt && isValidSize;\n });\n\n const clipped = validFiles.maxFileCount\n ? validated.slice(0, validFiles.maxFileCount)\n : validated;\n\n setFileList(clipped);\n setIsTouched(true);\n\n setValue(field.name, clipped.length ? clipped : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n\n onFilesChange(clipped);\n },\n [field.name, onFilesChange, setValue, fileDisplayStyle, validFiles]\n );\n\n const handleFileInputChange = useCallback((event: FormEvent<HTMLInputElement>) => {\n const target = event.target as HTMLInputElement;\n const files = Array.from(target.files ?? []);\n validateAndCommit(files);\n trigger(field.name);\n dialogOpenRef.current = false;\n }, [trigger, field.name, validateAndCommit]);\n\n const handleDrop = useCallback((dropped: File[]) => {\n validateAndCommit(dropped);\n trigger(field.name);\n }, [trigger, field.name, validateAndCommit]);\n\n const handleFilesEdited = useCallback((files: File[]) => {\n // No need to validate again as they were already validated\n // Changes may include renaming or removing files\n setFileList(files);\n setValue(field.name, files.length > 0 ? files : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n onFilesChange(files);\n }, [field.name, setValue, onFilesChange]);\n\n const wrapperCssClass = `\n formField \n dragAndDropFileUpload \n ${ fileDisplayStyle === 'list' ? 'withFileList' : '' } \n ${ labelStyle \|\| '' }Style \n ${ customCssClasses?.wrapper \|\| '' } \n ${ isTouched ? 'touched' : '' } \n ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n ${ label?.position === 'inset' ? 'insetLabel' : '' } \n ${ isDragActive ? 'isDragActive' : '' }\n `;\n\n const labelProps = {\n ...label,\n inputId: inputId,\n isRequired: validation && typeof validation.required !== 'undefined',\n customContent\n };\n\n const labelStyleAsButtonClasses = generateButtonClass({\n cssClass: 'button dragAndDropFileUploadButtonLabel',\n buttonStyle: labelAsButtonStyles,\n hideLabel: label.hide\n });\n\n const labelCssClass = `\n ${ labelStyle === 'button' ? labelStyleAsButtonClasses : '' }\n ${ customCssClasses?.label \|\| '' } \n ${ showSpinner ? 'withSpinner' : '' } \n ${ label.hide ? 'hiddenLabel' : '' }\n `;\n\n return (\n <div\n className={ wrapperCssClass }\n onDragOver={ (e) => {\n e.preventDefault();\n if (!isDragActive) setIsDragActive(true);\n } }\n onDragLeave={ (e) => {\n if (e.currentTarget === e.target) setIsDragActive(false);\n } }\n onDrop={ (e) => {\n e.preventDefault();\n setIsDragActive(false);\n const files = Array.from(e.dataTransfer?.files ?? []);\n handleDrop(files);\n } }\n >\n <label\n id={ label.labelId \|\| `${ inputId }_label` }\n className={ labelCssClass }\n htmlFor={ inputId }\n onClick={ () => { dialogOpenRef.current = true; } }\n >\n <span className=\"dragAndDropFileUploadLabel\">\n { renderIcon(labelUploadIcon) }\n <FormFieldLabel { ...labelProps } />\n { restrictionsTxt && <span className=\"fileRestrictionsText\">{ restrictionsTxt }</span> }\n </span>\n\n <span className=\"inputContainer\">\n <InputFile\n {\n ...{\n label,\n field: {\n ...field,\n type: 'file',\n id: inputId, // ensure we can query it by id\n defaultValue: '',\n multiple,\n accept: supportedFileTypes,\n onInput: (event: FormEvent<HTMLInputElement>) => {\n handleFileInputChange(event);\n }\n },\n validation,\n showSpinner,\n customCssClasses,\n customContent\n }\n }\n />\n </span>\n\n { showSpinner && <Spinner /> }\n\n { fileDisplayStyle === 'names' && activeFileList.length > 0 && (\n <span className=\"uploadedFileNames\">\n { activeFileList.map((file, index) => (\n <small key={ index } className=\"uploadedFileName\">\n { file.name }{ index < activeFileList.length - 1 ? ', ' : '' }\n </small>\n )) }\n </span>\n ) }\n\n <ValidationMessages name={ field.name } validation={ validation } />\n </label>\n\n { fileDisplayStyle === 'list' && activeFileList.length > 0 && (\n <FileAttachmentsList\n customFileListSettings={ fileListSettings }\n files={ activeFileList }\n onFilesRemoved={ handleFilesEdited }\n onFilesEdited={ handleFilesEdited }\n />\n ) }\n </div>\n );\n};\n\nexport default { DragAndDropFileUpload };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { SimpleButton } from '../../../../../buttons/SimpleButton';
 import { pencil, trash, xmark, check } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
 import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
 import { deepMergeObjects } from '../../../../../../../helpers';
+import { renderIcon } from '../../../../../../../helpers/iconHelpers';
 import './fileAttachmentsList.css';
 export const DefaultFileListSettings = {
   isEditable: true,
@@ -77,18 +78,15 @@ export const FileAttachmentsList = ({
     setAdjustedFiles(updatedFiles);
     onFilesRemoved(updatedFiles);
   };
-  const EditIcon = () => fileListSettings.design?.editing?.edit?.icon || /*#__PURE__*/React.createElement(SvgIcon, {
-    svgDefinition: pencil
+  const editIcon = renderIcon(fileListSettings.design?.editing?.edit?.icon, {
+    fallback: pencil
   });
-  const DeleteIcon = () => fileListSettings.design?.editing?.delete?.icon || /*#__PURE__*/React.createElement(SvgIcon, {
-    svgDefinition: trash
+  const deleteIcon = renderIcon(fileListSettings.design?.editing?.delete?.icon, {
+    fallback: trash
   });
-  const CancelIcon = () => /*#__PURE__*/React.createElement(SvgIcon, {
-    svgDefinition: xmark
-  });
-  const SaveIcon = () => /*#__PURE__*/React.createElement(SvgIcon, {
-    svgDefinition: check,
-    customCssClass: "saveIcon"
+  const cancelIcon = renderIcon(xmark);
+  const saveIcon = renderIcon(check, {
+    customCssClass: 'saveIcon'
   });
   const isFileNameEditable = fileListSettings.isEditable && !fileListSettings.design?.editing?.edit?.disable;
   const isFileDeletable = fileListSettings.isEditable && !fileListSettings.design?.editing?.delete?.disable;
@@ -126,9 +124,7 @@ export const FileAttachmentsList = ({
       variant: 'icon-only',
       size: 'compact'
     },
-    leftIcon: {
-      icon: /*#__PURE__*/React.createElement(CancelIcon, null)
-    },
+    leftIcon: cancelIcon,
     id: `cancelEditFileButton${index}`,
     onClickHandler: () => setEditingIndex(null)
   }), /*#__PURE__*/React.createElement(SimpleButton, {
@@ -139,9 +135,7 @@ export const FileAttachmentsList = ({
       size: 'compact',
       color: 'primary'
     },
-    leftIcon: {
-      icon: /*#__PURE__*/React.createElement(SaveIcon, null)
-    },
+    leftIcon: saveIcon,
     id: `saveEditFileButton${index}`,
     onClickHandler: () => handleFileNameEdit(index)
   })) : /*#__PURE__*/React.createElement("span", {
@@ -150,18 +144,14 @@ export const FileAttachmentsList = ({
     label: "Edit file name",
     hideLabel: true,
     buttonStyle: fileListSettings.design?.editing?.edit?.buttonStyle,
-    leftIcon: {
-      icon: /*#__PURE__*/React.createElement(EditIcon, null)
-    },
+    leftIcon: editIcon,
     id: `editFileButton${index}`,
     onClickHandler: () => setEditingIndex(index)
   }), isFileDeletable && /*#__PURE__*/React.createElement(SimpleButton, {
     label: "Remove file",
     hideLabel: true,
     buttonStyle: fileListSettings.design?.editing?.delete?.buttonStyle,
-    leftIcon: {
-      icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
-    },
+    leftIcon: deleteIcon,
     id: `removeFileButton${index}`,
     onClickHandler: () => handleFileRemoved(index)
   }))))));

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileAttachmentsList.js","names":["React","useEffect","useState","SimpleButton","pencil","trash","xmark","check","SvgIcon","deepMergeObjects","DefaultFileListSettings","isEditable","design","animation","editing","delete","icon","createElement","svgDefinition","label","disable","buttonStyle","variant","size","edit","heading","isVisible","prefix","includeFileCount","FileAttachmentsList","customFileListSettings","onFilesRemoved","onFilesEdited","files","adjustedFiles","setAdjustedFiles","editingIndex","setEditingIndex","filesList","createRef","fileListSettings","baseObject","overrideObject","handleFileNameEdit","index","newName","adjustedName","current","children","querySelector","value","trim","updatedFiles","map","file","i","File","type","handleFileRemoved","filter","_","EditIcon","DeleteIcon","CancelIcon","SaveIcon","customCssClass","isFileNameEditable","isFileDeletable","className","length","ref","key","name","defaultValue","onKeyDown","e","target","autoFocus","hideLabel","leftIcon","id","onClickHandler","color"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n'use client';\nimport React, { FC, useEffect, useState } from 'react';\nimport { SimpleButton } from '../../../../../buttons/SimpleButton';\nimport { pencil, trash, xmark, check } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { FileAttachmentListSettingsProps } from '../fileInputProps';\nimport { deepMergeObjects } from '../../../../../../../helpers';\n\nimport './fileAttachmentsList.scss';\n\ninterface FileAttachmentsProps {\n customFileListSettings?: FileAttachmentListSettingsProps;\n onFilesRemoved: (files: File[]) => void;\n onFilesEdited: (files: File[]) => void;\n files: File[];\n}\n\nexport const DefaultFileListSettings: FileAttachmentListSettingsProps = {\n isEditable: true,\n design: {\n animation: 'reveal',\n editing: {\n delete: {\n icon: <SvgIcon svgDefinition={ trash }/>,\n label: 'Remove file',\n disable: false,\n buttonStyle: {\n variant: 'icon-only',\n size: 'compact',\n }\n },\n edit: {\n icon: <SvgIcon svgDefinition={ pencil }/>,\n label: 'Edit file name',\n disable: false,\n buttonStyle: {\n variant: 'icon-only',\n size: 'compact',\n }\n }\n },\n heading: {\n isVisible: false,\n prefix: 'Attached files',\n includeFileCount: true\n }\n }\n};\n\nexport const FileAttachmentsList: FC<FileAttachmentsProps> = (\n {\n customFileListSettings,\n onFilesRemoved = () => {},\n onFilesEdited = () => {},\n files\n }\n) => {\n const [adjustedFiles, setAdjustedFiles] = useState<File[]>(files);\n const [editingIndex, setEditingIndex] = useState<number \| null>(null);\n const filesList = React.createRef<HTMLUListElement>();\n\n const fileListSettings: FileAttachmentListSettingsProps = deepMergeObjects({\n baseObject: DefaultFileListSettings,\n overrideObject: customFileListSettings \|\| {}\n });\n\n useEffect(() => {\n setAdjustedFiles(files);\n }, [files]);\n\n const handleFileNameEdit = (index: number, newName?: string) => {\n const adjustedName = newName \|\| (filesList.current?.children[index].querySelector('input') as HTMLInputElement)?.value.trim();\n\n const updatedFiles = adjustedFiles.map((file, i) => {\n if (i === index) {\n return new File([file], adjustedName, { type: file.type });\n }\n return file;\n });\n setAdjustedFiles(updatedFiles);\n setEditingIndex(null);\n onFilesEdited(updatedFiles);\n };\n\n const handleFileRemoved = (index: number) => {\n const updatedFiles = adjustedFiles.filter((_, i) => i !== index);\n setAdjustedFiles(updatedFiles);\n onFilesRemoved(updatedFiles);\n };\n\n const EditIcon: FC = () => fileListSettings.design?.editing?.edit?.icon \|\| <SvgIcon svgDefinition={ pencil } />;\n const DeleteIcon: FC = () => fileListSettings.design?.editing?.delete?.icon \|\| <SvgIcon svgDefinition={ trash } />;\n const CancelIcon: FC = () => <SvgIcon svgDefinition={ xmark } />;\n const SaveIcon: FC = () => <SvgIcon svgDefinition={ check } customCssClass=\"saveIcon\" />;\n\n const isFileNameEditable = fileListSettings.isEditable && !fileListSettings.design?.editing?.edit?.disable;\n const isFileDeletable = fileListSettings.isEditable && !fileListSettings.design?.editing?.delete?.disable;\n\n return (\n <div className=\"fileAttachmentsList\">\n {\n fileListSettings.design?.heading?.isVisible && (\n <h4>\n {\n fileListSettings.design?.heading?.prefix \|\| 'Attached files'\n }\n {\n fileListSettings.design?.heading?.includeFileCount && ` (${ adjustedFiles.length })`\n }\n </h4>\n )\n }\n <div className={ `fileUploadList ${ adjustedFiles.length > 0 ? 'withFiles' : 'noFiles' }` }>\n { adjustedFiles.length > 0 && (\n <ul className=\"noBullet\" ref={ filesList }>\n { adjustedFiles.map((file, index) => (\n <li key={ index }>\n {\n editingIndex === index && isFileNameEditable ? (\n <span className=\"editFileNameContainer\">\n <input\n type=\"text\"\n aria-label={ `Edit file name (${ file.name })` }\n defaultValue={ file.name }\n className=\"fileNameInput\"\n onKeyDown={ (e) => {\n if (e.key === 'Enter') {\n const newName = (e.target as HTMLInputElement).value.trim();\n if (newName && newName !== file.name) {\n handleFileNameEdit(index, newName);\n }\n } else if (e.key === 'Escape' \|\| e.key === 'Tab') {\n setEditingIndex(null);\n }\n } }\n autoFocus\n />\n <SimpleButton\n label=\"Cancel\"\n hideLabel\n buttonStyle={ { variant: 'icon-only', size: 'compact' } }\n leftIcon={ { icon: <CancelIcon /> } }\n id={ `cancelEditFileButton${ index }` }\n onClickHandler={ () => setEditingIndex(null) }\n />\n <SimpleButton\n label=\"Save\"\n hideLabel\n buttonStyle={ { variant: 'icon-only', size: 'compact', color: 'primary' } }\n leftIcon={ { icon: <SaveIcon /> } }\n id={ `saveEditFileButton${ index }` }\n onClickHandler={ () => handleFileNameEdit(index) }\n />\n </span>\n ) :\n <span className=\"fileNameDisplay\">{ file.name }</span>\n }\n\n {\n isFileNameEditable && (\n <SimpleButton\n label=\"Edit file name\"\n hideLabel\n buttonStyle={ fileListSettings.design?.editing?.edit?.buttonStyle }\n leftIcon={ { icon: <EditIcon /> } }\n id={ `editFileButton${ index }` }\n onClickHandler={ () => setEditingIndex(index) }\n />\n )\n }\n\n {\n isFileDeletable && (\n <SimpleButton\n label=\"Remove file\"\n hideLabel\n buttonStyle={ fileListSettings.design?.editing?.delete?.buttonStyle }\n leftIcon={ { icon: <DeleteIcon /> } }\n id={ `removeFileButton${ index }` }\n onClickHandler={ () => handleFileRemoved(index) }\n />\n )\n }\n </li>\n )) }\n </ul>\n ) }\n </div>\n </div>\n );\n};\n\nexport default {\n FileAttachmentsList\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"FileAttachmentsList.js","names":["React","useEffect","useState","SimpleButton","pencil","trash","xmark","check","SvgIcon","deepMergeObjects","renderIcon","DefaultFileListSettings","isEditable","design","animation","editing","delete","icon","createElement","svgDefinition","label","disable","buttonStyle","variant","size","edit","heading","isVisible","prefix","includeFileCount","FileAttachmentsList","customFileListSettings","onFilesRemoved","onFilesEdited","files","adjustedFiles","setAdjustedFiles","editingIndex","setEditingIndex","filesList","createRef","fileListSettings","baseObject","overrideObject","handleFileNameEdit","index","newName","adjustedName","current","children","querySelector","value","trim","updatedFiles","map","file","i","File","type","handleFileRemoved","filter","_","editIcon","fallback","deleteIcon","cancelIcon","saveIcon","customCssClass","isFileNameEditable","isFileDeletable","className","length","ref","key","name","defaultValue","onKeyDown","e","target","autoFocus","hideLabel","leftIcon","id","onClickHandler","color"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/fileAttachmentList/FileAttachmentsList.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n'use client';\nimport React, { FC, useEffect, useState } from 'react';\nimport { SimpleButton } from '../../../../../buttons/SimpleButton';\nimport { pencil, trash, xmark, check } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { FileAttachmentListSettingsProps } from '../fileInputProps';\nimport { deepMergeObjects } from '../../../../../../../helpers';\nimport { renderIcon } from '../../../../../../../helpers/iconHelpers';\n\nimport './fileAttachmentsList.scss';\n\ninterface FileAttachmentsProps {\n customFileListSettings?: FileAttachmentListSettingsProps;\n onFilesRemoved: (files: File[]) => void;\n onFilesEdited: (files: File[]) => void;\n files: File[];\n}\n\nexport const DefaultFileListSettings: FileAttachmentListSettingsProps = {\n isEditable: true,\n design: {\n animation: 'reveal',\n editing: {\n delete: {\n icon: <SvgIcon svgDefinition={ trash }/>,\n label: 'Remove file',\n disable: false,\n buttonStyle: {\n variant: 'icon-only',\n size: 'compact',\n }\n },\n edit: {\n icon: <SvgIcon svgDefinition={ pencil }/>,\n label: 'Edit file name',\n disable: false,\n buttonStyle: {\n variant: 'icon-only',\n size: 'compact',\n }\n }\n },\n heading: {\n isVisible: false,\n prefix: 'Attached files',\n includeFileCount: true\n }\n }\n};\n\nexport const FileAttachmentsList: FC<FileAttachmentsProps> = (\n {\n customFileListSettings,\n onFilesRemoved = () => {},\n onFilesEdited = () => {},\n files\n }\n) => {\n const [adjustedFiles, setAdjustedFiles] = useState<File[]>(files);\n const [editingIndex, setEditingIndex] = useState<number \| null>(null);\n const filesList = React.createRef<HTMLUListElement>();\n\n const fileListSettings: FileAttachmentListSettingsProps = deepMergeObjects({\n baseObject: DefaultFileListSettings,\n overrideObject: customFileListSettings \|\| {}\n });\n\n useEffect(() => {\n setAdjustedFiles(files);\n }, [files]);\n\n const handleFileNameEdit = (index: number, newName?: string) => {\n const adjustedName = newName \|\| (filesList.current?.children[index].querySelector('input') as HTMLInputElement)?.value.trim();\n\n const updatedFiles = adjustedFiles.map((file, i) => {\n if (i === index) {\n return new File([file], adjustedName, { type: file.type });\n }\n return file;\n });\n setAdjustedFiles(updatedFiles);\n setEditingIndex(null);\n onFilesEdited(updatedFiles);\n };\n\n const handleFileRemoved = (index: number) => {\n const updatedFiles = adjustedFiles.filter((_, i) => i !== index);\n setAdjustedFiles(updatedFiles);\n onFilesRemoved(updatedFiles);\n };\n\n const editIcon = renderIcon(fileListSettings.design?.editing?.edit?.icon, { fallback: pencil });\n const deleteIcon = renderIcon(fileListSettings.design?.editing?.delete?.icon, { fallback: trash });\n const cancelIcon = renderIcon(xmark);\n const saveIcon = renderIcon(check, { customCssClass: 'saveIcon' });\n\n const isFileNameEditable = fileListSettings.isEditable && !fileListSettings.design?.editing?.edit?.disable;\n const isFileDeletable = fileListSettings.isEditable && !fileListSettings.design?.editing?.delete?.disable;\n\n return (\n <div className=\"fileAttachmentsList\">\n {\n fileListSettings.design?.heading?.isVisible && (\n <h4>\n {\n fileListSettings.design?.heading?.prefix \|\| 'Attached files'\n }\n {\n fileListSettings.design?.heading?.includeFileCount && ` (${ adjustedFiles.length })`\n }\n </h4>\n )\n }\n <div className={ `fileUploadList ${ adjustedFiles.length > 0 ? 'withFiles' : 'noFiles' }` }>\n { adjustedFiles.length > 0 && (\n <ul className=\"noBullet\" ref={ filesList }>\n { adjustedFiles.map((file, index) => (\n <li key={ index }>\n {\n editingIndex === index && isFileNameEditable ? (\n <span className=\"editFileNameContainer\">\n <input\n type=\"text\"\n aria-label={ `Edit file name (${ file.name })` }\n defaultValue={ file.name }\n className=\"fileNameInput\"\n onKeyDown={ (e) => {\n if (e.key === 'Enter') {\n const newName = (e.target as HTMLInputElement).value.trim();\n if (newName && newName !== file.name) {\n handleFileNameEdit(index, newName);\n }\n } else if (e.key === 'Escape' \|\| e.key === 'Tab') {\n setEditingIndex(null);\n }\n } }\n autoFocus\n />\n <SimpleButton\n label=\"Cancel\"\n hideLabel\n buttonStyle={ { variant: 'icon-only', size: 'compact' } }\n leftIcon={ cancelIcon }\n id={ `cancelEditFileButton${ index }` }\n onClickHandler={ () => setEditingIndex(null) }\n />\n <SimpleButton\n label=\"Save\"\n hideLabel\n buttonStyle={ { variant: 'icon-only', size: 'compact', color: 'primary' } }\n leftIcon={ saveIcon }\n id={ `saveEditFileButton${ index }` }\n onClickHandler={ () => handleFileNameEdit(index) }\n />\n </span>\n ) :\n <span className=\"fileNameDisplay\">{ file.name }</span>\n }\n\n {\n isFileNameEditable && (\n <SimpleButton\n label=\"Edit file name\"\n hideLabel\n buttonStyle={ fileListSettings.design?.editing?.edit?.buttonStyle }\n leftIcon={ editIcon }\n id={ `editFileButton${ index }` }\n onClickHandler={ () => setEditingIndex(index) }\n />\n )\n }\n\n {\n isFileDeletable && (\n <SimpleButton\n label=\"Remove file\"\n hideLabel\n buttonStyle={ fileListSettings.design?.editing?.delete?.buttonStyle }\n leftIcon={ deleteIcon }\n id={ `removeFileButton${ index }` }\n onClickHandler={ () => handleFileRemoved(index) }\n />\n )\n }\n </li>\n )) }\n </ul>\n ) }\n </div>\n </div>\n );\n};\n\nexport default {\n FileAttachmentsList\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/fileInputProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileInputProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/file/fileInputProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport React, { FormEvent } from 'react';\nimport { FieldProps, FormFieldProps } from '../../../formFieldWrapper/formFieldProps';\nimport { ButtonStyles } from '../../../../buttons/button.interface';\n\nexport interface ValidFilesProps {\n extensions?: string[];\n fileTypes?: string[];\n maxFileCount?: number;\n maxFileSize?: number;\n}\n\nexport interface FileAttachmentListSettingsProps {\n design?: {\n animation?: 'reveal' \| 'slide' \| 'none';\n editing?: {\n delete?: {\n icon?: ~~React.ReactElement~~;\n label?: string;\n disable?: boolean;\n buttonStyle?: ButtonStyles;\n };\n edit?: {\n icon?: ~~React.ReactElement~~;\n label?: string;\n disable?: boolean;\n buttonStyle?: ButtonStyles;\n };\n },\n heading?: {\n isVisible?: boolean;\n prefix?: string;\n includeFileCount?: boolean;\n }\n };\n isEditable?: boolean;\n}\n\nexport interface DragAndDropFileUploadProps extends Omit<FormFieldProps, 'field'> {\n field: Omit<FieldProps, 'type' \| 'onInput'> & {\n type?: 'file';\n };\n labelStyle?: 'simple' \| 'button' \| 'dragArea';\n labelUploadIcon?: ~~React.ReactElement~~ \| null;\n labelAsButtonStyles?: ButtonStyles;\n fileDisplayStyle?: 'list' \| 'names' \| 'none';\n fileListSettings?: FileAttachmentListSettingsProps;\n labelStyleButtonProps?: ButtonStyles;\n customFileUploadLabel?: string \| React.ReactElement;\n fileList?: File[];\n validFiles?: ValidFilesProps;\n onFilesChange?: (files: File[] \| null) => void;\n restrictionsTxt?: string \| React.ReactElement;\n multiple?: boolean;\n}\n\nexport interface FileInputProps extends DragAndDropFileUploadProps, React.InputHTMLAttributes<HTMLInputElement> {\n field: Omit<FieldProps, 'type' \| 'onInput'> & {\n type: 'file';\n multiple?: boolean;\n accept: string;\n onInput?: (event: FormEvent<HTMLInputElement>) => void;\n };\n}\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"fileInputProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/file/fileInputProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport React, { FormEvent } from 'react';\nimport { FieldProps, FormFieldProps } from '../../../formFieldWrapper/formFieldProps';\nimport { ButtonStyles } from '../../../../buttons/button.interface';\nimport { IconSource } from '../../../../../../helpers/iconHelpers';\n\nexport interface ValidFilesProps {\n extensions?: string[];\n fileTypes?: string[];\n maxFileCount?: number;\n maxFileSize?: number;\n}\n\nexport interface FileAttachmentListSettingsProps {\n design?: {\n animation?: 'reveal' \| 'slide' \| 'none';\n editing?: {\n delete?: {\n icon?: IconSource;\n label?: string;\n disable?: boolean;\n buttonStyle?: ButtonStyles;\n };\n edit?: {\n icon?: IconSource;\n label?: string;\n disable?: boolean;\n buttonStyle?: ButtonStyles;\n };\n },\n heading?: {\n isVisible?: boolean;\n prefix?: string;\n includeFileCount?: boolean;\n }\n };\n isEditable?: boolean;\n}\n\nexport interface DragAndDropFileUploadProps extends Omit<FormFieldProps, 'field'> {\n field: Omit<FieldProps, 'type' \| 'onInput'> & {\n type?: 'file';\n };\n labelStyle?: 'simple' \| 'button' \| 'dragArea';\n labelUploadIcon?: IconSource \| null;\n labelAsButtonStyles?: ButtonStyles;\n fileDisplayStyle?: 'list' \| 'names' \| 'none';\n fileListSettings?: FileAttachmentListSettingsProps;\n labelStyleButtonProps?: ButtonStyles;\n customFileUploadLabel?: string \| React.ReactElement;\n fileList?: File[];\n validFiles?: ValidFilesProps;\n onFilesChange?: (files: File[] \| null) => void;\n restrictionsTxt?: string \| React.ReactElement;\n multiple?: boolean;\n}\n\nexport interface FileInputProps extends DragAndDropFileUploadProps, React.InputHTMLAttributes<HTMLInputElement> {\n field: Omit<FieldProps, 'type' \| 'onInput'> & {\n type: 'file';\n multiple?: boolean;\n accept: string;\n onInput?: (event: FormEvent<HTMLInputElement>) => void;\n };\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/index.js CHANGED Viewed

@@ -31,6 +31,7 @@ export { PageBanner, Banner, Alert } from './design/banners/pageBanner/PageBanne
 export { SimpleButton, Button } from './form/buttons/SimpleButton';
 export { FormField } from './form/formFields/formFieldWrapper/FormField';
 export { InputCheckbox, CheckboxInput } from './form/formFields/subComponents/inputs/checkbox/InputCheckbox';
+export { CheckboxSwitch } from './form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch';
 export { StyledRadioGroup } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup';
 export { StyledRadioInput } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioInput';
 export { StyledRadioLabel } from './form/formFields/subComponents/inputs/radio/styled/StyledRadioLabel';