@prokodo/ui 0.1.10 → 0.1.12

package/dist/components/RTE/RTE.module.css

@@ -0,0 +1,473 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-RTE {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-RTE__surface {
+  position: relative;
+  width: calc(100% - 4px);
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--color-primary-40);
+}
+.prokodo-RTE__surface::after {
+  content: none;
+}
+.prokodo-RTE__toolbar {
+  border: none !important;
+  background-color: var(--color-primary-50);
+}
+.prokodo-RTE__toolbar__icon__part__stroke, .prokodo-RTE__toolbar__icon__part__stroke__miter {
+  stroke: var(--color-grey-900) !important;
+  opacity: 0.7;
+}
+.prokodo-RTE__toolbar__icon__part__fill {
+  fill: var(--color-grey-900) !important;
+  opacity: 0.7;
+}
+.prokodo-RTE__toolbar__picker__label {
+  position: relative;
+  padding-right: calc(0.5rem + 18px);
+}
+.prokodo-RTE__toolbar__picker__label::before {
+  content: "Normal";
+  color: var(--color-grey-900);
+  opacity: 0.85;
+  margin-right: 0.25rem;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__toolbar__picker__label::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__toolbar__picker__label::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RTE__toolbar__picker__label[data-value="2"]::before {
+  content: "H2";
+}
+.prokodo-RTE__toolbar__picker__label[data-value="3"]::before {
+  content: "H3";
+}
+.prokodo-RTE__toolbar__picker__options {
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 14px;
+  background: var(--color-white) !important;
+  border-color: var(--color-grey-500) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  min-width: 180px;
+  z-index: 20;
+}
+.prokodo-RTE__toolbar__picker__item {
+  border-radius: 12px;
+  padding: 0.25rem 0.5rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.prokodo-RTE__toolbar__picker__item::before {
+  content: "Normal";
+  color: var(--color-grey-900);
+  opacity: 0.85;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__toolbar__picker__item::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__toolbar__picker__item::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RTE__toolbar__picker__item[data-value="2"]::before {
+  content: "H2";
+}
+.prokodo-RTE__toolbar__picker__item[data-value="3"]::before {
+  content: "H3";
+}
+.prokodo-RTE__toolbar__picker__item:hover {
+  background: var(--color-primary-50) !important;
+}
+.prokodo-RTE__toolbar__picker__item[data-selected=true] {
+  background: var(--color-primary-100) !important;
+}
+.prokodo-RTE__toolbar__picker__item:focus-visible {
+  outline: 2px solid var(--color-primary-100);
+  outline-offset: 2px;
+}
+.prokodo-RTE__resize {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-grey-900);
+  cursor: ns-resize;
+  opacity: 0.55;
+}
+.prokodo-RTE__mount {
+  position: relative;
+  height: 200px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  border: none !important;
+}
+.prokodo-RTE__mount--disabled {
+  cursor: not-allowed;
+  opacity: 0.85;
+}
+.prokodo-RTE__tooltip {
+  max-width: calc(100% - 0.75rem - 0.75rem);
+  box-sizing: border-box;
+  border-radius: 14px;
+  overflow: hidden;
+}
+.prokodo-RTE__editor {
+  height: 100%;
+  padding: 0.75rem;
+  outline: none;
+  overflow-y: auto;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor {
+    font-size: 1rem;
+  }
+}
+.prokodo-RTE__editor p {
+  margin: 0.75rem 0 !important;
+}
+.prokodo-RTE__editor p:last-child {
+  margin-bottom: 0 !important;
+}
+.prokodo-RTE__editor ul,
+.prokodo-RTE__editor ol {
+  margin: 0 0 0.5rem 1.25rem !important;
+  padding: 0 !important;
+}
+.prokodo-RTE__editor pre {
+  margin: 0.5rem 0 !important;
+  padding: 0.5rem;
+  border-radius: 14px;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.06);
+}
+.prokodo-RTE__editor code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0 6px !important;
+  border-radius: 8px;
+}
+.prokodo-RTE__editor img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 14px;
+  display: block;
+  margin: 0.5rem 0;
+}
+.prokodo-RTE__editor h1,
+.prokodo-RTE__editor h2,
+.prokodo-RTE__editor h3,
+.prokodo-RTE__editor h4,
+.prokodo-RTE__editor h5,
+.prokodo-RTE__editor h6 {
+  margin: 1rem 0 0.5rem 0 !important;
+}
+.prokodo-RTE__editor > h1:first-child,
+.prokodo-RTE__editor > h2:first-child,
+.prokodo-RTE__editor > h3:first-child,
+.prokodo-RTE__editor > h4:first-child,
+.prokodo-RTE__editor > h5:first-child,
+.prokodo-RTE__editor > h6:first-child {
+  margin-top: 0 !important;
+}
+.prokodo-RTE__editor h1 {
+  font-weight: 900;
+  font-size: 1.75rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.6;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h1 {
+    font-size: 2.25rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h1 {
+    font-size: 2.75rem;
+  }
+}
+.prokodo-RTE__editor h2 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h2 {
+    font-size: 1.75rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h2 {
+    font-size: 2.25rem;
+  }
+}
+.prokodo-RTE__editor h3 {
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h3 {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h3 {
+    font-size: 1.75rem;
+  }
+}
+.prokodo-RTE__editor h4 {
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h4 {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h4 {
+    font-size: 1.5rem;
+  }
+}
+.prokodo-RTE__editor h5 {
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-RTE__editor h6 {
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-RTE--disabled {
+  opacity: 0.9;
+}
+.prokodo-RTE--readonly {
+  opacity: 0.95;
+}
+.prokodo-RTE__hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}

package/dist/components/RTE/RTE.module.scss.js

@@ -0,0 +1,22 @@
+const styles = {
+  "prokodo-RTE": "prokodo-RTE",
+  "prokodo-RTE__surface": "prokodo-RTE__surface",
+  "prokodo-RTE__toolbar": "prokodo-RTE__toolbar",
+  "prokodo-RTE__toolbar__icon__part__stroke": "prokodo-RTE__toolbar__icon__part__stroke",
+  "prokodo-RTE__toolbar__icon__part__stroke__miter": "prokodo-RTE__toolbar__icon__part__stroke__miter",
+  "prokodo-RTE__toolbar__icon__part__fill": "prokodo-RTE__toolbar__icon__part__fill",
+  "prokodo-RTE__toolbar__picker__label": "prokodo-RTE__toolbar__picker__label",
+  "prokodo-RTE__toolbar__picker__options": "prokodo-RTE__toolbar__picker__options",
+  "prokodo-RTE__toolbar__picker__item": "prokodo-RTE__toolbar__picker__item",
+  "prokodo-RTE__resize": "prokodo-RTE__resize",
+  "prokodo-RTE__mount": "prokodo-RTE__mount",
+  "prokodo-RTE__mount--disabled": "prokodo-RTE__mount--disabled",
+  "prokodo-RTE__tooltip": "prokodo-RTE__tooltip",
+  "prokodo-RTE__editor": "prokodo-RTE__editor",
+  "prokodo-RTE--disabled": "prokodo-RTE--disabled",
+  "prokodo-RTE--readonly": "prokodo-RTE--readonly",
+  "prokodo-RTE__hidden": "prokodo-RTE__hidden"
+};
+export {
+  styles as default
+};

package/dist/components/RTE/RTE.server.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { isString } from "../../helpers/validations.js";
+import { RTEView } from "./RTE.view.js";
+function stripHtml(html) {
+  if (!isString(html)) return "";
+  return html.replace(/[<>]/g, "").replace(/\s+/g, " ").trim();
+}
+__name(stripHtml, "stripHtml");
+function RTEServer(props) {
+  const { value, onChange, ...rest } = props;
+  const v = stripHtml(value);
+  return /* @__PURE__ */ jsx(RTEView, { ...rest, readOnly: true, htmlValue: v, showResize: false, value: v });
+}
+__name(RTEServer, "RTEServer");
+export {
+  RTEServer as default
+};

package/dist/components/RTE/RTE.styles.js

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+let injected = false;
+function ensureQuillSnowStyles(cssText) {
+  if (injected) return;
+  if (typeof document === "undefined") return;
+  const id = "rte-quill-snow";
+  if (document.getElementById(id)) {
+    injected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssText;
+  document.head.appendChild(style);
+  injected = true;
+}
+__name(ensureQuillSnowStyles, "ensureQuillSnowStyles");
+export {
+  ensureQuillSnowStyles
+};

package/dist/components/RTE/RTE.theme.js

@@ -0,0 +1,4 @@
+import cssText from "../../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.snow.css.js";
+export {
+  cssText as default
+};

package/dist/components/RTE/RTE.utils.js

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./RTE.module.scss.js";
+const bem = create(styles, "RTE");
+function addClasses(el, className) {
+  if (!el) return;
+  className.split(/\s+/).map((s) => s.trim()).filter(Boolean).forEach((c) => el.classList.add(c));
+}
+__name(addClasses, "addClasses");
+function decorateToolbar(toolbarEl) {
+  toolbarEl.querySelectorAll("button").forEach((btn) => {
+    addClasses(btn, bem("toolbar__button"));
+    const ql = Array.from(btn.classList).find((c) => c.startsWith("ql-"));
+    if (isString(ql))
+      addClasses(btn, bem("toolbar__button", { [ql.slice(3)]: true }));
+  });
+  toolbarEl.querySelectorAll("button svg").forEach((svg) => {
+    addClasses(svg, bem("toolbar__icon"));
+  });
+  toolbarEl.querySelectorAll("button svg *").forEach((node) => {
+    const el = node;
+    addClasses(el, bem("toolbar__icon__part"));
+    if (el.classList.contains("ql-fill"))
+      addClasses(el, bem("toolbar__icon__part__fill"));
+    if (el.classList.contains("ql-stroke") || el.classList.contains("ql-stroke-miter")) {
+      addClasses(el, bem("toolbar__icon__part__stroke"));
+    }
+    if (el.classList.contains("ql-stroke-miter")) {
+      addClasses(el, bem("toolbar__icon__part__stroke__miter"));
+    }
+  });
+  toolbarEl.querySelectorAll(".ql-picker").forEach((picker) => {
+    addClasses(picker, bem("toolbar__picker"));
+    const label = picker.querySelector(".ql-picker-label");
+    const options = picker.querySelector(
+      ".ql-picker-options"
+    );
+    addClasses(label, bem("toolbar__picker__label"));
+    addClasses(options, bem("toolbar__picker__options"));
+    picker.querySelectorAll(".ql-picker-item").forEach((item) => {
+      addClasses(item, bem("toolbar__picker__item"));
+    });
+  });
+}
+__name(decorateToolbar, "decorateToolbar");
+function syncPickerSelected(toolbarEl) {
+  toolbarEl.querySelectorAll(".ql-picker-item").forEach((el) => {
+    const item = el;
+    const selected = item.classList.contains("ql-selected");
+    if (selected) item.setAttribute("data-selected", "true");
+    else item.removeAttribute("data-selected");
+  });
+}
+__name(syncPickerSelected, "syncPickerSelected");
+function cleanupQuill(surfaceEl, mountEl) {
+  if (!surfaceEl || !mountEl) return;
+  surfaceEl.querySelectorAll(":scope > .ql-toolbar").forEach((el) => el.remove());
+  surfaceEl.querySelectorAll(".ql-tooltip").forEach((el) => el.remove());
+  surfaceEl.querySelectorAll(".ql-container").forEach((el) => {
+    if (el !== mountEl) el.remove();
+  });
+  mountEl.innerHTML = "";
+}
+__name(cleanupQuill, "cleanupQuill");
+export {
+  addClasses,
+  bem,
+  cleanupQuill,
+  decorateToolbar,
+  syncPickerSelected
+};