fui-material 0.2.58 → 0.2.60

package/src/material/FGrid/css/bootstrap.min.css

@@ -0,0 +1,7 @@
+/*!
+ * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
+ *//*!
+ * Bootstrap v3.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*="col-"]{padding-right:0;padding-left:0}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{display:table;content:" "}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}

package/src/material/FGrid/index.ts

@@ -0,0 +1 @@
+export { default } from "./FGrid";

package/src/material/FInputFileForm/FInputFileForm.css

@@ -0,0 +1,95 @@
+.custom-file {
+    position: relative;
+}
+
+.custom-file .custom-file-input:not([disabled]) {
+    cursor: pointer;
+}
+
+.custom-file .custom-file-input {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+}
+
+input[type="file"] {
+    display: block;
+}
+
+.custom-file.custom-file-dropzone .custom-file-label {
+    position: relative;
+    display: block;
+    background: rgba(47, 128, 237, 0.1);
+    border: 1px dashed #2F80ED;
+    border-radius: 8px;
+    padding: 20px;
+    padding-top: 10px;
+    text-align: center;
+    font-family: "SF UI Display", sans-serif;
+    font-size: 14px;
+    color: #7AAEF3;
+}
+
+.custom-file .custom-file-label {
+    cursor: pointer;
+    padding: 5px;
+}
+
+.custom-file.custom-file-dropzone .custom-file-label b, .custom-file.custom-file-dropzone .custom-file-label .svg-icon {
+    color: #2F80ED;
+}
+
+.custom-file .svg-icon {
+    color: #2F80ED;
+}
+
+.custom-file .svg-icon .icon-md, .svg-icon.lexicon-icon-md {
+    width: 32px;
+    height: 32px;
+}
+
+.custom-file svg:not(:root) {
+    overflow: hidden;
+}
+
+.custom-file .svg-icon {
+    display: inline-block;
+    fill: currentColor;
+    width: 22px;
+    height: 22px;
+    vertical-align: middle;
+}
+
+.custom-file.custom-file-dropzone .custom-file-label b, .custom-file.custom-file-dropzone .custom-file-label .svg-icon {
+    color: #2F80ED;
+}
+
+.custom-file b, strong {
+    font-weight: bold;
+}
+
+.custom-file.custom-file-dropzone .custom-file-label small {
+    font-size: 13px;
+}
+
+.custom-file small, .small {
+    font-size: 92%;
+}
+
+.custom-file small {
+    font-size: 80%;
+}
+
+.form-group .custom-files-preview {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 34px;
+}
+
+.custom-file .hidden {
+    display: none !important;
+}

package/src/material/FInputFileForm/FInputFileForm.tsx

@@ -0,0 +1,147 @@
+import React, {FC, useEffect, useRef} from 'react';
+import "./FInputFileForm.css"
+
+export interface IFInputFileForm {
+    id?: string,
+    className?: string,
+    st?: React.CSSProperties,
+    dataMaxSize?: {
+        dimension: 'МБ' | 'КБ',
+        size: number
+    },
+    name?: string,
+    accept?: string,
+    multiple?: boolean,
+    onChange: (e: FileList) => void,
+    disabled?: boolean,
+    deleteFile?: boolean,
+    title?: string
+}
+
+const FInputFileForm: FC<IFInputFileForm> = ({
+                                                 id,
+                                                 className,
+                                                 st,
+                                                 dataMaxSize,
+                                                 name,
+                                                 accept,
+                                                 multiple = false,
+                                                 onChange,
+                                                 disabled = false,
+                                                 deleteFile,
+                                                 title
+                                             }) => {
+
+    let disabledColor: {
+        customFileLabel: React.CSSProperties | undefined,
+        svgIcon: React.CSSProperties | undefined,
+        span: React.CSSProperties | undefined,
+        b: React.CSSProperties | undefined,
+    } = {
+        customFileLabel: undefined,
+        svgIcon: undefined,
+        span: undefined,
+        b: undefined,
+    }
+
+    if (disabled) {
+        disabledColor = {
+            customFileLabel: {
+                backgroundColor: '#F3F3F3',
+                borderRadius: '8px',
+                border: '1px dashed #C4C4C4'
+            },
+            svgIcon: {
+                color: '#888888'
+            },
+            span: {
+                color: '#C4C4C4'
+            },
+            b: {
+                color: '#888888'
+            }
+        }
+    }
+
+    const inputRef = useRef<{
+        value: null | undefined
+    }>({
+        value: undefined
+    });
+
+    useEffect(() => {
+        if (deleteFile) {
+            inputRef.current.value = null
+        }
+    }, [deleteFile])
+
+    return (
+        <React.Fragment>
+            <div
+                className="custom-file custom-file-dropzone"
+                style={st}
+            >
+                <input
+                    accept={accept}
+                    type="file"
+                    className={`custom-file-input ${className !== undefined ? className : ''}`}
+                    name={name}
+                    id={id}
+                    title={title}
+                    data-max-size={dataMaxSize?.size}
+                    multiple={multiple}
+                    onChange={(e) => {
+
+                        if (e.target.files && e.target.files[0]) {
+
+                            let maximumSize: number | undefined = undefined
+
+                            if (dataMaxSize?.dimension === 'МБ') {
+                                maximumSize = dataMaxSize.size * 1024 * 1024 // Перевод из мегабайт в байты
+                            } else if (dataMaxSize?.dimension === 'КБ') (
+                                maximumSize = dataMaxSize.size * 1024 // Перевод из килобайт в байты
+                            )
+                            if (maximumSize !== undefined) {
+                                const dt = new DataTransfer()
+                                Object.values(e.target.files).forEach((file) => {
+                                    //@ts-ignore
+                                    if (file.size <= maximumSize) dt.items.add(file)
+                                })
+                                onChange(dt.files)
+                            } else {
+                                onChange(e.target.files)
+                            }
+                        }
+                    }}
+                    disabled={disabled}
+                    //@ts-ignore
+                    ref={inputRef}
+                />
+                <label
+                    className="custom-file-label"
+                    style={disabledColor.customFileLabel}
+                >
+                    <svg
+                        className="svg-icon icon-md"
+                        focusable="false"
+                        role="img"
+                        viewBox="0 0 36 35"
+                        style={disabledColor.svgIcon}
+                    >
+                        <path
+                            d="M19.035 16.465a1.458 1.458 0 0 0-2.041 0l-4.376 4.229a1.459 1.459 0 1 0 2.013 2.1l1.91-1.852v8.225a1.458 1.458 0 1 0 2.917 0v-8.152l1.881 1.895a1.459 1.459 0 0 0 2.071 0 1.457 1.457 0 0 0 0-2.07l-4.375-4.375z"/>
+                        <path
+                            d="M26.269 10.208a8.75 8.75 0 0 0-16.538 0 7.292 7.292 0 0 0-4.491 12.06 1.457 1.457 0 1 0 2.187-1.851 4.375 4.375 0 0 1 3.282-7.292h.145a1.458 1.458 0 0 0 1.459-1.167 5.833 5.833 0 0 1 11.433 0 1.458 1.458 0 0 0 1.458 1.167h.088a4.376 4.376 0 0 1 3.281 7.292 1.457 1.457 0 0 0 .131 2.07 1.458 1.458 0 0 0 1.563.235c.189-.085.357-.21.494-.366a7.292 7.292 0 0 0-4.492-12.148z"/>
+                    </svg>
+                    <br/>
+                    <span style={disabledColor.span}>
+                        <b style={disabledColor.b}>Выберите</b> или переместите файл для загрузки<br/> <small>Максимальный
+                    размер {dataMaxSize?.size} {dataMaxSize?.dimension}</small>
+                    </span>
+                </label>
+            </div>
+        </React.Fragment>
+    );
+};
+
+export default FInputFileForm;

package/src/material/FInputFileForm/index.ts

@@ -0,0 +1 @@
+export { default } from "./FInputFileForm"

package/src/material/FNative/FNative.css

@@ -0,0 +1,41 @@
+.f-form-native {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.f-native-label {
+    padding-left: 11px;
+}
+
+.f-form-native .f-native {
+    min-width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    appearance: none;
+    user-select: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font: inherit;
+    letter-spacing: inherit;
+    color: currentcolor;
+    box-sizing: content-box;
+    background: none;
+    margin: 0px;
+    -webkit-tap-highlight-color: transparent;
+    display: block;
+    width: 100%;
+    animation-name: fui-auto-fill-cancel;
+    animation-duration: 10ms;
+    padding: 5.5px 14px;
+}
+
+.f-form-native .f-native:hover {
+    border-color: #2f80ed;
+}
+.f-form-native .f-native:focus-visible {
+    outline: 0;
+}
+
+.f-form-native .f-native option:active {
+    background-color: red;
+}

package/src/material/FNative/FNative.tsx

@@ -0,0 +1,97 @@
+import React, {FC} from "react"
+import "./FNative.css"
+
+export interface IFNative {
+    label: string,
+    id?: string,
+    className?: string,
+    st?: React.CSSProperties,
+    children?: React.ReactChild | React.ReactNode,
+    value?: string[] | number[],
+    singleChoice?: (element: string[]) => void,
+    multipleChoice?: (element: string[]) => void,
+    disabled?: boolean,
+    size?: number,
+    overflowX?: boolean,
+    width?: number | 'auto' | 'fit-content' | 'inherit' | 'initial' | 'max-content' | 'min-content' | 'revert' | 'unset' | '-webkit-fill-available'
+    fullWidth?: boolean
+}
+
+const FNative: FC<IFNative> = ({
+                                   label,
+                                   id,
+                                   className,
+                                   st,
+                                   children,
+                                   value,
+                                   singleChoice,
+                                   multipleChoice,
+                                   disabled,
+                                   size = 4,
+                                   overflowX,
+                                   width = '-webkit-fill-available',
+                                   fullWidth
+                               }) => {
+
+    const handleSingleChoice = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        if (singleChoice) {
+            let a = []
+            a.push(event.target.value)
+            singleChoice(a)
+        }
+    }
+
+    const handlerMultipleChoice = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const {options} = event.target;
+        const value: string[] = [];
+        for (let i = 0, l = options.length; i < l; i += 1) {
+            if (options[i].selected) {
+                value.push(options[i].value);
+            }
+        }
+        if (multipleChoice) {
+            multipleChoice(value)
+        }
+    }
+
+    if (fullWidth) {
+        if (st === undefined) {
+            st = {
+                width: '100%'
+            }
+        } else {
+            st.width = '100%'
+        }
+    }
+
+    return (
+        <React.Fragment>
+            <div className={`f-form-native ${className !== undefined ? className : ''}`} style={st} id={id}>
+                <label className={'f-native-label'}>{label}</label>
+                <select
+                    style={{
+                        overflowX: overflowX ? 'auto' : 'hidden',
+                        width: width
+                    }}
+                    size={size}
+                    disabled={disabled}
+                    //@ts-ignore
+                    value={value}
+                    multiple={true}
+                    className={'f-native'}
+                    onChange={(event) => {
+                        if (singleChoice) {
+                            handleSingleChoice(event)
+                        } else if (multipleChoice) {
+                            handlerMultipleChoice(event)
+                        }
+                    }}>
+                    {children}
+                </select>
+            </div>
+        </React.Fragment>
+    )
+
+}
+
+export default FNative

package/src/material/FNative/index.ts

@@ -0,0 +1 @@
+export { default } from "./FNative";

package/src/material/FOpenImgFull/FOpenImgFull.css

@@ -0,0 +1,10 @@
+.fv-opn-img-full-body {
+    position: relative;
+    padding: 20px 30px 15px;
+}
+
+.fv-opn-img-full-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: var(--bs-modal-padding);
+}

package/src/material/FOpenImgFull/FOpenImgFull.tsx

@@ -0,0 +1,109 @@
+import React, {FC} from 'react';
+import {FStack, FDialog} from "../index";
+import './FOpenImgFull.css'
+import {FArrowIcon, FCloseIcon} from "../../icons";
+
+export interface IFOpenImgFull {
+    id?: string,
+    className?: string,
+    st?: React.CSSProperties,
+    imagesUrl: string[],
+    selectedImg: number,
+    handleClose?: () => void,
+    setSelectedImg: (number: number) => void,
+    openAndClose: boolean
+}
+
+const FOpenImgFull: FC<IFOpenImgFull> = ({
+                                             id,
+                                             className,
+                                             st,
+                                             imagesUrl,
+                                             selectedImg,
+                                             setSelectedImg,
+                                             handleClose,
+                                             openAndClose
+                                         }) => {
+
+    let style: React.CSSProperties = {
+        boxShadow: '2px 2px 10px 5px rgb(0 0 0 / 0%)',
+        backgroundColor: "inherit",
+        overflow: "inherit",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        maxWidth: '80%',
+        maxHeight: '80%',
+        padding: '90px'
+    }
+
+    if (st !== undefined) {
+        style = Object.assign(style, st)
+    }
+
+    return (
+        <React.Fragment>
+            {imagesUrl.length !== 0 && selectedImg >= 0 && selectedImg < imagesUrl.length &&
+                <FDialog
+                    openAndClose={openAndClose}
+                    st={style}
+                    className={className}
+                    id={id}
+                >
+                    <div className={'fv-opn-img-full-body'}>
+                        <FStack
+                            direction={'row-reverse'}
+                            spacing={2}
+                        >
+                            <div
+                                style={{
+                                    position: 'fixed',
+                                    top: '70px',
+                                    right: '20px'
+                                }}
+                            >
+                                {handleClose !== undefined &&
+                                    <FCloseIcon
+                                        handleClose={() => {
+                                            handleClose()
+                                            document.body.style.overflow = 'auto'
+                                        }}
+                                    />
+                                }
+                            </div>
+                            <FStack direction={'row'} spacing={2} alignItems={'center'} justifyContent={'center'}>
+                                {selectedImg > 0 ?
+                                    <FArrowIcon
+                                        direction={'left'}
+                                        handleClick={() => setSelectedImg(selectedImg - 1)}
+                                    />
+                                    :
+                                    <div style={{width:'35px', height:'35px'}}>ㅤ</div>
+                                }
+                                <img
+                                    className={'open-full-img'}
+                                    src={imagesUrl[selectedImg]}
+                                    style={{
+                                        objectFit: 'contain',
+                                        width: '100%',
+                                        maxHeight: '80%',
+                                    }}
+                                />
+                                {selectedImg < imagesUrl.length - 1 ?
+                                    <FArrowIcon
+                                        direction={'right'}
+                                        handleClick={() => setSelectedImg(selectedImg + 1)}
+                                    />
+                                    :
+                                    <div style={{width:'35px', height:'35px'}}>ㅤ</div>
+                                }
+                            </FStack>
+                        </FStack>
+                    </div>
+                </FDialog>
+            }
+        </React.Fragment>
+    );
+};
+
+export default FOpenImgFull;

package/src/material/FOpenImgFull/index.ts

@@ -0,0 +1 @@
+export { default } from "./FOpenImgFull";

package/src/material/FPagination/FPagination.css

@@ -0,0 +1,59 @@
+.pagination-container {
+    display: flex;
+    list-style-type: none;
+}
+.pagination-container .pagination-item {
+    padding: 0 12px;
+    height: 32px;
+    text-align: center;
+    margin: auto 4px;
+    color: rgba(0, 0, 0, 0.87);
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    letter-spacing: 0.01071em;
+    border-radius: 4px;
+    line-height: 1.43;
+    font-size: 13px;
+    min-width: 32px;
+}
+.pagination-container .pagination-item.dots:hover {
+    background-color: transparent;
+    cursor: default;
+}
+.pagination-container .pagination-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    cursor: pointer;
+}
+.pagination-container .pagination-item.selected {
+    background-color: #2F80ED;
+    color: white;
+}
+.pagination-container .pagination-item .arrow::before {
+    position: relative;
+    /* top: 3pt; Uncomponent this to lower the icons as requested in components*/
+    content: '';
+    /* By using an em scale, the arrows will size with the font */
+    display: inline-block;
+    width: 0.4em;
+    height: 0.4em;
+    border-right: 0.12em solid rgba(0, 0, 0, 0.87);
+    border-top: 0.12em solid rgba(0, 0, 0, 0.87);
+}
+.pagination-container .pagination-item .arrow.left {
+    transform: rotate(-135deg) translate(-50%);
+}
+.pagination-container .pagination-item .arrow.right {
+    transform: rotate(45deg);
+}
+.pagination-container .pagination-item.disabled {
+    pointer-events: none;
+}
+.pagination-container .pagination-item.disabled .arrow::before {
+    border-right: 0.12em solid rgba(0, 0, 0, 0.43);
+    border-top: 0.12em solid rgba(0, 0, 0, 0.43);
+}
+.pagination-container .pagination-item.disabled:hover {
+    background-color: transparent;
+    cursor: default;
+}