@sk-web-gui/core 3.5.0 → 3.7.0

package/dist/types/components/cookie-consent.d.ts

@@ -24,6 +24,9 @@ export declare const CookieConsent: () => {
         };
         '&-custom-wrapper': {
             '@apply flex flex-col gap-24': {};
+            '&-legend': {
+                '@apply text-label-medium': {};
+            };
         };
         '&-description': {
             '@apply text-base flex flex-col gap-8': {};

package/dist/types/components/dialog.d.ts

@@ -1,5 +1,14 @@
-export declare const Dialog: () => {
+export declare const Dialog: (colors: string[]) => {
     '.sk-dialog': {
         '@apply w-fit max-w-prose md:min-w-[25em]': {};
+        '&-confirm': {
+            '&-label': {
+                '@apply flex items-center justify-start gap-4': {};
+                '@apply text-dark-primary': {};
+            };
+            '&-heading': {
+                '@apply text-h3': {};
+            };
+        };
     };
 };

package/dist/types/components/dropdown-filter.d.ts

@@ -0,0 +1,58 @@
+declare function _exports(): {
+    '.dropdown-filter': {
+        position: string;
+        height: number;
+        border: string;
+        display: string;
+        background: string;
+        borderRadius: number;
+        '.dropdown-button': {
+            '@apply flex justify-between items-center  grow': {};
+            '.dropdown-button-icon': {
+                '@apply justify-self-end grow-0': {};
+            };
+        };
+        '.filter-container': {
+            position: string;
+            top: string;
+            left: string;
+            zIndex: number;
+            width: string;
+            background: string;
+            border: string;
+            borderRadius: number;
+            '.filter-controls': {
+                display: string;
+                justifyContent: string;
+                button: {
+                    marginLeft: string;
+                    textDecoration: string;
+                };
+            };
+            '.filter-item': {
+                '@apply px-md': {};
+                height: number;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                borderBottom: string;
+                '> label': {
+                    '@apply w-full': {};
+                    '> .form-checkbox-label': {
+                        '@apply flex-grow': {};
+                    };
+                };
+                '&.disabled': {
+                    color: string;
+                };
+                '&:first-of-type': {
+                    borderTop: string;
+                };
+                '&:last-child': {
+                    borderBottom: string;
+                };
+            };
+        };
+    };
+};
+export = _exports;

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

@@ -195,6 +195,9 @@ export declare const Input: () => {
         };
         '&&-textarea': {
             '@apply h-auto': {};
+            '&-warning': {
+                '@apply sr-only': {};
+            };
         };
         '@apply focus:ring': {};
         '@apply focus:ring-ring': {};

package/dist/types/components/modal.d.ts

@@ -11,6 +11,9 @@ export declare const Modal: () => {
         '&-overlay': {
             '@apply fixed inset-0': {};
         };
+        '&-trixter': {
+            '@apply inline-block h-screen align-middle': {};
+        };
         '&-dialog': {
             '@apply text-dark-secondary': {};
             '@apply inline-flex flex-col': {};

package/dist/types/components/notification.d.ts

@@ -0,0 +1,48 @@
+declare function _exports(): {
+    '.notification': {
+        '@apply relative flex p-4 text-small w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {};
+        '@apply text-body bg-white border border-neutral-200': {};
+        '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {};
+    };
+    '.notification-icon': {
+        '@apply flex-shrink-0 w-5 h-5 mr-3': {};
+        '&-info': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-success': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-error': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-warning': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+    };
+    '.notification-content': {
+        '@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {};
+        '&-title': {
+            '@apply font-semibold': {};
+        };
+        '&-description': {
+            '@apply text-neutral-500 dark:text-neutral-400': {};
+        };
+    };
+    '.notification-action': {
+        '@apply absolute space-x-2': {};
+        right: number;
+        top: number;
+        '&-undo': {
+            '@apply h-auto p-0 text-small': {};
+        };
+        '&-close-button': {
+            '@apply cursor-base text-neutral-700 hover:text-body': {};
+            '@apply dark:text-neutral-400 dark:hover:text-neutral-100': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/popup-menu.d.ts

@@ -86,6 +86,11 @@ export declare const PopupMenu: () => {
             '@apply border-0': {};
             '@apply items-center': {};
             '@apply no-underline': {};
+            '&-submenu': {
+                '&-wrapper': {
+                    '@apply relative': {};
+                };
+            };
         };
         '&-group': {
             '@apply w-full flex flex-col border-b-1 border-divider pb-4 pt-4 gap-4': {};

package/dist/types/components/progress-stepper.d.ts

@@ -19,6 +19,16 @@ export declare const ProgressStepper: () => {
                     '@apply w-full grow shrink mt-19': {};
                 };
             };
+            '&:first-of-type': {
+                '.sk-divider:first-of-type': {
+                    '@apply invisible': {};
+                };
+            };
+            '&:last-of-type': {
+                '.sk-divider:last-of-type': {
+                    '@apply invisible': {};
+                };
+            };
             '&-box': {
                 '@apply box-border': {};
                 '@apply shrink-0': {};

package/dist/types/components/radio.d.ts

@@ -104,6 +104,7 @@ export declare const Radio: () => {
             };
             '&[data-disabled="true"]': {
                 '@apply text-dark-disabled': {};
+                '@apply cursor-default': {};
             };
         };
         '&-group': {

package/dist/types/components/rich-text-editor.d.ts

@@ -0,0 +1,226 @@
+export declare const RichTextEditor: () => {
+    ".sk-rich-text-editor": {
+        "@apply h-full": {};
+        "@apply box-border": {};
+        ".sk-divider-vertical": {
+            "@apply my-4": {};
+        };
+        ".toolbar": {
+            "@apply bg-background-200": {};
+            "@apply rounded-t": {};
+            "@apply border-1 border-divider": {};
+            "@apply border-b-0": {};
+            "@apply py-0": {};
+            "@apply px-8": {};
+            "@apply flex": {};
+            ".ql-formats": {
+                "@apply py-4": {};
+                "@apply mt-4": {};
+                "@apply mr-14": {};
+                "@apply inline-block": {};
+                "@apply align-middle": {};
+                "@apply flex": {};
+                button: {
+                    "@apply inline": {};
+                    "@apply text-dark-secondary": {};
+                    "@apply rounded-button-sm": {};
+                    "@apply h-32 w-32": {};
+                    "@apply flex justify-center items-center": {};
+                    svg: {
+                        "@apply w-20 h-20": {};
+                    };
+                    ".ql-fill": {
+                        fill: string;
+                    };
+                    ".ql-stroke": {
+                        stroke: string;
+                        fill: string;
+                        strokeLinecap: string;
+                        strokeLinejoin: string;
+                        strokeWidth: string;
+                    };
+                    "&:hover": {};
+                    "&.ql-active:hover": {
+                        "@apply text-dark-primary": {};
+                        "@apply bg-tertiary-surface-hover": {};
+                        ".ql-fill": {
+                            fill: string;
+                        };
+                        ".ql-stroke": {
+                            stroke: string;
+                        };
+                    };
+                    "&.ql-active": {
+                        "@apply text-dark-primary": {};
+                        "@apply bg-inverted-vattjom-surface-primary": {};
+                        ".ql-fill": {
+                            fill: string;
+                        };
+                        ".ql-stroke": {
+                            stroke: string;
+                        };
+                    };
+                };
+            };
+            "input.ql-image[type=file]": {
+                "@apply hidden": {};
+            };
+        };
+        ".ql-editor": {
+            "@apply bg-background-content text-dark-primary": {};
+            "@apply rounded-b-button": {};
+            "@apply border-divider": {};
+            "@apply p-14": {};
+            "@apply text-left": {};
+            "@apply break-words": {};
+            "@apply overflow-y-auto": {};
+            "@apply h-full": {};
+            "@apply whitespace-pre-wrap": {};
+            "@apply font-sans": {};
+            a: {
+                "@apply underline": {};
+            };
+            ul: {
+                "@apply pl-28": {};
+                "@apply list-disc": {};
+                counterReset: string;
+            };
+            "li:not(.ql-direction-rtl)::before": {
+                "@apply text-right": {};
+            };
+            ".ql-editor ol li:before": {
+                content: string;
+            };
+            ol: {
+                "@apply pl-28": {};
+                "@apply list-decimal": {};
+            };
+            "ol li": {
+                counterReset: string;
+                counterIncrement: string;
+            };
+        };
+        ".ql-clipboard": {
+            left: string;
+            "@apply h-px": {};
+            "@apply overflow-y-hidden": {};
+            "@apply absolute": {};
+            "@apply top-1/2": {};
+        };
+        ".ql-tooltip.ql-editing input[type=text]": {
+            "@apply inline-block": {};
+        };
+        ".ql-tooltip input[type=text]": {
+            "@apply hidden": {};
+            "@apply border-1 border-divider": {};
+            "@apply text-base": {};
+        };
+        ".ql-tooltip.ql-editing a.ql-preview": {
+            display: string;
+        };
+        ".ql-editor .ql-indent-1:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-2:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-3:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-4:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-5:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-6:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-7:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-8:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-editor .ql-indent-9:not(.ql-direction-rtl)": {
+            paddingLeft: string;
+        };
+        ".ql-direction.ql-active svg:first-child": {
+            display: string;
+        };
+        ".ql-editor .ql-direction-rtl": {
+            direction: string;
+        };
+        ".ql-direction.ql-active svg:last-child": {
+            display: string;
+        };
+        ".ql-editor .ql-align-center": {
+            "@apply text-center": {};
+        };
+        ".ql-editor .ql-align-right": {
+            textAlign: string;
+        };
+        ".ql-editor .ql-align-justify": {
+            "@apply text-justify": {};
+        };
+        ".ql-tooltip": {
+            "@apply bg-background-100": {};
+            "@apply rounded": {};
+            "@apply shadow-md": {};
+            "@apply border-1 border-divider": {};
+            "@apply p-5": {};
+            "@apply font-sans": {};
+            "@apply absolute": {};
+            transform: string;
+            ".ql-tooltip a": {
+                "@apply cursor-pointer": {};
+            };
+            "a.ql-preview": {
+                "@apply inline-block": {};
+                "@apply overflow-x-hidden": {};
+                "@apply text-ellipsis": {};
+                "@apply align-top": {};
+                "@apply max-w-52": {};
+            };
+            "a.ql-remove::before": {
+                content: string;
+                "@apply ml-8": {};
+            };
+        };
+        ".ql-tooltip[data-mode=link]::before": {
+            "@apply mr-16": {};
+            content: string;
+        };
+        "a.ql-action::after": {
+            "@apply border-r-1 border-divider": {};
+            content: string;
+            "@apply ml-16": {};
+            "@apply pr-8": {};
+        };
+        ".ql-tooltip.ql-editing a.ql-action::after": {
+            "@apply ml-16": {};
+            content: string;
+        };
+        ".ql-tooltip::before": {
+            content: string;
+            "@apply mr-8": {};
+        };
+        ".ql-formats:after": {
+            content: string;
+            display: string;
+            clear: string;
+        };
+        ".quill": {
+            ".ql-container": {
+                "@apply border-1 border-divider": {};
+                "@apply h-full": {};
+            };
+            ".ql-hidden": {
+                "@apply hidden": {};
+            };
+            "pre.ql-container": {
+                "@apply rounded-b-button": {};
+            };
+        };
+    };
+};

package/dist/types/components/search-field.d.ts

@@ -5,6 +5,7 @@ export declare const SearchField: () => {
         };
         '.sk-form-combobox': {
             '&-list': {
+                '@apply w-full': {};
                 '&-option': {
                     '.sk-icon': {
                         '@apply hidden': {};

package/dist/types/components/side-menu.d.ts

@@ -0,0 +1,219 @@
+declare function _exports(): {
+    '.sk-sidemenu': {
+        '@apply w-[440px]': {};
+        '&-header': {
+            '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {};
+            '.label-small': {
+                '@apply text-[1.6rem]': {};
+            };
+            '.label-button': {
+                '@apply w-full justify-between p-0 leading-[inherit]': {};
+                '&-icon': {
+                    '@apply !text-xl': {};
+                };
+            };
+            '&-label': {
+                '@apply flex items-center': {};
+                'label, .label': {
+                    '@apply text-xl font-bold flex items-center w-full': {};
+                };
+                span: {
+                    '@apply ml-auto': {};
+                };
+            };
+        };
+        '&-item': {
+            '@apply bg-white h-full': {};
+            '> ul.items': {
+                '@apply hidden': {};
+            };
+            '&.open > ul.items': {
+                '@apply block': {};
+            };
+            '&-label': {
+                '@apply flex-grow select-none flex items-center': {};
+            };
+            '&.active': {
+                '> .sk-sidemenu-wrapper': {
+                    boxShadow: string;
+                    '.sk-sidemenu-item-label': {
+                        '@apply underline': {};
+                    };
+                };
+            };
+            '& .sk-sidemenu-wrapper': {
+                '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {};
+                '.sk-sidemenu-item-link': {
+                    '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {};
+                    '@apply focus-visible:z-base': {};
+                    '&[aria-disabled="true"]': {
+                        '@apply text-neutral-600 cursor-not-allowed': {};
+                        '.sk-sidemenu-item-label': {
+                            '@apply text-neutral-600': {};
+                        };
+                    };
+                };
+                '.expand': {
+                    '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {};
+                    '&[aria-disabled="true"]': {
+                        '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {};
+                        path: {
+                            '@apply fill-gray-stroke': {};
+                        };
+                    };
+                    path: {
+                        '@apply fill-primary': {};
+                    };
+                    '&-button': {
+                        '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {};
+                    };
+                };
+            };
+            '&.open': {
+                '& + .menu-item > .sk-sidemenu-wrapper': {
+                    '@apply border-t': {};
+                };
+            };
+            '&.draggable': {
+                '&.dragenter': {
+                    '> .sk-sidemenu-wrapper': {
+                        '@apply h-full max-h-full': {};
+                    };
+                    "> .sk-sidemenu-wrapper > *:not([draggable='true'])": {
+                        '@apply pointer-events-none': {};
+                    };
+                    '& > .sk-sidemenu-wrapper::after': {
+                        '@apply bg-info-surface-accent block relative w-full h-[44px]': {};
+                        content: string;
+                    };
+                };
+                '&.moving': {
+                    '@apply hidden': {};
+                };
+                '& .sk-sidemenu-menuitem-movebutton': {
+                    '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {};
+                    svg: {
+                        '@apply h-full': {};
+                    };
+                    '&[aria-disabled="true"]': {
+                        '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {};
+                    };
+                };
+                '&.separator': {
+                    '@apply bg-transparent relative': {};
+                    '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {
+                        '@apply h-[44px]': {};
+                    };
+                };
+            };
+            '&-separator': {
+                '@apply text-divider': {};
+                height: string;
+                width: string;
+                backgroundImage: string;
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundRepeat: string;
+            };
+            '&.lvl-0': {
+                '&:first-child > .sk-sidemenu-wrapper': {
+                    '@apply border-t-0': {};
+                };
+                '> .sk-sidemenu-wrapper': {
+                    '@apply h-[64px] max-h-[64px] border border-divider': {};
+                    '> .sk-sidemenu-item-link': {
+                        '@apply  py-md': {};
+                        paddingLeft: string;
+                    };
+                };
+                '.sk-sidemenu-item-link': {
+                    '@apply h-[64px] max-h-[64px]': {};
+                };
+                '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {
+                    '@apply border-t-0': {};
+                };
+                '> .items': {
+                    '@apply border-l border-r border-divider': {};
+                };
+                '&.open > .items': {
+                    '@apply border-b border-divider': {};
+                };
+                '&.separator': {
+                    '& + .lvl-0': {
+                        '@apply border-t border-divider': {};
+                    };
+                };
+                '&.separator > .sk-sidemenu-wrapper': {
+                    '@apply border-0': {};
+                };
+            };
+            '&.lvl-1': {
+                '@apply bg-gray-lighter': {};
+                '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {
+                    '@apply h-[56px] max-h-[56px]': {};
+                };
+                '&.open > .sk-sidemenu-wrapper': {
+                    '@apply border-b border-divider': {};
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-2': {
+                '.sk-sidemenu-wrapper': {
+                    '@apply bg-gray-middle h-[48px] max-h-[48px]': {};
+                    '> .sk-sidemenu-item-link': {
+                        '@apply h-[48px] max-h-[48px]': {};
+                    };
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-3': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-4': {
+                '.sk-sidemenu-wrapper': {
+                    '@apply bg-[#d4d4d4]': {};
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-5': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-6': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-7': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-8': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-9': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-10': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/switch.d.ts

@@ -17,6 +17,9 @@ export declare const Switch: () => {
         'input[type=checkbox]:focus-visible + &': {
             '@apply ring ring-blue-500': {};
         };
+        '&-input': {
+            '@apply sr-only': {};
+        };
         'input[type=checkbox]:checked + &': {
             "&[data-color=\"gronsta\"]": {
                 '.sk-form-switch-box': {