@lazhus/kg-ui 0.7.5 → 0.7.7
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/custom-elements.json +9 -9
- package/dist/components/kg-checkbox.js +25 -15
- package/dist/components/kg-colorpicker.js +7 -4
- package/dist/components/kg-file-upload.js +5 -2
- package/dist/components/kg-input.js +5 -2
- package/dist/components/kg-radio-group.js +8 -5
- package/dist/components/kg-select.js +8 -5
- package/dist/components/kg-slider.js +5 -2
- package/dist/components/kg-switch.js +16 -11
- package/dist/components/kg-textarea.js +5 -2
- package/dist/react/KgDataGrid.js +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -796,7 +796,7 @@
|
|
|
796
796
|
"kind": "field",
|
|
797
797
|
"name": "styles",
|
|
798
798
|
"static": true,
|
|
799
|
-
"default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--kg-primary); border-color: var(--kg-primary); } .indeterminate .checkbox-box::after { opacity: 1; transform: scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .error .checkbox-box { border-color: #DB2828 !important; } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
799
|
+
"default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-checkbox-wrapper { position: relative; display: inline-block; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--kg-primary); border-color: var(--kg-primary); } .indeterminate .checkbox-box::after { opacity: 1; transform: scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .error .checkbox-box { border-color: #DB2828 !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
800
800
|
},
|
|
801
801
|
{
|
|
802
802
|
"kind": "method",
|
|
@@ -1043,7 +1043,7 @@
|
|
|
1043
1043
|
"kind": "field",
|
|
1044
1044
|
"name": "styles",
|
|
1045
1045
|
"static": true,
|
|
1046
|
-
"default": "css` :host { display: inline-block; font-family: inherit; } .kg-color-container { display: flex; flex-direction: column; gap: 6px; } .label-text { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .picker-trigger { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: var(--kg-form-height); background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md); cursor: pointer; transition: all 0.2s; box-sizing: border-box; } .picker-trigger:hover { border-color: var(--kg-primary); } .color-swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; } .color-value { font-size: 0.9rem; font-family: monospace; color: var(--kg-text); flex: 1; } .picker-popup { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000; background: var(--kg-bg); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-lg); box-shadow: var(--kg-shadow-lg); padding: 16px; display: none; width: 230px; box-sizing: border-box; } .picker-popup.open { display: block; animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; } .preset-swatch { width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); transition: all 0.2s; box-sizing: border-box; } .preset-swatch:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2; } .custom-input-container { border-top: 1px solid var(--kg-border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .color-input-wrapper { display: flex; align-items: center; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 8px; padding: 4px; height: var(--kg-form-height); overflow: hidden; } input[type=\"color\"] { flex: 1; height: 100%; padding: 0; border: none; background: none; cursor: pointer; min-width: 40px; } .color-hex-label { font-family: monospace; font-size: 0.85rem; padding: 0 10px; color: var(--kg-text-muted); border-left: 1px solid var(--kg-border); } .disabled { opacity: 0.5; pointer-events: none; } .picker-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
1046
|
+
"default": "css` :host { display: inline-block; font-family: inherit; } .kg-color-container { display: flex; flex-direction: column; gap: 6px; position: relative; } .label-text { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .picker-trigger { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: var(--kg-form-height); background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md); cursor: pointer; transition: all 0.2s; box-sizing: border-box; } .picker-trigger:hover { border-color: var(--kg-primary); } .color-swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; } .color-value { font-size: 0.9rem; font-family: monospace; color: var(--kg-text); flex: 1; } .picker-popup { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000; background: var(--kg-bg); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-lg); box-shadow: var(--kg-shadow-lg); padding: 16px; display: none; width: 230px; box-sizing: border-box; } .picker-popup.open { display: block; animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; } .preset-swatch { width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); transition: all 0.2s; box-sizing: border-box; } .preset-swatch:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2; } .custom-input-container { border-top: 1px solid var(--kg-border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .color-input-wrapper { display: flex; align-items: center; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 8px; padding: 4px; height: var(--kg-form-height); overflow: hidden; } input[type=\"color\"] { flex: 1; height: 100%; padding: 0; border: none; background: none; cursor: pointer; min-width: 40px; } .color-hex-label { font-family: monospace; font-size: 0.85rem; padding: 0 10px; color: var(--kg-text-muted); border-left: 1px solid var(--kg-border); } .disabled { opacity: 0.5; pointer-events: none; } .picker-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
1047
1047
|
},
|
|
1048
1048
|
{
|
|
1049
1049
|
"kind": "method",
|
|
@@ -2365,7 +2365,7 @@
|
|
|
2365
2365
|
"kind": "field",
|
|
2366
2366
|
"name": "styles",
|
|
2367
2367
|
"static": true,
|
|
2368
|
-
"default": "css` :host { display: block; width: 100%; font-family: inherit; } .container { display: flex; flex-direction: column; gap: 0.5rem; } .label { font-size: 0.85rem; font-weight: 600; color: var(--kg-text); } .upload-wrapper { display: flex; align-items: stretch; border: 2px solid var(--kg-border); border-radius: 10px; overflow: hidden; background: var(--kg-bg-primary); transition: all 0.2s ease; height: var(--kg-form-height); cursor: pointer; } .upload-wrapper:hover:not(.disabled) { border-color: var(--kg-primary); } .upload-wrapper.active { border-color: var(--kg-primary); box-shadow: 0 0 0 3px rgba(65, 171, 52, 0.1); } .upload-wrapper.disabled { opacity: 0.6; cursor: not-allowed; background: var(--kg-bg-secondary); } .file-display { flex: 1; display: flex; align-items: center; padding: 0 1rem; font-size: 0.9rem; color: var(--kg-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-display.has-file { color: var(--kg-text); font-weight: 500; } .divider { width: 1px; background: var(--kg-border); margin: 8px 0; transition: background 0.2s ease; } .upload-wrapper:hover .divider { background: var(--kg-primary); opacity: 0.3; } .upload-btn { width: 48px; display: flex; align-items: center; justify-content: center; color: var(--kg-primary); background: transparent; transition: all 0.2s ease; } .upload-wrapper:hover .upload-btn { background: rgba(65, 171, 52, 0.05); } input[type=\"file\"] { display: none; } .file-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--kg-bg-secondary); border: 1px solid var(--kg-border); border-radius: 20px; font-size: 0.8rem; animation: slideIn 0.2s ease; } .chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-remove { cursor: pointer; color: var(--kg-text-muted); display: flex; align-items: center; } .chip-remove:hover { color: #e74c3c; } @keyframes slideIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .preview-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; margin-right: 8px; border: 1px solid var(--kg-border); } .upload-wrapper.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
2368
|
+
"default": "css` :host { display: block; width: 100%; font-family: inherit; } .container { display: flex; flex-direction: column; gap: 0.5rem; position: relative; } .label { font-size: 0.85rem; font-weight: 600; color: var(--kg-text); } .upload-wrapper { display: flex; align-items: stretch; border: 2px solid var(--kg-border); border-radius: 10px; overflow: hidden; background: var(--kg-bg-primary); transition: all 0.2s ease; height: var(--kg-form-height); cursor: pointer; } .upload-wrapper:hover:not(.disabled) { border-color: var(--kg-primary); } .upload-wrapper.active { border-color: var(--kg-primary); box-shadow: 0 0 0 3px rgba(65, 171, 52, 0.1); } .upload-wrapper.disabled { opacity: 0.6; cursor: not-allowed; background: var(--kg-bg-secondary); } .file-display { flex: 1; display: flex; align-items: center; padding: 0 1rem; font-size: 0.9rem; color: var(--kg-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-display.has-file { color: var(--kg-text); font-weight: 500; } .divider { width: 1px; background: var(--kg-border); margin: 8px 0; transition: background 0.2s ease; } .upload-wrapper:hover .divider { background: var(--kg-primary); opacity: 0.3; } .upload-btn { width: 48px; display: flex; align-items: center; justify-content: center; color: var(--kg-primary); background: transparent; transition: all 0.2s ease; } .upload-wrapper:hover .upload-btn { background: rgba(65, 171, 52, 0.05); } input[type=\"file\"] { display: none; } .file-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--kg-bg-secondary); border: 1px solid var(--kg-border); border-radius: 20px; font-size: 0.8rem; animation: slideIn 0.2s ease; } .chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-remove { cursor: pointer; color: var(--kg-text-muted); display: flex; align-items: center; } .chip-remove:hover { color: #e74c3c; } @keyframes slideIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .preview-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; margin-right: 8px; border: 1px solid var(--kg-border); } .upload-wrapper.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
2369
2369
|
},
|
|
2370
2370
|
{
|
|
2371
2371
|
"kind": "method",
|
|
@@ -2903,7 +2903,7 @@
|
|
|
2903
2903
|
"kind": "field",
|
|
2904
2904
|
"name": "styles",
|
|
2905
2905
|
"static": true,
|
|
2906
|
-
"default": "css` :host { display: inline-block; max-width: 100%; vertical-align: top; } :host([fullwidth]) { display: block; width: 100%; } .kg-input-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .input-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .ui-input { display: inline-flex; width: 100%; color: var(--kg-text); font-family: inherit; } .input-wrapper { display: flex; width: 100%; align-items: stretch; min-height: var(--kg-form-height); background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); transition: all 0.2s ease; overflow: hidden; position: relative; } .input-wrapper:focus-within { border-color: var(--kg-primary); background: var(--kg-bg); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } input { margin: 0; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); text-align: left; line-height: var(--kg-form-height); height: var(--kg-form-height); font-family: inherit; padding: 0 1rem; background: transparent; border: none; color: inherit; min-width: 0; width: 100%; } input::placeholder { color: var(--kg-text-muted); opacity: 0.6; } /* Number input specific styling - hide spin buttons */ input[type=\"number\"]::-webkit-inner-spin-button, input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=\"number\"] { -moz-appearance: textfield; } .label-container { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, rgba(0,0,0,0.04)); padding: 0 0.8rem; min-height: var(--kg-form-height); color: var(--kg-text-muted); font-size: 0.9em; white-space: nowrap; user-select: none; transition: all 0.2s ease; font-family: inherit; } /* Secret Sauce: Hide container if it has no content but KEEP THE SLOT ACTIVE */ .label-container:not(.visible) { display: none; } .label-container.left { border-right: 1px solid var(--kg-border); } .label-container.right { border-left: 1px solid var(--kg-border); } .reveal-btn { display: flex; align-items: center; justify-content: center; padding: 0 0.8rem; cursor: pointer; color: var(--kg-text-muted); transition: color 0.2s; user-select: none; } .reveal-btn:hover { color: var(--kg-secondary); } /* States */ .disabled { opacity: 0.45; pointer-events: none; } .error .input-wrapper { border-color: #DB2828; background-color: rgba(219, 40, 40, 0.02); } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
2906
|
+
"default": "css` :host { display: inline-block; max-width: 100%; vertical-align: top; } :host([fullwidth]) { display: block; width: 100%; } .kg-input-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .input-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .ui-input { display: inline-flex; width: 100%; color: var(--kg-text); font-family: inherit; } .input-wrapper { display: flex; width: 100%; align-items: stretch; min-height: var(--kg-form-height); background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); transition: all 0.2s ease; overflow: hidden; position: relative; } .input-wrapper:focus-within { border-color: var(--kg-primary); background: var(--kg-bg); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } input { margin: 0; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); text-align: left; line-height: var(--kg-form-height); height: var(--kg-form-height); font-family: inherit; padding: 0 1rem; background: transparent; border: none; color: inherit; min-width: 0; width: 100%; } input::placeholder { color: var(--kg-text-muted); opacity: 0.6; } /* Number input specific styling - hide spin buttons */ input[type=\"number\"]::-webkit-inner-spin-button, input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=\"number\"] { -moz-appearance: textfield; } .label-container { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, rgba(0,0,0,0.04)); padding: 0 0.8rem; min-height: var(--kg-form-height); color: var(--kg-text-muted); font-size: 0.9em; white-space: nowrap; user-select: none; transition: all 0.2s ease; font-family: inherit; } /* Secret Sauce: Hide container if it has no content but KEEP THE SLOT ACTIVE */ .label-container:not(.visible) { display: none; } .label-container.left { border-right: 1px solid var(--kg-border); } .label-container.right { border-left: 1px solid var(--kg-border); } .reveal-btn { display: flex; align-items: center; justify-content: center; padding: 0 0.8rem; cursor: pointer; color: var(--kg-text-muted); transition: color 0.2s; user-select: none; } .reveal-btn:hover { color: var(--kg-secondary); } /* States */ .disabled { opacity: 0.45; pointer-events: none; } .error .input-wrapper { border-color: #DB2828; background-color: rgba(219, 40, 40, 0.02); } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .loading .input-wrapper::after { position: absolute; content: ''; top: 50%; right: var(--loading-offset, 1rem); margin-top: -0.5rem; width: 1rem; height: 1rem; border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: var(--kg-secondary); border-radius: 50%; animation: input-spin 0.6s linear infinite; } @keyframes input-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Sizes */ .mini input { font-size: 0.75rem; } .small input { font-size: 0.85rem; } .medium input { font-size: 1rem; } .large input { font-size: 1.15rem; } .massive input { font-size: 1.5rem; } /* Variations */ .fullwidth { width: 100%; } :host([inverted]) .input-label { color: rgba(255, 255, 255, 0.9); } :host([inverted]) .input-wrapper { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; } :host([inverted]) .input-wrapper:focus-within { background: rgba(255, 255, 255, 0.12); border-color: var(--kg-primary); } :host([inverted]) .label-container { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); } :host([inverted]) input::placeholder { color: rgba(255, 255, 255, 0.5); } :host([inverted]) .reveal-btn { color: rgba(255, 255, 255, 0.6); } :host([inverted]) .reveal-btn:hover { color: var(--kg-secondary); } * { font-family: 'Century Gothic', 'Apple Gothic', 'CenturyGothic', sans-serif; } `"
|
|
2907
2907
|
},
|
|
2908
2908
|
{
|
|
2909
2909
|
"kind": "method",
|
|
@@ -3741,7 +3741,7 @@
|
|
|
3741
3741
|
"kind": "field",
|
|
3742
3742
|
"name": "styles",
|
|
3743
3743
|
"static": true,
|
|
3744
|
-
"default": "css` :host { display: block; } .kg-radio-group-container { display: flex; gap: 16px; } .kg-radio-group-container.vertical { flex-direction: column; gap: 12px; } .kg-radio-group-container.horizontal { flex-direction: row; flex-wrap: wrap; } .group-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text-muted); margin-bottom: 0.75rem; display: block; text-transform: uppercase; letter-spacing: 0.05em; } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
3744
|
+
"default": "css` :host { display: block; position: relative; } .kg-radio-group-container { display: flex; gap: 16px; } .kg-radio-group-container.vertical { flex-direction: column; gap: 12px; } .kg-radio-group-container.horizontal { flex-direction: row; flex-wrap: wrap; } .group-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text-muted); margin-bottom: 0.75rem; display: block; text-transform: uppercase; letter-spacing: 0.05em; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
3745
3745
|
},
|
|
3746
3746
|
{
|
|
3747
3747
|
"kind": "method",
|
|
@@ -4326,7 +4326,7 @@
|
|
|
4326
4326
|
"kind": "field",
|
|
4327
4327
|
"name": "styles",
|
|
4328
4328
|
"static": true,
|
|
4329
|
-
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
4329
|
+
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
4330
4330
|
},
|
|
4331
4331
|
{
|
|
4332
4332
|
"kind": "method",
|
|
@@ -4756,7 +4756,7 @@
|
|
|
4756
4756
|
"kind": "field",
|
|
4757
4757
|
"name": "styles",
|
|
4758
4758
|
"static": true,
|
|
4759
|
-
"default": "css` :host { display: block; margin: 1rem 0; font-family: inherit; } .kg-slider-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .slider-header { display: flex; justify-content: space-between; align-items: center; } .slider-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; } .current-value { font-size: 0.875rem; font-weight: 700; color: var(--slider-active-color, var(--kg-primary)); background: var(--kg-bg-secondary, rgba(0,0,0,0.04)); padding: 2px 8px; border-radius: 4px; min-width: 2.5rem; text-align: center; } .slider-wrapper { position: relative; display: flex; align-items: center; height: 24px; } input[type=\"range\"] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; cursor: pointer; } input[type=\"range\"]:focus { outline: none; } /* Track Styles */ input[type=\"range\"]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: var(--kg-border); border-radius: 3px; transition: background 0.2s; } .checked-track { position: absolute; height: 6px; background: var(--slider-active-color, var(--kg-primary)); border-radius: 3px; pointer-events: none; left: 0; } /* Thumb Styles */ input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: white; border: 2px solid var(--slider-active-color, var(--kg-primary)); margin-top: -7px; /* Centers thumb on track */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; } input[type=\"range\"]:not(:disabled):::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(var(--kg-primary-rgb, 19, 103, 255), 0.1); } input[type=\"range\"]:active::-webkit-slider-thumb { transform: scale(0.9); background: var(--slider-active-color, var(--kg-primary)); } /* Disabled State */ .disabled { opacity: 0.5; cursor: not-allowed; } .disabled input[type=\"range\"] { cursor: not-allowed; } .pins-container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 0; } .pin { width: 4px; height: 4px; background-color: var(--kg-text); opacity: 0.3; border-radius: 50%; } .error .current-value { color: #DB2828 !important; } .error .checked-track { background: #DB2828 !important; } .error input[type=\"range\"]::-webkit-slider-thumb { border-color: #DB2828 !important; } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
4759
|
+
"default": "css` :host { display: block; margin: 1rem 0; font-family: inherit; } .kg-slider-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .slider-header { display: flex; justify-content: space-between; align-items: center; } .slider-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; } .current-value { font-size: 0.875rem; font-weight: 700; color: var(--slider-active-color, var(--kg-primary)); background: var(--kg-bg-secondary, rgba(0,0,0,0.04)); padding: 2px 8px; border-radius: 4px; min-width: 2.5rem; text-align: center; } .slider-wrapper { position: relative; display: flex; align-items: center; height: 24px; } input[type=\"range\"] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; cursor: pointer; } input[type=\"range\"]:focus { outline: none; } /* Track Styles */ input[type=\"range\"]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: var(--kg-border); border-radius: 3px; transition: background 0.2s; } .checked-track { position: absolute; height: 6px; background: var(--slider-active-color, var(--kg-primary)); border-radius: 3px; pointer-events: none; left: 0; } /* Thumb Styles */ input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: white; border: 2px solid var(--slider-active-color, var(--kg-primary)); margin-top: -7px; /* Centers thumb on track */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; } input[type=\"range\"]:not(:disabled):::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(var(--kg-primary-rgb, 19, 103, 255), 0.1); } input[type=\"range\"]:active::-webkit-slider-thumb { transform: scale(0.9); background: var(--slider-active-color, var(--kg-primary)); } /* Disabled State */ .disabled { opacity: 0.5; cursor: not-allowed; } .disabled input[type=\"range\"] { cursor: not-allowed; } .pins-container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 0; } .pin { width: 4px; height: 4px; background-color: var(--kg-text); opacity: 0.3; border-radius: 50%; } .error .current-value { color: #DB2828 !important; } .error .checked-track { background: #DB2828 !important; } .error input[type=\"range\"]::-webkit-slider-thumb { border-color: #DB2828 !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
4760
4760
|
},
|
|
4761
4761
|
{
|
|
4762
4762
|
"kind": "method",
|
|
@@ -5217,7 +5217,7 @@
|
|
|
5217
5217
|
"kind": "field",
|
|
5218
5218
|
"name": "styles",
|
|
5219
5219
|
"static": true,
|
|
5220
|
-
"default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
5220
|
+
"default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
5221
5221
|
},
|
|
5222
5222
|
{
|
|
5223
5223
|
"kind": "method",
|
|
@@ -5827,7 +5827,7 @@
|
|
|
5827
5827
|
"kind": "field",
|
|
5828
5828
|
"name": "styles",
|
|
5829
5829
|
"static": true,
|
|
5830
|
-
"default": "css` :host { display: inline-block; max-width: 100%; vertical-align: top; } :host([fullwidth]) { display: block; width: 100%; } :host([resize=\"both\"]), :host([resize=\"horizontal\"]) { display: inline-block; width: auto; min-width: 100px; } .kg-textarea-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .textarea-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .ui-textarea { display: inline-flex; width: 100%; color: var(--kg-text); font-family: inherit; } .textarea-wrapper { display: flex; width: 100%; height: 100%; align-items: stretch; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; position: relative; } .textarea-wrapper:focus-within { border-color: var(--kg-primary); background: var(--kg-bg); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } textarea { margin: 0; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-align: left; line-height: 1.5; font-family: inherit; padding: 0.75rem 1rem; background: transparent; border: none; color: inherit; min-width: 0; width: 100%; min-height: 5rem; } textarea::placeholder { color: var(--kg-text-muted); opacity: 0.6; } /* States */ .disabled { opacity: 0.45; pointer-events: none; } .error .textarea-wrapper { border-color: #DB2828; background-color: rgba(219, 40, 40, 0.02); } .error-text { color: #DB2828; font-size: 0.75rem; margin-top:
|
|
5830
|
+
"default": "css` :host { display: inline-block; max-width: 100%; vertical-align: top; } :host([fullwidth]) { display: block; width: 100%; } :host([resize=\"both\"]), :host([resize=\"horizontal\"]) { display: inline-block; width: auto; min-width: 100px; } .kg-textarea-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .textarea-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .ui-textarea { display: inline-flex; width: 100%; color: var(--kg-text); font-family: inherit; } .textarea-wrapper { display: flex; width: 100%; height: 100%; align-items: stretch; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; position: relative; } .textarea-wrapper:focus-within { border-color: var(--kg-primary); background: var(--kg-bg); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } textarea { margin: 0; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-align: left; line-height: 1.5; font-family: inherit; padding: 0.75rem 1rem; background: transparent; border: none; color: inherit; min-width: 0; width: 100%; min-height: 5rem; } textarea::placeholder { color: var(--kg-text-muted); opacity: 0.6; } /* States */ .disabled { opacity: 0.45; pointer-events: none; } .error .textarea-wrapper { border-color: #DB2828; background-color: rgba(219, 40, 40, 0.02); } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Variations */ :host([inverted]) .textarea-label { color: rgba(255, 255, 255, 0.9); } :host([inverted]) .textarea-wrapper { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; } :host([inverted]) .textarea-wrapper:focus-within { background: rgba(255, 255, 255, 0.12); border-color: var(--kg-primary); } :host([inverted]) textarea::placeholder { color: rgba(255, 255, 255, 0.5); } `"
|
|
5831
5831
|
},
|
|
5832
5832
|
{
|
|
5833
5833
|
"kind": "method",
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
var e,t=Object.defineProperty;import{LitElement as r,css as o,html as i}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(r)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},indeterminate:{type:Boolean},color:{type:String}}}constructor(){super(),this.checked=!1,this.indeterminate=!1,this.value="on"}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}_updateFormValue(){const e=this.checked?this.value||"on":null;this.internals.setFormValue(e,this.checked?"checked":"unchecked"),this.required&&!this.checked?this.internals.setValidity({valueMissing:!0},"Please check this box.",this.shadowRoot.querySelector(".checkbox-box")):this.internals.setValidity({})}toggle(){this.disabled||(this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e=`--checkbox-active-color: ${r=this.color,r?r.startsWith("#")||r.startsWith("rgb")||r.startsWith("hsl")?r:{primary:"var(--kg-primary)",secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[r]||`var(--kg-${r}, ${r})`:"var(--kg-primary)"};`,t={"kg-checkbox-container":!0,checked:this.checked,disabled:this.disabled,error:!!this.errorText,indeterminate:this.indeterminate};var r;return i`
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
<div class="kg-checkbox-wrapper">
|
|
3
|
+
<div
|
|
4
|
+
class="${c(t)}"
|
|
5
|
+
style="${e}"
|
|
6
|
+
@click="${this.toggle}"
|
|
7
|
+
>
|
|
8
|
+
<div class="checkbox-box">
|
|
9
|
+
${this.indeterminate?"":i`
|
|
10
|
+
<svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
|
11
|
+
<polyline points="20 6 9 17 4 12"></polyline>
|
|
12
|
+
</svg>
|
|
13
|
+
`}
|
|
14
|
+
</div>
|
|
15
|
+
${this.label?i`<span class="label-text">${this.label}</span>`:""}
|
|
13
16
|
</div>
|
|
14
|
-
${this.
|
|
17
|
+
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
15
18
|
</div>
|
|
16
|
-
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
17
19
|
`}}((e,r,o)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o})(s,"symbol"!=typeof(e="styles")?e+"":e,o`
|
|
18
20
|
:host {
|
|
19
21
|
display: inline-block;
|
|
@@ -22,6 +24,11 @@ var e,t=Object.defineProperty;import{LitElement as r,css as o,html as i}from"lit
|
|
|
22
24
|
font-family: inherit;
|
|
23
25
|
}
|
|
24
26
|
|
|
27
|
+
.kg-checkbox-wrapper {
|
|
28
|
+
position: relative;
|
|
29
|
+
display: inline-block;
|
|
30
|
+
}
|
|
31
|
+
|
|
25
32
|
.kg-checkbox-container {
|
|
26
33
|
display: flex;
|
|
27
34
|
align-items: center;
|
|
@@ -106,12 +113,15 @@ var e,t=Object.defineProperty;import{LitElement as r,css as o,html as i}from"lit
|
|
|
106
113
|
}
|
|
107
114
|
|
|
108
115
|
.error-text {
|
|
116
|
+
position: absolute;
|
|
117
|
+
top: 100%;
|
|
118
|
+
left: 2px;
|
|
109
119
|
color: #DB2828;
|
|
110
120
|
font-size: 0.75rem;
|
|
111
|
-
margin-top:
|
|
112
|
-
margin-left: 2px;
|
|
121
|
+
margin-top: 4px;
|
|
113
122
|
font-weight: 500;
|
|
114
123
|
animation: fadeIn 0.2s ease-in;
|
|
124
|
+
white-space: nowrap;
|
|
115
125
|
}
|
|
116
126
|
|
|
117
127
|
@keyframes fadeIn {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e,r=Object.defineProperty;import{LitElement as
|
|
1
|
+
var e,r=Object.defineProperty;import{LitElement as o,css as t,html as i}from"lit";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(o)){static get properties(){return{...super.properties,label:{type:String},open:{type:Boolean}}}constructor(){super(),this.value="#1367FF",this.open=!1,this._presets=["#1367FF","#FF0000","#00FF00","#FFA500","#800080","#000000","#FFFFFF","#808080","#FFC0CB","#00FFFF","#FFFF00","#A52A2A","#3498db","#2ecc71","#e74c3c","#f1c40f","#9b59b6","#34495e"],this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_handleOutsideClick(e){this.open&&!e.composedPath().includes(this)&&(this.open=!1)}_togglePopup(e){e&&e.stopPropagation(),this.open=!this.open}_selectColor(e){this.value=e,this._dispatchChange()}_handleInput(e){this.value=e.target.value,this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}render(){return i`
|
|
2
2
|
<div class="kg-color-container ${this.disabled?"disabled":""}" style="position: relative;">
|
|
3
3
|
${this.label?i`<span class="label-text">${this.label}</span>`:""}
|
|
4
4
|
|
|
@@ -32,7 +32,7 @@ var e,r=Object.defineProperty;import{LitElement as t,css as o,html as i}from"lit
|
|
|
32
32
|
</div>
|
|
33
33
|
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
34
34
|
</div>
|
|
35
|
-
`}}((e,t
|
|
35
|
+
`}}((e,o,t)=>{o in e?r(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t})(s,"symbol"!=typeof(e="styles")?e+"":e,t`
|
|
36
36
|
:host {
|
|
37
37
|
display: inline-block;
|
|
38
38
|
font-family: inherit;
|
|
@@ -42,6 +42,7 @@ var e,r=Object.defineProperty;import{LitElement as t,css as o,html as i}from"lit
|
|
|
42
42
|
display: flex;
|
|
43
43
|
flex-direction: column;
|
|
44
44
|
gap: 6px;
|
|
45
|
+
position: relative;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
.label-text {
|
|
@@ -181,10 +182,12 @@ var e,r=Object.defineProperty;import{LitElement as t,css as o,html as i}from"lit
|
|
|
181
182
|
}
|
|
182
183
|
|
|
183
184
|
.error-text {
|
|
185
|
+
position: absolute;
|
|
186
|
+
top: 100%;
|
|
187
|
+
left: 2px;
|
|
184
188
|
color: #DB2828;
|
|
185
189
|
font-size: 0.75rem;
|
|
186
|
-
margin-top:
|
|
187
|
-
margin-left: 2px;
|
|
190
|
+
margin-top: 2px;
|
|
188
191
|
font-weight: 500;
|
|
189
192
|
animation: fadeIn 0.2s ease-in;
|
|
190
193
|
}
|
|
@@ -58,6 +58,7 @@ var e,i=Object.defineProperty;import{LitElement as r,css as t,html as s}from"lit
|
|
|
58
58
|
display: flex;
|
|
59
59
|
flex-direction: column;
|
|
60
60
|
gap: 0.5rem;
|
|
61
|
+
position: relative;
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
.label {
|
|
@@ -198,10 +199,12 @@ var e,i=Object.defineProperty;import{LitElement as r,css as t,html as s}from"lit
|
|
|
198
199
|
}
|
|
199
200
|
|
|
200
201
|
.error-text {
|
|
202
|
+
position: absolute;
|
|
203
|
+
top: 100%;
|
|
204
|
+
left: 2px;
|
|
201
205
|
color: #DB2828;
|
|
202
206
|
font-size: 0.75rem;
|
|
203
|
-
margin-top:
|
|
204
|
-
margin-left: 2px;
|
|
207
|
+
margin-top: 2px;
|
|
205
208
|
font-weight: 500;
|
|
206
209
|
animation: fadeIn 0.2s ease-in;
|
|
207
210
|
}
|
|
@@ -57,6 +57,7 @@ var e,t=Object.defineProperty;import{LitElement as i,css as r,html as o}from"lit
|
|
|
57
57
|
flex-direction: column;
|
|
58
58
|
gap: 0.5rem;
|
|
59
59
|
width: 100%;
|
|
60
|
+
position: relative;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
.input-label {
|
|
@@ -177,10 +178,12 @@ var e,t=Object.defineProperty;import{LitElement as i,css as r,html as o}from"lit
|
|
|
177
178
|
}
|
|
178
179
|
|
|
179
180
|
.error-text {
|
|
181
|
+
position: absolute;
|
|
182
|
+
top: 100%;
|
|
183
|
+
left: 2px;
|
|
180
184
|
color: #DB2828;
|
|
181
185
|
font-size: 0.75rem;
|
|
182
|
-
margin-top:
|
|
183
|
-
margin-left: 2px;
|
|
186
|
+
margin-top: 2px;
|
|
184
187
|
font-weight: 500;
|
|
185
188
|
animation: fadeIn 0.2s ease-in;
|
|
186
189
|
}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as r,css as i,html as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as r,css as i,html as o}from"lit";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(r)){static get properties(){return{...super.properties,direction:{type:String},label:{type:String}}}constructor(){super(),this.direction="vertical",this.value="",this.addEventListener("kg-radio-select",this._handleRadioSelect)}_handleRadioSelect(e){const t=e.detail.value;this.value=t,this._updateChildren(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_updateChildren(){this.querySelectorAll("kg-radio").forEach(e=>{e.checked=e.value===this.value})}firstUpdated(){this._updateChildren()}updated(e){e.has("value")&&this._updateChildren()}render(){return o`
|
|
2
2
|
<div class="kg-radio-group">
|
|
3
|
-
${this.label?
|
|
3
|
+
${this.label?o`<span class="group-label">${this.label}</span>`:""}
|
|
4
4
|
<div class="kg-radio-group-container ${this.direction}">
|
|
5
5
|
<slot></slot>
|
|
6
6
|
</div>
|
|
7
|
-
${this.errorText?
|
|
7
|
+
${this.errorText?o`<div class="error-text">${this.errorText}</div>`:""}
|
|
8
8
|
</div>
|
|
9
9
|
`}}((e,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(s,"symbol"!=typeof(e="styles")?e+"":e,i`
|
|
10
10
|
:host {
|
|
11
11
|
display: block;
|
|
12
|
+
position: relative;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
.kg-radio-group-container {
|
|
@@ -37,10 +38,12 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as a}from"lit
|
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
.error-text {
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 100%;
|
|
43
|
+
left: 2px;
|
|
40
44
|
color: #DB2828;
|
|
41
45
|
font-size: 0.75rem;
|
|
42
|
-
margin-top:
|
|
43
|
-
margin-left: 2px;
|
|
46
|
+
margin-top: 4px;
|
|
44
47
|
font-weight: 500;
|
|
45
48
|
animation: fadeIn 0.2s ease-in;
|
|
46
49
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit";import"lit/directives/class-map.js";import{F as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit";import"lit/directives/class-map.js";import{F as o}from"../chunks/FormAssociated-Cx5D8YQA.js";class a extends(o(r)){static get properties(){return{...super.properties,options:{type:Array},value:{type:Object},placeholder:{type:String},label:{type:String},multiple:{type:Boolean},searchable:{type:Boolean},_open:{type:Boolean,state:!0},_searchQuery:{type:String,state:!0}}}constructor(){super(),this.options=[],this.value=null,this.placeholder="Seçiniz...",this.multiple=!1,this.searchable=!1,this._open=!1,this._searchQuery="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_updateFormValue(){if(this.multiple&&Array.isArray(this.value)){const e=new FormData;this.value.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}else this.internals.setFormValue(this.value)}_handleOutsideClick(e){this._open&&(e.composedPath().includes(this)||this._closeDropdown())}_toggleDropdown(e){this.disabled||(this._open=!this._open,this._open&&(this._searchQuery="",setTimeout(()=>{const e=this.shadowRoot.querySelector(".search-input");e&&e.focus()},100)))}_closeDropdown(){this._open=!1}_selectOption(e,t){if(t.stopPropagation(),this.multiple){let t=Array.isArray(this.value)?[...this.value]:[];const r=t.indexOf(e.value);r>-1?t.splice(r,1):t.push(e.value),this.value=t}else this.value=e.value,this._closeDropdown();this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleSearch(e){this._searchQuery=e.target.value.toLowerCase()}_removeTag(e,t){t.stopPropagation();let r=[...this.value];const i=r.indexOf(e);i>-1&&(r.splice(i,1),this.value=r,this._dispatchChange())}render(){const e=e=>this.multiple&&Array.isArray(this.value)?this.value.includes(e):this.value===e,t=(()=>{if(!this.value)return null;if(this.multiple&&Array.isArray(this.value))return this.options.filter(e=>this.value.includes(e.value));const e=this.options.find(e=>e.value===this.value);return e?e.label:null})(),r=(this.options||[]).filter(e=>e.label.toLowerCase().includes(this._searchQuery||""));return s`
|
|
2
2
|
<div class="kg-select-container">
|
|
3
3
|
${this.label?s`<label class="select-label">${this.label}</label>`:""}
|
|
4
4
|
|
|
@@ -63,7 +63,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
63
63
|
</div>
|
|
64
64
|
${this.errorText?s`<div class="error-text">${this.errorText}</div>`:""}
|
|
65
65
|
</div>
|
|
66
|
-
`}}((e,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(
|
|
66
|
+
`}}((e,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(a,"symbol"!=typeof(e="styles")?e+"":e,i`
|
|
67
67
|
:host {
|
|
68
68
|
display: inline-block;
|
|
69
69
|
width: 100%;
|
|
@@ -77,6 +77,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
77
77
|
flex-direction: column;
|
|
78
78
|
gap: 0.5rem;
|
|
79
79
|
width: 100%;
|
|
80
|
+
position: relative;
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
.select-label {
|
|
@@ -256,10 +257,12 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
256
257
|
}
|
|
257
258
|
|
|
258
259
|
.error-text {
|
|
260
|
+
position: absolute;
|
|
261
|
+
top: 100%;
|
|
262
|
+
left: 2px;
|
|
259
263
|
color: #DB2828;
|
|
260
264
|
font-size: 0.75rem;
|
|
261
|
-
margin-top:
|
|
262
|
-
margin-left: 2px;
|
|
265
|
+
margin-top: 2px;
|
|
263
266
|
font-weight: 500;
|
|
264
267
|
animation: fadeIn 0.2s ease-in;
|
|
265
268
|
}
|
|
@@ -268,4 +271,4 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
268
271
|
from { opacity: 0; transform: translateY(-4px); }
|
|
269
272
|
to { opacity: 1; transform: translateY(0); }
|
|
270
273
|
}
|
|
271
|
-
`),"undefined"==typeof customElements||customElements.get("kg-select")||customElements.define("kg-select",
|
|
274
|
+
`),"undefined"==typeof customElements||customElements.get("kg-select")||customElements.define("kg-select",a);export{a as kgselect};
|
|
@@ -35,6 +35,7 @@ var e,r=Object.defineProperty;import{LitElement as t,css as i,html as a}from"lit
|
|
|
35
35
|
flex-direction: column;
|
|
36
36
|
gap: 0.5rem;
|
|
37
37
|
width: 100%;
|
|
38
|
+
position: relative;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.slider-header {
|
|
@@ -165,10 +166,12 @@ var e,r=Object.defineProperty;import{LitElement as t,css as i,html as a}from"lit
|
|
|
165
166
|
}
|
|
166
167
|
|
|
167
168
|
.error-text {
|
|
169
|
+
position: absolute;
|
|
170
|
+
top: 100%;
|
|
171
|
+
left: 2px;
|
|
168
172
|
color: #DB2828;
|
|
169
173
|
font-size: 0.75rem;
|
|
170
|
-
margin-top:
|
|
171
|
-
margin-left: 2px;
|
|
174
|
+
margin-top: 2px;
|
|
172
175
|
font-weight: 500;
|
|
173
176
|
animation: fadeIn 0.2s ease-in;
|
|
174
177
|
}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class c extends(a(r)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},color:{type:String}}}constructor(){super(),this.checked=!1,this.color="primary",this.value="on"}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}_updateFormValue(){const e=this.checked?this.value||"on":null;this.internals.setFormValue(e,this.checked?"checked":"unchecked")}_toggle(){this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e=(r=this.color)&&"primary"!==r?r.startsWith("#")||r.startsWith("rgb")||r.startsWith("hsl")?r:{secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[r]||`var(--kg-${r}, ${r})`:"var(--kg-primary)",t=this.checked?`--switch-active-color: ${e};`:"";var r;return i`
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<div class="kg-switch-
|
|
2
|
+
<div style="position: relative; display: inline-block;">
|
|
3
|
+
<div
|
|
4
|
+
class="kg-switch-wrapper ${this.errorText?"error":""}"
|
|
5
|
+
style="${t}"
|
|
6
|
+
@click="${this._toggle}"
|
|
7
|
+
>
|
|
8
|
+
<div class="kg-switch-track">
|
|
9
|
+
<div class="kg-switch-thumb"></div>
|
|
10
|
+
</div>
|
|
11
|
+
${this.label?i`<span class="label">${this.label}</span>`:""}
|
|
9
12
|
</div>
|
|
10
|
-
${this.
|
|
13
|
+
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
11
14
|
</div>
|
|
12
|
-
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
13
15
|
`}}((e,r,s)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s})(c,"symbol"!=typeof(e="styles")?e+"":e,s`
|
|
14
16
|
:host {
|
|
15
17
|
display: inline-block;
|
|
@@ -66,12 +68,15 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
.error-text {
|
|
71
|
+
position: absolute;
|
|
72
|
+
top: 100%;
|
|
73
|
+
left: 2px;
|
|
69
74
|
color: #DB2828;
|
|
70
75
|
font-size: 0.75rem;
|
|
71
|
-
margin-top:
|
|
72
|
-
margin-left: 2px;
|
|
76
|
+
margin-top: 4px;
|
|
73
77
|
font-weight: 500;
|
|
74
78
|
animation: fadeIn 0.2s ease-in;
|
|
79
|
+
white-space: nowrap;
|
|
75
80
|
}
|
|
76
81
|
|
|
77
82
|
.error .kg-switch-track {
|
|
@@ -38,6 +38,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as a,html as i}from"lit
|
|
|
38
38
|
flex-direction: column;
|
|
39
39
|
gap: 0.5rem;
|
|
40
40
|
width: 100%;
|
|
41
|
+
position: relative;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
.textarea-label {
|
|
@@ -104,10 +105,12 @@ var e,t=Object.defineProperty;import{LitElement as r,css as a,html as i}from"lit
|
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
.error-text {
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 100%;
|
|
110
|
+
left: 2px;
|
|
107
111
|
color: #DB2828;
|
|
108
112
|
font-size: 0.75rem;
|
|
109
|
-
margin-top:
|
|
110
|
-
margin-left: 2px;
|
|
113
|
+
margin-top: 2px;
|
|
111
114
|
font-weight: 500;
|
|
112
115
|
animation: fadeIn 0.2s ease-in;
|
|
113
116
|
}
|
package/dist/react/KgDataGrid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{o as
|
|
1
|
+
import e,{useState as t,useRef as r,useMemo as n,useEffect as a}from"react";import{createPortal as o}from"react-dom";import{o as c}from"../chunks/create-component-jQ1kjF1Z.js";import{kgdatagrid as s}from"../components/kg-datagrid.js";"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);const l=c({tagName:"kg-datagrid",elementClass:s,react:e,events:{onSelectionChange:"selection-change",onPageChange:"page-change",onSort:"sort"}}),m=({columns:c,...s})=>{const[m,i]=t(/* @__PURE__ */new Map),d=r(null),u=r(/* @__PURE__ */new WeakMap),g=n(()=>c?c.map(t=>t.render?{...t,render:r=>{const n=t.render(r);if(!e.isValidElement(n))return n;let a=u.current.get(r);a||(a=/* @__PURE__ */new Map,u.current.set(r,a));let o=a.get(t.field);return o||(o=document.createElement("div"),o.className="kg-react-cell-portal",o.style.display="contents",o.dataset.reactCellId=Math.random().toString(36).substr(2,9),a.set(t.field,o)),o._reactContent=n,o}}:t):[],[c]);return a(()=>{const e=d.current;if(!e)return;const t=e.shadowRoot||e,r=()=>{const e=t.querySelectorAll(".kg-react-cell-portal"),r=/* @__PURE__ */new Map;e.forEach(e=>{e._reactContent&&r.set(e,e._reactContent)}),i(e=>{if(e.size!==r.size)return r;for(const[t,n]of r)if(e.get(t)!==n)return r;return e})},n=new MutationObserver(()=>{r()});return n.observe(t,{childList:!0,subtree:!0,attributes:!1,characterData:!1}),r(),()=>n.disconnect()},[g,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:d,columns:g,...s}),Array.from(m.entries()).map(([e,t])=>o(t,e,e.dataset.reactCellId)))};export{m as KgDataGrid};
|