@public-ui/components 1.5.0-rc.13 → 1.5.0-rc.14

package/dist/kolibri/kol-popover.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["validateAlignment","component","value","watchString","defaultStyleCss","KolPopover","this","alignPopover","callBack","processEnv","triggerElement","popoverElement","trigger","popoverEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_alignment","then","x","y","middlewareData","setPosition","showPopover","addListenersToBody","Object","assign","_show","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","previousElementSibling","catchPopoverElement","catchArrowElement","_open","oldPos","left","style","top","inset","translate","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateOpen","componentWillLoad"],"sources":["./src/types/props/alignment.ts","./src/components/popover/style.css?tag=kol-popover&mode=default&encapsulation=shadow","./src/components/popover/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\n\n/** en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\ntype HorizontalAlignment = 'left' | 'right';\ntype VerticalAlignment = 'top' | 'bottom';\nexport type Alignment = HorizontalAlignment | VerticalAlignment;\nexport type PropAlignment = {\n\talignment: Alignment;\n};\n\n/* validator */\nexport const validateAlignment = (component: Generic.Element.Component, value?: Alignment): void => {\n\twatchString(component, '_alignment', value);\n};\n","@import '../style.css';\n\n:host {\n\theight: 0;\n\tposition: absolute;\n}\n\n.popover {\n\tbackground-color: white;\n\tbox-sizing: border-box;\n\topacity: 0;\n\tposition: absolute;\n}\n.hidden {\n\tdisplay: none;\n}\n.show {\n\tanimation: fadeInOpacity 300ms ease-in forwards;\n}\n.disappear {\n\tanimation: fadeInOpacity 300ms ease-in backwards;\n}\n\n.arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Alignment, PropAlignment, PropOpen, PropShow, validateAlignment, validateOpen } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropAlignment & PropOpen;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropAlignment & PropOpen & PropShow;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\ntype API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-popover',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\t/* Popover functions */\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\tconst trigger = this.triggerElement;\n\t\t\tconst popoverEl = this.popoverElement;\n\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\tif (arrowEl) {\n\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t}\n\n\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\tplacement: this.state._alignment,\n\t\t\t\tmiddleware: middleware,\n\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t});\n\t\t}\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _show: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\t\tthis._open = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._open, show: this.state._show }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._alignment}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t */\n\t@Prop() public _alignment?: Alignment = 'top';\n\n\t/**\n\t * Öffnet/schließt das Popover.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_alignment: 'top',\n\t\t_open: false,\n\t\t_show: false,\n\t};\n\n\t@Watch('_alignment')\n\tpublic validateAlignment(value?: Alignment): void {\n\t\tvalidateAlignment(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlignment(this._alignment);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/open-7d64cfaf.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-import{b as o}from"./prop.validators-e402ad49.js";const a=(a,p)=>{o(a,"_open",p)};export{a as v};

package/dist/kolibri/open-7d64cfaf.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["validateOpen","component","value","watchBoolean"],"sources":["./src/types/props/open.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Klappt das Element auf sofern gesetzt (oder true) und klappt es zu sofern nicht gesetzt (oder false).\n */\n/** en\n * If set (to true) opens/expands the element, closes if not set (or set to false).\n */\nexport type PropOpen = {\n\topen: boolean;\n};\n\n/* validator */\nexport const validateOpen = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_open', value);\n};\n"],"mappings":";;;wDAeaA,EAAe,CAACC,EAAsCC,KAClEC,EAAaF,EAAW,QAASC,EAAM,S"}

package/dist/types/components/popover/shadow.d.ts

@@ -1,35 +0,0 @@
-import { JSX } from '../../stencil-public-runtime';
-import { Generic } from '@a11y-ui/core';
-import { Alignment, PropAlignment, PropOpen, PropShow } from '../../types/props';
-type RequiredProps = unknown;
-type OptionalProps = PropAlignment & PropOpen;
-export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
-type RequiredStates = PropAlignment & PropOpen & PropShow;
-type OptionalStates = unknown;
-export type States = Generic.Element.Members<RequiredStates, OptionalStates>;
-type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
-export declare class KolPopover implements API {
-  private arrowElement?;
-  private popoverElement?;
-  private triggerElement?;
-  private host?;
-  private alignPopover;
-  private setPosition;
-  private showPopover;
-  private hidePopover;
-  private hidePopoverByEscape;
-  private hidePopoverByClickOutside;
-  private addListenersToBody;
-  private removeListenersToBody;
-  private catchHostAndTriggerElement;
-  private catchPopoverElement;
-  private catchArrowElement;
-  render(): JSX.Element;
-  _alignment?: Alignment;
-  _open?: boolean;
-  state: States;
-  validateAlignment(value?: Alignment): void;
-  validateOpen(value?: boolean): void;
-  componentWillLoad(): void;
-}
-export {};

package/dist/types/components/popover/test/html.mock.d.ts

@@ -1,4 +0,0 @@
-import { Props } from '../shadow';
-export declare const getPopoverHtml: (props: Props, slots?: {
-  default?: string;
-}, additionalAttrs?: string) => string;

package/doc/popover.md

@@ -1,19 +0,0 @@
-# Popover
-
-Die **Popover**-Komponente stellt eine Möglichkeit dar zusätzliche Inhalte in ein temporäres Element zu setzen, das, ähnlich wie <kol-link _href="" _label="Tooltip"></kol-link>, um sein Triggerelement angeordnet ist.
-Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property     | Attribute    | Description                                                        | Type                                                  | Default |
-| ------------ | ------------ | ------------------------------------------------------------------ | ----------------------------------------------------- | ------- |
-| `_alignment` | `_alignment` | Setzt die Ausrichtung des Popovers in Relation zum Triggerelement. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
-| `_open`      | `_open`      | Öffnet/schließt das Popover.                                       | `boolean \| undefined`                                | `false` |
-
-
-----------------------------------------------
-
-