@livenetworks/ashlar 1.6.1 → 2.0.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.
- package/LICENSE +641 -0
- package/README.md +190 -86
- package/{js → components}/COMPONENTS.md +1116 -1108
- package/{js → components}/index.js +81 -58
- package/{js → components}/ln-accordion/README.md +7 -6
- package/components/ln-accordion/ln-accordion-dev.scss +8 -0
- package/components/ln-accordion/ln-accordion.js +1 -0
- package/components/ln-accordion/ln-accordion.schema.json +30 -0
- package/components/ln-accordion/ln-accordion.scss +8 -0
- package/{js → components}/ln-accordion/src/ln-accordion.js +8 -2
- package/{js → components}/ln-ajax/README.md +171 -160
- package/components/ln-ajax/ln-ajax-dev.scss +8 -0
- package/components/ln-ajax/ln-ajax.js +1 -0
- package/components/ln-ajax/ln-ajax.schema.json +30 -0
- package/{js → components}/ln-ajax/src/ln-ajax.js +65 -30
- package/{js → components}/ln-api-connector/README.md +27 -5
- package/components/ln-api-connector/ln-api-connector.js +1 -0
- package/components/ln-api-connector/ln-api-connector.schema.json +96 -0
- package/components/ln-api-connector/src/connector-core.js +97 -0
- package/components/ln-api-connector/src/ln-api-connector.js +447 -0
- package/{js → components}/ln-api-queue/README.md +12 -9
- package/components/ln-api-queue/ln-api-queue.js +1 -0
- package/components/ln-api-queue/ln-api-queue.schema.json +34 -0
- package/{js → components}/ln-api-queue/src/ln-api-queue.js +33 -14
- package/{js → components}/ln-api-queue/src/queue-storage.js +7 -3
- package/{js → components}/ln-autoresize/README.md +129 -127
- package/components/ln-autoresize/ln-autoresize-dev.scss +8 -0
- package/components/ln-autoresize/ln-autoresize.js +1 -0
- package/components/ln-autoresize/ln-autoresize.schema.json +22 -0
- package/{js → components}/ln-autoresize/src/ln-autoresize.js +8 -1
- package/{js → components}/ln-autosave/README.md +127 -124
- package/components/ln-autosave/ln-autosave-dev.scss +13 -0
- package/components/ln-autosave/ln-autosave.js +1 -0
- package/components/ln-autosave/ln-autosave.schema.json +48 -0
- package/components/ln-autosave/src/autosave-model.js +34 -0
- package/{js → components}/ln-autosave/src/ln-autosave.js +65 -58
- package/components/ln-chart/README.md +145 -0
- package/components/ln-chart/ln-chart-dev.scss +20 -0
- package/components/ln-chart/ln-chart.js +1 -0
- package/components/ln-chart/ln-chart.schema.json +146 -0
- package/components/ln-chart/ln-chart.scss +8 -0
- package/components/ln-chart/src/chart-model.js +154 -0
- package/components/ln-chart/src/ln-chart.js +176 -0
- package/{js → components}/ln-circular-progress/README.md +15 -14
- package/components/ln-circular-progress/ln-circular-progress-dev.scss +8 -0
- package/components/ln-circular-progress/ln-circular-progress.js +1 -0
- package/components/ln-circular-progress/ln-circular-progress.schema.json +42 -0
- package/{js → components}/ln-circular-progress/src/ln-circular-progress.js +32 -50
- package/{js → components}/ln-confirm/README.md +69 -18
- package/components/ln-confirm/ln-confirm-dev.scss +24 -0
- package/components/ln-confirm/ln-confirm.js +1 -0
- package/components/ln-confirm/ln-confirm.schema.json +66 -0
- package/components/ln-confirm/ln-confirm.scss +24 -0
- package/{js → components}/ln-confirm/src/ln-confirm.js +180 -171
- package/{js → components}/ln-core/README.md +374 -149
- package/components/ln-core/attrs.js +273 -0
- package/components/ln-core/compare.js +40 -0
- package/components/ln-core/crypto.js +265 -0
- package/components/ln-core/date.js +50 -0
- package/components/ln-core/dom.js +115 -0
- package/components/ln-core/events.js +122 -0
- package/components/ln-core/form.js +136 -0
- package/{js → components}/ln-core/hash.js +149 -92
- package/components/ln-core/helpers.js +33 -0
- package/components/ln-core/http.js +48 -0
- package/components/ln-core/index.js +11 -0
- package/components/ln-core/lifecycle.js +403 -0
- package/components/ln-core/ln-core.schema.json +109 -0
- package/components/ln-core/locale.js +55 -0
- package/components/ln-core/matching.js +78 -0
- package/components/ln-core/number.js +125 -0
- package/components/ln-core/progress.js +30 -0
- package/components/ln-core/template.js +206 -0
- package/{js → components}/ln-core/window-cache.js +247 -213
- package/{js → components}/ln-couchdb-connector/README.md +7 -5
- package/components/ln-couchdb-connector/ln-couchdb-connector.js +1 -0
- package/components/ln-couchdb-connector/ln-couchdb-connector.schema.json +50 -0
- package/{js → components}/ln-couchdb-connector/src/ln-couchdb-connector.js +29 -43
- package/{js → components}/ln-data-coordinator/README.md +109 -73
- package/components/ln-data-coordinator/ln-data-coordinator-dev.scss +8 -0
- package/components/ln-data-coordinator/ln-data-coordinator.js +1 -0
- package/components/ln-data-coordinator/ln-data-coordinator.schema.json +196 -0
- package/components/ln-data-coordinator/src/data-read-policy.js +41 -0
- package/{js → components}/ln-data-coordinator/src/ln-data-coordinator.js +411 -154
- package/{js → components}/ln-data-coordinator/src/mutation-receipts.js +0 -5
- package/{js → components}/ln-data-store/README.md +42 -17
- package/components/ln-data-store/ln-data-store-dev.scss +13 -0
- package/components/ln-data-store/ln-data-store.js +1 -0
- package/components/ln-data-store/ln-data-store.schema.json +84 -0
- package/components/ln-data-store/src/data-store-model.js +155 -0
- package/{js → components}/ln-data-store/src/ln-data-store.js +407 -105
- package/components/ln-data-store/src/window-index.js +119 -0
- package/{js → components}/ln-date/README.md +17 -7
- package/{js → components}/ln-date/ln-date-dev.scss +14 -14
- package/components/ln-date/ln-date.js +1 -0
- package/components/ln-date/ln-date.schema.json +92 -0
- package/components/ln-date/src/date-model.js +186 -0
- package/components/ln-date/src/ln-date.js +486 -0
- package/components/ln-debug/README.md +132 -0
- package/components/ln-debug/ln-debug.js +1 -0
- package/components/ln-debug/ln-debug.schema.json +28 -0
- package/components/ln-debug/src/console-sink.js +19 -0
- package/components/ln-debug/src/debug-verifier.js +331 -0
- package/components/ln-debug/src/gate.js +95 -0
- package/components/ln-debug/src/generated-attributes.js +299 -0
- package/components/ln-debug/src/ln-debug.js +60 -0
- package/{js → components}/ln-dropdown/README.md +150 -140
- package/components/ln-dropdown/ln-dropdown-dev.scss +13 -0
- package/components/ln-dropdown/ln-dropdown.js +1 -0
- package/components/ln-dropdown/ln-dropdown.schema.json +90 -0
- package/components/ln-dropdown/ln-dropdown.scss +18 -0
- package/{js → components}/ln-dropdown/src/ln-dropdown.js +114 -11
- package/{js → components}/ln-editor/README.md +11 -9
- package/components/ln-editor/ln-editor-dev.scss +18 -0
- package/components/ln-editor/ln-editor.js +1 -0
- package/components/ln-editor/ln-editor.schema.json +58 -0
- package/components/ln-editor/ln-editor.scss +13 -0
- package/{js → components}/ln-editor/src/ln-editor.js +59 -11
- package/{js → components}/ln-external-links/README.md +10 -8
- package/components/ln-external-links/ln-external-links.js +1 -0
- package/components/ln-external-links/ln-external-links.schema.json +18 -0
- package/{js → components}/ln-external-links/src/ln-external-links.js +13 -11
- package/{js → components}/ln-fill/README.md +6 -8
- package/components/ln-fill/ln-fill.js +1 -0
- package/components/ln-fill/ln-fill.schema.json +23 -0
- package/{js → components}/ln-fill/src/ln-fill.js +7 -1
- package/components/ln-filter/README.md +131 -0
- package/components/ln-filter/ln-filter-dev.scss +13 -0
- package/components/ln-filter/ln-filter.js +1 -0
- package/components/ln-filter/ln-filter.schema.json +153 -0
- package/components/ln-filter/src/filter-model.js +185 -0
- package/components/ln-filter/src/ln-filter.js +435 -0
- package/{js → components}/ln-form/README.md +260 -264
- package/components/ln-form/ln-form-dev.scss +8 -0
- package/components/ln-form/ln-form.js +1 -0
- package/components/ln-form/ln-form.schema.json +45 -0
- package/{js → components}/ln-form/src/ln-form.js +107 -99
- package/{js → components}/ln-http/README.md +11 -6
- package/components/ln-http/ln-http.js +1 -0
- package/components/ln-http/ln-http.schema.json +6 -0
- package/components/ln-http/src/http-core.js +51 -0
- package/{js → components}/ln-http/src/ln-http.js +28 -33
- package/{js → components}/ln-icon/README.md +16 -9
- package/components/ln-icon/ln-icon.schema.json +6 -0
- package/components/ln-include/README.md +75 -0
- package/components/ln-include/ln-include-dev.scss +13 -0
- package/components/ln-include/ln-include.js +1 -0
- package/components/ln-include/ln-include.schema.json +23 -0
- package/components/ln-include/src/ln-include.js +111 -0
- package/components/ln-key/README.md +130 -0
- package/components/ln-key/ln-key-dev.scss +18 -0
- package/components/ln-key/ln-key.js +1 -0
- package/components/ln-key/ln-key.schema.json +56 -0
- package/components/ln-key/src/key-model.js +146 -0
- package/components/ln-key/src/ln-key.js +201 -0
- package/{js → components}/ln-link/README.md +7 -9
- package/components/ln-link/ln-link-dev.scss +8 -0
- package/components/ln-link/ln-link.js +1 -0
- package/components/ln-link/ln-link.schema.json +22 -0
- package/{js → components}/ln-link/src/ln-link.js +16 -11
- package/components/ln-list/README.md +152 -0
- package/components/ln-list/ln-list-dev.scss +8 -0
- package/components/ln-list/ln-list.js +1 -0
- package/components/ln-list/ln-list.schema.json +166 -0
- package/components/ln-list/ln-list.scss +25 -0
- package/{js → components}/ln-list/src/ln-list.js +1301 -1216
- package/{js → components}/ln-modal/README.md +13 -10
- package/components/ln-modal/ln-modal-dev.scss +18 -0
- package/components/ln-modal/ln-modal.js +1 -0
- package/components/ln-modal/ln-modal.schema.json +54 -0
- package/components/ln-modal/ln-modal.scss +51 -0
- package/{js → components}/ln-modal/src/ln-modal.js +164 -137
- package/{js → components}/ln-nav/README.md +11 -11
- package/components/ln-nav/ln-nav.js +1 -0
- package/components/ln-nav/ln-nav.schema.json +25 -0
- package/{js → components}/ln-nav/src/ln-nav.js +25 -14
- package/components/ln-number/README.md +205 -0
- package/{js → components}/ln-number/ln-number-dev.scss +13 -13
- package/components/ln-number/ln-number.js +1 -0
- package/components/ln-number/ln-number.schema.json +63 -0
- package/components/ln-number/src/ln-number.js +400 -0
- package/components/ln-number/src/number-model.js +31 -0
- package/components/ln-obfuscator/README.md +60 -0
- package/components/ln-obfuscator/ln-obfuscator.js +1 -0
- package/components/ln-obfuscator/ln-obfuscator.schema.json +49 -0
- package/components/ln-obfuscator/src/ln-obfuscator.js +159 -0
- package/components/ln-obfuscator/src/obfuscator-model.js +250 -0
- package/{js → components}/ln-options/README.md +3 -1
- package/components/ln-options/ln-options-dev.scss +13 -0
- package/components/ln-options/ln-options.js +1 -0
- package/components/ln-options/ln-options.schema.json +41 -0
- package/{js → components}/ln-options/src/ln-options.js +13 -5
- package/components/ln-persist/README.md +151 -0
- package/components/ln-persist/ln-persist.js +1 -0
- package/components/ln-persist/ln-persist.schema.json +28 -0
- package/components/ln-persist/src/ln-persist.js +83 -0
- package/components/ln-picklist/README.md +230 -0
- package/components/ln-picklist/ln-picklist-dev.scss +22 -0
- package/components/ln-picklist/ln-picklist.js +1 -0
- package/components/ln-picklist/ln-picklist.schema.json +49 -0
- package/components/ln-picklist/src/ln-picklist.js +228 -0
- package/{js → components}/ln-popover/README.md +164 -162
- package/components/ln-popover/ln-popover-dev.scss +13 -0
- package/components/ln-popover/ln-popover.js +1 -0
- package/components/ln-popover/ln-popover.schema.json +82 -0
- package/components/ln-popover/ln-popover.scss +18 -0
- package/{js → components}/ln-popover/src/ln-popover.js +42 -36
- package/{js → components}/ln-progress/README.md +410 -413
- package/components/ln-progress/ln-progress-dev.scss +8 -0
- package/components/ln-progress/ln-progress.js +1 -0
- package/components/ln-progress/ln-progress.schema.json +40 -0
- package/components/ln-progress/src/ln-progress.js +91 -0
- package/components/ln-progress/src/progress-model.js +20 -0
- package/{js → components}/ln-router/README.md +443 -432
- package/components/ln-router/ln-router-dev.scss +13 -0
- package/components/ln-router/ln-router.js +1 -0
- package/components/ln-router/ln-router.schema.json +68 -0
- package/{js → components}/ln-router/src/ln-router.js +585 -539
- package/components/ln-router/src/router-model.js +50 -0
- package/components/ln-scroll/README.md +45 -0
- package/components/ln-scroll/ln-scroll.js +1 -0
- package/components/ln-scroll/ln-scroll.schema.json +85 -0
- package/components/ln-scroll/src/ln-scroll.js +150 -0
- package/components/ln-search/README.md +188 -0
- package/components/ln-search/ln-search-dev.scss +13 -0
- package/components/ln-search/ln-search.js +1 -0
- package/components/ln-search/ln-search.schema.json +103 -0
- package/components/ln-search/src/ln-search.js +330 -0
- package/{js → components}/ln-slug/README.md +6 -3
- package/components/ln-slug/ln-slug-dev.scss +18 -0
- package/components/ln-slug/ln-slug.js +1 -0
- package/components/ln-slug/ln-slug.schema.json +23 -0
- package/{js → components}/ln-slug/src/ln-slug.js +20 -13
- package/components/ln-slug/src/slug-model.js +21 -0
- package/{js → components}/ln-sort/README.md +178 -170
- package/{js → components}/ln-sort/ln-sort-dev.scss +8 -8
- package/components/ln-sort/ln-sort.js +1 -0
- package/components/ln-sort/ln-sort.schema.json +104 -0
- package/components/ln-sort/src/ln-sort.js +321 -0
- package/components/ln-sort/src/sort-model.js +117 -0
- package/{js → components}/ln-sortable/README.md +7 -11
- package/components/ln-sortable/ln-sortable-dev.scss +13 -0
- package/components/ln-sortable/ln-sortable.js +1 -0
- package/components/ln-sortable/ln-sortable.schema.json +36 -0
- package/{js → components}/ln-sortable/src/ln-sortable.js +8 -13
- package/{js → components}/ln-stat/README.md +3 -1
- package/components/ln-stat/ln-stat-dev.scss +8 -0
- package/components/ln-stat/ln-stat.js +1 -0
- package/components/ln-stat/ln-stat.schema.json +32 -0
- package/{js → components}/ln-stat/src/ln-stat.js +14 -18
- package/components/ln-stat/src/stat-model.js +28 -0
- package/{js → components}/ln-table/README.md +37 -24
- package/{js → components}/ln-table/ln-table-dev.scss +17 -17
- package/components/ln-table/ln-table.js +1 -0
- package/components/ln-table/ln-table.schema.json +211 -0
- package/components/ln-table/ln-table.scss +15 -0
- package/{js → components}/ln-table/src/ln-table.js +1365 -1493
- package/components/ln-table/src/table-model.js +98 -0
- package/components/ln-table-coordinator/README.md +61 -0
- package/components/ln-table-coordinator/ln-table-coordinator.js +1 -0
- package/components/ln-table-coordinator/ln-table-coordinator.schema.json +93 -0
- package/components/ln-table-coordinator/src/ln-table-coordinator.js +193 -0
- package/{js → components}/ln-tabs/README.md +32 -14
- package/components/ln-tabs/ln-tabs-dev.scss +24 -0
- package/components/ln-tabs/ln-tabs.js +1 -0
- package/components/ln-tabs/ln-tabs.schema.json +75 -0
- package/components/ln-tabs/ln-tabs.scss +8 -0
- package/components/ln-tabs/src/ln-tabs.js +207 -0
- package/components/ln-tabs/src/tabs-model.js +82 -0
- package/{js → components}/ln-time/README.md +96 -95
- package/components/ln-time/ln-time-dev.scss +13 -0
- package/components/ln-time/ln-time.js +1 -0
- package/components/ln-time/ln-time.schema.json +38 -0
- package/{js → components}/ln-time/src/ln-time.js +206 -223
- package/components/ln-time/src/time-model.js +64 -0
- package/{js → components}/ln-toast/README.md +23 -5
- package/components/ln-toast/ln-toast-dev.scss +8 -0
- package/components/ln-toast/ln-toast.js +1 -0
- package/components/ln-toast/ln-toast.schema.json +65 -0
- package/components/ln-toast/ln-toast.scss +59 -0
- package/{js → components}/ln-toast/src/ln-toast.js +233 -232
- package/{js → components}/ln-toggle/README.md +198 -196
- package/{js → components}/ln-toggle/ln-toggle-dev.scss +13 -13
- package/components/ln-toggle/ln-toggle.js +1 -0
- package/components/ln-toggle/ln-toggle.schema.json +52 -0
- package/components/ln-toggle/ln-toggle.scss +37 -0
- package/{js → components}/ln-toggle/src/ln-toggle.js +61 -46
- package/{js → components}/ln-tooltip/README.md +6 -6
- package/{js → components}/ln-tooltip/ln-tooltip-dev.scss +9 -9
- package/components/ln-tooltip/ln-tooltip.js +1 -0
- package/components/ln-tooltip/ln-tooltip.schema.json +86 -0
- package/components/ln-tooltip/ln-tooltip.scss +9 -0
- package/{js → components}/ln-tooltip/src/ln-tooltip.js +14 -3
- package/{js → components}/ln-translations/README.md +3 -1
- package/components/ln-translations/ln-translations-dev.scss +13 -0
- package/components/ln-translations/ln-translations.js +1 -0
- package/components/ln-translations/ln-translations.schema.json +120 -0
- package/{js → components}/ln-translations/src/ln-translations.js +25 -10
- package/components/ln-ui-coordinator/README.md +101 -0
- package/components/ln-ui-coordinator/ln-ui-coordinator-dev.scss +8 -0
- package/components/ln-ui-coordinator/ln-ui-coordinator.js +1 -0
- package/components/ln-ui-coordinator/ln-ui-coordinator.schema.json +60 -0
- package/{js/ln-modal-coordinator/src/ln-modal-coordinator.js → components/ln-ui-coordinator/src/ln-ui-coordinator.js} +403 -345
- package/components/ln-upload/README.md +133 -0
- package/components/ln-upload/ln-upload-dev.scss +18 -0
- package/components/ln-upload/ln-upload.js +1 -0
- package/components/ln-upload/ln-upload.schema.json +193 -0
- package/components/ln-upload/ln-upload.scss +20 -0
- package/components/ln-upload/src/ln-upload.js +652 -0
- package/components/ln-upload/src/upload-model.js +78 -0
- package/{js → components}/ln-validate/README.md +182 -180
- package/{js → components}/ln-validate/ln-validate-dev.scss +15 -15
- package/components/ln-validate/ln-validate.js +1 -0
- package/components/ln-validate/ln-validate.schema.json +50 -0
- package/components/ln-validate/ln-validate.scss +7 -0
- package/{js → components}/ln-validate/src/ln-validate.js +23 -45
- package/components/ln-validate/src/validate-model.js +64 -0
- package/components/ln-websocket-connector/README.md +166 -0
- package/components/ln-websocket-connector/ln-websocket-connector.js +1 -0
- package/components/ln-websocket-connector/ln-websocket-connector.schema.json +29 -0
- package/components/ln-websocket-connector/src/ln-websocket-connector.js +279 -0
- package/ln-ashlar.html-data.json +1796 -0
- package/package.json +84 -61
- package/{scss → theme}/base/_global.scss +1 -2
- package/{scss → theme}/base/_reset.scss +1 -1
- package/{scss → theme}/base/_typography.scss +2 -0
- package/theme/brand.css +73 -0
- package/{scss → theme}/components/_app-shell.scss +8 -0
- package/theme/components/_button.scss +24 -0
- package/theme/components/_chart.scss +5 -0
- package/theme/components/_confirm.scss +6 -0
- package/{scss → theme}/components/_date.scss +30 -22
- package/{scss → theme}/components/_dropdown.scss +6 -1
- package/theme/components/_form.scss +140 -0
- package/{scss → theme}/components/_layout.scss +6 -0
- package/{scss → theme}/components/_ln-table.scss +1 -6
- package/theme/components/_picklist.scss +3 -0
- package/{scss → theme}/components/_sort.scss +10 -10
- package/theme/components/_status-badge.scss +6 -0
- package/{scss → theme}/components/_table.scss +16 -0
- package/{scss → theme}/components/_tabs.scss +0 -4
- package/theme/components/_toast.scss +48 -0
- package/{scss → theme}/components/_toggle.scss +1 -1
- package/theme/components/_upload.scss +45 -0
- package/{scss → theme}/config/_breakpoints.scss +1 -1
- package/theme/config/_contrast.scss +128 -0
- package/{scss → theme}/config/_density.scss +191 -205
- package/theme/config/_palette.scss +274 -0
- package/theme/config/_theme.scss +293 -0
- package/{scss → theme}/config/_tokens.scss +285 -441
- package/{scss → theme}/config/mixins/_accordion.scss +1 -1
- package/{scss → theme}/config/mixins/_alert.scss +1 -0
- package/{scss → theme}/config/mixins/_app-shell.scss +4 -2
- package/{scss → theme}/config/mixins/_borders.scss +2 -0
- package/theme/config/mixins/_btn.scss +175 -0
- package/{scss → theme}/config/mixins/_card.scss +55 -46
- package/theme/config/mixins/_chart.scss +82 -0
- package/{scss → theme}/config/mixins/_collapsible.scss +2 -1
- package/{scss → theme}/config/mixins/_colors.scss +8 -14
- package/{scss → theme}/config/mixins/_diagnostics.scss +48 -48
- package/theme/config/mixins/_dropdown.scss +169 -0
- package/{scss → theme}/config/mixins/_editor.scss +0 -7
- package/{scss → theme}/config/mixins/_filter.scss +47 -47
- package/{scss → theme}/config/mixins/_footer.scss +1 -1
- package/{scss → theme}/config/mixins/_form.scss +49 -18
- package/{scss → theme}/config/mixins/_index.scss +62 -61
- package/{scss → theme}/config/mixins/_layout.scss +6 -2
- package/{scss → theme}/config/mixins/_ln-table.scss +31 -10
- package/{scss → theme}/config/mixins/_loader.scss +1 -1
- package/{scss → theme}/config/mixins/_modal.scss +145 -149
- package/{scss → theme}/config/mixins/_motion.scss +13 -0
- package/{scss → theme}/config/mixins/_nav.scss +7 -7
- package/theme/config/mixins/_picklist.scss +66 -0
- package/theme/config/mixins/_popover.scss +96 -0
- package/{scss → theme}/config/mixins/_sidebar.scss +7 -4
- package/{scss → theme}/config/mixins/_sort.scss +43 -42
- package/{scss → theme}/config/mixins/_status-badge.scss +15 -2
- package/{scss → theme}/config/mixins/_table.scss +25 -14
- package/{scss → theme}/config/mixins/_tabs.scss +1 -1
- package/{scss → theme}/config/mixins/_toast.scss +174 -179
- package/{scss → theme}/config/mixins/_tooltip.scss +2 -2
- package/{scss → theme}/config/mixins/_typography.scss +16 -5
- package/{scss → theme}/config/mixins/_upload.scss +8 -6
- package/theme/ln-ashlar-core.scss +24 -0
- package/theme/ln-ashlar-dev.scss +66 -0
- package/theme/ln-ashlar-landing.scss +56 -0
- package/{scss/ln-ashlar.scss → theme/ln-ashlar-theme.scss} +63 -69
- package/theme/ln-ashlar.scss +8 -0
- package/theme/presentation/_bento.scss +151 -0
- package/theme/presentation/_cta.scss +111 -0
- package/theme/presentation/_effects.scss +216 -0
- package/theme/presentation/_features.scss +108 -0
- package/theme/presentation/_footer.scss +129 -0
- package/theme/presentation/_hero.scss +158 -0
- package/theme/presentation/_layout.scss +170 -0
- package/theme/presentation/_navbar.scss +140 -0
- package/theme/presentation/_pricing.scss +262 -0
- package/theme/presentation/_stats.scss +87 -0
- package/theme/presentation/_testimonials.scss +124 -0
- package/theme/presentation/_tokens.scss +39 -0
- package/theme/presentation/_typography.scss +163 -0
- package/{scss → theme}/utilities/_animations.scss +38 -0
- package/{scss → theme}/utilities/_utilities.scss +6 -0
- package/web-types.json +2312 -0
- package/js/ln-accordion/ln-accordion.js +0 -1
- package/js/ln-ajax/ln-ajax.js +0 -1
- package/js/ln-api-connector/ln-api-connector.js +0 -1
- package/js/ln-api-connector/src/ln-api-connector.js +0 -368
- package/js/ln-api-queue/ln-api-queue.js +0 -1
- package/js/ln-autoresize/ln-autoresize.js +0 -1
- package/js/ln-autosave/ln-autosave.js +0 -1
- package/js/ln-circular-progress/ln-circular-progress.js +0 -1
- package/js/ln-confirm/_ln-confirm.scss +0 -24
- package/js/ln-confirm/ln-confirm.js +0 -1
- package/js/ln-core/crypto.js +0 -83
- package/js/ln-core/helpers.js +0 -788
- package/js/ln-core/index.js +0 -7
- package/js/ln-core/persist.js +0 -97
- package/js/ln-couchdb-connector/ln-couchdb-connector.js +0 -1
- package/js/ln-data-coordinator/ln-data-coordinator.js +0 -1
- package/js/ln-data-coordinator/src/data-read-policy.js +0 -18
- package/js/ln-data-store/ln-data-store.js +0 -1
- package/js/ln-date/ln-date.js +0 -1
- package/js/ln-date/src/ln-date.js +0 -603
- package/js/ln-debug/README.md +0 -58
- package/js/ln-debug/ln-debug.js +0 -1
- package/js/ln-debug/src/ln-debug.js +0 -19
- package/js/ln-dropdown/ln-dropdown.js +0 -1
- package/js/ln-dropdown/ln-dropdown.scss +0 -15
- package/js/ln-editor/ln-editor.js +0 -1
- package/js/ln-editor/ln-editor.scss +0 -43
- package/js/ln-external-links/ln-external-links.js +0 -1
- package/js/ln-fill/ln-fill.js +0 -1
- package/js/ln-filter/README.md +0 -189
- package/js/ln-filter/ln-filter-dev.scss +0 -8
- package/js/ln-filter/ln-filter.js +0 -1
- package/js/ln-filter/src/ln-filter.js +0 -419
- package/js/ln-form/ln-form.js +0 -1
- package/js/ln-http/ln-http.js +0 -1
- package/js/ln-link/ln-link.js +0 -1
- package/js/ln-list/README.md +0 -129
- package/js/ln-list/ln-list.js +0 -1
- package/js/ln-list/ln-list.scss +0 -28
- package/js/ln-modal/ln-modal-dev.scss +0 -13
- package/js/ln-modal/ln-modal.js +0 -1
- package/js/ln-modal/ln-modal.scss +0 -35
- package/js/ln-modal-coordinator/README.md +0 -99
- package/js/ln-modal-coordinator/ln-modal-coordinator-dev.scss +0 -8
- package/js/ln-modal-coordinator/ln-modal-coordinator.js +0 -1
- package/js/ln-nav/ln-nav.js +0 -1
- package/js/ln-number/README.md +0 -149
- package/js/ln-number/ln-number.js +0 -1
- package/js/ln-number/src/ln-number.js +0 -443
- package/js/ln-options/ln-options.js +0 -1
- package/js/ln-popover/ln-popover.js +0 -1
- package/js/ln-progress/ln-progress.js +0 -1
- package/js/ln-progress/src/ln-progress.js +0 -98
- package/js/ln-router/ln-router.js +0 -1
- package/js/ln-search/README.md +0 -158
- package/js/ln-search/ln-search-dev.scss +0 -8
- package/js/ln-search/ln-search.js +0 -1
- package/js/ln-search/src/ln-search.js +0 -117
- package/js/ln-slug/ln-slug.js +0 -1
- package/js/ln-sort/ln-sort.js +0 -1
- package/js/ln-sort/src/ln-sort.js +0 -178
- package/js/ln-sortable/ln-sortable.js +0 -1
- package/js/ln-stat/ln-stat.js +0 -1
- package/js/ln-table/ln-table.js +0 -1
- package/js/ln-table/ln-table.scss +0 -11
- package/js/ln-table-coordinator/README.md +0 -73
- package/js/ln-table-coordinator/ln-table-coordinator.js +0 -1
- package/js/ln-table-coordinator/src/ln-table-coordinator.js +0 -160
- package/js/ln-tabs/ln-tabs-dev.scss +0 -18
- package/js/ln-tabs/ln-tabs.js +0 -1
- package/js/ln-tabs/src/ln-tabs.js +0 -188
- package/js/ln-time/ln-time.js +0 -1
- package/js/ln-toast/ln-toast.js +0 -1
- package/js/ln-toggle/ln-toggle.js +0 -1
- package/js/ln-tooltip/ln-tooltip.js +0 -1
- package/js/ln-tooltip/ln-tooltip.scss +0 -9
- package/js/ln-translations/ln-translations.js +0 -1
- package/js/ln-upload/README.md +0 -255
- package/js/ln-upload/ln-upload.js +0 -1
- package/js/ln-upload/ln-upload.scss +0 -20
- package/js/ln-upload/src/ln-upload.js +0 -423
- package/js/ln-validate/ln-validate.js +0 -1
- package/scss/components/_button.scss +0 -20
- package/scss/components/_confirm.scss +0 -5
- package/scss/components/_form.scss +0 -107
- package/scss/components/_status-badge.scss +0 -4
- package/scss/components/_toast.scss +0 -68
- package/scss/components/_upload.scss +0 -51
- package/scss/config/_theme.scss +0 -216
- package/scss/config/mixins/_btn.scss +0 -179
- package/scss/config/mixins/_confirm.scss +0 -31
- package/scss/config/mixins/_dropdown.scss +0 -141
- package/scss/config/mixins/_popover.scss +0 -64
- package/scss/ln-ashlar-dev.scss +0 -39
- /package/{js → components}/ln-core/positioning.js +0 -0
- /package/{js → components}/ln-core/reactive.js +0 -0
- /package/{js → components}/ln-filter/ln-filter.scss +0 -0
- /package/{js → components}/ln-icon/ln-icon.js +0 -0
- /package/{js → components}/ln-icon/src/ln-icon.js +0 -0
- /package/{js → components}/ln-search/ln-search.scss +0 -0
- /package/{js → components}/ln-toast/template.html +0 -0
- /package/{scss → theme}/components/_accordion.scss +0 -0
- /package/{scss → theme}/components/_ajax.scss +0 -0
- /package/{scss → theme}/components/_alert.scss +0 -0
- /package/{scss → theme}/components/_avatar.scss +0 -0
- /package/{scss → theme}/components/_breadcrumbs.scss +0 -0
- /package/{scss → theme}/components/_card.scss +0 -0
- /package/{scss → theme}/components/_chip.scss +0 -0
- /package/{scss → theme}/components/_circular-progress.scss +0 -0
- /package/{scss → theme}/components/_editor.scss +0 -0
- /package/{scss → theme}/components/_empty-state.scss +0 -0
- /package/{scss → theme}/components/_filter.scss +0 -0
- /package/{scss → theme}/components/_link.scss +0 -0
- /package/{scss → theme}/components/_loader.scss +0 -0
- /package/{scss → theme}/components/_modal.scss +0 -0
- /package/{scss → theme}/components/_nav.scss +0 -0
- /package/{scss → theme}/components/_page-header.scss +0 -0
- /package/{scss → theme}/components/_popover.scss +0 -0
- /package/{scss → theme}/components/_progress.scss +0 -0
- /package/{scss → theme}/components/_prose.scss +0 -0
- /package/{scss → theme}/components/_scrollbar.scss +0 -0
- /package/{scss → theme}/components/_sections.scss +0 -0
- /package/{scss → theme}/components/_sidebar.scss +0 -0
- /package/{scss → theme}/components/_stat-card.scss +0 -0
- /package/{scss → theme}/components/_stepper.scss +0 -0
- /package/{scss → theme}/components/_timeline.scss +0 -0
- /package/{scss → theme}/components/_tooltip.scss +0 -0
- /package/{scss → theme}/components/_translations.scss +0 -0
- /package/{scss → theme}/config/_icons.scss +0 -0
- /package/{scss → theme}/config/_mixins.scss +0 -0
- /package/{scss → theme}/config/mixins/_ajax.scss +0 -0
- /package/{scss → theme}/config/mixins/_avatar.scss +0 -0
- /package/{scss → theme}/config/mixins/_breadcrumbs.scss +0 -0
- /package/{scss → theme}/config/mixins/_breakpoints.scss +0 -0
- /package/{scss → theme}/config/mixins/_chip.scss +0 -0
- /package/{scss → theme}/config/mixins/_circular-progress.scss +0 -0
- /package/{scss → theme}/config/mixins/_display.scss +0 -0
- /package/{scss → theme}/config/mixins/_empty-state.scss +0 -0
- /package/{scss → theme}/config/mixins/_focus.scss +0 -0
- /package/{scss → theme}/config/mixins/_interaction.scss +0 -0
- /package/{scss → theme}/config/mixins/_kbd.scss +0 -0
- /package/{scss → theme}/config/mixins/_link.scss +0 -0
- /package/{scss → theme}/config/mixins/_page-header.scss +0 -0
- /package/{scss → theme}/config/mixins/_position.scss +0 -0
- /package/{scss → theme}/config/mixins/_progress.scss +0 -0
- /package/{scss → theme}/config/mixins/_prose.scss +0 -0
- /package/{scss → theme}/config/mixins/_shadows.scss +0 -0
- /package/{scss → theme}/config/mixins/_sizing.scss +0 -0
- /package/{scss → theme}/config/mixins/_spacing.scss +0 -0
- /package/{scss → theme}/config/mixins/_stat-card.scss +0 -0
- /package/{scss → theme}/config/mixins/_stepper.scss +0 -0
- /package/{scss → theme}/config/mixins/_timeline.scss +0 -0
- /package/{scss → theme}/config/mixins/_transitions.scss +0 -0
- /package/{scss → theme}/config/mixins/_translations.scss +0 -0
- /package/{scss → theme}/tabler-icons.txt +0 -0
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# ln-modal
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Applied to a `<dialog data-ln-modal id="...">`, paired with a `<button data-ln-modal-for="...">` and dismiss buttons (`data-ln-modal-close`).
|
|
4
|
+
> On trigger `click`, it sets `data-ln-modal="open"`, calls `dialog.showModal()`, and adds `.ln-modal-open` to `document.body`.
|
|
5
|
+
> On dismiss `click`, backdrop click, or native `Escape`, it sets `data-ln-modal="close"`, calls `dialog.close()`, and removes `.ln-modal-open`.
|
|
4
6
|
|
|
5
7
|
---
|
|
6
8
|
|
|
@@ -13,7 +15,7 @@ In `ln-ashlar`, the core design principle is **Three-Layer Architecture** and **
|
|
|
13
15
|
1. **State & Accessibility (JavaScript + native `<dialog>`)**: The `ln-modal` script manages the binary `open` / `close` attribute contract (`data-ln-modal="open|close"`) and suppresses `<body>` scrolling (toggling the `.ln-modal-open` class on `<body>`). Focus placement, native focus trapping, ESC dismissal, and focus restoration are delegated to the native `<dialog>` element via `showModal()`/`close()`.
|
|
14
16
|
2. **The Content Root (HTML)**: The modal content root is structured in standard semantic HTML (such as `<dialog class="ln-modal" data-ln-modal>`).
|
|
15
17
|
3. **Visual Presentation & Sizing (CSS)**: Overlay backdrops, sticky headers/footers, and scrollable body areas are styled using Vanilla CSS. Sizing variants (`modal-sm|md|lg|xl`) are applied via SCSS mixins on `> form`, keeping markup clean.
|
|
16
|
-
4. **Layer Separation (Coordinators)**: `ln-modal` does NOT handle form submissions, auto-closing on AJAX success, validation error inspection, or DOM data population. Those responsibilities belong strictly to **Layer 2 Coordinators** (e.g. `ln-
|
|
18
|
+
4. **Layer Separation (Coordinators)**: `ln-modal` does NOT handle form submissions, auto-closing on AJAX success, validation error inspection, or DOM data population. Those responsibilities belong strictly to **Layer 2 Coordinators** (e.g. `ln-ui-coordinator` or `ln-data-coordinator`).
|
|
17
19
|
|
|
18
20
|
---
|
|
19
21
|
|
|
@@ -60,9 +62,9 @@ Triggers and modals are paired by ID. The overlay has `class="ln-modal"` and `da
|
|
|
60
62
|
|
|
61
63
|
## 3. Declarative API & State Contract
|
|
62
64
|
|
|
63
|
-
|
|
65
|
+
State changes are driven declaratively via the `data-ln-modal` attribute (`"open"` / `"close"`). **The HTML attribute is the sole source of truth.**
|
|
64
66
|
|
|
65
|
-
Coordinators and external scripts request state changes by dispatching request events
|
|
67
|
+
Coordinators and external scripts request state changes by dispatching request events, writing the attribute on the modal element, or calling the instance attribute-bridge methods:
|
|
66
68
|
|
|
67
69
|
```js
|
|
68
70
|
const modal = document.getElementById('user-modal');
|
|
@@ -73,8 +75,10 @@ modal.dispatchEvent(new CustomEvent('ln-modal:request-open', { bubbles: true }))
|
|
|
73
75
|
// Or set attribute directly
|
|
74
76
|
modal.setAttribute('data-ln-modal', 'open');
|
|
75
77
|
|
|
76
|
-
//
|
|
77
|
-
modal.
|
|
78
|
+
// Or via instance attribute-bridge methods
|
|
79
|
+
modal.lnModal.open();
|
|
80
|
+
modal.lnModal.close();
|
|
81
|
+
modal.lnModal.toggle();
|
|
78
82
|
|
|
79
83
|
// Read-only state query
|
|
80
84
|
const isOpen = modal.lnModal.isOpen; // Returns true/false
|
|
@@ -99,7 +103,6 @@ All events bubble (`bubbles: true`). The dispatch target is the overlay element.
|
|
|
99
103
|
| **`ln-modal:open`** | Emits | No | Dispatched after modal is active, body scroll locked, and initial focus set. |
|
|
100
104
|
| **`ln-modal:before-close`** | Emits | **Yes** | Dispatched before closing. Calling `event.preventDefault()` cancels the close transition. |
|
|
101
105
|
| **`ln-modal:close`** | Emits | No | Dispatched after modal is closed, scroll locks released, and focus restored. |
|
|
102
|
-
| **`ln-modal:destroyed`** | Emits | No | Dispatched when the component instance is destroyed. |
|
|
103
106
|
|
|
104
107
|
```js
|
|
105
108
|
// Example: Block close transition if form has unsaved changes
|
|
@@ -147,7 +150,7 @@ Do not use visual layout utility classes in your markup. Apply structural sizing
|
|
|
147
150
|
Any modal with an `id` is hash-addressable (e.g. `#user-modal` or `#user-modal:42`).
|
|
148
151
|
When an `id` modal opens, `ln-modal` emits `ln-modal:open` containing `{ hashNs, param }` in `e.detail`.
|
|
149
152
|
|
|
150
|
-
Coordinators (such as `ln-
|
|
153
|
+
Coordinators (such as `ln-ui-coordinator`) intercept hash changes and coordinate data fetching / form populating via `ln-fill`.
|
|
151
154
|
|
|
152
155
|
---
|
|
153
156
|
|
|
@@ -160,7 +163,7 @@ Coordinators (such as `ln-modal-coordinator`) intercept hash changes and coordin
|
|
|
160
163
|
|
|
161
164
|
## 🔧 Internals
|
|
162
165
|
|
|
163
|
-
Source: `
|
|
166
|
+
Source: `components/ln-modal/src/ln-modal.js` (~137 lines, native `<dialog>`-backed). Trigger delegation (`data-ln-modal-for`), hash-addressing, and form-fill on open are NOT implemented here — they live in `components/ln-ui-coordinator/src/ln-ui-coordinator.js` (a Layer 2 coordinator per §1.4). This section covers `ln-modal.js` only.
|
|
164
167
|
|
|
165
168
|
### Single source of truth
|
|
166
169
|
|
|
@@ -182,4 +185,4 @@ The instance listens for `ln-modal:request-open`/`request-close` on the modal el
|
|
|
182
185
|
|
|
183
186
|
### Destroy
|
|
184
187
|
|
|
185
|
-
Removes the four listeners (`request-open`, `request-close`, `cancel`, `click`), releases the body scroll-lock class if this was the last open modal,
|
|
188
|
+
Removes the four listeners (`request-open`, `request-close`, `cancel`, `click`), releases the body scroll-lock class if this was the last open modal, deletes the instance.
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@use '../../theme/config/mixins' as *;
|
|
2
|
+
|
|
3
|
+
[data-ln-debug] {
|
|
4
|
+
// 1. Modal Missing ID: dialogs controlled by data-ln-modal must have an id for trigger linking
|
|
5
|
+
dialog[data-ln-modal]:not([id]) {
|
|
6
|
+
@include dev-dom-error("[data-ln-modal] is missing a required 'id' attribute for trigger linking.");
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// 2. Modal Trigger Check: [data-ln-modal-for] cannot have an empty target ID
|
|
10
|
+
[data-ln-modal-for=""] {
|
|
11
|
+
@include dev-inline-error("data-ln-modal-for is missing a target modal id");
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// 3. Non-dialog modal: data-ln-modal must be on a <dialog> element (native showModal/close)
|
|
15
|
+
[data-ln-modal]:not(dialog) {
|
|
16
|
+
@include dev-inline-error("data-ln-modal must be on a <dialog> element");
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(){"use strict";function x(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function C(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let r=null;for(let l=1;l<t.length;l++)if(t[l]&&t[l].nodeType===1){r=t[l];break}if(!C(r))return}e.apply(console,t)}}function m(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function $(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r);const l=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:r});return e.dispatchEvent(l),l}function b(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){b(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}function y(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}const D={};function V(e,t){D[e]=t}function H(e){return D[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=V,window.lnCore.getDataMapper=H);function U(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,b(function(){new MutationObserver(function(){m(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const I={};function Q(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];I[n]=t}function K(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return I[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=Q,window.lnCore.getLocaleFallback=K,window.lnCore.ensureLocaleObserver=U);const A={};function P(e,t){A[e]||(A[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=A[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function R(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let i=0;i<n.length;i++){const d=n[i],s=d.getAttribute("data-ln-field");t[s]!=null&&(d.textContent=t[s])}const r=e.querySelectorAll("[data-ln-attr]");for(let i=0;i<r.length;i++){const d=r[i],s=d.getAttribute("data-ln-attr").split(",");for(let c=0;c<s.length;c++){const u=s[c].trim().split(":");if(u.length!==2)continue;const a=u[0].trim(),f=u[1].trim();t[f]!=null&&d.setAttribute(a,t[f])}}const l=e.querySelectorAll("[data-ln-show]");for(let i=0;i<l.length;i++){const d=l[i],s=d.getAttribute("data-ln-show");s in t&&d.classList.toggle("hidden",!t[s])}const o=e.querySelectorAll("[data-ln-class]");for(let i=0;i<o.length;i++){const d=o[i],s=d.getAttribute("data-ln-class").split(",");for(let c=0;c<s.length;c++){const u=s[c].trim().split(":");if(u.length!==2)continue;const a=u[0].trim(),f=u[1].trim();f in t&&d.classList.toggle(a,!!t[f])}}return e}function G(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)R(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function T(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const o=n.currentNode;o.textContent.indexOf("{{")!==-1&&(o.textContent=o.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,d){return t[d]!==void 0?t[d]:""}))}const r=function(o,i){return t[i]!==void 0?t[i]:""},l=Array.from(e.querySelectorAll("*"));e.nodeType===1&&l.push(e);for(let o=0;o<l.length;o++){const i=l[o],d=i.attributes;for(let s=0;s<d.length;s++){const c=d[s];c.value.indexOf("{{")!==-1&&i.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function J(e,t,n,r,l,o){const i={};for(let s=0;s<e.children.length;s++){const c=e.children[s],u=c.getAttribute("data-ln-render-key");u&&(i[u]=c)}const d=document.createDocumentFragment();for(let s=0;s<t.length;s++){const c=t[s],u=String(r(c));let a=i[u];if(a)l(a,c,s);else{const f=P(n,o);if(!f||(T(f,c),a=f.firstElementChild,!a))continue;a.setAttribute("data-ln-render-key",u),l(a,c,s)}d.appendChild(a)}e.textContent="",e.appendChild(d)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=T,window.lnCore.fill=R,window.lnCore.lnFill=G,window.lnCore.renderList=J);function M(e,t,n,r,l){if(!e||t===null)return!0;const o=r||"ln-component",i=e.type;if(i==="trigger"||i==="marker"||i==="string"||i==="list"||!i||t===""&&e.fallback!==void 0)return!0;const d=s=>{l?console.warn(s,l):console.warn(s)};if(i==="boolean"){const s=t.trim().toLowerCase();return s!==""&&s!=="true"&&s!=="false"&&s!=="1"&&s!=="0"?(d(`[${o}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(i==="enum"){const s=e.values||[];return s.includes(t)?!0:(d(`[${o}] Invalid value "${t}" for attribute "${n}". Allowed: ${s.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(i==="integer"){if(!/^-?\d+$/.test(t))return d(`[${o}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const s=parseInt(t,10);return e.min!==void 0&&s<e.min?(d(`[${o}] Value ${s} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&s>e.max?(d(`[${o}] Value ${s} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(i==="float")return isNaN(Number(t))?(d(`[${o}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(i==="json")try{return JSON.parse(t),!0}catch(s){return d(`[${o}] Invalid JSON for attribute "${n}": ${s.message}. Fallback: ${e.fallback}.`),!1}return!0}function X(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function z(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function v(e,t,n,r){if(e.nodeType!==1)return;const o=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",i=Array.from(e.querySelectorAll(o));e.matches&&e.matches(o)&&i.push(e);for(const d of i)if(!d[n]){window.lnCore._persistSink&&d.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(d,t);try{d[n]=new r(d)}catch(s){console.error("["+n+"] init failed",d,s)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function Y(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function Z(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function F(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function ee(e){const t=F(),n=e.observed||[];for(let r=0;r<n.length;r++){const l=n[r];t.byAttr.has(l)||t.byAttr.set(l,[]),t.byAttr.get(l).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const l=t.byDeclaredAttr.get(r);l.some(o=>o.componentTag===e.componentTag)||l.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=z(e);if(r===null)t.reactiveWildcard.push(e);else for(const l of r)t.byReactive.has(l)||t.byReactive.set(l,[]),t.byReactive.get(l).push(e)}e.persist&&t.persist.push(e)}function B(e,t,n,r){for(let l=0;l<e.length;l++){const o=e[l];if(!t[o.attribute])continue;const i=o.effects&&o.effects[n];i?i(t,n,r):o.onAttrChange&&(!o.declared||o.declared.has(n))&&o.onAttrChange(t,n,r)}}function te(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=F(),l=r.byAttr.get(n);if(x()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&C(t)){const o=r.byDeclaredAttr.get(n),i=t.getAttribute(n);for(let d=0;d<o.length;d++)M(o[d].spec,i,n,o[d].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||l)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const o=r.byReactive.get(n);o&&B(o,t,n,e.oldValue),r.reactiveWildcard.length&&B(r.reactiveWildcard,t,n,e.oldValue)}if(l)for(let o=0;o<l.length;o++){const i=l[o];if(i.handler){i.handler(t,n,e.oldValue);continue}i.onAttributeChange&&t[i.attribute]?i.onAttributeChange(t,n):(v(t,i.selector,i.attribute,i.ComponentFn),i.onInit&&i.onInit(t))}}function ne(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,b(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{te(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function W(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function oe(e){const t=W();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const l=r.query,o=e.target.nodeType===1?e.target.matches(l)?e.target:e.target.closest(l):e.target.parentElement?e.target.parentElement.closest(l):null;o&&r.onSubtreeChange(o,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let l=0;l<t.length;l++){const o=t[l];v(r,o.selector,o.attribute,o.ComponentFn),o.onInit&&o.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let l=0;l<t.length;l++){const o=t[l],i=o.query,d=Array.from(r.querySelectorAll(i));r.matches&&r.matches(i)&&d.push(r);for(let s=0;s<d.length;s++){const c=d[s];if(!document.contains(c)){const u=c[o.attribute];if(u&&typeof u.destroy=="function")try{u.destroy()}catch(a){console.error("["+o.attribute+"] destroy failed",c,a)}delete c[o.attribute]}}}}}}function re(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,b(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{oe(r)}catch(l){console.error("[ln-core] lifecycle handler failed",r.target,l)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function ie(e,t,n,r,l={}){const o=l.extraAttributes||[],i=l.onAttributeChange||null,d=l.onSubtreeChange||null,s=l.onInit||null,c=l.onAttrChange||null,u=l.effects||null,a=l.attributes||null,f=a?X(a):u,S=a?new Set(Object.keys(a)):null,p=l.persist||null;function g(O){const w=O||document.body;if(v(w,e,t,n),a&&x())for(const h in a){const be=a[h],L=Array.from(w.querySelectorAll("["+h+"]"));w.matches&&w.matches("["+h+"]")&&L.push(w);for(let E=0;E<L.length;E++){const q=L[E];C(q)&&M(be,q.getAttribute(h),h,r,q)}}s&&s(w)}const k=[];if(e.indexOf("[")!==-1){const O=/\[([\w-]+)/g;let w;for(;(w=O.exec(e))!==null;)k.push(w[1])}else k.push(e);ee({selector:e,attribute:t,componentTag:r,attributes:a,ComponentFn:n,onInit:s,observed:k.concat(o),onAttributeChange:i,onAttrChange:c,effects:f,declared:S,persist:p}),ne();const he=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";W().push({selector:e,attribute:t,ComponentFn:n,onInit:s,onSubtreeChange:d,query:he}),re(),window[t]=g;function N(){Y()>0?Z(function(){g(document.body)}):g(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",N):N(),g}function j(e){return(e||"").replace(/^#/,"")}function _(e){const t=e===void 0?location.hash:e,n={},r=j(t);if(!r)return n;const l=r.split("&");for(let o=0;o<l.length;o++){const i=l[o];if(!i)continue;const d=i.indexOf(":"),s=d>-1?i.slice(0,d):i,c=d>-1?i.slice(d+1):"";if(s)try{n[s]=decodeURIComponent(c)}catch{n[s]=c}}return n}function le(e){if(!e)return null;const t=_();return e in t?t[e]:null}function se(e,t){if(!e)return;const n=_();t==null?delete n[e]:n[e]=String(t);const l=Object.keys(n).map(function(o){const i=n[o];return i===""?o:o+":"+encodeURIComponent(i)}).join("&");j(location.hash)!==l&&(location.hash=l)}function de(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function ce(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function ue(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function ae(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function fe(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function we(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),l=r?r.split(",").map(function(o){try{return decodeURIComponent(o)}catch{return o}}).filter(Boolean):[];return{key:n,values:l}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=_,window.lnCore.hashGet=le,window.lnCore.hashSet=se,window.lnCore.hashLinkClick=de,window.lnCore.resolveHashNamespace=ce,window.lnCore.hashSortEncode=ue,window.lnCore.hashSortDecode=ae,window.lnCore.hashFilterEncode=fe,window.lnCore.hashFilterDecode=we),(function(){const e="data-ln-modal",t="lnModal";if(window[t]!==void 0)return;const n={"data-ln-modal":{type:"enum",values:["open","close"],fallback:"close",effect:l,description:"Control state of the modal dialog"},"data-ln-modal-close":{type:"trigger",description:"Click dismiss trigger inside the modal"}};function r(o){this.dom=o,this.isOpen=o.getAttribute(e)==="open";const i=this;return this._onRequestOpen=function(){i.dom.setAttribute(e,"open")},this._onRequestClose=function(){i.dom.setAttribute(e,"close")},this._onCancel=function(d){d.preventDefault(),i.dom.setAttribute(e,"close")},this._onClickClose=function(d){const s=d.target.closest("[data-ln-modal-close]");s&&i.dom.contains(s)&&(d.preventDefault(),i.dom.setAttribute(e,"close"))},this.dom.addEventListener("ln-modal:request-open",this._onRequestOpen),this.dom.addEventListener("ln-modal:request-close",this._onRequestClose),this.dom.addEventListener("cancel",this._onCancel),this.dom.addEventListener("click",this._onClickClose),this.isOpen&&(typeof this.dom.showModal=="function"&&this.dom.showModal(),document.body.classList.add("ln-modal-open")),this}r.prototype.open=function(){this.dom.setAttribute(e,"open")},r.prototype.close=function(){this.dom.setAttribute(e,"close")},r.prototype.toggle=function(){const o=this.dom.getAttribute(e);this.dom.setAttribute(e,o==="open"?"close":"open")},r.prototype.destroy=function(){if(this.dom[t]){if(this.dom.removeEventListener("ln-modal:request-open",this._onRequestOpen),this.dom.removeEventListener("ln-modal:request-close",this._onRequestClose),this.dom.removeEventListener("cancel",this._onCancel),this.dom.removeEventListener("click",this._onClickClose),this.isOpen){const o=this.dom;Array.prototype.some.call(document.querySelectorAll("["+e+'="open"]'),function(d){return d!==o})||document.body.classList.remove("ln-modal-open")}delete this.dom[t]}};function l(o){const i=o[t];if(!i)return;const s=o.getAttribute(e)==="open";if(s!==i.isOpen)if(s){if($(o,"ln-modal:before-open",{modalId:o.id,target:o}).defaultPrevented){o.setAttribute(e,"close");return}i.isOpen=!0,document.body.classList.add("ln-modal-open"),typeof o.showModal=="function"&&o.showModal();const u=o.querySelector("[autofocus]");if(u&&y(u))u.focus();else{const a=o.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'),f=Array.prototype.find.call(a,y);if(f)f.focus();else{const S=o.querySelectorAll("a[href], button:not([disabled])"),p=Array.prototype.find.call(S,y);p&&p.focus()}}m(o,"ln-modal:open",{modalId:o.id,target:o})}else{if($(o,"ln-modal:before-close",{modalId:o.id,target:o}).defaultPrevented){o.setAttribute(e,"open");return}i.isOpen=!1,m(o,"ln-modal:close",{modalId:o.id,target:o}),typeof o.close=="function"&&o.close(),document.querySelector("["+e+'="open"]')||document.body.classList.remove("ln-modal-open")}}ie(e,t,r,"ln-modal",{attributes:n})})()})();
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
|
|
3
|
+
"component": "ln-modal",
|
|
4
|
+
"generator": "scripts/sync-ln-schemas.mjs",
|
|
5
|
+
"attributes": {
|
|
6
|
+
"data-ln-debug": {
|
|
7
|
+
"direction": null,
|
|
8
|
+
"sources": [
|
|
9
|
+
"ln-modal-dev.scss"
|
|
10
|
+
]
|
|
11
|
+
},
|
|
12
|
+
"data-ln-modal": {
|
|
13
|
+
"direction": "both",
|
|
14
|
+
"sources": [
|
|
15
|
+
"ln-modal-dev.scss",
|
|
16
|
+
"ln-modal.scss",
|
|
17
|
+
"src/ln-modal.js"
|
|
18
|
+
],
|
|
19
|
+
"type": "enum",
|
|
20
|
+
"values": [
|
|
21
|
+
"open",
|
|
22
|
+
"close"
|
|
23
|
+
],
|
|
24
|
+
"fallback": "close",
|
|
25
|
+
"description": "Control state of the modal dialog"
|
|
26
|
+
},
|
|
27
|
+
"data-ln-modal-close": {
|
|
28
|
+
"direction": "author",
|
|
29
|
+
"sources": [
|
|
30
|
+
"src/ln-modal.js"
|
|
31
|
+
],
|
|
32
|
+
"type": "trigger",
|
|
33
|
+
"description": "Click dismiss trigger inside the modal"
|
|
34
|
+
},
|
|
35
|
+
"data-ln-modal-for": {
|
|
36
|
+
"direction": null,
|
|
37
|
+
"sources": [
|
|
38
|
+
"ln-modal-dev.scss"
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
"data-ln-modal-mode": {
|
|
42
|
+
"direction": null,
|
|
43
|
+
"sources": [
|
|
44
|
+
"ln-modal.scss"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
"data-ln-modal-when": {
|
|
48
|
+
"direction": null,
|
|
49
|
+
"sources": [
|
|
50
|
+
"ln-modal.scss"
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// ==========================================================================
|
|
2
|
+
// ln-modal — Functional & Accessibility Layout Rules
|
|
3
|
+
// ==========================================================================
|
|
4
|
+
// data-ln-modal drives visibility. JS calls native showModal()/close().
|
|
5
|
+
// This attribute is the CSS surface: reset native <dialog> UA styles,
|
|
6
|
+
// layout centering, backdrop positioning, and modal scroll-lock.
|
|
7
|
+
// ZERO theme variables, colors, or typography.
|
|
8
|
+
// ==========================================================================
|
|
9
|
+
|
|
10
|
+
[data-ln-modal] {
|
|
11
|
+
background: transparent;
|
|
12
|
+
border: none;
|
|
13
|
+
padding: 0;
|
|
14
|
+
margin: 0;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
max-width: none;
|
|
18
|
+
max-height: none;
|
|
19
|
+
color: inherit;
|
|
20
|
+
overflow: visible;
|
|
21
|
+
display: none;
|
|
22
|
+
|
|
23
|
+
&[data-ln-modal="open"] {
|
|
24
|
+
display: flex;
|
|
25
|
+
position: fixed;
|
|
26
|
+
inset: 0;
|
|
27
|
+
z-index: 1000;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&::backdrop {
|
|
33
|
+
position: fixed;
|
|
34
|
+
inset: 0;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Prevent body scroll when modal is open
|
|
39
|
+
body.ln-modal-open {
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Mode-conditional title variants: shown only when ancestor modal matches the mode
|
|
44
|
+
[data-ln-modal-when] {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[data-ln-modal-mode="new"] [data-ln-modal-when="new"],
|
|
49
|
+
[data-ln-modal-mode="edit"] [data-ln-modal-when="edit"] {
|
|
50
|
+
display: inline;
|
|
51
|
+
}
|
|
@@ -1,137 +1,164 @@
|
|
|
1
|
-
import { registerComponent, dispatch, dispatchCancelable, isVisible } from '../../ln-core';
|
|
2
|
-
|
|
3
|
-
(function () {
|
|
4
|
-
const DOM_SELECTOR = 'data-ln-modal';
|
|
5
|
-
const DOM_ATTRIBUTE = 'lnModal';
|
|
6
|
-
|
|
7
|
-
if (window[DOM_ATTRIBUTE] !== undefined) return;
|
|
8
|
-
|
|
9
|
-
// ───
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
this.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
//
|
|
33
|
-
this.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
this.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
this.dom.
|
|
59
|
-
this.dom.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
if (
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
if (typeof el.
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
1
|
+
import { registerComponent, dispatch, dispatchCancelable, isVisible } from '../../ln-core';
|
|
2
|
+
|
|
3
|
+
(function () {
|
|
4
|
+
const DOM_SELECTOR = 'data-ln-modal';
|
|
5
|
+
const DOM_ATTRIBUTE = 'lnModal';
|
|
6
|
+
|
|
7
|
+
if (window[DOM_ATTRIBUTE] !== undefined) return;
|
|
8
|
+
|
|
9
|
+
// ─── Attribute Contract (SSOT) ──────────────────────────
|
|
10
|
+
const ATTRIBUTES = {
|
|
11
|
+
'data-ln-modal': {
|
|
12
|
+
type: 'enum',
|
|
13
|
+
values: ['open', 'close'],
|
|
14
|
+
fallback: 'close',
|
|
15
|
+
effect: _syncAttribute,
|
|
16
|
+
description: 'Control state of the modal dialog'
|
|
17
|
+
},
|
|
18
|
+
'data-ln-modal-close': {
|
|
19
|
+
type: 'trigger',
|
|
20
|
+
description: 'Click dismiss trigger inside the modal'
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// ─── Component Constructor ─────────────────────────────
|
|
25
|
+
|
|
26
|
+
function _component(dom) {
|
|
27
|
+
this.dom = dom;
|
|
28
|
+
this.isOpen = dom.getAttribute(DOM_SELECTOR) === 'open';
|
|
29
|
+
|
|
30
|
+
const self = this;
|
|
31
|
+
|
|
32
|
+
// Command listeners for request events
|
|
33
|
+
this._onRequestOpen = function () {
|
|
34
|
+
self.dom.setAttribute(DOM_SELECTOR, 'open');
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
this._onRequestClose = function () {
|
|
38
|
+
self.dom.setAttribute(DOM_SELECTOR, 'close');
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// Native dialog ESC cancel interception
|
|
42
|
+
this._onCancel = function (e) {
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
self.dom.setAttribute(DOM_SELECTOR, 'close');
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
// Dismiss trigger buttons inside modal [data-ln-modal-close]
|
|
48
|
+
this._onClickClose = function (e) {
|
|
49
|
+
const closeBtn = e.target.closest('[data-ln-modal-close]');
|
|
50
|
+
if (closeBtn && self.dom.contains(closeBtn)) {
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
self.dom.setAttribute(DOM_SELECTOR, 'close');
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
this.dom.addEventListener('ln-modal:request-open', this._onRequestOpen);
|
|
57
|
+
this.dom.addEventListener('ln-modal:request-close', this._onRequestClose);
|
|
58
|
+
this.dom.addEventListener('cancel', this._onCancel);
|
|
59
|
+
this.dom.addEventListener('click', this._onClickClose);
|
|
60
|
+
|
|
61
|
+
// Apply initial state if rendered with open attribute
|
|
62
|
+
if (this.isOpen) {
|
|
63
|
+
if (typeof this.dom.showModal === 'function') this.dom.showModal();
|
|
64
|
+
document.body.classList.add('ln-modal-open');
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return this;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
_component.prototype.open = function () {
|
|
71
|
+
this.dom.setAttribute(DOM_SELECTOR, 'open');
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
_component.prototype.close = function () {
|
|
75
|
+
this.dom.setAttribute(DOM_SELECTOR, 'close');
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
_component.prototype.toggle = function () {
|
|
79
|
+
const current = this.dom.getAttribute(DOM_SELECTOR);
|
|
80
|
+
this.dom.setAttribute(DOM_SELECTOR, current === 'open' ? 'close' : 'open');
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
_component.prototype.destroy = function () {
|
|
84
|
+
if (!this.dom[DOM_ATTRIBUTE]) return;
|
|
85
|
+
|
|
86
|
+
this.dom.removeEventListener('ln-modal:request-open', this._onRequestOpen);
|
|
87
|
+
this.dom.removeEventListener('ln-modal:request-close', this._onRequestClose);
|
|
88
|
+
this.dom.removeEventListener('cancel', this._onCancel);
|
|
89
|
+
this.dom.removeEventListener('click', this._onClickClose);
|
|
90
|
+
|
|
91
|
+
if (this.isOpen) {
|
|
92
|
+
const dom = this.dom;
|
|
93
|
+
const otherOpen = Array.prototype.some.call(
|
|
94
|
+
document.querySelectorAll('[' + DOM_SELECTOR + '="open"]'),
|
|
95
|
+
function (el) { return el !== dom; }
|
|
96
|
+
);
|
|
97
|
+
if (!otherOpen) {
|
|
98
|
+
document.body.classList.remove('ln-modal-open');
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
delete this.dom[DOM_ATTRIBUTE];
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
// ─── Attribute Sync (Single Source of Truth) ───────────
|
|
106
|
+
|
|
107
|
+
function _syncAttribute(el) {
|
|
108
|
+
const instance = el[DOM_ATTRIBUTE];
|
|
109
|
+
if (!instance) return;
|
|
110
|
+
|
|
111
|
+
const value = el.getAttribute(DOM_SELECTOR);
|
|
112
|
+
const shouldBeOpen = value === 'open';
|
|
113
|
+
|
|
114
|
+
if (shouldBeOpen === instance.isOpen) return;
|
|
115
|
+
|
|
116
|
+
if (shouldBeOpen) {
|
|
117
|
+
const before = dispatchCancelable(el, 'ln-modal:before-open', { modalId: el.id, target: el });
|
|
118
|
+
if (before.defaultPrevented) {
|
|
119
|
+
el.setAttribute(DOM_SELECTOR, 'close');
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
instance.isOpen = true;
|
|
123
|
+
document.body.classList.add('ln-modal-open');
|
|
124
|
+
if (typeof el.showModal === 'function') el.showModal();
|
|
125
|
+
|
|
126
|
+
// Focus placement
|
|
127
|
+
const autoFocusEl = el.querySelector('[autofocus]');
|
|
128
|
+
if (autoFocusEl && isVisible(autoFocusEl)) {
|
|
129
|
+
autoFocusEl.focus();
|
|
130
|
+
} else {
|
|
131
|
+
const inputs = el.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])');
|
|
132
|
+
const firstInput = Array.prototype.find.call(inputs, isVisible);
|
|
133
|
+
if (firstInput) firstInput.focus();
|
|
134
|
+
else {
|
|
135
|
+
const buttons = el.querySelectorAll('a[href], button:not([disabled])');
|
|
136
|
+
const firstFocusable = Array.prototype.find.call(buttons, isVisible);
|
|
137
|
+
if (firstFocusable) firstFocusable.focus();
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
dispatch(el, 'ln-modal:open', { modalId: el.id, target: el });
|
|
142
|
+
} else {
|
|
143
|
+
const before = dispatchCancelable(el, 'ln-modal:before-close', { modalId: el.id, target: el });
|
|
144
|
+
if (before.defaultPrevented) {
|
|
145
|
+
el.setAttribute(DOM_SELECTOR, 'open');
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
instance.isOpen = false;
|
|
149
|
+
dispatch(el, 'ln-modal:close', { modalId: el.id, target: el });
|
|
150
|
+
|
|
151
|
+
if (typeof el.close === 'function') el.close();
|
|
152
|
+
|
|
153
|
+
if (!document.querySelector('[' + DOM_SELECTOR + '="open"]')) {
|
|
154
|
+
document.body.classList.remove('ln-modal-open');
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// ─── Init ──────────────────────────────────────────────
|
|
160
|
+
|
|
161
|
+
registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-modal', {
|
|
162
|
+
attributes: ATTRIBUTES
|
|
163
|
+
});
|
|
164
|
+
})();
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
# ln-nav
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
> Applied to a `<nav data-ln-nav="className">` element. On initialization and on `popstate` or `pushState` events,
|
|
4
|
+
> it compares each child `<a href>` against `window.location.pathname`. It adds the configured class name and `aria-current="page"`
|
|
5
|
+
> to the matching link while removing them from inactive siblings, updating automatically when the DOM or browser URL changes.
|
|
5
6
|
|
|
6
7
|
## Integration
|
|
7
8
|
|
|
@@ -14,12 +15,12 @@ To load `ln-nav` as part of the unified `ln-ashlar` bundle, include the main scr
|
|
|
14
15
|
### Standalone (Zero-Dependency IIFE)
|
|
15
16
|
If you only need the active link highlighter component, load the compiled zero-dependency IIFE directly:
|
|
16
17
|
```html
|
|
17
|
-
<script src="
|
|
18
|
+
<script src="components/ln-nav/ln-nav.js" defer></script>
|
|
18
19
|
```
|
|
19
20
|
|
|
20
21
|
### Source Files & Development
|
|
21
|
-
- **Active Development Source**: [
|
|
22
|
-
- **Compiled Standalone**: [
|
|
22
|
+
- **Active Development Source**: [components/ln-nav/src/ln-nav.js](file:///c:/laragon/www/ln-ashlar/components/ln-nav/src/ln-nav.js) — The source of truth for component logic.
|
|
23
|
+
- **Compiled Standalone**: [components/ln-nav/ln-nav.js](file:///c:/laragon/www/ln-ashlar/components/ln-nav/ln-nav.js) — The compiled, ready-to-use standalone bundle.
|
|
23
24
|
|
|
24
25
|
## Attributes
|
|
25
26
|
|
|
@@ -79,18 +80,17 @@ All events bubble from the `<nav>` element.
|
|
|
79
80
|
| Event | Cancelable | Payload (`detail`) | Description |
|
|
80
81
|
|---|---|---|---|
|
|
81
82
|
| `ln-nav:before-update` | Yes | `{ target }` | Fires at the start of every `update()` pass. Call `e.preventDefault()` to skip the highlight recalculation. |
|
|
82
|
-
| `ln-nav:update` | No | `{ target }` | Fires after active classes / `aria-current` have been applied to matching links. |
|
|
83
|
-
| `ln-nav:destroyed` | No | `{ target }` | Fires inside `destroy()`, after listeners/observer are torn down. |
|
|
83
|
+
| `ln-nav:update` | No | `{ target, activeLinks }` | Fires after active classes / `aria-current` have been applied to matching links. |
|
|
84
84
|
|
|
85
85
|
---
|
|
86
86
|
|
|
87
87
|
## 🔧 Internals
|
|
88
88
|
|
|
89
|
-
Source: `
|
|
89
|
+
Source: `components/ln-nav/ln-nav.js`. Registered via `registerComponent` with `extraAttributes: ['data-ln-nav-exact']` and an `onAttributeChange` bridge — the shared core handles instantiation, body-guarding, and teardown.
|
|
90
90
|
|
|
91
|
-
### Singleton `pushState` patch
|
|
91
|
+
### Singleton `pushState` / `replaceState` patch
|
|
92
92
|
|
|
93
|
-
`history.pushState`
|
|
93
|
+
`history.pushState` and `history.replaceState` are monkey-patched once per page, guarded by `history._lnNavPatched`. Every `[data-ln-nav]` instance pushes its `updateHandler` onto `history._lnNavCallbacks`; the patched methods call the original, then invoke every registered handler. This catches URL changes from both `pushState` and `replaceState` client navigation; `popstate` is wired separately for back/forward.
|
|
94
94
|
|
|
95
95
|
### Per-instance MutationObserver
|
|
96
96
|
|
|
@@ -110,4 +110,4 @@ Dispatches cancelable `ln-nav:before-update` (a listener calling `preventDefault
|
|
|
110
110
|
|
|
111
111
|
### Teardown
|
|
112
112
|
|
|
113
|
-
`destroy()` disconnects the local observer, removes the `popstate` listener, splices `updateHandler` out of the global `_pushStateCallbacks` array
|
|
113
|
+
`destroy()` disconnects the local observer, removes the `popstate` listener, and splices `updateHandler` out of the global `_pushStateCallbacks` array.
|