@linzjs/lui 17.7.0 → 17.8.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.
- package/CHANGELOG.md +7 -0
- package/dist/components/LuiSwitchButton/LuiSwitchButton.d.ts +6 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +25 -14
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +25 -15
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiSwitchButton/LuiSwitchButton.scss +40 -0
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -869,8 +869,8 @@ function LuiFormikForm(props) {
|
|
|
869
869
|
" "))));
|
|
870
870
|
}
|
|
871
871
|
|
|
872
|
-
var css_248z$
|
|
873
|
-
styleInject(css_248z$
|
|
872
|
+
var css_248z$5 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiError {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
|
|
873
|
+
styleInject(css_248z$5);
|
|
874
874
|
|
|
875
875
|
var LuiError = function (_a) {
|
|
876
876
|
var error = _a.error, className = _a.className;
|
|
@@ -25038,8 +25038,8 @@ function isChromatic() {
|
|
|
25038
25038
|
return !!((window === null || window === void 0 ? void 0 : window.navigator.userAgent.match(/Chromatic/)) || (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
|
|
25039
25039
|
}
|
|
25040
25040
|
|
|
25041
|
-
var css_248z$
|
|
25042
|
-
styleInject(css_248z$
|
|
25041
|
+
var css_248z$4 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\n hint: #f9f9f9;\n snow: #ffffff;\n white: #ffffff;\n teal: #00425d;\n sea: #007198;\n electric: #0096cc;\n spray: #73c8e1;\n polar: #e2f3f7;\n sherpa: #004b50;\n surfie: #017a76;\n persian: #00a599;\n downy: #73cdc8;\n iceberg: #dcf5f0;\n sacramento: #004e32;\n salem: #08814d;\n pigment: #0aa245;\n granny: #9bd79b;\n panache: #e9fae7;\n brand-primary: #004b50;\n brand-secondary: #017a76;\n error: #cc0000;\n error-bg: #f5cccc;\n error-focus: #5a0000;\n warning: #ea6a2e;\n warning-bg: #fbdfd2;\n warning-focus: #b33a01;\n success: #0aa245;\n success-bg: #e9fae7;\n info: #3a7cdf;\n info-bg: #d8e5f9;\n visited: #00425d;\n green-hover: #107c3a;\n green-active: #094a22;\n green-btn: #0aa245;\n txt-link: #0096cc;\n primary-hover-btn: #005678;\n selection: #c7e9f3;\n heading-color: #017a76;\n heading-color--secondary: #2a292c;\n base-type-color: #2a292c;\n input-text: #2a292c;\n input-placeholder: #6b6966;\n input-placeholder-when-disabled: #989189;\n base-icon-color: #007198;\n disabled-color: #989189;\n disabled-color-dark: #6b6966;\n linz-color-primary: #023d48;\n linz-color-primary-hover: #01818a;\n linz-color-tertiary: #e1e44a;\n linz-color-tertiary-hover: #cdcf59;\n color-test-pink: #f09;\n linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
|
|
25042
|
+
styleInject(css_248z$4);
|
|
25043
25043
|
|
|
25044
25044
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
25045
25045
|
|
|
@@ -25160,13 +25160,13 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
25160
25160
|
// box-shadow: "-8px 0px 0 0 #cc0000";
|
|
25161
25161
|
// border-radius: "4px";
|
|
25162
25162
|
var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
|
|
25163
|
-
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$
|
|
25163
|
+
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$4['sea'], primary75: css_248z$4['electric'], primary50: css_248z$4['spray'], primary25: css_248z$4['polar'], neutral90: css_248z$4['charcoal'], neutral80: css_248z$4['charcoal'], neutral70: css_248z$4['charcoal'], neutral60: css_248z$4['fuscous'], neutral50: css_248z$4['fuscous'], neutral40: css_248z$4['gray'], neutral30: css_248z$4['gray'], neutral20: css_248z$4['silver'], neutral10: css_248z$4['lily'], neutral5: css_248z$4['hint'], danger: css_248z$4['error'], dangerLight: css_248z$4['error-bg'] }) })); }, styles: {
|
|
25164
25164
|
control: function (provided, state) { return (__assign(__assign({}, provided), {
|
|
25165
25165
|
/* matches style of .LuiTextInput-input */
|
|
25166
25166
|
boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
|
|
25167
25167
|
borderColor: '#053d52',
|
|
25168
25168
|
} })); },
|
|
25169
|
-
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$
|
|
25169
|
+
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$4['fuscous'] })); },
|
|
25170
25170
|
indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
|
|
25171
25171
|
input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
|
|
25172
25172
|
height: '38px !important',
|
|
@@ -25174,10 +25174,10 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
25174
25174
|
singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
|
|
25175
25175
|
placeholder: function (provided) { return (__assign(__assign({}, provided), {
|
|
25176
25176
|
/* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
|
|
25177
|
-
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$
|
|
25177
|
+
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$4['input-placeholder'] })); },
|
|
25178
25178
|
option: function (provided, _a) {
|
|
25179
25179
|
var isSelected = _a.isSelected;
|
|
25180
|
-
return (__assign(__assign({}, provided), { color: css_248z$
|
|
25180
|
+
return (__assign(__assign({}, provided), { color: css_248z$4['input-text'], backgroundColor: isSelected ? css_248z$4['selection'] : css_248z$4['white'] }));
|
|
25181
25181
|
},
|
|
25182
25182
|
} });
|
|
25183
25183
|
return (React__default.createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
|
|
@@ -28137,8 +28137,8 @@ var LuiModalHeader = function (props) {
|
|
|
28137
28137
|
React__default.createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close")))))));
|
|
28138
28138
|
};
|
|
28139
28139
|
|
|
28140
|
-
var css_248z$
|
|
28141
|
-
styleInject(css_248z$
|
|
28140
|
+
var css_248z$3 = "@keyframes react-loading-skeleton {\n 100% {\n transform: translateX(100%);\n }\n}\n\n.react-loading-skeleton {\n --base-color: #ebebeb;\n --highlight-color: #f5f5f5;\n --animation-duration: 1.5s;\n --animation-direction: normal;\n --pseudo-element-display: block; /* Enable animation */\n\n background-color: var(--base-color);\n\n width: 100%;\n border-radius: 0.25rem;\n display: inline-flex;\n line-height: 1;\n\n position: relative;\n overflow: hidden;\n z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n content: ' ';\n display: var(--pseudo-element-display);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-image: linear-gradient(\n 90deg,\n var(--base-color),\n var(--highlight-color),\n var(--base-color)\n );\n transform: translateX(-100%);\n\n animation-name: react-loading-skeleton;\n animation-direction: var(--animation-direction);\n animation-duration: var(--animation-duration);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n";
|
|
28141
|
+
styleInject(css_248z$3);
|
|
28142
28142
|
|
|
28143
28143
|
/**
|
|
28144
28144
|
* @internal
|
|
@@ -32704,11 +32704,11 @@ tippy.setDefaultProps({
|
|
|
32704
32704
|
render: render
|
|
32705
32705
|
});
|
|
32706
32706
|
|
|
32707
|
-
var css_248z$
|
|
32708
|
-
styleInject(css_248z$
|
|
32707
|
+
var css_248z$2 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
|
|
32708
|
+
styleInject(css_248z$2);
|
|
32709
32709
|
|
|
32710
|
-
var css_248z = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
|
|
32711
|
-
styleInject(css_248z);
|
|
32710
|
+
var css_248z$1 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
|
|
32711
|
+
styleInject(css_248z$1);
|
|
32712
32712
|
|
|
32713
32713
|
var id = 0;
|
|
32714
32714
|
var getKey = function () { return id++; };
|
|
@@ -32836,5 +32836,15 @@ var LuiAccordicard = function (props) {
|
|
|
32836
32836
|
React__default.createElement(LuiIcon, { className: clsx('LuiAccordicard-chevron', isOpen ? 'LuiAccordicard-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", size: "md" }))));
|
|
32837
32837
|
};
|
|
32838
32838
|
|
|
32839
|
-
|
|
32839
|
+
var css_248z = ".lui-switch-checkbox {\n height: 0;\n width: 0;\n visibility: hidden;\n}\n\n.lui-switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n width: 40px;\n height: 20px;\n background: grey;\n border-radius: 40px;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 18px;\n height: 16px;\n border-radius: 18px;\n transition: 0.2s;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n width: 20px;\n}";
|
|
32840
|
+
styleInject(css_248z);
|
|
32841
|
+
|
|
32842
|
+
var LuiSwitchButton = function (props) {
|
|
32843
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
32844
|
+
React__default.createElement("input", __assign({ className: "lui-switch-checkbox", id: "lui-switch-new", type: "checkbox", "data-testid": 'lui-switch-new' }, props)),
|
|
32845
|
+
React__default.createElement("label", { "data-testid": "label", style: { background: props.checked ? '#007198' : 'gray' }, className: "lui-switch-label", htmlFor: "lui-switch-new" },
|
|
32846
|
+
React__default.createElement("span", { className: "lui-switch-button" }))));
|
|
32847
|
+
};
|
|
32848
|
+
|
|
32849
|
+
export { FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LuiAccordicard, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuItem, LuiComboSelect, LuiControlledMenu, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuOption, LuiDrawerMenuOptions, LuiDrawerMenuSection, LuiDropdownMenu, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiIcon, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSidePanel, LuiSidePanelProvider, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useLOLGlobalClientRefContext, useLOLUserContext, useShowLUIMessage };
|
|
32840
32850
|
//# sourceMappingURL=lui.esm.js.map
|