@pod-os/elements 0.26.1-rc.37aef21.0 → 0.26.1-rc.52f6cf9.0
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/dist/cjs/ion-icon_31.cjs.entry.js +9 -8
- package/dist/cjs/ion-icon_31.cjs.entry.js.map +1 -1
- package/dist/collection/components/pos-add-new-thing/pos-add-new-thing.css +2 -2
- package/dist/collection/components/pos-make-findable/pos-make-findable.css +3 -3
- package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.css +2 -1
- package/dist/collection/components/pos-navigation/pos-navigation.css +10 -5
- package/dist/collection/components/pos-navigation/pos-navigation.js +4 -3
- package/dist/collection/components/pos-navigation/pos-navigation.js.map +1 -1
- package/dist/collection/components/pos-rich-link/pos-rich-link.css +1 -1
- package/dist/components/pos-add-new-thing2.js +1 -1
- package/dist/components/pos-add-new-thing2.js.map +1 -1
- package/dist/components/pos-make-findable2.js +1 -1
- package/dist/components/pos-make-findable2.js.map +1 -1
- package/dist/components/pos-navigation-bar2.js +1 -1
- package/dist/components/pos-navigation-bar2.js.map +1 -1
- package/dist/components/pos-navigation2.js +5 -4
- package/dist/components/pos-navigation2.js.map +1 -1
- package/dist/components/pos-rich-link2.js +1 -1
- package/dist/components/pos-rich-link2.js.map +1 -1
- package/dist/elements/elements.esm.js +1 -1
- package/dist/elements/{p-6b134df2.entry.js → p-111699ee.entry.js} +2 -2
- package/dist/elements/p-111699ee.entry.js.map +1 -0
- package/dist/esm/ion-icon_31.entry.js +9 -8
- package/dist/esm/ion-icon_31.entry.js.map +1 -1
- package/dist/types/components/pos-navigation/pos-navigation.d.ts +1 -0
- package/package.json +1 -1
- package/dist/elements/p-6b134df2.entry.js.map +0 -1
|
@@ -1377,7 +1377,7 @@ Toast.style = {
|
|
|
1377
1377
|
md: IonToastMdStyle0
|
|
1378
1378
|
};
|
|
1379
1379
|
|
|
1380
|
-
const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--
|
|
1380
|
+
const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--size-10);height:var(--size-10);background-color:var(--pos-primary-color);color:var(--pos-primary-text-color);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
|
|
1381
1381
|
const PosAddNewThingStyle0 = posAddNewThingCss;
|
|
1382
1382
|
|
|
1383
1383
|
const PosAddNewThing = class {
|
|
@@ -3242,7 +3242,7 @@ const PosLoginForm = class {
|
|
|
3242
3242
|
};
|
|
3243
3243
|
PosLoginForm.style = PosLoginFormStyle0;
|
|
3244
3244
|
|
|
3245
|
-
const posMakeFindableCss = "button.main {\n display: flex;\n transition:\n width 200ms,\n background-color 500ms,\n color 500ms,\n border-color 500ms;\n max-width: var(--size-40);\n flex-direction: row;\n overflow: hidden;\n height: var(--
|
|
3245
|
+
const posMakeFindableCss = "button.main {\n display: flex;\n transition:\n width 200ms,\n background-color 500ms,\n color 500ms,\n border-color 500ms;\n max-width: var(--size-40);\n flex-direction: row;\n overflow: hidden;\n height: var(--pos-navigation-bar-height);\n width: var(--pos-navigation-bar-height);\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-md);\n color: var(--pos-subtle-text-color);\n border: var(--size-px) dashed var(--pos-subtle-text-color);\n background-color: var(--pos-background-color);\n\n p {\n padding: 0;\n margin: 0;\n display: none;\n white-space: nowrap;\n }\n\n &.success {\n color: var(--color-green-700);\n border-color: var(--color-green-700);\n border-style: solid;\n background-color: var(--color-green-100);\n }\n\n &:active {\n transform: scale(0.99);\n filter: brightness(90%);\n }\n &:focus {\n outline: var(--pos-input-focus-outline);\n }\n}\n\n.options {\n position: absolute;\n animation: fadeIn 300ms;\n padding: 0;\n margin-top: var(--size-1);\n z-index: var(--layer-top);\n\n ol {\n display: flex;\n flex-direction: column;\n box-shadow: var(--shadow-md);\n backdrop-filter: var(--blur-md);\n border-radius: var(--radius-xs);\n overflow: hidden;\n color: var(--color-grey-900);\n background-color: var(--color-grey-200);\n padding: 0;\n margin: 0;\n list-style: none;\n label {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: all 300ms var(--ease-in-out-sine);\n margin: 0;\n border: none;\n outline: none;\n padding: var(--size-2);\n width: var(--size-full);\n\n &:hover,\n &:focus {\n filter: brightness(80%);\n }\n\n &:active {\n filter: brightness(90%);\n }\n }\n }\n label:has(input:checked) {\n background-color: var(--color-green-100);\n }\n}\n\nsvg {\n display: inline-block;\n height: var(--size-6);\n flex-shrink: 0;\n flex-grow: 0;\n width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n &.success {\n background: var(--color-green-200);\n }\n width: var(--size-full);\n height: var(--pos-navigation-bar-height);\n background: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n\n p {\n display: inline-block;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n";
|
|
3246
3246
|
const PosMakeFindableStyle0 = posMakeFindableCss;
|
|
3247
3247
|
|
|
3248
3248
|
const PosMakeFindable = class {
|
|
@@ -3349,7 +3349,7 @@ const IconMakeFindable = () => (h("svg", { role: "presentation", xmlns: "http://
|
|
|
3349
3349
|
const IconSuccess = () => (h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" })));
|
|
3350
3350
|
PosMakeFindable.style = PosMakeFindableStyle0;
|
|
3351
3351
|
|
|
3352
|
-
const posNavigationCss = "
|
|
3352
|
+
const posNavigationCss = ":host {\n --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n position: relative;\n}\n\n.suggestions ol {\n border: 1px solid var(--pos-border-color);\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\n.suggestions {\n width: 100%;\n overflow-y: auto;\n max-height: 90dvh;\n li {\n padding: 1rem;\n background-color: var(--pos-background-color);\n pos-rich-link {\n --background-color: inherit;\n }\n &.selected {\n background-color: var(--pos-primary-color);\n &:hover {\n background-color: var(--pos-primary-color);\n }\n }\n &:hover {\n background-color: var(--pos-border-color);\n }\n }\n}\n\n.suggestions li.selected pos-rich-link {\n --label-color: white;\n --description-color: var(--pos-border-color);\n --uri-color: var(--pos-subtle-text-color);\n}\n\ndialog {\n position: absolute;\n margin-top: calc(-1 * var(--pos-navigation-bar-height));\n padding: 0;\n width: 100%;\n max-width: 100%;\n min-width: 100%;\n overflow: hidden;\n max-height: 100dvh;\n background-color: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n border: var(--pos-border-color);\n border-radius: var(--radius-md);\n box-shadow: var(--shadow-md);\n form {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n align-items: center;\n input {\n display: flex;\n font-size: var(--scale-1);\n height: var(--pos-navigation-bar-height);\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n padding-left: var(--size-2);\n width: 100%;\n border: none;\n outline: none;\n color: var(--pos-normal-text-color);\n background-color: var(--pos-input-background-color);\n box-sizing: border-box;\n }\n }\n}\n\ndialog[open] {\n display: flex;\n z-index: var(--layer-top);\n animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n search {\n position: unset;\n }\n dialog {\n margin-top: var(--size-1);\n top: 0;\n width: 95dvw;\n max-width: unset;\n min-width: unset;\n form {\n input {\n height: var(--size-12);\n font-size: var(--scale-fluid-3);\n }\n }\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n";
|
|
3353
3353
|
const PosNavigationStyle0 = posNavigationCss;
|
|
3354
3354
|
|
|
3355
3355
|
const PosNavigation = class {
|
|
@@ -3408,13 +3408,14 @@ const PosNavigation = class {
|
|
|
3408
3408
|
this.searchIndex.rebuild();
|
|
3409
3409
|
}
|
|
3410
3410
|
openNavigationDialog(e) {
|
|
3411
|
-
var _a;
|
|
3411
|
+
var _a, _b;
|
|
3412
3412
|
this.resource = e.detail;
|
|
3413
3413
|
if (e.detail) {
|
|
3414
3414
|
this.inputValue = e.detail.uri;
|
|
3415
3415
|
this.search();
|
|
3416
3416
|
}
|
|
3417
|
-
(_a = this.
|
|
3417
|
+
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
|
|
3418
|
+
(_b = this.dialogRef) === null || _b === void 0 ? void 0 : _b.show();
|
|
3418
3419
|
}
|
|
3419
3420
|
clearSearchIndex() {
|
|
3420
3421
|
var _a;
|
|
@@ -3465,7 +3466,7 @@ const PosNavigation = class {
|
|
|
3465
3466
|
}
|
|
3466
3467
|
}
|
|
3467
3468
|
render() {
|
|
3468
|
-
return (h("nav", { key: '
|
|
3469
|
+
return (h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'f11ff492c9333e5f6110630b9b6b3f3b5c127660', ref: el => (this.inputRef = el), enterkeyhint: "search", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e) }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", null, this.suggestions.map((it, index) => (h("li", { class: index === this.selectedIndex ? 'selected' : '' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
|
|
3469
3470
|
}
|
|
3470
3471
|
static get watchers() { return {
|
|
3471
3472
|
"uri": ["updateResource"],
|
|
@@ -3474,7 +3475,7 @@ const PosNavigation = class {
|
|
|
3474
3475
|
};
|
|
3475
3476
|
PosNavigation.style = PosNavigationStyle0;
|
|
3476
3477
|
|
|
3477
|
-
const posNavigationBarCss = "section.current {\n display: flex;\n height: var(--
|
|
3478
|
+
const posNavigationBarCss = "section.current {\n display: flex;\n height: var(--pos-navigation-bar-height);\n flex-grow: 1;\n gap: 0;\n background-color: var(--pos-input-background-color);\n border-radius: var(--radius-md);\n width: 100%;\n &:focus-within {\n outline: var(--pos-input-focus-outline);\n }\n}\n\nsection.current button {\n cursor: pointer;\n font-size: var(--scale-1);\n flex-grow: 1;\n background: none;\n color: var(--pos-normal-text-color);\n outline: none;\n border: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &:focus {\n text-decoration: underline;\n }\n}\n";
|
|
3478
3479
|
const PosNavigationBarStyle0 = posNavigationBarCss;
|
|
3479
3480
|
|
|
3480
3481
|
const PosNavigationBar = class {
|
|
@@ -3643,7 +3644,7 @@ const PosResource = class {
|
|
|
3643
3644
|
};
|
|
3644
3645
|
PosResource.style = PosResourceStyle0;
|
|
3645
3646
|
|
|
3646
|
-
const posRichLinkCss = ":host {\n --background-color: inherit;\n --label-color: var(--pos-normal-text-color);\n --description-color: var(--pos-normal-text-color);\n --uri-color: var(--pos-subtle-text-color);\n --font-family: var(--font-sans);\n}\n\np.content {\n background-color: var(--background-color);\n line-height: var(--line-xs);\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: baseline;\n gap: var(--size-1);\n\n .url {\n font-size: var(--scale-fluid-1);\n color: var(--pos-subtle-text-color);\n }\n}\n\na {\n color: var(--label-color);\n max-width: var(--prose-lg);\n text-decoration: underline;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n color: var(--label-color);\n font-size: var(--scale-fluid-2);\n margin-bottom: var(--size-1);\n}\n\npos-description {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n font-weight: var(--weight-light);\n color: var(--description-color);\n font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n pos-label {\n font-size: var(--scale-fluid-0);\n }\n pos-description {\n font-size: var(--scale-fluid-1);\n }\n\n p.content {\n .url {\n font-size: var(--scale-fluid-000);\n }\n }\n}\n";
|
|
3647
|
+
const posRichLinkCss = ":host {\n --background-color: inherit;\n --label-color: var(--pos-normal-text-color);\n --description-color: var(--pos-normal-text-color);\n --uri-color: var(--pos-subtle-text-color);\n --font-family: var(--font-sans);\n}\n\np.content {\n background-color: var(--background-color);\n line-height: var(--line-xs);\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: baseline;\n gap: var(--size-1);\n\n .url {\n font-size: var(--scale-fluid-1);\n color: var(--pos-subtle-text-color);\n }\n}\n\na {\n color: var(--label-color);\n max-width: min(100%, var(--prose-lg));\n text-decoration: underline;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n color: var(--label-color);\n font-size: var(--scale-fluid-2);\n margin-bottom: var(--size-1);\n}\n\npos-description {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n font-weight: var(--weight-light);\n color: var(--description-color);\n font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n pos-label {\n font-size: var(--scale-fluid-0);\n }\n pos-description {\n font-size: var(--scale-fluid-1);\n }\n\n p.content {\n .url {\n font-size: var(--scale-fluid-000);\n }\n }\n}\n";
|
|
3647
3648
|
const PosRichLinkStyle0 = posRichLinkCss;
|
|
3648
3649
|
|
|
3649
3650
|
const PosRichLink = class {
|