@alxgrn/telefrag-ui 0.0.63 → 0.1.1

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.
Files changed (16) hide show
  1. package/dist/assets/Expandable.css +1 -0
  2. package/dist/assets/PageHeader.css +1 -1
  3. package/dist/components/form/form/Form.js +94 -105
  4. package/dist/components/form/form/traverse.d.ts +6 -0
  5. package/dist/components/form/form/traverse.js +24 -0
  6. package/dist/components/form/image/Image.js +2 -2
  7. package/dist/components/form/select/Select.js +2 -2
  8. package/dist/components/form/time/Time.js +2 -2
  9. package/dist/components/layout/Layout.js +2 -2
  10. package/dist/components/layout/Page.js +2 -2
  11. package/dist/components/layout/PageHeader.js +2 -2
  12. package/dist/components/ui/expandable/Expandable.d.ts +17 -0
  13. package/dist/components/ui/expandable/Expandable.js +78 -0
  14. package/dist/main.d.ts +2 -1
  15. package/dist/main.js +20 -18
  16. package/package.json +1 -2
package/dist/assets/Expandable.css ADDED
@@ -0,0 +1 @@
1
+ .Expandable{position:relative;overflow:hidden}.ExpandableExpanded,.ExpandableCollapsed{transition:max-height .5s ease;overflow:hidden}.ExpandableShadow{position:absolute;width:100%;height:50px;background:linear-gradient(rgba(255,255,255,.001),var(--alxgrn-bg-panel));bottom:calc(var(--alxgrn-font-size) * var(--alxgrn-line-height) + var(--alxgrn-unit))}.ExpandableButton{display:inline-block;margin-top:var(--alxgrn-unit);color:var(--alxgrn-color-accent);cursor:pointer;border-bottom:1px solid transparent}.ExpandableButton:hover{border-bottom:1px solid var(--alxgrn-color-accent)}
package/dist/assets/PageHeader.css CHANGED
@@ -1 +1 @@
1
- *{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-big: 20px;--alxgrn-font-size-huge: 40px;--alxgrn-font-size-large: 18px;--alxgrn-font-size-largest: 22px;--alxgrn-font-size-small: 14px;--alxgrn-font-size-smallest: 10px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-h1: #777;--alxgrn-color-h2: #777;--alxgrn-color-h3: #777;--alxgrn-font-size-h1: var(--alxgrn-font-size-huge);--alxgrn-font-size-h2: var(--alxgrn-font-size-big);--alxgrn-font-size-h3: var(--alxgrn-font-size-large);--alxgrn-line-height-h1: var(--alxgrn-line-height);--alxgrn-line-height-h2: var(--alxgrn-line-height);--alxgrn-line-height-h3: var(--alxgrn-line-height);--alxgrn-logo-color-blue: #7091a7;--alxgrn-logo-color-navi: #004571;--alxgrn-logo-color-beige: #c9c1ae;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border: #ddd;--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border: #555;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}.one-line{overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 512px){*{--alxgrn-font-size-h1: var(--alxgrn-font-size-big);--alxgrn-font-size-h2: var(--alxgrn-font-size-largest);--alxgrn-font-size-h3: var(--alxgrn-font-size-large)}}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap input{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap .Icon{position:absolute;font-size:var(--alxgrn-font-size-large);top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);cursor:pointer;pointer-events:none;display:flex}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin-top:var(--alxgrn-unit)}.Form .FormItem:first-child{margin-top:0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}.FormItem .Time{display:flex;gap:var(--alxgrn-unit-small);align-items:center}.Form .ImageLabel input[type=file]{display:none}.Form .ImageLabel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;aspect-ratio:16 / 9;border-radius:var(--alxgrn-unit-small);border:1px dashed var(--alxgrn-border-accent);color:var(--alxgrn-color-accent);background-color:var(--alxgrn-bg-accent);background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;cursor:pointer}.Form .ImageLabel.Disabled{color:var(--alxgrn-color-light);border-color:var(--alxgrn-border-light);background-color:var(--alxgrn-bg-light);cursor:default}.Form .ImageLabel.Error{color:var(--alxgrn-color-error);border-color:var(--alxgrn-border-error);background-color:var(--alxgrn-bg-error)}.Form .ImageLabel .ImageRemove{display:flex;position:absolute;top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-smallest);background-color:var(--alxgrn-bg-accent);z-index:100}.Form .ImageLabel.Disabled .ImageRemove{display:none}.Form .ImageLabel label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.Form .ImageLabel.Disabled label{cursor:default}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 200px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarIsShown{display:none}@media (max-width: 768px){.LayoutSidebarIsShown{display:initial}}.Page{display:flex;flex-direction:column}.Page .PageBody{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--alxgrn-unit);margin-top:var(--alxgrn-unit)}@media (max-width: 768px){.Page .PageBody{display:block}}.Page .PageBody .PageContent{display:block;grid-column:span 2}.Page .PageBody .PageSidebar{display:flex;align-items:flex-end}@media (max-width: 768px){.Page .PageBody .PageSidebar{display:none}}.Page .PageBody .PageSidebar .PageSidebarInner{width:100%;position:sticky;bottom:0;min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}.Page .PageBody.Wide{display:block}.PageHeader{position:relative;border-radius:var(--alxgrn-unit-half);display:flex;flex-direction:column;overflow:hidden;margin-top:var(--alxgrn-unit)}@media (max-width: 1024px){.PageHeader{border-radius:0;margin-top:0}}.PageHeader .PageHeaderBack{width:100%;position:relative;padding-bottom:25%;background-size:cover;background-color:var(--alxgrn-logo-color-beige)}.PageHeader .PageHeaderBack .PageHeaderBackCreate,.PageHeader .PageHeaderBack .PageHeaderBackRemove{display:flex;position:absolute;font-size:var(--alxgrn-font-size-large);padding:var(--alxgrn-unit-half);margin:var(--alxgrn-unit-half);background-color:var(--alxgrn-bg-panel);border-radius:var(--alxgrn-unit-small);top:0;right:0;color:var(--alxgrn-color-light);cursor:pointer;opacity:0;transition:.5s}.PageHeader .PageHeaderBack:hover .PageHeaderBackCreate,.PageHeader .PageHeaderBack:hover .PageHeaderBackRemove{opacity:1;transition:.5s}.PageHeader .PageHeaderBack .PageHeaderBackRemove{left:unset;right:calc(2.5 * var(--alxgrn-unit))}.PageHeader .PageHeaderBack .PageHeaderBackCreate:hover,.PageHeader .PageHeaderBack .PageHeaderBackRemove:hover{color:var(--alxgrn-color-accent)}.PageHeader .PageHeaderAbout{display:flex;gap:var(--alxgrn-unit-half);align-items:center;background-color:var(--alxgrn-bg-panel);height:calc(5 * var(--alxgrn-unit));padding-left:calc(11.5 * var(--alxgrn-unit));padding-right:var(--alxgrn-unit)}@media (max-width: 768px){.PageHeader .PageHeaderAbout{height:calc(3 * var(--alxgrn-unit));padding-left:var(--alxgrn-unit);padding-right:var(--alxgrn-unit-half)}}.PageHeader .PageHeaderAbout .PageHeaderInfo{flex:1 1 auto;overflow:hidden}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderTitle{font-size:var(--alxgrn-font-size-largest);font-weight:600}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderSubtitle{color:var(--alxgrn-color-light)}@media (max-width: 768px){.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderSubtitle{display:none}}.PageHeader .PageHeaderAbout .PageHeaderMenu{flex:0 0 auto;display:flex}.PageHeader .PageHeaderShowSidebar{display:none}@media (max-width: 768px){.PageHeader .PageHeaderShowSidebar{display:flex}}.PageHeader .Button{font-size:var(--alxgrn-font-size-small);padding:var(--alxgrn-unit-half) var(--alxgrn-unit)!important}.PageHeader .PageHeaderLogo{position:absolute;flex:0 0 auto;border-radius:var(--alxgrn-unit-half);border:var(--alxgrn-unit-small) solid var(--alxgrn-bg-panel);background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--alxgrn-logo-color-blue);aspect-ratio:1 / 1;height:calc(10 * var(--alxgrn-unit));left:calc(var(--alxgrn-unit) - var(--alxgrn-unit-small));bottom:calc(var(--alxgrn-unit) - var(--alxgrn-unit-smallest))}@media (max-width: 768px){.PageHeader .PageHeaderLogo{border-width:var(--alxgrn-unit-smallest);height:calc(25vw - var(--alxgrn-unit-double) + var(--alxgrn-unit-smallest));top:calc(var(--alxgrn-unit) - var(--alxgrn-unit-smallest) / 2);left:calc(var(--alxgrn-unit) - var(--alxgrn-unit-smallest) / 2);bottom:unset}}.PageHeader:has(.PageHeaderToolbar) .PageHeaderLogo{bottom:calc(var(--alxgrn-unit) * 4 - var(--alxgrn-unit-half))}.PageHeader .PageHeaderLogo .PageHeaderLogoCreate,.PageHeader .PageHeaderLogo .PageHeaderLogoRemove{display:flex;position:absolute;font-size:var(--alxgrn-font-size-large);padding:var(--alxgrn-unit-half);margin:var(--alxgrn-unit-half);background-color:var(--alxgrn-bg-panel);border-radius:var(--alxgrn-unit-small);bottom:0;left:0;cursor:pointer;color:var(--alxgrn-color-light);opacity:0;transition:.5s}@media (max-width: 768px){.PageHeader .PageHeaderLogo .PageHeaderLogoCreate,.PageHeader .PageHeaderLogo .PageHeaderLogoRemove{margin:0;border-radius:0;border-top-right-radius:var(--alxgrn-unit-small)}}.PageHeader .PageHeaderLogo:hover .PageHeaderLogoCreate,.PageHeader .PageHeaderLogo:hover .PageHeaderLogoRemove{opacity:1;transition:.5s}.PageHeader .PageHeaderLogo .PageHeaderLogoCreate{left:unset;right:0}@media (max-width: 768px){.PageHeader .PageHeaderLogo .PageHeaderLogoCreate{border-top-left-radius:var(--alxgrn-unit-small);border-top-right-radius:0}}.PageHeader .PageHeaderLogo .PageHeaderLogoCreate:hover,.PageHeader .PageHeaderLogo .PageHeaderLogoRemove:hover{color:var(--alxgrn-color-accent)}.PageHeaderToolbar{margin-top:1px;background-color:var(--alxgrn-bg-panel);padding:var(--alxgrn-unit-half)}
1
+ *{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-big: 20px;--alxgrn-font-size-huge: 40px;--alxgrn-font-size-large: 18px;--alxgrn-font-size-largest: 22px;--alxgrn-font-size-small: 14px;--alxgrn-font-size-smallest: 10px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-h1: #777;--alxgrn-color-h2: #777;--alxgrn-color-h3: #777;--alxgrn-font-size-h1: var(--alxgrn-font-size-huge);--alxgrn-font-size-h2: var(--alxgrn-font-size-big);--alxgrn-font-size-h3: var(--alxgrn-font-size-large);--alxgrn-line-height-h1: var(--alxgrn-line-height);--alxgrn-line-height-h2: var(--alxgrn-line-height);--alxgrn-line-height-h3: var(--alxgrn-line-height);--alxgrn-logo-color-blue: #7091a7;--alxgrn-logo-color-navi: #004571;--alxgrn-logo-color-beige: #c9c1ae;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border: #ddd;--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border: #555;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}.one-line{overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 512px){*{--alxgrn-font-size-h1: var(--alxgrn-font-size-big);--alxgrn-font-size-h2: var(--alxgrn-font-size-largest);--alxgrn-font-size-h3: var(--alxgrn-font-size-large)}}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin-top:var(--alxgrn-unit)}.Form .FormItem:first-child{margin-top:0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}.FormItem .Time{display:flex;gap:var(--alxgrn-unit-small);align-items:center}.Form .ImageLabel input[type=file]{display:none}.Form .ImageLabel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;aspect-ratio:16 / 9;border-radius:var(--alxgrn-unit-small);border:1px dashed var(--alxgrn-border-accent);color:var(--alxgrn-color-accent);background-color:var(--alxgrn-bg-accent);background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;cursor:pointer}.Form .ImageLabel.Disabled{color:var(--alxgrn-color-light);border-color:var(--alxgrn-border-light);background-color:var(--alxgrn-bg-light);cursor:default}.Form .ImageLabel.Error{color:var(--alxgrn-color-error);border-color:var(--alxgrn-border-error);background-color:var(--alxgrn-bg-error)}.Form .ImageLabel .ImageRemove{display:flex;position:absolute;top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-smallest);background-color:var(--alxgrn-bg-accent);z-index:100}.Form .ImageLabel.Disabled .ImageRemove{display:none}.Form .ImageLabel label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.Form .ImageLabel.Disabled label{cursor:default}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap input{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap .Icon{position:absolute;font-size:var(--alxgrn-font-size-large);top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);cursor:pointer;pointer-events:none;display:flex}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 200px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarIsShown{display:none}@media (max-width: 768px){.LayoutSidebarIsShown{display:initial}}.Page{display:flex;flex-direction:column}.Page .PageBody{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--alxgrn-unit);margin-top:var(--alxgrn-unit)}@media (max-width: 768px){.Page .PageBody{display:block}}.Page .PageBody .PageContent{display:block;grid-column:span 2}.Page .PageBody .PageSidebar{display:flex;align-items:flex-end}@media (max-width: 768px){.Page .PageBody .PageSidebar{display:none}}.Page .PageBody .PageSidebar .PageSidebarInner{width:100%;position:sticky;bottom:0;min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}.Page .PageBody.Wide{display:block}.PageHeader{position:relative;border-radius:var(--alxgrn-unit-half);display:flex;flex-direction:column;overflow:hidden;margin-top:var(--alxgrn-unit)}@media (max-width: 1024px){.PageHeader{border-radius:0;margin-top:0}}.PageHeader .PageHeaderBack{width:100%;position:relative;padding-bottom:25%;background-size:cover;background-color:var(--alxgrn-logo-color-beige)}.PageHeader .PageHeaderBack .PageHeaderBackCreate,.PageHeader .PageHeaderBack .PageHeaderBackRemove{display:flex;position:absolute;font-size:var(--alxgrn-font-size-large);padding:var(--alxgrn-unit-half);margin:var(--alxgrn-unit-half);background-color:var(--alxgrn-bg-panel);border-radius:var(--alxgrn-unit-small);top:0;right:0;color:var(--alxgrn-color-light);cursor:pointer;opacity:0;transition:.5s}.PageHeader .PageHeaderBack:hover .PageHeaderBackCreate,.PageHeader .PageHeaderBack:hover .PageHeaderBackRemove{opacity:1;transition:.5s}.PageHeader .PageHeaderBack .PageHeaderBackRemove{left:unset;right:calc(2.5 * var(--alxgrn-unit))}.PageHeader .PageHeaderBack .PageHeaderBackCreate:hover,.PageHeader .PageHeaderBack .PageHeaderBackRemove:hover{color:var(--alxgrn-color-accent)}.PageHeader .PageHeaderAbout{display:flex;gap:var(--alxgrn-unit-half);align-items:center;background-color:var(--alxgrn-bg-panel);height:calc(5 * var(--alxgrn-unit));padding-left:calc(11.5 * var(--alxgrn-unit));padding-right:var(--alxgrn-unit)}@media (max-width: 768px){.PageHeader .PageHeaderAbout{height:calc(3 * var(--alxgrn-unit));padding-left:var(--alxgrn-unit);padding-right:var(--alxgrn-unit-half)}}.PageHeader .PageHeaderAbout .PageHeaderInfo{flex:1 1 auto;overflow:hidden}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderTitle{font-size:var(--alxgrn-font-size-largest);font-weight:600}.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderSubtitle{color:var(--alxgrn-color-light)}@media (max-width: 768px){.PageHeader .PageHeaderAbout .PageHeaderInfo .PageHeaderSubtitle{display:none}}.PageHeader .PageHeaderAbout .PageHeaderMenu{flex:0 0 auto;display:flex}.PageHeader .PageHeaderShowSidebar{display:none}@media (max-width: 768px){.PageHeader .PageHeaderShowSidebar{display:flex}}.PageHeader .Button{font-size:var(--alxgrn-font-size-small);padding:var(--alxgrn-unit-half) var(--alxgrn-unit)!important}.PageHeader .PageHeaderLogo{position:absolute;flex:0 0 auto;border-radius:var(--alxgrn-unit-half);border:var(--alxgrn-unit-small) solid var(--alxgrn-bg-panel);background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--alxgrn-logo-color-blue);aspect-ratio:1 / 1;height:calc(10 * var(--alxgrn-unit));left:calc(var(--alxgrn-unit) - var(--alxgrn-unit-small));bottom:calc(var(--alxgrn-unit) - var(--alxgrn-unit-smallest))}@media (max-width: 768px){.PageHeader .PageHeaderLogo{border-width:var(--alxgrn-unit-smallest);height:calc(25vw - var(--alxgrn-unit-double) + var(--alxgrn-unit-smallest));top:calc(var(--alxgrn-unit) - var(--alxgrn-unit-smallest) / 2);left:calc(var(--alxgrn-unit) - var(--alxgrn-unit-smallest) / 2);bottom:unset}}.PageHeader:has(.PageHeaderToolbar) .PageHeaderLogo{bottom:calc(var(--alxgrn-unit) * 4 - var(--alxgrn-unit-half))}.PageHeader .PageHeaderLogo .PageHeaderLogoCreate,.PageHeader .PageHeaderLogo .PageHeaderLogoRemove{display:flex;position:absolute;font-size:var(--alxgrn-font-size-large);padding:var(--alxgrn-unit-half);margin:var(--alxgrn-unit-half);background-color:var(--alxgrn-bg-panel);border-radius:var(--alxgrn-unit-small);bottom:0;left:0;cursor:pointer;color:var(--alxgrn-color-light);opacity:0;transition:.5s}@media (max-width: 768px){.PageHeader .PageHeaderLogo .PageHeaderLogoCreate,.PageHeader .PageHeaderLogo .PageHeaderLogoRemove{margin:0;border-radius:0;border-top-right-radius:var(--alxgrn-unit-small)}}.PageHeader .PageHeaderLogo:hover .PageHeaderLogoCreate,.PageHeader .PageHeaderLogo:hover .PageHeaderLogoRemove{opacity:1;transition:.5s}.PageHeader .PageHeaderLogo .PageHeaderLogoCreate{left:unset;right:0}@media (max-width: 768px){.PageHeader .PageHeaderLogo .PageHeaderLogoCreate{border-top-left-radius:var(--alxgrn-unit-small);border-top-right-radius:0}}.PageHeader .PageHeaderLogo .PageHeaderLogoCreate:hover,.PageHeader .PageHeaderLogo .PageHeaderLogoRemove:hover{color:var(--alxgrn-color-accent)}.PageHeaderToolbar{margin-top:1px;background-color:var(--alxgrn-bg-panel);padding:var(--alxgrn-unit-half)}
package/dist/components/form/form/Form.js CHANGED
@@ -1,31 +1,24 @@
1
- import { jsxs as h, jsx as n } from "react/jsx-runtime";
2
- import { useState as q, useEffect as H } from "react";
3
- import { deepForEach as y } from "react-children-utilities";
4
- import x, { isValidDate as R } from "../date/Date.js";
5
- import { Select as F } from "../select/Select.js";
6
- import { Button as C } from "../button/Button.js";
7
- import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Fieldset.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/PageHeader.css';/* empty css */
1
+ import { jsxs as v, jsx as c } from "react/jsx-runtime";
2
+ import { useState as D, useEffect as E } from "react";
3
+ import { isValidDate as L } from "../date/Date.js";
4
+ import { Button as h } from "../button/Button.js";
5
+ import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/PageHeader.css';/* empty css */
8
6
  /* empty css */
9
7
  /* empty css */
10
8
  /* empty css */
11
9
  /* empty css */
12
10
  /* empty css */
13
- import T from "../time/Time.js";
14
- import { Files as E } from "../files/Files.js";
15
- import { Image as I } from "../image/Image.js";
16
- import g from "../input/Input.js";
17
11
  /* empty css */
18
12
  /* empty css */
19
- import { RadioList as D } from "../radio/RadioList.js";
20
- import V from "../hidden/Hidden.js";
21
- import B from "../checkbox/Checkbox.js";
22
- import { CheckboxList as S } from "../checkbox/CheckboxList.js";
23
- /* empty css */
24
13
  import "react-transition-group";
25
14
  import "react-dom";
26
15
  /* empty css */
27
16
  /* empty css */
28
- import l from "../../ui/block/Block.js";
17
+ /* empty css */
18
+ /* empty css */
19
+ /* empty css */
20
+ /* empty css */
21
+ import u from "../../ui/block/Block.js";
29
22
  /* empty css */
30
23
  /* empty css */
31
24
  /* empty css */
@@ -34,136 +27,132 @@ import l from "../../ui/block/Block.js";
34
27
  /* empty css */
35
28
  /* empty css */
36
29
  /* empty css */
30
+ /* empty css */
37
31
  /* empty css */
38
32
  /* empty css */
39
33
  /* empty css */
40
- const ge = ({
41
- info: d,
42
- error: k,
43
- success: b,
44
- submit: m,
45
- cancel: u,
46
- submitType: j = "Accent",
47
- cancelType: w = "Error",
48
- wide: A,
49
- onSubmit: v,
50
- onCancel: L,
51
- children: c
34
+ import x from "./traverse.js";
35
+ const ne = ({
36
+ info: f,
37
+ error: d,
38
+ success: k,
39
+ submit: p,
40
+ cancel: l,
41
+ submitType: C = "Accent",
42
+ cancelType: F = "Error",
43
+ wide: y,
44
+ onSubmit: b,
45
+ onCancel: I,
46
+ children: n
52
47
  }) => {
53
- const [N, i] = q(!1);
54
- return H(() => {
55
- m && (i(!1), y(c, (r) => {
56
- if (!r) return;
57
- const o = r;
58
- if (typeof o.type != "function") return;
59
- const e = o.props;
60
- if (e.required)
61
- switch (o.type) {
62
- case g:
63
- e.value.trim() || i(!0);
48
+ const [g, i] = D(!1);
49
+ return E(() => {
50
+ p && (i(!1), x(n, (o) => {
51
+ const t = o.props;
52
+ if (t.required)
53
+ switch (o.type.name) {
54
+ case "Input":
55
+ t.value.trim() || i(!0);
64
56
  break;
65
- case B:
66
- e.checked || i(!0);
57
+ case "Checkbox":
58
+ t.checked || i(!0);
67
59
  break;
68
- case F:
60
+ case "Select":
69
61
  {
70
- const a = e.value;
71
- e.options.findIndex((p) => p.value === a) < 0 && i(!0);
62
+ const a = t.value;
63
+ t.options.findIndex((s) => s.value === a) < 0 && i(!0);
72
64
  }
73
65
  break;
74
- case D:
66
+ case "RadioList":
75
67
  {
76
- const a = e.value;
77
- e.options.findIndex((p) => p.value === a) < 0 && i(!0);
68
+ const a = t.value;
69
+ t.options.findIndex((s) => s.value === a) < 0 && i(!0);
78
70
  }
79
71
  break;
80
- case E:
81
- e.files.length < 1 && i(!0);
72
+ case "Files":
73
+ t.files.length < 1 && i(!0);
82
74
  break;
83
- case I:
84
- e.value || i(!0);
75
+ case "Image":
76
+ t.value || i(!0);
85
77
  break;
86
- case x:
87
- R(e.value.trim()) || i(!0);
78
+ case "Date":
79
+ L(t.value.trim()) || i(!0);
88
80
  break;
89
- case S:
90
- e.options.findIndex((f) => f.checked === !0) < 0 && i(!0);
81
+ case "CheckboxList":
82
+ t.options.findIndex((m) => m.checked === !0) < 0 && i(!0);
91
83
  break;
92
84
  }
93
85
  }));
94
- }, [c, m]), /* @__PURE__ */ h("div", { className: A ? "Form FormWide" : "Form", children: [
95
- b && /* @__PURE__ */ n(l, { type: "Success", children: b }),
96
- k && /* @__PURE__ */ n(l, { type: "Error", children: k }),
97
- d && /* @__PURE__ */ n(l, { children: d }),
98
- c,
99
- (m || u) && /* @__PURE__ */ h("div", { className: "FormSubmitButtons", children: [
100
- m && /* @__PURE__ */ n(
101
- C,
86
+ }, [n, p]), /* @__PURE__ */ v("div", { className: y ? "Form FormWide" : "Form", children: [
87
+ k && /* @__PURE__ */ c(u, { type: "Success", children: k }),
88
+ d && /* @__PURE__ */ c(u, { type: "Error", children: d }),
89
+ f && /* @__PURE__ */ c(u, { children: f }),
90
+ n,
91
+ (p || l) && /* @__PURE__ */ v("div", { className: "FormSubmitButtons", children: [
92
+ p && /* @__PURE__ */ c(
93
+ h,
102
94
  {
103
- type: j,
104
- label: m,
105
- disabled: N,
95
+ type: C,
96
+ label: p,
97
+ disabled: g,
106
98
  onClick: () => {
107
- if (!v) return;
108
- const r = {}, o = (e, s) => {
109
- if (!r[e]) {
110
- r[e] = s;
99
+ if (!b) return;
100
+ const o = {}, t = (r, e) => {
101
+ if (!o[r]) {
102
+ o[r] = e;
111
103
  return;
112
104
  }
113
- r[e] instanceof Array ? r[e].push(s) : r[e] = [r[e], s];
105
+ o[r] instanceof Array ? o[r].push(e) : o[r] = [o[r], e];
114
106
  };
115
- y(c, (e) => {
116
- if (!e) return;
117
- const s = e;
118
- if (typeof s.type != "function") return;
119
- const t = s.props;
120
- switch (s.type) {
121
- case x:
122
- case T:
123
- case g:
124
- o(t.id, t.value.trim());
107
+ x(n, (r) => {
108
+ const e = r.props;
109
+ switch (r.type.name) {
110
+ case "Date":
111
+ case "Time":
112
+ case "Input":
113
+ t(e.id, e.value.trim());
125
114
  break;
126
- case B:
127
- o(t.id, t.checked ? t.value : void 0);
115
+ case "Checkbox":
116
+ t(e.id, e.checked ? e.value : void 0);
128
117
  break;
129
- case F:
130
- case D:
131
- o(t.id, t.value);
118
+ case "Select":
119
+ case "RadioList":
120
+ t(e.id, e.value);
132
121
  break;
133
- case E:
134
- o(t.id, t.files);
122
+ case "Files":
123
+ t(e.id, e.files);
135
124
  break;
136
- case I:
137
- o(t.id, t.value);
125
+ case "Image":
126
+ t(e.id, e.value);
138
127
  break;
139
- case V:
140
- o(t.id, t.value);
128
+ case "Hidden":
129
+ t(e.id, e.value);
141
130
  break;
142
- case S:
131
+ case "CheckboxList":
143
132
  {
144
133
  const a = [];
145
- t.options.forEach((p) => {
146
- p.checked && a.push(p.value);
147
- }), o(t.id, a);
134
+ e.options.forEach((s) => {
135
+ s.checked && a.push(s.value);
136
+ }), t(e.id, a);
148
137
  }
149
138
  break;
150
139
  }
151
- }), v(r);
140
+ }), b(o);
152
141
  }
153
142
  }
154
143
  ),
155
- u && /* @__PURE__ */ n(
156
- C,
144
+ l && /* @__PURE__ */ c(
145
+ h,
157
146
  {
158
- type: w,
159
- label: u,
160
- onClick: L
147
+ type: F,
148
+ label: l,
149
+ onClick: I
161
150
  }
162
151
  )
163
152
  ] })
164
153
  ] });
165
154
  };
166
155
  export {
167
- ge as Form,
168
- ge as default
156
+ ne as Form,
157
+ ne as default
169
158
  };
package/dist/components/form/form/traverse.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ReactNode, ReactElement } from 'react';
2
+ /**
3
+ * Рекурсивно обходит всех потомков и вызывает callback для каждого функционального компонента
4
+ */
5
+ declare function traverseFunctionalComponents(children: ReactNode, callback: (element: ReactElement) => void): void;
6
+ export default traverseFunctionalComponents;
package/dist/components/form/form/traverse.js ADDED
@@ -0,0 +1,24 @@
1
+ import r from "react";
2
+ function f(t) {
3
+ return typeof t == "object" && t !== null && "$$typeof" in t && typeof t.$$typeof == "symbol";
4
+ }
5
+ function i(t) {
6
+ var o;
7
+ if (!r.isValidElement(t)) return !1;
8
+ let e = t.type;
9
+ for (; f(e) && (e.$$typeof === Symbol.for("react.memo") || e.$$typeof === Symbol.for("react.forward_ref")); )
10
+ e = e.type;
11
+ return typeof e == "function" && !((o = e.prototype) != null && o.isReactComponent);
12
+ }
13
+ function p(t, e) {
14
+ r.Children.forEach(t, (o) => {
15
+ if (o && r.isValidElement(o)) {
16
+ i(o) && e(o);
17
+ const n = o.props;
18
+ "children" in n && n.children != null && p(n.children, e);
19
+ }
20
+ });
21
+ }
22
+ export {
23
+ p as default
24
+ };
package/dist/components/form/image/Image.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { jsx as r, jsxs as F, Fragment as C } from "react/jsx-runtime";
2
2
  import { useState as n, useEffect as d } from "react";
3
3
  import E from "../label/Label.js";
4
- import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/Menu.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css */
5
- import "react-children-utilities";
4
+ import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/Menu.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css */
6
5
  import "react-transition-group";
7
6
  import "react-dom";
8
7
  /* empty css */
@@ -30,6 +29,7 @@ import j from "../../icons/Trash.js";
30
29
  /* empty css */
31
30
  /* empty css */
32
31
  /* empty css */
32
+ /* empty css */
33
33
  /* empty css */
34
34
  /* empty css */
35
35
  /* empty css */
package/dist/components/form/select/Select.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { jsx as r, jsxs as u } from "react/jsx-runtime";
2
2
  import { useRef as S, useState as a, useEffect as O } from "react";
3
3
  import V from "../label/Label.js";
4
- import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css */
5
- import "react-children-utilities";
4
+ import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css */
6
5
  import "react-transition-group";
7
6
  import "react-dom";
8
7
  /* empty css */
@@ -29,6 +28,7 @@ import { Menu as E } from "../../ui/menu/Menu.js";
29
28
  /* empty css */
30
29
  /* empty css */
31
30
  /* empty css */
31
+ /* empty css */
32
32
  /* empty css */
33
33
  /* empty css */
34
34
  /* empty css */
package/dist/components/form/time/Time.js CHANGED
@@ -2,8 +2,7 @@ import { jsxs as y, jsx as e } from "react/jsx-runtime";
2
2
  import { useRef as k, useState as s, useEffect as H } from "react";
3
3
  import R from "../label/Label.js";
4
4
  import { Menu as N } from "../../ui/menu/Menu.js";
5
- import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css */
6
- import "react-children-utilities";
5
+ import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css */
7
6
  import "react-transition-group";
8
7
  import "react-dom";
9
8
  /* empty css */
@@ -28,6 +27,7 @@ import O from "../../icons/Check.js";
28
27
  /* empty css */
29
28
  /* empty css */
30
29
  /* empty css */
30
+ /* empty css */
31
31
  /* empty css */
32
32
  /* empty css */
33
33
  /* empty css */
package/dist/components/layout/Layout.js CHANGED
@@ -2,8 +2,7 @@ import { jsxs as f, jsx as o } from "react/jsx-runtime";
2
2
  import { useState as n } from "react";
3
3
  import l from "./Header.js";
4
4
  import u from "./Content.js";
5
- import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css */
6
- import "react-children-utilities";
5
+ import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css */
7
6
  import "react-transition-group";
8
7
  import "react-dom";
9
8
  /* empty css */
@@ -29,6 +28,7 @@ import "react-dom";
29
28
  import { Sidebar as d } from "../ui/sidebar/Sidebar.js";
30
29
  /* empty css */
31
30
  /* empty css */
31
+ /* empty css */
32
32
  import c from "./MainMenu.js";
33
33
  const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: t }) => {
34
34
  const [a, r] = n(!1);
package/dist/components/layout/Page.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsxs as m, jsx as r, Fragment as a } from "react/jsx-runtime";
2
- import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css */
2
+ import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css */
3
3
  import "react";
4
- import "react-children-utilities";
5
4
  import "react-transition-group";
6
5
  import "react-dom";
7
6
  /* empty css */
@@ -27,6 +26,7 @@ import "react-dom";
27
26
  import { Sidebar as n } from "../ui/sidebar/Sidebar.js";
28
27
  /* empty css */
29
28
  /* empty css */
29
+ /* empty css */
30
30
  /* empty css */
31
31
  /* empty css */
32
32
  /* empty css */
package/dist/components/layout/PageHeader.js CHANGED
@@ -1,11 +1,10 @@
1
1
  import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
2
  import f from "../icons/Image.js";
3
- import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Sidebar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';/* empty css */
3
+ import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Sidebar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';/* empty css */
4
4
  /* empty css */
5
5
  import k from "../icons/Trash.js";
6
6
  /* empty css */
7
7
  import "react";
8
- import "react-children-utilities";
9
8
  import "react-transition-group";
10
9
  import "react-dom";
11
10
  /* empty css */
@@ -29,6 +28,7 @@ import { Button as b } from "../form/button/Button.js";
29
28
  /* empty css */
30
29
  import x from "../ui/toolbar/Toolbar.js";
31
30
  /* empty css */
31
+ /* empty css */
32
32
  /* empty css */
33
33
  /* empty css */
34
34
  /* empty css */
package/dist/components/ui/expandable/Expandable.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { default as React, PropsWithChildren } from 'react';
2
+ type PropsWithMaxHeight = {
3
+ maxHeight?: number;
4
+ aspectRatio?: never;
5
+ };
6
+ type PropsWithAspectRatio = {
7
+ maxHeight?: never;
8
+ aspectRatio?: '1x1' | '16x9';
9
+ };
10
+ type Props = (PropsWithAspectRatio | PropsWithMaxHeight) & {
11
+ expand?: string;
12
+ collapse?: string;
13
+ isCollapsable?: boolean;
14
+ noShadow?: boolean;
15
+ };
16
+ declare const Expandable: React.FC<PropsWithChildren<Props>>;
17
+ export default Expandable;
package/dist/components/ui/expandable/Expandable.js ADDED
@@ -0,0 +1,78 @@
1
+ import { jsxs as i, jsx as a, Fragment as h } from "react/jsx-runtime";
2
+ import { useState as f, useRef as E, useCallback as C, useEffect as I } from "react";
3
+ import '../../../assets/Expandable.css';/* empty css */
4
+ const M = 50, b = 300, j = ({
5
+ children: m,
6
+ maxHeight: l,
7
+ aspectRatio: d = "1x1",
8
+ expand: H = "Показать целиком...",
9
+ collapse: g = "Свернуть...",
10
+ isCollapsable: v = !0,
11
+ noShadow: N
12
+ }) => {
13
+ var x;
14
+ const [t, u] = f(!1), [w, p] = f(!1), e = E(null), c = E(null), o = C(() => {
15
+ if (l) return Math.max(l, M);
16
+ const n = e.current;
17
+ if (!n) return b;
18
+ const r = n.clientWidth;
19
+ switch (d) {
20
+ case "1x1":
21
+ return r;
22
+ case "16x9":
23
+ return Math.ceil(r / 16 * 9);
24
+ default:
25
+ return b;
26
+ }
27
+ }, [l, d, e]);
28
+ return I(() => {
29
+ const n = e.current;
30
+ if (!n) return;
31
+ const r = o();
32
+ c.current && c.current.disconnect();
33
+ const s = new ResizeObserver(() => {
34
+ p(n.scrollHeight > r);
35
+ });
36
+ return s.observe(n), c.current = s, p(n.scrollHeight > r), () => {
37
+ s && s.disconnect();
38
+ };
39
+ }, [o]), /* @__PURE__ */ i("div", { className: "Expandable", children: [
40
+ /* @__PURE__ */ a(
41
+ "div",
42
+ {
43
+ ref: e,
44
+ className: t ? "ExpandableExpanded" : "ExpandableCollapsed",
45
+ style: { maxHeight: t ? (x = e == null ? void 0 : e.current) != null && x.scrollHeight ? e.current.scrollHeight + "px" : "none" : `${o()}px` },
46
+ children: m
47
+ }
48
+ ),
49
+ w && /* @__PURE__ */ i(h, { children: [
50
+ t && v && /* @__PURE__ */ a(
51
+ "span",
52
+ {
53
+ className: "ExpandableButton",
54
+ onClick: () => u(!1),
55
+ "aria-expanded": t,
56
+ "aria-controls": "collapsible-content",
57
+ children: g
58
+ }
59
+ ),
60
+ !t && /* @__PURE__ */ i(h, { children: [
61
+ !N && /* @__PURE__ */ a("div", { className: "ExpandableShadow" }),
62
+ /* @__PURE__ */ a(
63
+ "span",
64
+ {
65
+ className: "ExpandableButton",
66
+ onClick: () => u(!0),
67
+ "aria-expanded": t,
68
+ "aria-controls": "collapsible-content",
69
+ children: H
70
+ }
71
+ )
72
+ ] })
73
+ ] })
74
+ ] });
75
+ };
76
+ export {
77
+ j as default
78
+ };
package/dist/main.d.ts CHANGED
@@ -30,10 +30,11 @@ import { default as Scroll } from './components/ui/scroll/Scroll';
30
30
  import { default as Sidebar } from './components/ui/sidebar/Sidebar';
31
31
  import { default as Toolbar, ToolbarItem } from './components/ui/toolbar/Toolbar';
32
32
  import { default as Editable } from './components/ui/editable/Editable';
33
+ import { default as Expandable } from './components/ui/expandable/Expandable';
33
34
  import { default as Layout } from './components/layout/Layout';
34
35
  import { MainMenuItem } from './components/layout/MainMenu';
35
36
  import { default as Page } from './components/layout/Page';
36
37
  import { default as PageHeader } from './components/layout/PageHeader';
37
38
  import * as Icons from './components/icons';
38
- export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Scroll, Sidebar, Toolbar, Editable, Layout, Page, PageHeader, Icons, };
39
+ export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Scroll, Sidebar, Toolbar, Editable, Expandable, Layout, Page, PageHeader, Icons, };
39
40
  export type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, ToolbarItem, };
package/dist/main.js CHANGED
@@ -5,17 +5,17 @@ import { default as p } from "./components/form/form/FormCol.js";
5
5
  import { default as x } from "./components/form/date/Date.js";
6
6
  import { default as s } from "./components/form/date/DatePicker.js";
7
7
  import { default as i } from "./components/form/time/Time.js";
8
- import { Files as n } from "./components/form/files/Files.js";
9
- import { Image as b } from "./components/form/image/Image.js";
8
+ import { Files as b } from "./components/form/files/Files.js";
9
+ import { Image as P } from "./components/form/image/Image.js";
10
10
  import { default as g } from "./components/form/input/Input.js";
11
11
  import { default as C } from "./components/form/label/Label.js";
12
12
  import { RadioList as I } from "./components/form/radio/RadioList.js";
13
13
  import { Button as S } from "./components/form/button/Button.js";
14
14
  import { Select as y } from "./components/form/select/Select.js";
15
15
  import { default as D } from "./components/form/hidden/Hidden.js";
16
- import { default as R } from "./components/form/checkbox/Checkbox.js";
17
- import { CheckboxList as v } from "./components/form/checkbox/CheckboxList.js";
18
- import { default as A } from "./components/form/fieldset/Fieldset.js";
16
+ import { default as H } from "./components/form/checkbox/Checkbox.js";
17
+ import { CheckboxList as T } from "./components/form/checkbox/CheckboxList.js";
18
+ import { default as w } from "./components/form/fieldset/Fieldset.js";
19
19
  import { Menu as O } from "./components/ui/menu/Menu.js";
20
20
  import { default as q } from "./components/ui/block/Block.js";
21
21
  import { default as G } from "./components/ui/panel/Panel.js";
@@ -25,34 +25,36 @@ import { Popup as V } from "./components/ui/popup/Popup.js";
25
25
  import { default as X } from "./components/ui/portal/Portal.js";
26
26
  import { default as Z } from "./components/ui/message/Message.js";
27
27
  import { default as $ } from "./components/ui/alert/Alert.js";
28
- import { default as ro } from "./components/ui/confirm/Confirm.js";
28
+ import { default as eo } from "./components/ui/confirm/Confirm.js";
29
29
  import { default as to } from "./components/ui/prompt/Prompt.js";
30
30
  import { default as fo } from "./components/ui/scroll/Scroll.js";
31
31
  import { Sidebar as po } from "./components/ui/sidebar/Sidebar.js";
32
32
  import { default as xo } from "./components/ui/toolbar/Toolbar.js";
33
33
  import { default as uo } from "./components/ui/editable/Editable.js";
34
+ import { default as no } from "./components/ui/expandable/Expandable.js";
34
35
  import { default as co } from "./components/layout/Layout.js";
35
- import { default as Po } from "./components/layout/Page.js";
36
- import { default as Fo } from "./components/layout/PageHeader.js";
37
- import { i as ko } from "./index-D12KbdVs.js";
36
+ import { default as Fo } from "./components/layout/Page.js";
37
+ import { default as ko } from "./components/layout/PageHeader.js";
38
+ import { i as Lo } from "./index-D12KbdVs.js";
38
39
  export {
39
40
  $ as Alert,
40
41
  q as Block,
41
42
  S as Button,
42
- R as Checkbox,
43
- v as CheckboxList,
44
- ro as Confirm,
43
+ H as Checkbox,
44
+ T as CheckboxList,
45
+ eo as Confirm,
45
46
  x as Date,
46
47
  s as DatePicker,
47
48
  uo as Editable,
48
- A as Fieldset,
49
- n as Files,
49
+ no as Expandable,
50
+ w as Fieldset,
51
+ b as Files,
50
52
  t as Form,
51
53
  p as FormCol,
52
54
  f as FormRow,
53
55
  D as Hidden,
54
- ko as Icons,
55
- b as Image,
56
+ Lo as Icons,
57
+ P as Image,
56
58
  g as Input,
57
59
  C as Label,
58
60
  co as Layout,
@@ -60,8 +62,8 @@ export {
60
62
  Z as Message,
61
63
  K as Modal,
62
64
  Q as Overlay,
63
- Po as Page,
64
- Fo as PageHeader,
65
+ Fo as Page,
66
+ ko as PageHeader,
65
67
  G as Panel,
66
68
  V as Popup,
67
69
  X as Portal,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@alxgrn/telefrag-ui",
3
3
  "description": "UI library for The Daily Telefrag project",
4
- "version": "0.0.63",
4
+ "version": "0.1.1",
5
5
  "private": false,
6
6
  "author": "Alexander Fedorov <alex@molner.ru>",
7
7
  "license": "Apache-2.0",
@@ -29,7 +29,6 @@
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": "^19.2.0",
32
- "react-children-utilities": "^2.10.0",
33
32
  "react-dom": "^19.2.0",
34
33
  "react-transition-group": "^4.4.5"
35
34
  },