@lazhus/kg-ui 0.9.10 → 0.9.13
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 +91 -7
- package/dist/components/kg-accordion-item.js +17 -4
- package/dist/components/kg-button.js +8 -3
- package/dist/components/kg-checkbox.js +17 -2
- package/dist/components/kg-input.js +1 -1
- package/dist/components/kg-radio-group.js +10 -6
- package/dist/components/kg-radio.js +19 -3
- package/dist/components/kg-switch.js +17 -3
- package/dist/components/kg-tabs.js +15 -4
- package/package.json +1 -1
- package/types/components/kg-button.d.ts +3 -0
- package/types/index.d.ts +1 -0
package/custom-elements.json
CHANGED
|
@@ -30,7 +30,16 @@
|
|
|
30
30
|
"kind": "field",
|
|
31
31
|
"name": "styles",
|
|
32
32
|
"static": true,
|
|
33
|
-
"default": "css` :host { display: block; border-bottom: 1px solid var(--kg-border); } :host(:last-child) { border-bottom: none; } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; cursor: pointer; background: var(--kg-surface); transition: all 0.2s ease; user-select: none; } .accordion-header:hover { background: var(--kg-bg-secondary, rgba(0,0,0,0.02)); color: var(--kg-primary); } .title { font-weight: 600; font-size: 1rem; } .chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--kg-text-muted); } :host([open]) .chevron { transform: rotate(180deg); color: var(--kg-primary); } :host([open]) .accordion-header { color: var(--kg-primary); } .content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; background: var(--kg-bg); } :host([open]) .content-wrapper { grid-template-rows: 1fr; } .content { min-height: 0; padding: 0 1.25rem; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } :host([open]) .content { padding: 1.25rem; opacity: 1; transform: translateY(0); } .disabled { opacity: 0.5; cursor: not-allowed !important; pointer-events: none; } `"
|
|
33
|
+
"default": "css` :host { display: block; border-bottom: 1px solid var(--kg-border); } :host(:last-child) { border-bottom: none; } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; cursor: pointer; background: var(--kg-surface); transition: all 0.2s ease; user-select: none; outline: none; } .accordion-header:focus-visible { background: var(--kg-bg-secondary, rgba(0,0,0,0.04)); box-shadow: inset 0 0 0 2px var(--kg-primary); } .accordion-header:hover { background: var(--kg-bg-secondary, rgba(0,0,0,0.02)); color: var(--kg-primary); } .title { font-weight: 600; font-size: 1rem; } .chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--kg-text-muted); } :host([open]) .chevron { transform: rotate(180deg); color: var(--kg-primary); } :host([open]) .accordion-header { color: var(--kg-primary); } .content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; background: var(--kg-bg); } :host([open]) .content-wrapper { grid-template-rows: 1fr; } .content { min-height: 0; padding: 0 1.25rem; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } :host([open]) .content { padding: 1.25rem; opacity: 1; transform: translateY(0); } .disabled { opacity: 0.5; cursor: not-allowed !important; pointer-events: none; } `"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"kind": "method",
|
|
37
|
+
"name": "_handleKeyDown",
|
|
38
|
+
"parameters": [
|
|
39
|
+
{
|
|
40
|
+
"name": "e"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
34
43
|
},
|
|
35
44
|
{
|
|
36
45
|
"kind": "method",
|
|
@@ -407,6 +416,15 @@
|
|
|
407
416
|
}
|
|
408
417
|
],
|
|
409
418
|
"members": [
|
|
419
|
+
{
|
|
420
|
+
"kind": "field",
|
|
421
|
+
"name": "shadowRootOptions",
|
|
422
|
+
"type": {
|
|
423
|
+
"text": "object"
|
|
424
|
+
},
|
|
425
|
+
"static": true,
|
|
426
|
+
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
|
|
427
|
+
},
|
|
410
428
|
{
|
|
411
429
|
"kind": "field",
|
|
412
430
|
"name": "properties",
|
|
@@ -415,7 +433,7 @@
|
|
|
415
433
|
"type": {
|
|
416
434
|
"text": "object"
|
|
417
435
|
},
|
|
418
|
-
"default": "{ color: { type: String }, // primary, secondary, tertiary, red, green, etc. size: { type: String }, // mini, tiny, small, medium, large, big, huge, massive fullwidth: { type: Boolean }, circular: { type: Boolean }, square: { type: Boolean }, loading: { type: Boolean }, disabled: { type: Boolean }, basic: { type: Boolean }, inverted: { type: Boolean }, active: { type: Boolean }, text: { type: Boolean }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true } }",
|
|
436
|
+
"default": "{ color: { type: String }, // primary, secondary, tertiary, red, green, etc. size: { type: String }, // mini, tiny, small, medium, large, big, huge, massive fullwidth: { type: Boolean }, circular: { type: Boolean }, square: { type: Boolean }, loading: { type: Boolean }, disabled: { type: Boolean }, basic: { type: Boolean }, inverted: { type: Boolean }, active: { type: Boolean }, text: { type: Boolean }, isDefault: { type: Boolean, attribute: 'is-default' }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true } }",
|
|
419
437
|
"inheritedFrom": {
|
|
420
438
|
"name": "FormAssociated",
|
|
421
439
|
"module": "src/mixins/FormAssociated.js"
|
|
@@ -425,7 +443,11 @@
|
|
|
425
443
|
"kind": "field",
|
|
426
444
|
"name": "styles",
|
|
427
445
|
"static": true,
|
|
428
|
-
"default": "css` :host { display: inline-block; vertical-align: middle; } :host([fullwidth]) { display: block; margin: 0 0 0.5em 0; } button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-height: var(--kg-form-height); height: var(--kg-form-height); outline: none; border: none; vertical-align: top; background: var(--kg-border); color: var(--kg-text); font-family: inherit; margin: 0; padding: 0 1.5em; line-height: 1; text-transform: none; text-shadow: none; font-weight: 700; font-style: normal; text-align: center; text-decoration: none; border-radius: 4px; box-shadow: 0 0 0 1px transparent inset; user-select: none; transition: all 0.2s ease; position: relative; gap: 0.5em; box-sizing: border-box; } /* Reset padding for icon-only buttons to ensure 1:1 aspect ratio */ button.icon-only { padding: 0 !important; width: var(--kg-form-height); height: var(--kg-form-height); gap: 0; flex-shrink: 0; } button.icon-only.circular { border-radius: 50%; } button:hover { filter: brightness(0.9); } button:active { filter: brightness(0.8); } /* Semantic Colors */ .primary { background-color: var(--kg-primary); color: #FFFFFF; } .secondary { background-color: var(--kg-secondary); color: #FFFFFF; } .tertiary { background-color: var(--kg-tertiary); color: #FFFFFF; } .error { background-color: #DB2828; color: #FFFFFF; } /* Custom Color Support */ .custom-color { background: var(--kg-custom-color) !important; color: #FFFFFF !important; border: none !important; } /* Variations */ .fullwidth { width: 100%; } .circular { border-radius: 10rem; } .square { padding: 0 !important; width: var(--kg-form-height); height: var(--kg-form-height); min-width: var(--kg-form-height); } .basic { background: transparent !important; box-shadow: 0 0 0 1px var(--kg-border) inset !important; color: var(--kg-text) !important; } .basic:hover { background: var(--kg-surface) !important; box-shadow: 0 0 0 1px var(--kg-text-muted) inset !important; } .basic.primary { color: var(--kg-primary) !important; box-shadow: 0 0 0 1px var(--kg-primary) inset !important; } .basic.secondary { color: var(--kg-secondary) !important; box-shadow: 0 0 0 1px var(--kg-secondary) inset !important; } .basic.tertiary { color: var(--kg-tertiary) !important; box-shadow: 0 0 0 1px var(--kg-tertiary) inset !important; } .basic.error { color: #DB2828 !important; box-shadow: 0 0 0 1px #DB2828 inset !important; } .text { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--kg-text) !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .text:hover { background: var(--kg-surface) !important; color: var(--kg-primary) !important; } .text.primary { color: var(--kg-primary) !important; } .text.secondary { color: var(--kg-secondary) !important; } /* Sizes */ .mini { font-size: 0.7rem; padding: 0.4em 0.8em; } .tiny { font-size: 0.8rem; padding: 0.5em 1em; } .small { font-size: 0.9rem; padding: 0.6em 1.25em; } .medium { font-size: 1rem; padding: 0.78em 1.5em; } .large { font-size: 1.1rem; padding: 0.85em 1.75em; } .big { font-size: 1.25rem; padding: 0.9em 2em; } .huge { font-size: 1.4rem; padding: 1em 2.25em; } .massive { font-size: 1.6rem; padding: 1.1em 2.5em; } /* Loading */ .loading { cursor: default !important; pointer-events: none !important; color: transparent !important; } .loading::after { position: absolute; content: ''; top: 50%; left: 50%; width: 1.15em; height: 1.15em; border-radius: 50%; border: 0.2em solid rgba(0, 0, 0, 0.1); border-top-color: var(--kg-text); transform: translate(-50%, -50%); animation: button-spin 0.6s linear infinite; } /* Spinner colors for semantic/colored buttons */ .primary.loading::after, .secondary.loading::after, .tertiary.loading::after, .error.loading::after, .custom-color.loading::after { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } /* Basic buttons should use their respective semantic colors for the spinner */ .basic.primary.loading::after { border-top-color: var(--kg-primary); } .basic.secondary.loading::after { border-top-color: var(--kg-secondary); } .basic.tertiary.loading::after { border-top-color: var(--kg-tertiary); } .basic.error.loading::after { border-top-color: #DB2828; } @keyframes button-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Disabled */ button:disabled { cursor: default !important; opacity: 0.45 !important; box-shadow: none !important; pointer-events: none !important; } `"
|
|
446
|
+
"default": "css` :host { display: inline-block; vertical-align: middle; } :host([fullwidth]) { display: block; margin: 0 0 0.5em 0; } button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-height: var(--kg-form-height); height: var(--kg-form-height); outline: none; border: none; vertical-align: top; background: var(--kg-border); color: var(--kg-text); font-family: inherit; margin: 0; padding: 0 1.5em; line-height: 1; text-transform: none; text-shadow: none; font-weight: 700; font-style: normal; text-align: center; text-decoration: none; border-radius: 4px; box-shadow: 0 0 0 1px transparent inset; user-select: none; transition: all 0.2s ease; position: relative; gap: 0.5em; box-sizing: border-box; } /* Reset padding for icon-only buttons to ensure 1:1 aspect ratio */ button.icon-only { padding: 0 !important; width: var(--kg-form-height); height: var(--kg-form-height); gap: 0; flex-shrink: 0; } button.icon-only.circular { border-radius: 50%; } button:hover { filter: brightness(0.9); } button:focus-visible { outline: 2px solid var(--kg-primary); outline-offset: 2px; } button:active { filter: brightness(0.8); } /* Semantic Colors */ .primary { background-color: var(--kg-primary); color: #FFFFFF; } .secondary { background-color: var(--kg-secondary); color: #FFFFFF; } .tertiary { background-color: var(--kg-tertiary); color: #FFFFFF; } .error { background-color: #DB2828; color: #FFFFFF; } /* Custom Color Support */ .custom-color { background: var(--kg-custom-color) !important; color: #FFFFFF !important; border: none !important; } /* Variations */ .fullwidth { width: 100%; } .circular { border-radius: 10rem; } .square { padding: 0 !important; width: var(--kg-form-height); height: var(--kg-form-height); min-width: var(--kg-form-height); } .basic { background: transparent !important; box-shadow: 0 0 0 1px var(--kg-border) inset !important; color: var(--kg-text) !important; } .basic:hover { background: var(--kg-surface) !important; box-shadow: 0 0 0 1px var(--kg-text-muted) inset !important; } .basic.primary { color: var(--kg-primary) !important; box-shadow: 0 0 0 1px var(--kg-primary) inset !important; } .basic.secondary { color: var(--kg-secondary) !important; box-shadow: 0 0 0 1px var(--kg-secondary) inset !important; } .basic.tertiary { color: var(--kg-tertiary) !important; box-shadow: 0 0 0 1px var(--kg-tertiary) inset !important; } .basic.error { color: #DB2828 !important; box-shadow: 0 0 0 1px #DB2828 inset !important; } .text { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--kg-text) !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .text:hover { background: var(--kg-surface) !important; color: var(--kg-primary) !important; } .text.primary { color: var(--kg-primary) !important; } .text.secondary { color: var(--kg-secondary) !important; } /* Sizes */ .mini { font-size: 0.7rem; padding: 0.4em 0.8em; } .tiny { font-size: 0.8rem; padding: 0.5em 1em; } .small { font-size: 0.9rem; padding: 0.6em 1.25em; } .medium { font-size: 1rem; padding: 0.78em 1.5em; } .large { font-size: 1.1rem; padding: 0.85em 1.75em; } .big { font-size: 1.25rem; padding: 0.9em 2em; } .huge { font-size: 1.4rem; padding: 1em 2.25em; } .massive { font-size: 1.6rem; padding: 1.1em 2.5em; } /* Loading */ .loading { cursor: default !important; pointer-events: none !important; color: transparent !important; } .loading::after { position: absolute; content: ''; top: 50%; left: 50%; width: 1.15em; height: 1.15em; border-radius: 50%; border: 0.2em solid rgba(0, 0, 0, 0.1); border-top-color: var(--kg-text); transform: translate(-50%, -50%); animation: button-spin 0.6s linear infinite; } /* Spinner colors for semantic/colored buttons */ .primary.loading::after, .secondary.loading::after, .tertiary.loading::after, .error.loading::after, .custom-color.loading::after { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } /* Basic buttons should use their respective semantic colors for the spinner */ .basic.primary.loading::after { border-top-color: var(--kg-primary); } .basic.secondary.loading::after { border-top-color: var(--kg-secondary); } .basic.tertiary.loading::after { border-top-color: var(--kg-tertiary); } .basic.error.loading::after { border-top-color: #DB2828; } @keyframes button-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Disabled */ button:disabled { cursor: default !important; opacity: 0.45 !important; box-shadow: none !important; pointer-events: none !important; } `"
|
|
447
|
+
},
|
|
448
|
+
{
|
|
449
|
+
"kind": "field",
|
|
450
|
+
"name": "_handleGlobalEnter"
|
|
429
451
|
},
|
|
430
452
|
{
|
|
431
453
|
"kind": "method",
|
|
@@ -501,6 +523,14 @@
|
|
|
501
523
|
"module": "src/mixins/FormAssociated.js"
|
|
502
524
|
}
|
|
503
525
|
},
|
|
526
|
+
{
|
|
527
|
+
"kind": "field",
|
|
528
|
+
"name": "isDefault",
|
|
529
|
+
"type": {
|
|
530
|
+
"text": "boolean"
|
|
531
|
+
},
|
|
532
|
+
"default": "false"
|
|
533
|
+
},
|
|
504
534
|
{
|
|
505
535
|
"kind": "field",
|
|
506
536
|
"name": "formAssociated",
|
|
@@ -782,6 +812,15 @@
|
|
|
782
812
|
"description": "",
|
|
783
813
|
"name": "kgcheckbox",
|
|
784
814
|
"members": [
|
|
815
|
+
{
|
|
816
|
+
"kind": "field",
|
|
817
|
+
"name": "shadowRootOptions",
|
|
818
|
+
"type": {
|
|
819
|
+
"text": "object"
|
|
820
|
+
},
|
|
821
|
+
"static": true,
|
|
822
|
+
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
|
|
823
|
+
},
|
|
785
824
|
{
|
|
786
825
|
"kind": "field",
|
|
787
826
|
"name": "properties",
|
|
@@ -796,7 +835,7 @@
|
|
|
796
835
|
"kind": "field",
|
|
797
836
|
"name": "styles",
|
|
798
837
|
"static": true,
|
|
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); } } `"
|
|
838
|
+
"default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-checkbox-wrapper:focus-within .checkbox-box { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } .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
839
|
},
|
|
801
840
|
{
|
|
802
841
|
"kind": "method",
|
|
@@ -3894,6 +3933,15 @@
|
|
|
3894
3933
|
"module": "src/mixins/FormAssociated.js"
|
|
3895
3934
|
}
|
|
3896
3935
|
},
|
|
3936
|
+
{
|
|
3937
|
+
"kind": "method",
|
|
3938
|
+
"name": "_handleKeyDown",
|
|
3939
|
+
"parameters": [
|
|
3940
|
+
{
|
|
3941
|
+
"name": "e"
|
|
3942
|
+
}
|
|
3943
|
+
]
|
|
3944
|
+
},
|
|
3897
3945
|
{
|
|
3898
3946
|
"kind": "method",
|
|
3899
3947
|
"name": "render"
|
|
@@ -4100,6 +4148,15 @@
|
|
|
4100
4148
|
"description": "",
|
|
4101
4149
|
"name": "kgradio",
|
|
4102
4150
|
"members": [
|
|
4151
|
+
{
|
|
4152
|
+
"kind": "field",
|
|
4153
|
+
"name": "shadowRootOptions",
|
|
4154
|
+
"type": {
|
|
4155
|
+
"text": "object"
|
|
4156
|
+
},
|
|
4157
|
+
"static": true,
|
|
4158
|
+
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
|
|
4159
|
+
},
|
|
4103
4160
|
{
|
|
4104
4161
|
"kind": "field",
|
|
4105
4162
|
"name": "properties",
|
|
@@ -4118,7 +4175,7 @@
|
|
|
4118
4175
|
"kind": "field",
|
|
4119
4176
|
"name": "styles",
|
|
4120
4177
|
"static": true,
|
|
4121
|
-
"default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-radio-container { display: flex; align-items: center; gap: 10px; position: relative; } .radio-circle { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 50%; 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-radio-container:hover .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .kg-radio-container.checked .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .radio-circle::after { content: ''; width: 10px; height: 10px; background: var(--radio-active-color, var(--kg-primary)); border-radius: 50%; transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .checked .radio-circle::after { transform: scale(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } .disabled { opacity: 0.5; cursor: not-allowed; } .disabled .radio-circle { background: var(--kg-surface); } `"
|
|
4178
|
+
"default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-radio-container:focus-within .radio-circle { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } .kg-radio-container { display: flex; align-items: center; gap: 10px; position: relative; } .radio-circle { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 50%; 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-radio-container:hover .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .kg-radio-container.checked .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .radio-circle::after { content: ''; width: 10px; height: 10px; background: var(--radio-active-color, var(--kg-primary)); border-radius: 50%; transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .checked .radio-circle::after { transform: scale(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } .disabled { opacity: 0.5; cursor: not-allowed; } .disabled .radio-circle { background: var(--kg-surface); } `"
|
|
4122
4179
|
},
|
|
4123
4180
|
{
|
|
4124
4181
|
"kind": "method",
|
|
@@ -5345,6 +5402,15 @@
|
|
|
5345
5402
|
"description": "",
|
|
5346
5403
|
"name": "kgswitch",
|
|
5347
5404
|
"members": [
|
|
5405
|
+
{
|
|
5406
|
+
"kind": "field",
|
|
5407
|
+
"name": "shadowRootOptions",
|
|
5408
|
+
"type": {
|
|
5409
|
+
"text": "object"
|
|
5410
|
+
},
|
|
5411
|
+
"static": true,
|
|
5412
|
+
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
|
|
5413
|
+
},
|
|
5348
5414
|
{
|
|
5349
5415
|
"kind": "field",
|
|
5350
5416
|
"name": "properties",
|
|
@@ -5359,7 +5425,7 @@
|
|
|
5359
5425
|
"kind": "field",
|
|
5360
5426
|
"name": "styles",
|
|
5361
5427
|
"static": true,
|
|
5362
|
-
"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: background-color 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); transform: translateX(0); will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, background-color 0.3s ease; } /* Micro-animation: stretch effect on click */ .kg-switch-wrapper:active .kg-switch-thumb { width: 26px; } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb { transform: translateX(14px); /* Adjust position when stretched */ } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); transition: color 0.3s ease; } .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); } } `"
|
|
5428
|
+
"default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-switch-wrapper:focus-within .kg-switch-track { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } :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: background-color 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); transform: translateX(0); will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, background-color 0.3s ease; } /* Micro-animation: stretch effect on click */ .kg-switch-wrapper:active .kg-switch-thumb { width: 26px; } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb { transform: translateX(14px); /* Adjust position when stretched */ } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); transition: color 0.3s ease; } .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); } } `"
|
|
5363
5429
|
},
|
|
5364
5430
|
{
|
|
5365
5431
|
"kind": "method",
|
|
@@ -5709,7 +5775,7 @@
|
|
|
5709
5775
|
"kind": "field",
|
|
5710
5776
|
"name": "styles",
|
|
5711
5777
|
"static": true,
|
|
5712
|
-
"default": "css` :host { display: flex; flex-direction: column; width: 100%; font-family: inherit; } :host([vertical]) { flex-direction: row; } .tabs-header { display: flex; border-bottom: 2px solid var(--kg-border); gap: 0.5rem; padding: 0 0.5rem; position: relative; z-index: 1; } :host([vertical]) .tabs-header { flex-direction: column; border-bottom: none; border-right: 2px solid var(--kg-border); padding: 0.5rem 0 0.5rem 0.5rem; gap: 0.25rem; min-width: 180px; } .tab-trigger { padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--kg-text-muted); cursor: pointer; position: relative; white-space: nowrap; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border: none; outline: none; border-radius: 8px 8px 0 0; } :host([full-width]) .tab-trigger { flex: 1; min-width: 0; text-align: center; } :host([vertical]) .tab-trigger { padding: 0.75rem 1rem; text-align: left; border-radius: 8px 0 0 8px; margin-bottom: 0; margin-right: 0px; } .tab-trigger:hover { color: var(--kg-primary); background: rgba(65, 171, 52, 0.05); } .tab-trigger.active { color: var(--kg-primary); background: rgba(65, 171, 52, 0.08); z-index: 2; } /* Standard Underline */ .tab-trigger::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--kg-primary); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } :host([vertical]) .tab-trigger::after { bottom: 0; left: auto; right: -2px; width: 2px; height: 100%; transform: scaleY(0); border-radius: 2px 0 0 2px; } .tab-trigger.active::after { transform: scaleX(1); } :host([vertical]) .tab-trigger.active::after { transform: scaleY(1); } .tabs-content { padding: 1.5rem 0; flex: 1; } :host([vertical]) .tabs-content { padding: 0 1.5rem; } `"
|
|
5778
|
+
"default": "css` :host { display: flex; flex-direction: column; width: 100%; font-family: inherit; } :host([vertical]) { flex-direction: row; } .tabs-header { display: flex; border-bottom: 2px solid var(--kg-border); gap: 0.5rem; padding: 0 0.5rem; position: relative; z-index: 1; } :host([vertical]) .tabs-header { flex-direction: column; border-bottom: none; border-right: 2px solid var(--kg-border); padding: 0.5rem 0 0.5rem 0.5rem; gap: 0.25rem; min-width: 180px; } .tab-trigger { padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--kg-text-muted); cursor: pointer; position: relative; white-space: nowrap; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border: none; outline: none; border-radius: 8px 8px 0 0; } .tab-trigger:focus-visible { background: rgba(65, 171, 52, 0.1); box-shadow: inset 0 0 0 2px var(--kg-primary); } :host([full-width]) .tab-trigger { flex: 1; min-width: 0; text-align: center; } :host([vertical]) .tab-trigger { padding: 0.75rem 1rem; text-align: left; border-radius: 8px 0 0 8px; margin-bottom: 0; margin-right: 0px; } .tab-trigger:hover { color: var(--kg-primary); background: rgba(65, 171, 52, 0.05); } .tab-trigger.active { color: var(--kg-primary); background: rgba(65, 171, 52, 0.08); z-index: 2; } /* Standard Underline */ .tab-trigger::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--kg-primary); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } :host([vertical]) .tab-trigger::after { bottom: 0; left: auto; right: -2px; width: 2px; height: 100%; transform: scaleY(0); border-radius: 2px 0 0 2px; } .tab-trigger.active::after { transform: scaleX(1); } :host([vertical]) .tab-trigger.active::after { transform: scaleY(1); } .tabs-content { padding: 1.5rem 0; flex: 1; } :host([vertical]) .tabs-content { padding: 0 1.5rem; } `"
|
|
5713
5779
|
},
|
|
5714
5780
|
{
|
|
5715
5781
|
"kind": "method",
|
|
@@ -5737,6 +5803,24 @@
|
|
|
5737
5803
|
"kind": "method",
|
|
5738
5804
|
"name": "_updatePanels"
|
|
5739
5805
|
},
|
|
5806
|
+
{
|
|
5807
|
+
"kind": "method",
|
|
5808
|
+
"name": "_handleKeyDown",
|
|
5809
|
+
"parameters": [
|
|
5810
|
+
{
|
|
5811
|
+
"name": "e"
|
|
5812
|
+
},
|
|
5813
|
+
{
|
|
5814
|
+
"name": "value"
|
|
5815
|
+
},
|
|
5816
|
+
{
|
|
5817
|
+
"name": "index"
|
|
5818
|
+
},
|
|
5819
|
+
{
|
|
5820
|
+
"name": "panels"
|
|
5821
|
+
}
|
|
5822
|
+
]
|
|
5823
|
+
},
|
|
5740
5824
|
{
|
|
5741
5825
|
"kind": "method",
|
|
5742
5826
|
"name": "render"
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r)(t,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as
|
|
1
|
+
var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r)(t,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as n}from"lit";import"lit/directives/class-map.js";class i extends o{constructor(){super(),this.open=!1,this.disabled=!1}_handleKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this._toggle())}_toggle(){this.disabled||this.dispatchEvent(new CustomEvent("kg-accordion-toggle",{detail:{open:!this.open},bubbles:!0,composed:!0}))}render(){return n`
|
|
2
2
|
<div class="accordion-item ${this.disabled?"disabled":""}">
|
|
3
|
-
<div
|
|
3
|
+
<div
|
|
4
|
+
class="accordion-header"
|
|
5
|
+
@click="${this._toggle}"
|
|
6
|
+
@keydown="${this._handleKeyDown}"
|
|
7
|
+
tabindex="${this.disabled?"-1":"0"}"
|
|
8
|
+
role="button"
|
|
9
|
+
aria-expanded="${this.open}"
|
|
10
|
+
>
|
|
4
11
|
<span class="title">${this.title}</span>
|
|
5
12
|
<svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
6
13
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
@@ -12,7 +19,7 @@ var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,con
|
|
|
12
19
|
</div>
|
|
13
20
|
</div>
|
|
14
21
|
</div>
|
|
15
|
-
`}}t(
|
|
22
|
+
`}}t(i,"properties",{title:{type:String},open:{type:Boolean,reflect:!0},disabled:{type:Boolean}}),t(i,"styles",r`
|
|
16
23
|
:host {
|
|
17
24
|
display: block;
|
|
18
25
|
border-bottom: 1px solid var(--kg-border);
|
|
@@ -31,6 +38,12 @@ var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,con
|
|
|
31
38
|
background: var(--kg-surface);
|
|
32
39
|
transition: all 0.2s ease;
|
|
33
40
|
user-select: none;
|
|
41
|
+
outline: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.accordion-header:focus-visible {
|
|
45
|
+
background: var(--kg-bg-secondary, rgba(0,0,0,0.04));
|
|
46
|
+
box-shadow: inset 0 0 0 2px var(--kg-primary);
|
|
34
47
|
}
|
|
35
48
|
|
|
36
49
|
.accordion-header:hover {
|
|
@@ -88,4 +101,4 @@ var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,con
|
|
|
88
101
|
cursor: not-allowed !important;
|
|
89
102
|
pointer-events: none;
|
|
90
103
|
}
|
|
91
|
-
`),"undefined"==typeof customElements||customElements.get("kg-accordion-item")||customElements.define("kg-accordion-item",
|
|
104
|
+
`),"undefined"==typeof customElements||customElements.get("kg-accordion-item")||customElements.define("kg-accordion-item",i);export{i as kgaccordionitem};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var t=Object.defineProperty,
|
|
1
|
+
var t=Object.defineProperty,e=(e,o,r)=>((e,o,r)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r)(e,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as i}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(n(o)){constructor(){super(),e(this,"_handleGlobalEnter",t=>{if("Enter"===t.key&&!this.disabled&&!this.loading){if("TEXTAREA"===document.activeElement.tagName)return;const e=this.getBoundingClientRect();if(e.width>0&&e.height>0){const e=document.activeElement.tagName;if("BUTTON"===e||"A"===e)return;this._handleClick(t);const o=this.shadowRoot.querySelector("button");o&&o.click()}}}),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1,this.type="button",this.isDefault=!1}connectedCallback(){super.connectedCallback(),this.isDefault&&window.addEventListener("keydown",this._handleGlobalEnter)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._handleGlobalEnter)}_handleSlotChange(t){const e=t.target,o=e.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;e.name?"left"===e.name?this.hasLeft=o:"right"===e.name&&(this.hasRight=o):this.hasText=o}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),e=this.color&&!t,o=!this.hasText&&(this.hasLeft||this.hasRight),r={[this.color]:t,"custom-color":e,[this.size]:!!this.size,fullwidth:this.fullwidth,circular:this.circular,square:this.square,loading:this.loading,basic:this.basic,text:this.text,inverted:this.inverted,disabled:this.disabled,"icon-only":o},n=e?`border: none; --kg-custom-color: ${this.color};`:"";return i`
|
|
2
2
|
<button
|
|
3
|
-
class="${
|
|
3
|
+
class="${a(r)}"
|
|
4
4
|
style="${n}"
|
|
5
5
|
?disabled=${this.disabled}
|
|
6
6
|
@click=${this._handleClick}
|
|
@@ -13,7 +13,7 @@ var t=Object.defineProperty,o=(o,r,e)=>((o,r,e)=>r in o?t(o,r,{enumerable:!0,con
|
|
|
13
13
|
|
|
14
14
|
<slot name="right" @slotchange=${this._handleSlotChange}></slot>
|
|
15
15
|
</button>
|
|
16
|
-
`}_handleClick(t){if(this.loading||this.disabled)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.form?this.form.requestSubmit():"reset"===this.type&&this.form&&this.form.reset()}}o(s,"properties",{color:{type:String},size:{type:String},fullwidth:{type:Boolean},circular:{type:Boolean},square:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},basic:{type:Boolean},inverted:{type:Boolean},active:{type:Boolean},text:{type:Boolean},hasText:{type:Boolean,state:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0}}),
|
|
16
|
+
`}_handleClick(t){if(this.loading||this.disabled)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.form?this.form.requestSubmit():"reset"===this.type&&this.form&&this.form.reset()}}e(s,"shadowRootOptions",{...o.shadowRootOptions,delegatesFocus:!0}),e(s,"properties",{color:{type:String},size:{type:String},fullwidth:{type:Boolean},circular:{type:Boolean},square:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},basic:{type:Boolean},inverted:{type:Boolean},active:{type:Boolean},text:{type:Boolean},isDefault:{type:Boolean,attribute:"is-default"},hasText:{type:Boolean,state:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0}}),e(s,"styles",r`
|
|
17
17
|
:host {
|
|
18
18
|
display: inline-block;
|
|
19
19
|
vertical-align: middle;
|
|
@@ -72,6 +72,11 @@ var t=Object.defineProperty,o=(o,r,e)=>((o,r,e)=>r in o?t(o,r,{enumerable:!0,con
|
|
|
72
72
|
filter: brightness(0.9);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
+
button:focus-visible {
|
|
76
|
+
outline: 2px solid var(--kg-primary);
|
|
77
|
+
outline-offset: 2px;
|
|
78
|
+
}
|
|
79
|
+
|
|
75
80
|
button:active {
|
|
76
81
|
filter: brightness(0.8);
|
|
77
82
|
}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
var e
|
|
1
|
+
var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o)(t,"symbol"!=typeof r?r+"":r,o);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
2
|
<div class="kg-checkbox-wrapper">
|
|
3
3
|
<div
|
|
4
4
|
class="${c(t)}"
|
|
5
5
|
style="${e}"
|
|
6
6
|
@click="${this.toggle}"
|
|
7
7
|
>
|
|
8
|
+
<input
|
|
9
|
+
type="checkbox"
|
|
10
|
+
.checked="${this.checked}"
|
|
11
|
+
?disabled="${this.disabled}"
|
|
12
|
+
?required="${this.required}"
|
|
13
|
+
tabindex="0"
|
|
14
|
+
@change="${e=>{this.checked=e.target.checked,this.toggle()}}"
|
|
15
|
+
style="position: absolute; opacity: 0; width: 0; height: 0;"
|
|
16
|
+
/>
|
|
8
17
|
<div class="checkbox-box">
|
|
9
18
|
${this.indeterminate?"":i`
|
|
10
19
|
<svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -16,12 +25,18 @@ var e,t=Object.defineProperty;import{LitElement as r,css as o,html as i}from"lit
|
|
|
16
25
|
</div>
|
|
17
26
|
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
18
27
|
</div>
|
|
19
|
-
`}}(
|
|
28
|
+
`}}t(s,"shadowRootOptions",{...r.shadowRootOptions,delegatesFocus:!0}),t(s,"styles",o`
|
|
20
29
|
:host {
|
|
21
30
|
display: inline-block;
|
|
22
31
|
cursor: pointer;
|
|
23
32
|
user-select: none;
|
|
24
33
|
font-family: inherit;
|
|
34
|
+
outline: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.kg-checkbox-wrapper:focus-within .checkbox-box {
|
|
38
|
+
box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2);
|
|
39
|
+
border-color: var(--kg-primary);
|
|
25
40
|
}
|
|
26
41
|
|
|
27
42
|
.kg-checkbox-wrapper {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as i,css as r,html as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(i)){static get properties(){return{...super.properties,label:{type:String},placeholder:{type:String},loading:{type:Boolean},error:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},inverted:{type:Boolean,reflect:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0},_showPassword:{type:Boolean,state:!0},positive:{type:Boolean,reflect:!0},integer:{type:Boolean,reflect:!0}}}constructor(){super(),this.placeholder="",this.hasLeft=!1,this.hasRight=!1,this._showPassword=!1}_handleKeyDown(e){"number"===this.type&&("e"!==e.key&&"E"!==e.key&&(!this.positive||"-"!==e.key&&"_"!==e.key)&&(!this.integer||"."!==e.key&&","!==e.key)||e.preventDefault())}_handleInput(e){let t=e.target.value;"number"===this.type&&(this.integer?this.positive?t=t.replace(/\D/g,""):(t=t.replace(/[^\d-]/g,""),t.indexOf("-")>0&&(t=t.slice(0,t.indexOf("-"))+t.slice(t.indexOf("-")+1))):this.positive&&(t=t.replace(/-/g,"")),e.target.value!==t&&(e.target.value=t)),this.value=t,this.dispatchEvent(new CustomEvent("kg-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleSlotChange(e){const t=e.target;if(!t)return;const i=t.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&e.textContent.trim().length>0);"left"===t.name&&(this.hasLeft=i),"right"===t.name&&(this.hasRight=i)}_togglePassword(){this._showPassword=!this._showPassword}render(){const e={"ui-input":!0,[this.size]:!!this.size,disabled:this.disabled,loading:this.loading,error:this.error||!!this.errorText,fullwidth:this.fullwidth,inverted:this.inverted},t="number"===this.type,i="password"===this.type?this._showPassword?"text":"password":t?"text":this.type,r="password"===this.type?this.hasRight?"5rem":"3rem":this.hasRight?"3rem":"1rem",a=t?this.integer?"numeric":"decimal":"";return o`
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as i,css as r,html as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(i)){static get properties(){return{...super.properties,label:{type:String},placeholder:{type:String},loading:{type:Boolean},error:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},inverted:{type:Boolean,reflect:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0},_showPassword:{type:Boolean,state:!0},positive:{type:Boolean,reflect:!0},integer:{type:Boolean,reflect:!0}}}constructor(){super(),this.placeholder="",this.hasLeft=!1,this.hasRight=!1,this._showPassword=!1}_handleKeyDown(e){"Enter"===e.key&&this.form?this.form.requestSubmit():"number"===this.type&&("e"!==e.key&&"E"!==e.key&&(!this.positive||"-"!==e.key&&"_"!==e.key)&&(!this.integer||"."!==e.key&&","!==e.key)||e.preventDefault())}_handleInput(e){let t=e.target.value;"number"===this.type&&(this.integer?this.positive?t=t.replace(/\D/g,""):(t=t.replace(/[^\d-]/g,""),t.indexOf("-")>0&&(t=t.slice(0,t.indexOf("-"))+t.slice(t.indexOf("-")+1))):this.positive&&(t=t.replace(/-/g,"")),e.target.value!==t&&(e.target.value=t)),this.value=t,this.dispatchEvent(new CustomEvent("kg-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleSlotChange(e){const t=e.target;if(!t)return;const i=t.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&e.textContent.trim().length>0);"left"===t.name&&(this.hasLeft=i),"right"===t.name&&(this.hasRight=i)}_togglePassword(){this._showPassword=!this._showPassword}render(){const e={"ui-input":!0,[this.size]:!!this.size,disabled:this.disabled,loading:this.loading,error:this.error||!!this.errorText,fullwidth:this.fullwidth,inverted:this.inverted},t="number"===this.type,i="password"===this.type?this._showPassword?"text":"password":t?"text":this.type,r="password"===this.type?this.hasRight?"5rem":"3rem":this.hasRight?"3rem":"1rem",a=t?this.integer?"numeric":"decimal":"";return o`
|
|
2
2
|
<div class="kg-input-container" style="--loading-offset: ${r}">
|
|
3
3
|
${this.label?o`<label class="input-label">${this.label}</label>`:""}
|
|
4
4
|
<div class="${n(e)}">
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as r,css as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as r,css as o,html as i}from"lit";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class l 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()}_handleKeyDown(e){const t=Array.from(this.querySelectorAll("kg-radio:not([disabled])"));if(0===t.length)return;let r=t.findIndex(e=>e.checked);-1===r&&(r=0);let o=-1;"ArrowDown"===e.key||"ArrowRight"===e.key?o=(r+1)%t.length:"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(o=(r-1+t.length)%t.length),-1!==o&&(e.preventDefault(),t[o].focus(),setTimeout(()=>{t[o]._handleClick()},0))}render(){return i`
|
|
2
2
|
<div class="kg-radio-group">
|
|
3
|
-
${this.label?
|
|
4
|
-
<div
|
|
3
|
+
${this.label?i`<span class="group-label">${this.label}</span>`:""}
|
|
4
|
+
<div
|
|
5
|
+
class="kg-radio-group-container ${this.direction}"
|
|
6
|
+
role="radiogroup"
|
|
7
|
+
@keydown="${this._handleKeyDown}"
|
|
8
|
+
>
|
|
5
9
|
<slot></slot>
|
|
6
10
|
</div>
|
|
7
|
-
${this.errorText?
|
|
11
|
+
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
8
12
|
</div>
|
|
9
|
-
`}}((e,r,
|
|
13
|
+
`}}((e,r,o)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o})(l,"symbol"!=typeof(e="styles")?e+"":e,o`
|
|
10
14
|
:host {
|
|
11
15
|
display: block;
|
|
12
16
|
position: relative;
|
|
@@ -52,4 +56,4 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as o}from"lit
|
|
|
52
56
|
from { opacity: 0; transform: translateY(-4px); }
|
|
53
57
|
to { opacity: 1; transform: translateY(0); }
|
|
54
58
|
}
|
|
55
|
-
`),"undefined"==typeof customElements||customElements.get("kg-radio-group")||customElements.define("kg-radio-group",
|
|
59
|
+
`),"undefined"==typeof customElements||customElements.get("kg-radio-group")||customElements.define("kg-radio-group",l);export{l as kgradiogroup};
|
|
@@ -1,18 +1,34 @@
|
|
|
1
|
-
var e=Object.defineProperty,r=(r,t,i)=>((r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i)(r,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as a}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{F as
|
|
1
|
+
var e=Object.defineProperty,r=(r,t,i)=>((r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i)(r,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as a}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{F as o}from"../chunks/FormAssociated-Cx5D8YQA.js";const s=class e extends(o(t)){constructor(){super(),this.checked=!1}_handleClick(){this.disabled||this.checked||(this.checked=!0,this._uncheckOthers(),this.dispatchEvent(new CustomEvent("kg-radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{checked:!0},bubbles:!0,composed:!0})))}_uncheckOthers(){const r=this.name;r&&(this.internals.form||this.getRootNode()).querySelectorAll(`kg-radio[name="${r}"]`).forEach(r=>{r!==this&&r instanceof e&&(r.checked=!1)})}_updateFormValue(){const e=this.checked?this.value:null;this.internals.setFormValue(e,this.checked?"checked":"unchecked")}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}render(){const e={"kg-radio-container":!0,checked:this.checked,disabled:this.disabled},r=this.color?`--radio-active-color: ${t=this.color,t?t.startsWith("#")||t.startsWith("rgb")||t.startsWith("hsl")?t:{primary:"var(--kg-primary)",secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[t]||`var(--kg-${t}, ${t})`:"var(--kg-primary)"}`:"";var t;return a`
|
|
2
2
|
<div
|
|
3
3
|
class="${c(e)}"
|
|
4
4
|
style="${r}"
|
|
5
5
|
@click="${this._handleClick}"
|
|
6
6
|
>
|
|
7
|
+
<input
|
|
8
|
+
type="radio"
|
|
9
|
+
name="${this.name}"
|
|
10
|
+
value="${this.value}"
|
|
11
|
+
.checked="${this.checked}"
|
|
12
|
+
?disabled="${this.disabled}"
|
|
13
|
+
tabindex="${this.checked?"0":"-1"}"
|
|
14
|
+
@change="${this._handleClick}"
|
|
15
|
+
style="position: absolute; opacity: 0; width: 0; height: 0;"
|
|
16
|
+
/>
|
|
7
17
|
<div class="radio-circle"></div>
|
|
8
18
|
${this.label?a`<span class="label-text">${this.label}</span>`:""}
|
|
9
19
|
</div>
|
|
10
|
-
`}};r(
|
|
20
|
+
`}};r(s,"shadowRootOptions",{...t.shadowRootOptions,delegatesFocus:!0}),r(s,"properties",{checked:{type:Boolean,reflect:!0},label:{type:String},color:{type:String}}),r(s,"styles",i`
|
|
11
21
|
:host {
|
|
12
22
|
display: inline-block;
|
|
13
23
|
cursor: pointer;
|
|
14
24
|
user-select: none;
|
|
15
25
|
font-family: inherit;
|
|
26
|
+
outline: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.kg-radio-container:focus-within .radio-circle {
|
|
30
|
+
box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2);
|
|
31
|
+
border-color: var(--kg-primary);
|
|
16
32
|
}
|
|
17
33
|
|
|
18
34
|
.kg-radio-container {
|
|
@@ -72,4 +88,4 @@ var e=Object.defineProperty,r=(r,t,i)=>((r,t,i)=>t in r?e(r,t,{enumerable:!0,con
|
|
|
72
88
|
.disabled .radio-circle {
|
|
73
89
|
background: var(--kg-surface);
|
|
74
90
|
}
|
|
75
|
-
`);let
|
|
91
|
+
`);let d=s;"undefined"==typeof customElements||customElements.get("kg-radio")||customElements.define("kg-radio",d);export{d as kgradio};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e
|
|
1
|
+
var e=Object.defineProperty,t=(t,s,r)=>((t,s,r)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[s]=r)(t,"symbol"!=typeof s?s+"":s,r);import{LitElement as s,css as r,html as i}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class o extends(a(s)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},leftLabel:{type:String},rightLabel:{type:String},color:{type:String}}}constructor(){super(),this.checked=!1,this.color="primary",this.label="",this.leftLabel="",this.rightLabel="",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=(s=this.color)&&"primary"!==s?s.startsWith("#")||s.startsWith("rgb")||s.startsWith("hsl")?s:{secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[s]||`var(--kg-${s}, ${s})`:"var(--kg-primary)",t=this.checked?`--switch-active-color: ${e};`:"";var s;return i`
|
|
2
2
|
<div style="position: relative; display: inline-block;">
|
|
3
3
|
<div
|
|
4
4
|
class="kg-switch-wrapper ${this.errorText?"error":""}"
|
|
@@ -10,6 +10,14 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
10
10
|
</slot>
|
|
11
11
|
|
|
12
12
|
<div class="kg-switch-track">
|
|
13
|
+
<input
|
|
14
|
+
type="checkbox"
|
|
15
|
+
.checked="${this.checked}"
|
|
16
|
+
?disabled="${this.disabled}"
|
|
17
|
+
tabindex="0"
|
|
18
|
+
@change="${e=>{this.checked=e.target.checked,this._toggle()}}"
|
|
19
|
+
style="position: absolute; opacity: 0; width: 0; height: 0;"
|
|
20
|
+
/>
|
|
13
21
|
<div class="kg-switch-thumb"></div>
|
|
14
22
|
</div>
|
|
15
23
|
|
|
@@ -19,13 +27,19 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
19
27
|
</div>
|
|
20
28
|
${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
|
|
21
29
|
</div>
|
|
22
|
-
`}}
|
|
30
|
+
`}}t(o,"shadowRootOptions",{...s.shadowRootOptions,delegatesFocus:!0}),t(o,"styles",r`
|
|
23
31
|
:host {
|
|
24
32
|
display: inline-block;
|
|
25
33
|
vertical-align: middle;
|
|
26
34
|
cursor: pointer;
|
|
27
35
|
user-select: none;
|
|
28
36
|
font-family: inherit;
|
|
37
|
+
outline: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.kg-switch-wrapper:focus-within .kg-switch-track {
|
|
41
|
+
box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2);
|
|
42
|
+
border-color: var(--kg-primary);
|
|
29
43
|
}
|
|
30
44
|
|
|
31
45
|
:host([disabled]) {
|
|
@@ -110,4 +124,4 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
110
124
|
from { opacity: 0; transform: translateY(-4px); }
|
|
111
125
|
to { opacity: 1; transform: translateY(0); }
|
|
112
126
|
}
|
|
113
|
-
`),"undefined"==typeof customElements||customElements.get("kg-switch")||customElements.define("kg-switch",
|
|
127
|
+
`),"undefined"==typeof customElements||customElements.get("kg-switch")||customElements.define("kg-switch",o);export{o as kgswitch};
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
var
|
|
2
|
-
<div class="tabs-header">
|
|
3
|
-
${
|
|
1
|
+
var e=Object.defineProperty,t=(t,r,a)=>((t,r,a)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[r]=a)(t,"symbol"!=typeof r?r+"":r,a);import{LitElement as r,css as a,html as i}from"lit";class o extends r{constructor(){super(),this.activeTab="",this.vertical=!1,this.fullWidth=!1}firstUpdated(){if(this._updatePanels(),!this.activeTab){const e=this.querySelector("kg-tab-panel");e&&(this.activeTab=e.value)}}updated(e){e.has("activeTab")&&this._updatePanels()}_handleTabClick(e){this.activeTab=e,this.dispatchEvent(new CustomEvent("kg-tab-change",{detail:{value:e},bubbles:!0,composed:!0}))}_updatePanels(){Array.from(this.querySelectorAll("kg-tab-panel")).forEach(e=>{e.active=e.value===this.activeTab}),this.requestUpdate()}_handleKeyDown(e,t,r,a){let i=-1;if(this.vertical?("ArrowDown"===e.key&&(i=(r+1)%a.length),"ArrowUp"===e.key&&(i=(r-1+a.length)%a.length)):("ArrowRight"===e.key&&(i=(r+1)%a.length),"ArrowLeft"===e.key&&(i=(r-1+a.length)%a.length)),"Home"===e.key&&(i=0),"End"===e.key&&(i=a.length-1),-1!==i){e.preventDefault();const t=a[i];this._handleTabClick(t.value),this.updateComplete.then(()=>{const e=Array.from(this.shadowRoot.querySelectorAll(".tab-trigger"));e[i]?.focus()})}}render(){const e=Array.from(this.querySelectorAll("kg-tab-panel"));return i`
|
|
2
|
+
<div class="tabs-header" role="tablist" aria-orientation="${this.vertical?"vertical":"horizontal"}">
|
|
3
|
+
${e.map((t,r)=>i`
|
|
4
4
|
<button
|
|
5
5
|
class="tab-trigger ${this.activeTab===t.value?"active":""}"
|
|
6
|
+
role="tab"
|
|
7
|
+
aria-selected="${this.activeTab===t.value}"
|
|
8
|
+
aria-controls="panel-${t.value}"
|
|
9
|
+
id="tab-${t.value}"
|
|
10
|
+
tabindex="${this.activeTab===t.value?"0":"-1"}"
|
|
6
11
|
@click="${()=>this._handleTabClick(t.value)}"
|
|
12
|
+
@keydown="${a=>this._handleKeyDown(a,t.value,r,e)}"
|
|
7
13
|
>
|
|
8
14
|
${t.label}
|
|
9
15
|
</button>
|
|
@@ -12,7 +18,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
12
18
|
<div class="tabs-content">
|
|
13
19
|
<slot @slotchange="${this._updatePanels}"></slot>
|
|
14
20
|
</div>
|
|
15
|
-
`}}
|
|
21
|
+
`}}t(o,"properties",{activeTab:{type:String,reflect:!0},vertical:{type:Boolean,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"}}),t(o,"styles",a`
|
|
16
22
|
:host {
|
|
17
23
|
display: flex;
|
|
18
24
|
flex-direction: column;
|
|
@@ -57,6 +63,11 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
57
63
|
border-radius: 8px 8px 0 0;
|
|
58
64
|
}
|
|
59
65
|
|
|
66
|
+
.tab-trigger:focus-visible {
|
|
67
|
+
background: rgba(65, 171, 52, 0.1);
|
|
68
|
+
box-shadow: inset 0 0 0 2px var(--kg-primary);
|
|
69
|
+
}
|
|
70
|
+
|
|
60
71
|
:host([full-width]) .tab-trigger {
|
|
61
72
|
flex: 1;
|
|
62
73
|
min-width: 0;
|
package/package.json
CHANGED
|
@@ -25,6 +25,8 @@ export class kgbutton extends LitElement {
|
|
|
25
25
|
/** */
|
|
26
26
|
type: string;
|
|
27
27
|
/** */
|
|
28
|
+
isDefault: boolean;
|
|
29
|
+
/** */
|
|
28
30
|
form: any;
|
|
29
31
|
/** Generated from static properties */
|
|
30
32
|
fullwidth: boolean;
|
|
@@ -63,6 +65,7 @@ declare global {
|
|
|
63
65
|
hasLeft?: boolean;
|
|
64
66
|
hasRight?: boolean;
|
|
65
67
|
type?: string;
|
|
68
|
+
isDefault?: boolean;
|
|
66
69
|
form?: any;
|
|
67
70
|
fullwidth?: boolean;
|
|
68
71
|
circular?: boolean;
|