@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
|
@@ -1381,7 +1381,7 @@ Toast.style = {
|
|
|
1381
1381
|
md: IonToastMdStyle0
|
|
1382
1382
|
};
|
|
1383
1383
|
|
|
1384
|
-
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(--
|
|
1384
|
+
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)}";
|
|
1385
1385
|
const PosAddNewThingStyle0 = posAddNewThingCss;
|
|
1386
1386
|
|
|
1387
1387
|
const PosAddNewThing = class {
|
|
@@ -3246,7 +3246,7 @@ const PosLoginForm = class {
|
|
|
3246
3246
|
};
|
|
3247
3247
|
PosLoginForm.style = PosLoginFormStyle0;
|
|
3248
3248
|
|
|
3249
|
-
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(--
|
|
3249
|
+
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";
|
|
3250
3250
|
const PosMakeFindableStyle0 = posMakeFindableCss;
|
|
3251
3251
|
|
|
3252
3252
|
const PosMakeFindable = class {
|
|
@@ -3353,7 +3353,7 @@ const IconMakeFindable = () => (index.h("svg", { role: "presentation", xmlns: "h
|
|
|
3353
3353
|
const IconSuccess = () => (index.h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, index.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" })));
|
|
3354
3354
|
PosMakeFindable.style = PosMakeFindableStyle0;
|
|
3355
3355
|
|
|
3356
|
-
const posNavigationCss = "
|
|
3356
|
+
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";
|
|
3357
3357
|
const PosNavigationStyle0 = posNavigationCss;
|
|
3358
3358
|
|
|
3359
3359
|
const PosNavigation = class {
|
|
@@ -3412,13 +3412,14 @@ const PosNavigation = class {
|
|
|
3412
3412
|
this.searchIndex.rebuild();
|
|
3413
3413
|
}
|
|
3414
3414
|
openNavigationDialog(e) {
|
|
3415
|
-
var _a;
|
|
3415
|
+
var _a, _b;
|
|
3416
3416
|
this.resource = e.detail;
|
|
3417
3417
|
if (e.detail) {
|
|
3418
3418
|
this.inputValue = e.detail.uri;
|
|
3419
3419
|
this.search();
|
|
3420
3420
|
}
|
|
3421
|
-
(_a = this.
|
|
3421
|
+
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
|
|
3422
|
+
(_b = this.dialogRef) === null || _b === void 0 ? void 0 : _b.show();
|
|
3422
3423
|
}
|
|
3423
3424
|
clearSearchIndex() {
|
|
3424
3425
|
var _a;
|
|
@@ -3469,7 +3470,7 @@ const PosNavigation = class {
|
|
|
3469
3470
|
}
|
|
3470
3471
|
}
|
|
3471
3472
|
render() {
|
|
3472
|
-
return (index.h("nav", { key: '
|
|
3473
|
+
return (index.h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, index.h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, index.h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), index.h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, index.h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, index.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 ? (index.h("div", { class: "suggestions" }, index.h("ol", null, this.suggestions.map((it, index$1) => (index.h("li", { class: index$1 === this.selectedIndex ? 'selected' : '' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null)))));
|
|
3473
3474
|
}
|
|
3474
3475
|
static get watchers() { return {
|
|
3475
3476
|
"uri": ["updateResource"],
|
|
@@ -3478,7 +3479,7 @@ const PosNavigation = class {
|
|
|
3478
3479
|
};
|
|
3479
3480
|
PosNavigation.style = PosNavigationStyle0;
|
|
3480
3481
|
|
|
3481
|
-
const posNavigationBarCss = "section.current {\n display: flex;\n height: var(--
|
|
3482
|
+
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";
|
|
3482
3483
|
const PosNavigationBarStyle0 = posNavigationBarCss;
|
|
3483
3484
|
|
|
3484
3485
|
const PosNavigationBar = class {
|
|
@@ -3647,7 +3648,7 @@ const PosResource = class {
|
|
|
3647
3648
|
};
|
|
3648
3649
|
PosResource.style = PosResourceStyle0;
|
|
3649
3650
|
|
|
3650
|
-
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";
|
|
3651
|
+
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";
|
|
3651
3652
|
const PosRichLinkStyle0 = posRichLinkCss;
|
|
3652
3653
|
|
|
3653
3654
|
const PosRichLink = class {
|